March 20, 2006 at 10:46 pm
· Filed under Personal
As part of moving into our new house, my family decided to expand the laundry room to make it large enough to actually do laundry and to allow for a new bathroom. Moving the wall out means anything in the way must go, and in the way was a dogwood tree and a baby pine. My father wanted to be as environmentally friendly as possible, so we tried to move the dogwood instead of just cutting it down, but it proved too large for us to do so. We settled for saving the baby pine tree that was growing right beside it.
Across the pool, my father pointed out a spot that the baby pine would look nice when planted. We all missed the ominous sign of a total lack of plant growth in the area; there weren’t even weeds or any kind of grass. I started digging and hit a root. We had an axe handy, so I tried to cut the root away. It turns out that the “root” was actually a water pipe. I sent a considerable chip of the pipe flying before realizing what had happened. My shock was followed by a burbling sound and then water coming out of the pipe. It was fairly obvious that I had struck a pipe leading to/from the pool; that explains the lack of plant growth as roots can crush PVC pipe.
A quick call to Rotor Rooter later, we found out that nothing could be done about the pipe until the water stopped flowing. It was going well into the evening, so the Rotor Rooter guy volunteered to come back the next day. My father thought the water might be coming from the main heading into our house, so he closed it for the night. My brother and I were desperate for a shower, so I opened the main so he could take one and went outside to inspect “El stupido creek” (as brother dubbed it). The water had stopped and the only thing that remained was a stagnant pool of water. I thought this a good sign and determined that the water main didn’t have any connection to the cracked pipe, so I left it open for the night.
The next morning, my suspicion proved correct. The puddle had completely evaporated, leaving only a muddy hole in the ground. My father and I made a trip out to Home Depot and bought new pipe, along with the necessary connectors. My brother and my father put the new pipe segment into place, and since then, everything has been fine. I discovered that the particular pipe I hit was either the input or output pipe for the spa that’s attached to our pool. That explains why the main was affected, as the only source of water for the spa is its pump and the pool. The pump was off, so the pool just drained to the level of the line connecting the spa and the pool, which is less than a foot from operating height.
So, the lesson here is: dig very carefully around a pool, lest you need to exercise plumbing knowledge unwillingly.
Permalink
March 18, 2006 at 11:14 pm
· Filed under Development
For a long time, I never thought before throwing an image into a webpage. I know all the rules about not using images for spacing or layout, but no one ever warned me about using them for buttons or headers. Then I started working on a website where I wanted the non-CSS version to look nice for text/mobile browsers, and I discovered that images really screw things up without layout. I googled for placing images using CSS only, and I discovered image replacement. In CSS3, you’d be able to do something like this:
<h1 style="content: url(header.jpg);">Header</h1>
Unfortunetly, no browser implements CSS3, so a little hacking is in order. The nicest solution I came up with looks like this:
<h1>Header</h1>
h1
{
background: url(header.jpg) no-repeat;
overflow: hidden;
padding-top: 45px;
width: 186px;
/* WIN IE5 hack */
height: 133px;
voice-family: "\"}\"";
voice-family:inherit;
height: 0;
}
The trick is to pad the top of the box as the size of the image, then hide the overflowing text. As you can see, it requires some hacks to work in IE5, but to anyone who does web development, this should be no surprise. A cool benefit of this is the ability to add a title attribute to the h1 tag, which replicates the alt information you’d normally stick with an img tag. Thanks to Dave Shea for the information.
Permalink
March 18, 2006 at 1:28 am
· Filed under Development
Let’s say you tried the following HTML/CSS:
<div style="background: #cfc;">
<p style="border: 1px solid black; margin: 1em;">Heya!</p>
</div>
It would look like this:
You probably expected it to look like this:
The cause of this confusion is called collapsing margins. It only happens to vertical margins, which is why you can you can still see the gray margins outside the left and right border of the paragraph in the first demonstration. According to the CSS 2.1 specs, section 10.6.3:
If [a block-level non-replaced element in normal flow when 'overflow' computes to 'visible'] has block-level children, the height is the distance between the top border-edge of the topmost block-level child box that doesn’t have margins collapsed through it and the bottom border-edge of the bottommost block-level child box that doesn’t have margins collapsed through it. However, if the element has a non-zero top padding and/or top border, or is the root element, then the content starts at the top margin edge of the topmost child. (The first case expresses the fact that the top and bottom margins of the element collapse with those of the topmost and bottommost children, while in the second case the presence of the padding/border prevents the top margins from collapsing.) Similarly, if the element has a non-zero bottom padding and/or bottom border, then the content ends at the bottom margin edge of the bottommost child.
Note the mention of ‘a non-zero top padding and/or top border’. This means that setting either will stop margins from collapsing. In the second example, I added 1 pixel of padding to the DIV for the desired effect. Thanks to Minz Meyer for the solution.
Permalink
March 16, 2006 at 10:50 am
· Filed under Aldahar
So, Rick and I came up with a new pseudo-random number distribution:
double random_pow(int power)
{
double num = 2.0 * rand() / RAND_MAX - 1;
return (copysign(pow(num, power), num) + 1) / 2;
}
I’m using the standard C library versions of rand() and RAND_MAX, so this function generates a random number in [0, 1] biased towards 0.5 using the exponent power. I thought it might be useful in making most of my field green but having a few brown or yellow flecks at the end points, but I’m not sure it worked out correctly. Grass 1 and Grass 2 are my tries using this system. The code for the first one is:
Color lawn_grass(int x, int y)
{
static color darkGreen(23, 90, 0);
static color lightGreen(51, 175, 15);
static color brown(87, 67, 6);
color green = clint(darkGreen, lightGreen, rand_double());
return clint(green, brown, rand_double()).convert();
}
For the second one, it’s:
Color lawn_grass(int x, int y)
{
static color darkGreen(27, 81, 0);
staric color lightGreen(75, 150, 25);
static color brown(90, 97, 16);
color green = clint(darkGreen, lightGreen, rand_double());
return clint(green, brown, rand_double()).convert();
}
Crap. It occurs to me that neither of my grass functions use my random_pow() function. I’ll have to look around to see if I saved the originals.
Permalink
March 15, 2006 at 5:33 pm
· Filed under Aldahar
Generating an 8192 by 4096 pixel canvas on the fly takes a while, but I’m putting up with it over and over again to see if I can come up with a good algorithm to make a forest-grass field. The old algorithm created a field that was almost perfect and meshed almost invisibly with our current tiles, but Justin said that it didn’t have enough brown flecks to represent leaves, so I’ve been trying something new. This is my first try, but I can’t remember the color values that I used for the life of me.
Permalink
March 15, 2006 at 5:25 pm
· Filed under Personal
It’s high time I got myself my own blog, what with my incredible knowledge of HTML (never you mind that this blog is actually powered by Wordpress…), but it’s finally here! I’ll be posting some any random thing that falls out of my head (hence the name) and I hope it’ll be good reading.
Permalink
