Studio moh

Traversing the display list in AS3 is so tedious. I wish I could use jQuery/CSS/XSLT style selectors:

$('stage movie button').addChild(child);

jQuery has spoiled me with easy DOM traversal. Instead, we have to do this:

stage.getChildAt(3).getChildAt(12).addChild(child);

Edit: It looks like someone has ported the $-style traversing to AS3. Finally!

Typographical widows, that is. Learning jQuery (an excellent blog, even for the power users) had a wonderful post on how to use jQuery to append widows.

(If you didn't take a print class in high school, a widow is a word that ends on the next line like
this.

This is a print master's nightmare and a typographical no-no.)

Their solution uses regular expressions, which is nice, but not the most efficient way to split strings, and a bit of a memory hog on older systems.

Why not use CSS property white-space: nowrap;?


$('h2').each(function() {
var h2Contents = $(this).html().split(" ");
h2Contents[h2Contents.length-2] = '<span style="white-space: nowrap; color: red;">' + h2Contents[h2Contents.length-2];
h2Contents[h2Contents.length-1] = h2Contents[h2Contents.length-1] + '</span>';
$(this).html(h2Contents.join(' '));
});


This snippit of jQuery wraps the last two words of every H2 tag with a span tag that has an inline style that prevents line-breaks. The result? No more widows without the performance hit of Regex.

Current Javascript solutions for LightBoxes are kind of cumbersome, bloated, and CPU-intense.

Unsatisfied with the current state of LightBoxing, I developed a pure, organic, CSS-powered LightBox. Absolutely zero javascript. All of this under 1kb.

Click here to preview the CSS LightBox


The core of Multi-state CSS is the :target pseudo class. When a user clicks a page-anchor the :target pseudo class is activated, revealing the lightbox element. Here's the code:


div.lb {
display: none;
}
div.lb:target {
display: block !important;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: url('screen.png');
position: fixed;
padding: 2em;
}


Making your own CSS styles is a nice (albiet butchered and terrible implemented) touch in MySpace.

In a normal web design workflow, you have something like this:

.modules {
background-color: #fff;
padding: 15px;
}

.modules p {
color: #aaa;
line-height: 150%;
}

In MySpace’s world, it’s more like this:


table table table table td, table table table table tbody td {
background-color: transparent !important;
padding: 15px !important;
}

table table table table td font, table table table table tbody td font {
color: aaaaaa !important;
line-height: 150% !important;
}


Ugh. Stab me in the eyes as hard and fast as you can, MySpace.