I’m moving to www.likesalmondesign.com

I’m moving this blog and all its contents to http://www.likesalmondesign.com. Its a long time coming. I hope to see you there.

Set height and width for anchors with display:block

Turns out the width and height properties only work on anchor tags when used in conjunction with display:block. WTF?

So this does not work:
a { width: 100px; height: 100px; }

But this does:
a { width: 100px; height: 100px; display:block; }

Again, have I seriously never run into this before? Do I always just give up and work around this problem? Denial ain’t just a river in Egypt.

CSS width property does exactly what you would expect it to

The other day I was laying out a wordpress driven site in css and realized that I didn’t actually understand how the “width” property works. This was extremely embarrassing to admit to myself, because it means I’ve been flubbing and cheating my way through the layout of every website I’ve developed so far. Its one the things that fell through the cracks because of limited time or lack of will. So I did a little testing and it turns out the width property works in the most obvious way possible, with one exception. Here are the results of my test:

All of the following boxes are div elements set to width: 200px; height: 200px and background-color: #ccc. I use lots of shorthand, so you’ll want to review that or this won’t make much sense. I performed this test in Firefox 3 so I trust that this behavior is the standard.

This is the basic box. No other styling has been added. If you add more text to the box than the box can hold, it will flow outside the box, but the box will remain the same size. To cut the text off at the edges of the box use “overflow: hidden”.

The border property of this box is set to border: 10x;. Notice how the inner box is still 200px by 200px. The border has been added to the outside. The total dimensions of the div are now 220px by 220px.

The margin of this box is set to margin: 40px. The space it now takes up is 280px by 280px. Margins appear to behave exactly like borders, except they are always transparent.

The padding of this box is set to padding: 10px;. Notice how this expanded the box 10px on each side, for a total height and width change of 20px. This is the one unexpected behavior I encountered: I figured it would constrain the contents of the box instead of expanding the box itself.

This box is like the last one, with padding: 10px;. The difference is that this one is nested inside a div with width: 200px; height: 200px;. Unless the overflow: hidden; property is set, this makes no difference at all. The box still expands to 220px by 220px and overflows the container div.

This box is contained within a div that is 100px smaller than it is. This only makes a difference if you use “overflow: hidden”, which will cut off the edges of the box where the container div ends. Keep in mind that the next element on the page will butt up against the parent div and will be overlapped by the over-sized box contained therein. I had to adjust the margin of the <p> element that follows this div so they don’t overlap.

In conclusion, if you’re designing a site that is 800px wide with an 8px border, you would subtract the width of the border from the width of the container element like so: #container { width: 792px; border: 8px solid #ccc; }. The #container element stays at 800px and everyone is happy.

Using jQuery with WordPress

I struggled with this, as the usual method of including a javascript library and an external javascript script did not work.  Usually, I would do this:


<script style="text/javascript" src=<?php bloginfo('url'); ?>/wp-includes/js/jquery/jquery.js" ></style>
<script style="text/javascript" src=<?php bloginfo('template_directory'); ?>/myScript.js" ></style>


But that didn’t work at all, even when I included the jQuery.noConflict() line in my script. So I ended up going with this, which loads the jQuery library that is included with the wordpress installation and then loads my script without any conflicts:


<?php wp_enqueue_script( 'myScript', '/wp-content/themes/myTheme/myScript.js', array('jquery') ); ?>


The wordpress docs have very little to say about wp_enqueue_script(), the function that makes this possible. A good resource with examples of use can be found here:

http://nickohrn.com/loading-javascript-libraries-in-wordpress-plugins-with-wp_enqueue_script/

Installing Haxe on Mac OS 10.5.5

I decided not to use MTASC as my compiler after all, since it can’t do Actionscript 3. I’m going with Haxe instead.

Installation:

1. Go to http://haxe.org/download and download the OSX Universal Installer.
2. Unpack the installer and double click on it
3. Open up .bash_login from you home directory in your text editor and add the line: export HAXE_LIBRARY_PATH=”/usr/lib/haxe/std:./”
4. Follow the instructions for “Getting Started with haXe/Flash” in the Documentation section of the haXe website to test your installation

Now you can go to http://www.loziosecchi.it/lab/textmate_bundle/ and download and install the Haxe TextMate bundle:

1. Go to Marco Secchi’s website and download the haXe bundle for Textmate.
2. Unpack it
3. In Finder, locate the Textmate icon in the Applications folder and right click on it. Choose “show package contents” from the menu that appears.
4. Navigate to Contents -> Shared Support ->Bundles within the TextMate package
5. Open a new Finder window and locate the bundle you unpacked
6. Drag and drop the haXe2.tmbundle file into the Bundles folder and restart TextMate

Installing Flash and Flex Bundles on Textmate

This is important because it allows me to use textmate as my editor. I freaking love textmate. For instructions of how to do this go here:

http://flashalisious.com/2007/07/30/installing-as3-and-flex-bundle-for-textmate/

Do what he says, copy and paste the code he gives into the terminal all at once and press enter. Terminal will run the commands one at a time. When it gets to the last command (“osascript -e ‘tell app “TextMate” to reload bundles’”) it will throw the error “0:1: syntax error: A unknown token can’t go here. (-2740)”.

Don’t panic, just press the up arrow to bring up the line “osascript -e ‘tell app “TextMate” to reload bundles” again and then go through and replace the single and double quotes with new single and double quotes. When you cut and paste them from the website it puts curly quotes in, which the terminal can’t read. Voila’!

Installing MTASC

This was easy enough:

1. Download the Mac OSX package from http://www.mtasc.org/#download
2. Unzip it and change the name of the folder to “mtasc” for ease of use
3. Put the unzipped folder in your Applications directory
4. Put a new entry in your .bash_login file that says:
   1. export PATH=”/Applications/mtasc:$PATH”

Installing the Flash SDK on Mac OS 10.5.5

Vague instructions from the book led me to my first roadblock.  Can’t blame ‘em, there’s just to many OSs out there to write for all of them.  But we’re smart right? Right.

This video includes step by step instructions for how to install the Flex SDK and the correct way to add it to your path:

http://learnhub.com/lesson/video/108-start-using-flex3-for-free

Open Source Flash on Mac OS 10.5 Leopard

I haven’t written for a while but there’s no time for apologizing.  I decided (after years of swearing I never would) its time to learn flash.  I’m doing this totally open source, so I’m going to post all the steps it takes to get up and running in sequence, post by post.  I’m following the installation instructions from the free downloadable chapter of “The Essential Guide to Open Source Flash Development.”  This is available here:

http://www.friendsofed.com/book.html?isbn=9781430209935

There are several resources out there but this is the only clear getting-started guide I’ve run into.  Plus, my friend Moses was a contributing author!  He developes on a mac and is a has worked on some very high profile flash projects.  Thanks Moses!  I swear I’ll buy that book if I get this to work.

Here is a rundown of my system that I will be attempting this on:

Hardware Overview:

Model Name:    MacBook
Model Identifier:    MacBook2,1
Processor Name:    Intel Core 2 Duo
Processor Speed:    2.16 GHz
Number Of Processors:    1
Total Number Of Cores:    2
L2 Cache:    4 MB
Memory:    4 GB

The text editor I use is TextMate, and the browser I use is Firefox 3.  If I use it, you can assume that I highly recommend it.

New British Coin Designs

My girlfriend and I are house sitting this week while our friends are in Hawaii. They have four cats and a dog, good wine, and a lot of food in the fridge. I’ve been going on lots of walks, entertaining friends, and cooking, but precious little javascript.

I do have one interesting bit to share: this week the Royal Mint revealed new designs for British coinage. I dig them. I think its really bold to choose a design that is less than completely obvious. Check out this BBC News article about them.