UrbanDude

I love a good meme. Hicks' design is... seemed simple enough for me to participate in, except I had to over-do it and add common browser sizes for reference. I never know when to stop...



Download designis.gif [1920x1200]

In case you want to make it your own, here's the Photoshop file I used to create it.

After creating my home office desk, I became very aware of how vulnerable my home server would be to theft. Take a look at the picture below...

Those glass windows are very large and inviting. We have a home alarm with a glass break sensor, but if someone were to break in and the alarm goes off, they would probably grab the first expensive thing in the room and run. I would be very upset if I knew some hobo sold my PC for a Mickeys 40oz. I've put a lot of work into building this PC, from the Antec Sonata "silent case" to the perfectly tweaked Windows Server 2003 configuration. I have CD/DVD backups of most of my important data, but I needed to consider a more radical approach to locking this down. With an emphasis on "lock".

I went with a 1/2" steel bolt, washer and rubber grommet (purchased for ~ $2 @ Lowes) mounting the case to the desk. If someone wants to steal the PC, they're going to have to work for it...

I drilled a hole into the desk and in the bottom of the case. The nut screws on from the inside of the case, so I can lock the side panel (it came with a lockable handle) and make it really frustrating for "said hobo".

Check out the sweet swivel action!

I figure it would take someone 5 minutes to be able to figure all this out and steal it. With an alarm siren blaring, that's a loooooong time.

A few months ago we bought a new house and have slowly been settling in. I've always wanted a dedicated home office, but have never "officially" had my own room. It's always been in the living room or dining room, which doesn't really count as a home office.

We bought a 3 bedroom, 3 story "loft-style" townhouse near downtown Houston. You know the type: 3 rooms actually means 1 master bedroom and 2 oversized closets; those extra rooms are pretty much useless. You can fit a bed in there, but nothing else. But it's perfect for an office.

I put a lot of thought into this, because I spend a good chunk of my time behind a computer. The first decision was to paint the walls. I needed a color that was bright, would wake me up, inspire creativity, but not be too painful on the retinas. I went with grass green. It would match the walnut colored stained concrete, and would look super-awesome during Christmas (even though I don't celebrate).

Next up, the desk. Here were my requirements:

• must be cheap: under $150 for everything.
• lots of table-top space.
• easy to clean concrete floors. I hate dust bunnies.
• unique design
• solid enough to bolt my server to in case someone broke in and tried to make a quick grab while the alarm goes off.

So here's what I came up with:

I bought everything from Lowes or Ikea for less than $100. It only has three legs touching the floor so cleaning the floors should be a breeze. The main table is for the display and wireless keyboard/mouse. The lowered table is for the PC and all the typical junk that accumulates on a desk. It's not in the pictures, but I even created one of those 2" capped holes in the back for the cables to go through.

It was a fun DIY project, and only took a couple of hours. The hardest part was sawing the metal legs with a hacksaw. That took at least an hour to complete, and the whole time Sarah was kept reminding me not to hurt myself. Duh! The table is mounted to the wall, and when I bolt my server to the table it will be near-impossible to walk off with. That's my next little project.

follow-up post: physically securing my home server to the desk

Update: Here's a pic taken a few months ago

I had a happy accident this week. I accidentally applied a CSS background to HTML (instead of BODY). Guess what? It worked the same as the typical BODY background configuration that everyone uses. So I thought, what would happen if I applied a background to both HTML and BODY? Check out the results...

Example 1: Vertical Overlay

Uses a horizontal background with an overlaying PNG vertical shadow. Similar to JeffCroft.com and SimpleBits.com.

I'm using HTML>BODY on the PNG because IE can't handle Alpha Transparencies. An IE user won't see the vertical drop shadows on the sides of the middle column. I'm using this technique on this site.

Example 2: Horizontal Overlay

Has a vertical centered background with an overlaying horizontal PNG shadow at the top of the page. This is helpful if you need to have a column that appears to have 100% height.

I'm using HTML>BODY on the PNG because IE can't handle Alpha Transparencies.

Example 3: P-Diddy (Stylish Wrapper)

This was the fun one. For the sake of time (and lack of design skills), I'm using a background image from FrozenToast.com. This works on all modern browsers, and can be useful if you need a stylish liquid layout with minimal amount of code. I added padding to the BODY, so it'll push the content in and expose the two backgrounds.

If you find any of this useful or notice anything funky with my writeup, leave a comment.

I decided it was time for me to learn a new language. Para el español, presione el número dos. Just kidding, I'm talking about a new programming language. Seeing how I'm a Classic ASP ninja, I figure the .NET framework should suit me fine. They're both based on VBScript, right? Not.

The code that ASP.NET 1.1 spits out is awful. The lack of modern web standards support has been talked about in detail, and some have done a great job at cleaning it up. I want to learn it, but how can someone that believes in web standards honestly use it without feeling dirty? Enter ASP.NET 2.0. It seems the Visual Studio team is doing wonders with their application development software, especially their new (and temporarily free) Visual Web Developer 2005 (beta). If you haven't heard about it, I suggest you check it out.

They've got a lot of good selling points, but here's what sold me on making the switch:

• Defaults new pages to XHTML 1.1. And the code validates. Almost.
• Switching to Design View won't mess with my code/styles.
• .NET 1 came out in 2000. A lot's changed since then. The MS guys seem to have noticed what developers want. It's about time...
  

I've noticed a few things that bug me. But before I say anything, I'm going to wait until Beta 2 comes out. In the mean-time, I feel less-dirty about learning ASP.NET, because I know 2.0 is right around the corner.

Everyone likes rounded corners. Whether it's in print on the web, a rounded corner can structure content AND look pretty (oh so pretty). But creating them is a mess. Until CSS3 is widely adopted, the only way to do this is with nested DIV's, floating images, or tables (yuck!). Each technique has it's drawbacks and one similarity: they all require unnecessary code in the content of the page.

The goal of our magical div:

• The corners be rounded (duh)
• It can stretch horizontal and vertical
• It can have padding
• It can have a border that merges with the corners
• It degrades gracefully in older browsers

The source code we want

<div class="rounded">
content text goes here
</div>

The images we'll use

The CSS we need

.rounded { 
background: #fff; 
margin: 1em 0;
padding: 15px;
border: 1px solid #D4CCCB;   
}
.rounded:before {
display: block;
line-height: 0;
height: 20px;
content: url(/images/corner-tl.png);
background: url(/images/corner-tr.png) no-repeat top right;
margin: -16px -16px 0 -16px; 
padding: 0;
}
.rounded:after {
display: block;
line-height: 0;    
height: 20px;
content:  url(/images/corner-bl.png);
background: url(/images/corner-br.png) no-repeat bottom right;
padding: 0;
margin:  0 -16px -16px -16px;
}

The issues I've come across...

It doesn't work in IE. That's to be expected, since it doesn't support the :before and :after CSS2 selectors. But it breaks downs gracefully by being a simple white box with a border and some padding. You can use Dean Edwards' IE7 to bring Internet Explorer out of the stone age, but I haven't tried this yet.

Padding and Negative Margins: The DIV uses padding, but then adds style/content to the top and bottom selectors of the DIV, which is subjected to the padding. To fix it, add negative margins to pull it back into place. Don't forget to add the border width to the negative margin!

I'll write more if it's useful, but most likely no one will read this. Just dig through my source code and figure it out on your own. That's the best way to learn!