devlishgenius

Cool git pic (tho I use hg)

2010-11-29T19:04:00.000-08:00

http://panela.blog-city.com/git_supervisual_cheatsheet.htm http://files.blog-city.com/files/F05/96843/p/f/gitcheat.png

A dead yacc

2010-11-28T21:05:00.000-08:00

http://arxiv.org/abs/1010.5023 We present two novel approaches to parsing context-free languages. The first approach is based on an extension of Brzozowski's derivative from regular expressions to context-free grammars. The second approach is based on a generalization of the derivative to parser combinators. The payoff of these techniques is a small (less than 250 lines of code), easy-to-implement parsing library capable of parsing arbitrary context-free grammars into lazy parse forests. Implementations for both Scala and Haskell are provided. Preliminary experiments with S-Expressions parsed millions of tokens per second, which suggests this technique is efficient enough for use in practice.

Hahaha!

2009-12-24T09:18:00.001-08:00

http://www.joeydevilla.com/2009/12/16/how-fanboys-see-operating-systems/ http://www.rubyinside.com/holiday-fun-how-programming-language-fanboys-see-each-others-languages-2911.html

w00t! The BDFL is Python history blogging!

2009-01-13T22:46:00.000-08:00

Python's Design Philosophy:

First of all, Python was originally conceived as a one-person “skunkworks” project – there was no official budget, and I wanted results quickly, in part so that I could convince management to support the project (in which I was fairly successful). This led to a number of timesaving rules:
Borrow ideas from elsewhere whenever it makes sense.
“Things should be as simple as possible, but no simpler.” (Einstein)
Do one thing well (The "UNIX philosophy").
Don’t fret too much about performance--plan to optimize later when needed.
Don’t fight the environment and go with the flow.
Don’t try for perfection because “good enough” is often just that.
(Hence) it’s okay to cut corners sometimes, especially if you can do it right later.

If Languages were ...

2009-01-03T13:18:00.000-08:00

Via Lambda the Ultimate. My favorite is "If Languages were Religions":

C would be Judaism - it's old and restrictive, but most of the world is familiar with its laws and respects them. The catch is, you can't convert into it - you're either into it from the start, or you will think that it's insanity. Also, when things go wrong, many people are willing to blame the problems of the world on it.

. . .

C# would be Mormonism - At first glance, it's the same as Java, but at a closer look you realize that it's controlled by a single corporation (which many Java followers believe to be evil), and that many theological concepts are quite different. You suspect that it'd probably be nice, if only all the followers of Java wouldn't discriminate so much against you for following it.

. . .

Lisp would be Zen Buddhism - There is no syntax, there is no centralization of dogma, there are no deities to worship. The entire universe is there at your reach - if only you are enlightened enough to grasp it. Some say that it's not a language at all; others say that it's the only language that makes sense.

Haskell would be Taoism - It is so different from other languages that many people don't understand how can anyone use it to produce anything useful. Its followers believe that it's the true path to wisdom, but that wisdom is beyond the grasp of most mortals.

. . .

Perl would be Voodoo - An incomprehensible series of arcane incantations that involve the blood of goats and permanently corrupt your soul. Often used when your boss requires you to do an urgent task at 21:00 on friday night.

. . .

Ruby would be Neo-Paganism - A mixture of different languages and ideas that was beaten together into something that might be identified as a language. Its adherents are growing fast, and although most people look at them suspiciously, they are mostly well-meaning people with no intention of harming anyone.

Python would be Humanism: It's simple, unrestrictive, and all you need to follow it is common sense. Many of the followers claim to feel relieved from all the burden imposed by other languages, and that they have rediscovered the joy of programming. There are some who say that it is a form of pseudo-code.

The 56, 5 Book Meme

2008-11-19T20:57:00.000-08:00

These operators allow the specification, selection, and modification of fonts (descriptions of typefaces) and provide the means to render characters from those fonts onto the page.

PostScript™ Language Reference Manual, Adobe Systems Incorporated

Pass it on:

1. Grab the nearest book.

2. Open it to page 56.

3. Find the fifth sentence.

4. Post the text of the sentence in your journal along with these # instructions.

5. Don't dig for your favorite book, the cool book, or the intellectual one: pick the CLOSEST.

Announcing better-makefiles

2008-10-25T13:37:00.000-07:00

Today I created a new open source project, better-makefiles. It's a makefile schema that's significantly better than what most projects use.

I had two ideas, and I rubbed them together to make this. The first idea is Recursive Make Considered Harmful, Peter Miller's 1997 paper that argues that you shouldn't run make in each directory of the project. Instead, you should run it at the project root and let it see dependencies through the whole project. That lets make get the dependency analysis right, and it runs faster too. But do use include files to keep make's info near the files.

The second idea is that I'd really like to get rid of as much noise as possible in the per-directory files. I got it down to this.

Sample Dir.make:

   dirs := sub1 sub2             # there are two subdirectories.
   programs := foo               # build one program, foo.
   libs := libfoo                # build one library, libfoo.

   foo_cfiles := foo.c           # build foo from foo.c...
   foo_libs := libbar            # ... and from libbar.  (make will find it.)

   libfoo_cfiles := lf.c other.c # build libfoo from two source files.

That's it. Exactly zero boilerplate, just an explicit description of everything make should build.

Four stars. kbob says check it out.

First Post!

2008-10-09T23:04:00.001-07:00

checkman invited me to join this 'blog this morning. Thanks, Casey. It's great to be here. I've been writing a Scheme interpreter in my spare time recently. It's just one of those things a guy's got to do sometimes. I've written a little about it in my own 'blog. Here are some links.

Scheming, part 2, October 9
Scheming, part 1, September 25
Not another Scheme interpreter!, September 11

I'll keep working on it and writing about it occasionally. I'll have to figure out what to post here and what to post there.

Google Chrome and Disk Activity

2008-10-07T12:30:00.001-07:00

So far, I've been really impressed with Google Chrome, the new Web browser from Google. As others have pointed out, it doesn't deliver all the features and extensibility of Firefox. But, given that it is still in beta, it is relatively mature and stable. That should not be too much of a surprise because it is built using pre-existing components, such as Apple WebKit, which have been around long enough to have achieved stability.

At my work, all new Web projects are now being tested against Chrome in addition to the other popular browsers we are required to support (MSIE, Firefox, Safari, and sometimes Opera). That's because we recognize that, before too long, Chrome will likely have significant market share, and we will be required to support it too.

But, one thing that really concerned me about Chrome was that, every so often, my hard drive would go crazy with activity, and my computer would become nearly unusable. I went searching for an answer, and naturally this problem has been reported and solved by others. According to this source and this source, (and probably other more authoritative ones) the secret is to disable the "phishing and malware protection" option (see Customize > Options > Under the Hood > Security). Having done that, the problem instantly went away for me. I cannot recommend this solution for others however, for obvious reasons.

This problem should underscore the fact that one should not use a Web browser for general Web surfing if it is not yet mature (e.g. Chrome) or it is has a long history of security problems (e.g. MSIE). I do use MSIE to visit some Web sites if they use a media plugin that is not supported in other browsers (e.g. Netflix Watch Instantly), but I never use it for general surfing.

It will be exciting to see Chrome mature, because it will surely influence future Web browser development, and, over time as new ideas introduced in Chrome are implemented across the industry, it will likely change the way we experience the Web.

Logging in real time in Python

2008-10-05T11:39:00.000-07:00

I needed the ability to log the output of commands executed by my script as subprocesses. Two requirements made this more difficult than simply using os.system:

The subprocess's output needs to be captured and logged (not just dumped to the terminal)
The subprocess's output needs to be captured and logged in real time

Searching the web did not come up with any good solutions. Python's existing subprocess module is very useful and almost works here: According to the docs you can send a subprocess's STDOUT and STDERR to a file-like object. But unfortunately, internally it seems to grab the file-like object's file descriptor, copy it, and write to it using os.write. This makes it impossible (for me at least! grin!) to intercept the subprocess's output while it is running.

So, here is what I came up with:

Code:

#!/usr/bin/env python import sys, os import logging, subprocess print logFormat = "%(levelname)-8s : %(asctime)s : %(name)-10s : %(message)s" logFormatter = logging.Formatter( logFormat ) consolehandler = logging.StreamHandler() consolehandler.setLevel( logging.DEBUG ) consolehandler.setFormatter( logFormatter ) logFile = "runcmd.log" try: os.unlink( logFile ) except: pass filehandler = logging.FileHandler( logFile ) filehandler.setLevel( logging.DEBUG ) filehandler.setFormatter( logFormatter ) logging.getLogger( '' ).addHandler( consolehandler ) logging.getLogger( '' ).addHandler( filehandler ) mainlog = logging.getLogger( "main" ) mainlog.setLevel( logging.DEBUG ) def mkLocalLog( f ): # Could set _localLog as an attribute on the function: # f._localLog = ..., but user would have to access it # as an attribute: <func>._localLog( "<msg>" ). # Instead we add it to the function's globals dict. # If someone knows how to add it to the function's locals # that would be great! ll = logging.getLogger( f.__name__ ) ll.setLevel( logging.DEBUG ) f.__globals__[ "_localLog" ] = ll return f @mkLocalLog def foo(): _localLog.info( "test" ) foo() @mkLocalLog def runCmd( cmd, log ): try: os.unlink( "out_fifo" ) except: pass os.mkfifo( "out_fifo" ) try: fifo = os.fdopen( os.open( "out_fifo", os.O_RDONLY | os.O_NONBLOCK ) ) newcmd = "( %s ) 1>out_fifo 2>&1"%( cmd, ) process = subprocess.Popen( newcmd, shell = True, stdout = subprocess.PIPE, stderr = subprocess.STDOUT ) _localLog.debug( "Running: %s"%( cmd, ) ) while process.returncode == None: # None means process is still running # need to poll the process once so the returncode # gets set (see docs) process.poll() try: line = fifo.readline().strip() except: continue if line: log.info( line ) remaining = fifo.read() if remaining: for line in [ line for line in remaining.split( "\n" ) if line.strip() ]: log.info( line.strip() ) if process.returncode: _localLog.critical( "Return Value: %s"%( process.returncode, ) ) else: _localLog.debug( "Return Value: %s"%( process.returncode, ) ) finally: os.unlink( "out_fifo" ) mainlog.debug( os.getcwd() ) print runCmd( "echo 'bye'", mainlog ) print runCmd( "/usr/bin/false", mainlog ) print runCmd( "ls -l; sleep 5; echo 'hi!'; sleep 5; ls -l", mainlog ) print runCmd( "this_should_not_exists", mainlog )

Output:

Macintosh:python scripts user$ ./runcmd.py INFO : 2008-10-05 11:29:00,651 : foo : test DEBUG : 2008-10-05 11:29:00,652 : main : /Users/user/Documents/Q/python scripts DEBUG : 2008-10-05 11:29:00,657 : runCmd : Running: echo 'bye' INFO : 2008-10-05 11:29:00,660 : main : bye DEBUG : 2008-10-05 11:29:00,662 : runCmd : Return Value: 0 DEBUG : 2008-10-05 11:29:00,666 : runCmd : Running: /usr/bin/false CRITICAL : 2008-10-05 11:29:00,670 : runCmd : Return Value: 1 DEBUG : 2008-10-05 11:29:00,674 : runCmd : Running: ls -l; sleep 5; echo 'hi!'; sleep 5; ls -l INFO : 2008-10-05 11:29:00,680 : main : total 24 INFO : 2008-10-05 11:29:00,682 : main : drwxr-xr-x 5 user user 170 Sep 25 20:32 helloworld INFO : 2008-10-05 11:29:00,682 : main : prw-r--r-- 1 user user 0 Oct 5 11:29 out_fifo INFO : 2008-10-05 11:29:00,682 : main : -rw-r--r-- 1 user user 586 Oct 5 11:29 runcmd.log INFO : 2008-10-05 11:29:00,682 : main : -rwxrwxrwx@ 1 user user 2856 Oct 5 11:28 runcmd.py INFO : 2008-10-05 11:29:05,686 : main : hi! INFO : 2008-10-05 11:29:10,693 : main : total 24 INFO : 2008-10-05 11:29:10,694 : main : drwxr-xr-x 5 user user 170 Sep 25 20:32 helloworld INFO : 2008-10-05 11:29:10,694 : main : prw-r--r-- 1 user user 0 Oct 5 11:29 out_fifo INFO : 2008-10-05 11:29:10,695 : main : -rw-r--r-- 1 user user 1599 Oct 5 11:29 runcmd.log INFO : 2008-10-05 11:29:10,695 : main : -rwxrwxrwx@ 1 user user 2856 Oct 5 11:28 runcmd.py DEBUG : 2008-10-05 11:29:10,695 : runCmd : Return Value: 0 DEBUG : 2008-10-05 11:29:10,699 : runCmd : Running: this_should_not_exists INFO : 2008-10-05 11:29:10,705 : main : /bin/sh: this_should_not_exists: command not found CRITICAL : 2008-10-05 11:29:10,706 : runCmd : Return Value: 127

Everything Should Know How To Think

2008-07-21T09:21:00.001-07:00

I pretty much agree with this: Computational Thinking

Computational thinking is a fundamental skill for everyone, not just for computer scientists. To reading, writing, and arithmetic, we should add computational thinking to every child’s analytical ability. Just as the printing press facilitated the spread of the three Rs, what is appropriately incestuous about this vision is that computing and computers facilitate the spread of computational thinking.

Old'ish but Funny!

2008-07-01T13:32:00.000-07:00

Interdependencies between Components cont.

2008-02-25T07:54:00.000-08:00

Our group uses Subversion as our repository. So, mechanically the most obvious solution is to implement a post-commit hook. Is this enough? It is not clear that there needs to be any complimentary cultural practice put into place. What is further gained?

Of course in this case nothing or very little. It might be preferable to also institute a daily 15min stand-up meeting (a la Agile) between the interdependencies, but if limited to resolving build failures, this adds little value over and above the mechanical solution.

The benefit, and a great one, would be to improve communication within the team. So, I have suggested just this. First and foremost, a synchronization meeting should be established. Second, if requested the build team can put together a system for change notification based on SVN post-commit hooks.

Am I missing anything important?

Interdependencies between Components

2008-02-23T13:43:00.000-08:00

Like all projects ours has to deal with dependencies between code. Here is a recent email regarding a breakdown in this area:

This is the second time we have been bit by one of our upstream dependency components making a change and causing our component to fail. Is there something I as a developer can do to prevent this? We gave the build team suggestions for policies and procedures how to prevent, but the build team says it’s not your responsibility to manage such policies. But I think it should be owned by the build team…at least defining and communicating BKMs.

The code failed to compile, stopping the build of the complete product, because a component it depends on changed its API. I was copied on this message because I am on the build team; in fact I run the builds. So I responded with:

Compile failures due to changes in APIs between interdependent components is symptomatic of incomplete communication between the dependencies. There are two ways to deal with it:
Mechanically through processes; OR
Culturally through relationships.
If you believe that this issue ought to be resolved mechanically, then I can see how that falls solely to the build team. But I do not, so I resist this solution. I am willing to accept that there can be processes in place that facilitate a cultural solution. In this case, we can discuss adding these to a communication model mostly worked out within and between the developer/SQE teams.

The original author followed with:

But I think the build team should take the lead in trying to get everyone on the same page by suggesting policies.

And I returned with:

Well, I am happy to suggest policies, but I think we all know what is gonna happen! Grin! I certainly do not know the personality of the teams, so y’all are gonna hate my suggestions! But that is ok, as long as it initiates discussion I am happy come up with something and to participate.

So at this point, I think I need to come up with a cultural solution. Ideas?

Outsourcing Web Design

2008-02-19T21:41:00.000-08:00

We recently acquired a contract to implement part of a social networking site. The company that hired us to do this part simply did not have the resources to finish the entire project within the time frame they were given, so it was a win-win situation for both companies.

We quickly got going on the back-end code, and as a result there were only about three weeks remaining on the project when we started working on the front-end design work. We had a relatively decent spec to work from: A mock-up created by one of their designers. Within a few days we had much of the design work finished, as we are somewhat experienced with such work.

However, we spent the next week or so struggling with a few problematic CSS issues, the biggest one being how to render arbitrary content inside a box that had a custom border (so, must be from an image), where the corners are rounded. In this case, the border is used in multiple places on multiple different pages, and in some cases the box is of predetermined width and height, sometimes just the width, and sometimes it has to fit the page. The difficulty was based upon the premise that one should not be using tables for layout of an HTML page. The reasons sound plausible: It's not what tables are designed for. It's mixing presentation with semantic content. It's difficult for accessibility. Etc.

We know that, to the unexperienced, this problem sounds trivial to solve. But, anyone who has tried it can tell you it is not easy.

We did some research on ways that others have solved this and other problems, and eventually found solutions that we were able to implement in short order, and we were ready to deliver our work.

However, it was then decided that the site in question would have to support MSIE6, the CSS designer's worst nightmare. We struggled with that for a few days, and eventually took a step back: We estimated that about 90% of the UI design time had been spent fiddling around with CSS to get the layout right. What were we doing wrong?

Our conclusion is simply that we did not have the experience needed to complete the design using CSS in a reasonable amount of time. We should have hired a designer.

We were fortunate to know of a designer who had recently quit his job to do contract work exclusively. We got him into the office, signed the paperwork, gave him the specs, and he was off. Three days later, while we now had time to focus on performance issues and take a closer look at our application architecture (and get three solid nights of sleep), he came back to us with most of the problems solved, the whole thing working in all supported browsers, and just a few minor tweaks to integrate his changes into the site.

The moral: As a Web developer, you really need to know your limits. And more importantly, you should find an experienced, trustworthy Web designer that you can consult with when you need help.

During the estimation phase of the project, you should really take a look at what you are being asked to implement as far as UI design goes. Estimate what you think it will take you. Then, try to estimate how long it would take you if you really knew what you were doing when it comes to design. Our proposed rule of thumb is that if the first number is more than twice the second number, you should probably at least consult a designer.

Think of it this way: Even if you don't make a profit on the UI design because you outsourced it, it's probably worth it to you in future business to be able to make the customer happy. The question is not whether or not you can be a designer. The question is do you want to? If the answer is yes, then you should focus on that as your career path, because there is a definite need for specialists in this area. If not, then find someone who does, who you can trust with your project, and use them appropriately.

Flash and Javascript Overlay

2008-01-19T16:28:00.000-08:00

This article is based upon a project we recently worked on. We learned a great deal and wanted to capture what we learned in a generic way so that it could be reapplied to future projects. This article is organized in Problem/Solution format, where each problem is one that we encountered after implementing the prior solution.

Problem:

You have a Flash movie, and you want some HTML content to be displayed as an overlay when a user clicks in a particular place within the movie. There should be a "Close" button or link within the overlay that will hide the overlay when clicked.

Solution:

Put the content into a text field that has its formatting style set as HTML. See these instructions for more information about how to do this.

Problem (Additional Requirement):

The client wants the content to be written using any arbitrary HTML and CSS for controlling the layout and style of the content once it is rendered. Even in this day and age, there is no way to render arbitrary HTML and CSS in Flash, despite the fact that a need for it has existed for years. Yes, you can render some limited HTML in such a text field, but the list of supported tags is fairly minimal. For the list of HTML tags that are supported in a Flash text field, see the above link to instructions about how to format a text field as HTML. If you don't need anything more complicated than the supported HTML, then this is not a problem for you, and you can use the solution immediately above.

Solution:

Put the content in a hidden HTML div.
Create a Javascript function that shows the div when it is called, and another that hides the div when it is called.
Write ActionScript code to call the first Javascript function when the user clicks in the proper spot in the Flash movie.
Put a button in the the div that when clicked will call the hide function.

Some code to see how it works: In the Web page, add the following HTML:


<!-- Initially this div is hidden -->
<div id="overlayContainer" style="display:none; border: 1px solid white; background-color: black;">
     <!-- The content to be displayed goes here -->
     ...

     <!-- close button hides the overlay -->
     <input type="button" value="close" onclick="hideOverlay(); return false;" />
</div>

Then, in the Web page, add the following Javascript:


var overlayContainerElt = document.getElementById('overlayContainer');
function showOverlay()
{
     overlayContainerElt.style.display = 'block';
}

function hideOverlay()
{
     overlayContainerElt.style.display = 'none';
}

In ActionScript in the Flash movie, assuming "cont" is a class member that refers to the container on which the user can click:


cont.addEventListener(MouseEvent.CLICK, mouseClick);

private function mouseClick(e:MouseEvent):void
{
     ExternalInterface.call("showOverlay");
}

Problem:

There is no (cross-browser) way to show a div on top of a Flash movie.

Solution:

Hide the Flash movie before displaying the div. Modify the Javascript as follows, assuming the Flash movie is displayed in a div named "flashContainer":


var overlayContainerElt = document.getElementById('overlayContainer');
var flashContainerElt = document.getElementById('flashContainer');

function showOverlay()
{
    overlayContainerElt.style.display = 'block';
    flashContainerElt.style.display = 'none';
}

function hideOverlay()
{
    overlayContainerElt.style.display = 'none';
    flashContainerElt.style.display = 'block';
}

Problem:

The Flash movie does not get properly hidden in all browsers. [There is another problem here I can't remember]

Solution:

Hide the Flash movie by setting appropriate style attributes. Modify the Javascript as follows, assuming the Flash movie embed element is named "flash":


var overlayContainerElt = document.getElementById('overlayContainer');
var flashContainerElt = document.getElementById('flashContainer');
var flashElt = document.getElementById('flash');

function showOverlay()
{
    overlayContainerElt.style.display = '';

    // Store the CSS attributes we are about to change
    flashContainerElt.cachedMargin = flashContainerElt.style.margin;
    flashContainerElt.cachedHeight = flashContainerElt.style.height;
    flashElt.cachedHeight = flashElt.style.height;

    // Hide the flash move by setting it to have no size
    flashContainerElt.style.margin = '0px';
    flashContainerElt.style.height = '0px';
    flashElt.style.height = '0px';
}

function hideOverlay()
{
    overlayContainerElt.style.display = 'none';

    // Restore the size of the flash movie
    flashElt.style.height = flashElt.cachedHeight;
    flashContainerElt.style.height = flashContainerElt.cachedHeight;
    flashContainerElt.style.margin = flashContainerElt.cachedMargin;
}

Problem:

If the Flash movie has a background texture, gradient, or image, then the background abruptly disappears when the overlay is displayed. If the overlay is smaller than the Flash movie, this can look strange.

Solution:

Create a div with the same background as that used in the Flash movie, and put the overlayContainer and flashContainer divs inside it. Use appropriate cross-browser CSS to position the div so that it sits exactly behind the Flash movie. The HTML becomes:


<div style="url(movie_background.png) no-repeat top center; margin: 10px auto;">
    <!-- Initially this div is hidden -->
    <div id="overlayContainer" style="display:none; border: 1px solid white; background-color: black;">
        <!-- The content to be displayed goes here -->
        ...

        <!-- close button hides the overlay -->
        <input type="button" value="close" onclick="hideOverlay(); return false;" />
    </div>
</div>

Problem (Additional Requirement):

There is no smooth transition between the Flash movie disappearing and the overlay appearing. This may or may not be a problem for you, but for this project the client wanted the overlay to appear as though it was fading in on top of the Flash movie.

Solution:

There are several steps to this solution:

In Flash, create a rectangle that has the same size, style, and position as the overlayContainer div.
Add ActionScript code to cause the new rectangle to fade in before calling the showOverlayContainer() in Javascript. To accomplish this, you could use the Caurina Tweener library.
Add another ActionScript function to cause the rectangle to fade out.
Modify the JavaScript code to call the new ActionScript function after the flashContainer has been displayed.

In ActionScript:



// Programmatically create the rectangle with the desired size and style
this.screenCover = new Shape();
this.screenCover.graphics.lineStyle(1.5,0xFFFFFF);
this.screenCover.graphics.beginFill(0x000000,1.0);
this.screenCover.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
this.screenCover.graphics.endFill();
this.screenCover.alpha = 0;
this.addChild(this.screenCover);

cont.addEventListener(MouseEvent.CLICK, mouseClick);

private function mouseClick(e:MouseEvent):void
{
    Tweener.addTween(
        this.screenCover,
        {
            alpha : 1.0,
            time : 0.5,
            transition : 'linear',
            onComplete : function()
            {
                ExternalInterface.call("showOverlay");
            }
        }
    );
}

private function hideScreenCover()
{
    Tweener.addTween(
        this.screenCover,
        {
            alpha : 0,
            time : 0.5,
            transition : 'linear',
        }
    );
}

Modify the hideOverlay() function in Javascript as follows:


function hideOverlay()
{
    overlayContainerElt.style.display = 'none';

    // Restore the size of the flash movie
    flashElt.style.height = flashElt.cachedHeight;
    flashContainerElt.style.height = flashContainerElt.cachedHeight;
    flashContainerElt.style.margin = flashContainerElt.cachedMargin;

    flashElt.hideScreenCover();
}

Problem:

The content of the overlayContainer div still appears abruptly.

Solution:

There are several steps to this solution:

Create a div named overlayContent, and put the contents of the overlayContainer inside it.
Put the new overlayContent div inside the overlayContainer div.
Use a third-party effects library to cause the new overlayContent div to fade in. For our solution, we used the popular Scriptaculous library.

The HTML becomes:


<div style="url(movie_background.png) no-repeat;">
    <!-- Initially this div is hidden -->
    <div id="overlayContainer" style="display:none; border: 1px solid white; background-color: black;">
        <div id="overlayContent" style="display:none">
            <!-- The content to be displayed goes here -->
            ...

            <!-- close button hides the overlay -->
            <input type="button" value="close"
                       onclick="hideOverlay(); return false;" />
        </div>
    </div>
</div>

The Javascript becomes:


var overlayContainerElt = document.getElementById('overlayContainer');
var overlayContentElt = document.getElementById('overlayContent');
var flashContainerElt = document.getElementById('flashContainer');
var flashElt = document.getElementById('flash');

function showOverlay()
{
    overlayContainerElt.style.display = '';

    // Store the CSS attributes we are about to change
    flashContainerElt.cachedMargin = flashContainerElt.style.margin;
    flashContainerElt.cachedHeight = flashContainerElt.style.height;
    flashElt.cachedHeight = flashElt.style.height;

    // Hide the flash move by setting it to have no size
    flashContainerElt.style.margin = '0px';
    flashContainerElt.style.height = '0px';
    flashElt.style.height = '0px';

    Effect.Appear(overlayContentElt, { duration: 0.5 });
}

function hideOverlay()
{
    // Hide the overlayContent div in 0.5 seconds, then call hideOverlayContainer()
    Effect.Fade(
        overlayContentElt,
        { duration: 0.5, afterFinish : hideOverlayContainer }
    );
}

function hideOverlayContainer()
{
    overlayContainerElt.style.display = 'none';

    var flashContainerElt = flashContainerElt;

    // Restore the size of the flash movie
    flashElt.style.height = flashElt.cachedHeight;
    flashContainerElt.style.height = flashContainerElt.cachedHeight;
    flashContainerElt.style.margin = flashContainerElt.cachedMargin;

    flashElt.hideScreenCover();
}

Conclusion

There is more you can do to make this code more reusable and flexible, but those are the basic steps. Someday I will modify this posting to include an actual example.

Encrypted IM

2008-01-18T21:58:00.001-08:00

If you're a Pidgin user and you want your IM conversations to be secure and private, there's a new plugin called OTR. Just in case you don't know, Pidgin is a replacement for all your IM clients (yes, including Google). It's better than all your other IM clients, so use it.

Introduction

2008-01-18T21:00:00.000-08:00

This is a blog containing info related to being a software developer. You won't find any fascinating personal tidbits here, but you might find something interesting you can use if you are a developer too. Enjoy.