Hi, my name is Al

Comments (0)

Feigning fixed height on multiple, rounded columns

This tute isn’t really a difficult one, nor is it particularly creative or too smart on my part. It’s basically adding on to what we already know. Everyone knows the feigning columns trick to have backgrounds repeating down 2 columns so they both end nicely and repeat into the footer, but today I had a design that looked a little something like this ->

The problems here are the rounded corners and 3 columns had to line up. To start out I just made the usual panel styles I like to use, a top graphic, a repeating graphic and a bottom. My usual technique is to put them one after the other so the background will stretch and the text inside the panel can be padded so it doesn’t hit the sides. It might seem a bit excessive, but I like to code for maximum flexibility, so if there is an image heading that cant be padded with the rest of the text, or if there is a huge amount of content, this is a sure-fire way to cover it. So the code in your html/php/whatever file looks like this:

<div class=”panel”>
<img src=”top.gif” alt=”top” align=”bottom” />
<div class=”panel_content”><p>Hey, column 2, you know whats awesome? Stuff! Stuff is awesome.</p></div>
<img src=”bottom.gif” alt=”bottom” align=”top” />
</div>

Easy right? Also, note the aligning of the images. This is for IE. I forget if you need to delete the whitespace, but for aesthetics, I’ll leave it this way.

The panel class has your float:left, your width and margins, whatever. The panel_content has your padding so crunch the text and render it to your hearts deepest desires. The panel_content also has the repeating background. If you understand this, you should be able to see how I’m going to do the 3 columns.

The disadvantage of using the traditional repeating backgrounds is there is no beginning or end defined, and the way sites are being designed, having a thin rounded image doesn’t hurt if it’s alt-tagged okay(I think). I applied the principle I use to make 3 columns instead of 1. My new CSS and HTML snippets look a little something like this:

#columns { background:url(repeat.gif) top left repeat-y; }
.panel { width:171px;padding:0 5px;float:left; }
.push { margin:0 17px;}

and

<img src=”top.gif” alt=”top” align=”bottom” />
<div id=”columns”>

<div class=”panel”><p>Hey, column 2, you know whats awesome? Stuff! Stuff is awesome.</p></div>
<div class=”panel push”><p>Yeah, stuff IS pretty awesome. I can talk about it a little more than you.</p>
<p>You know who loves stuff? That third column LOVES the stuff.</p></div>
<div class=”panel”>
<p>YEAH BOI, i LOVE the stuff. This one time, I went to a pub with stuff and well, I wont go into too much detail but I’m pretty sure some of the things I did with stuff are illegal everywhere except Mexico and certain rural areas of Uzbekistan.</p>

<p>Is that how you spell Uzbekistan? I’m not entirely sure, maybe there’s an H in there. I should really look that up sometime. Not that its overly important, it’s just a funny place name I use every now and then so it would be good to know its correct. Umm what was I saying?</p></div>
<div class=”clear”></div>
</div>
<img src=”bottom.gif” alt=”bottom” align=”top” />
<div id=”footer”>
Third column, you are such a dick.
</div>

The only things that have changed is I stuff a bit more CSS into the panel style, and when I mean a bit, I mean a tiny amount. Instead of floating the outer panel div(as in the first example), I’ve added the code to line them up on the inner-panels. The new top and bottom gifs have the top and bottoms for all 3 columns instead of just 1. The push class just pushes margins out. The repeating background is the 3 properly spaced columns that runs behind it all. When you hit the clear div, the background fills in the empty space for the other columns(when I mean empty space I mean the part we pretend is there) and the bottom adds the illusion that they are all ending together.

So where we see 3 columns with equal height, we actually have uneven columns and 2 images. For a more in depth look at the HTML and CSS, look at my example page.

Comments (0)

More than 365 ways to $verb a(n) $adjective $noun.

On New Years Day after coming home with something of a hazy mind and jaded view of 2008, I was invited to join a Flickr group by the lovely Monnie. The basic idea is take a pic a day, either a self-portrait or something that ’shows a part of you’, whether it be a part of you, or something else completely. I’ve just got a simple point and click camera because photography is something of an expensive hobby and I have more than enough things to burn my hard earned money on, like nerdhammer, games or condor-egg omelettes. I also have my phone which isn’t prefixed enough by enough lowercase vowels to be socially accepted enough to mention, which I will probably take random shots with.

Some might find taking 365 pics of yourself in the form of self portraits somewhat vain, but I can assure you, I’m not really too comfortable around cameras unless I’ve had a few drinks. Not to say I’m drunk in all my photos, I might be in some later on, but none just yet. I’m looking it as a way to find the shred of creativity not allocated to martial arts or games that’s left in me and try to see if I can develop it further. Although I will enjoy it as an opportunity to get to use my camera more and play around with things and ideas, I doubt I’ll get into photography as a hobby.

If anything at all I think it might be a strange look at what I am thinking throughout the year. Looking back at the end(should I get there) will be pretty interesting and remembering my mindset for each pic will be…. pretty interesting too….. So far I’ve had a strange array of thoughts, and it was 5 days before I broke out into a cartoon reference, which was a pretty good effort to me. Okay, okay, I did do one on my first photo, I just left it to others to make the connection.

So any bets on how long I last? 2 weeks? 3 weeks? 4 months? 365 days? However it goes, props to Monnie for the idea and getting everyone involved. Looking forward to seeing how it progresses. For anyone who wants to watch mine, theyre in the top right  -> ^
or its probably easier to go here. Enjoy.

Comments (1)

Why I can’t use Natural Keyboards

The other day I needed to get my keyboard replaced at work. People looked on in disbelief as I chose a white mac keyboard over a wireless natural keyboard for the temporary session. I have never enjoyed using anything made by Apple, I was born with what I like to call the Midas iTouch. I don’t really call it that, in fact I only just thought of it. The ‘touch’ first reared it’s black, sharp cornered and non-innovative head when I was at ECU. I basically crashed every iMac I touched. Whether it be because I hammered the single button mouse into oblivion, or whether the machine was just a piece of shitty hardware that a clown threw up on in the body in the production line. Once I had one of these fine pieces of technology crash on me mid-practical exam, I swore off them for a few years. Later on I managed to screw up an iPod a friend had leant me to try out. After scouring the oh-so-helpful support forums, I followed the technical instructions and reset the iPod, only to run into the same problem. My 2GB Samsung mp3 player is doing amazingly well and I haven’t had trouble with it ever. You may have noticed this has nothing to do with anything. Maybe so, but hold your horses you impatient jerk, I’m setting the scene. This is only a slight insight into the issues I have with Macs, Apple products or any items prefixed with a lowercase i. Having said all this, I still chose the McKeyboard.

Let’s do a little test, I’m going to go out on a limb here and assume anyone that may read my ranting knows basically how to use a keyboard. If not, you’ve done well to get here, my friend, but this won’t apply to you. Everyone knows the "home keys", for your left hand, A S D G, for the right J K L ;. That’s how we’re meant to type yeah? Now lift up your arms, stretch a bit, you’ve earned it. Hands back on the keys yet? Have a look at where they’re sitting. Are they on the correct keys? Chances are they aren’t. My left hand actually sit: Left Shift S E with my index in between the F T and G key. When my right is off the mouse and in its natural habitat, it sits on the K O P and Enter keys. I find that my index fingers do most of the work and instead of my hands staying in the same spot they tend to rock 1 or 2 keys to the middle to hit any keys. Since I tend to write a lot of basic CSS and xHTML the index fingers also tend to cross over each other when I know what I am going to write a few words/tags ahead. My right index and left thumb are the Hitters of the Spacebar, depending on what the last key I typed was. If I am finishing with an m, n or lower level key, the index finger usually jumps in as the hand shifts down the keyboard. There are probably a lot of reasons I have this kind of setup. They can range from gaming, type of coding and general finger agility. Maybe I have crazy guitar fingers, maybe I’ve been hitting too many things and I’ve developed an extremely accurate way of pawing at my keyboard to make websites, I don’t know exactly. What I do know is that the style of typing I use makes it nearly impossible to use Natural keyboards effectively, as it splits my hands further apart and prevents the tag team of my left and right index fingers to combine forces to deliver the dextrous pulverising needed to tackle words such as naughty, brought and breath-takingly..

I asked my good friend Ben the same question about the keys he uses, and he responded with the subtle-to-some yet obvious-to-others gamer setup of left shift, A W D and K P ; and right shift. When I was a bit more of a gamer I probably did the same, and let me tell you, there’s nothing quite as horrifying as looking down at your hand on the A W D keys, leaving your index finger only lightly touching to stack sunders. I’d like to say my keyboard style is a horrible hybrid of a gamer, fulltime front-end dev and cat scratcher, so I will. How about yours?

Comments (4)

Release your hatred…

I had something of a stupid idea today. I’m somewhat known for not liking a whole lot of stuff. Arguably, there is a lot that gets on my nerves, but there is a lot of stuff that I like. The main reason people get the wrong impression is because I tend not to like a pile of things that are so readily embraced and worshipped by the masses. My refusal to kowtow to such idols is often met with disbelieving cries of "BUT LIEK, HOW CAN YOU NOT???//?" and "OH EM GEEZ YOU JUST HATE EVERYFINZ". I can’t remember exactly what sparked the thought, but I thought I’d do a bit of a series on my ‘hatin’. I’ll just go through a few things per post of "stuff I hate but youse all like". A couple quick notes before I begin though:

• When I mean youse, I don’t mean you. Not you specifically, so if it turns out you hate it with me, feel free to tell me, but I assure you, any bitching will have a nice scathing retort that will make you cry harder than you could ever put into words in a comment box, so use your head before hitting the submit button.
• When I say hate, I don’t really mean hate unless I specify it. Hate is an extreme word and it takes a lot for me to say I hate something, but ‘justifiably dislikin’ sounds stupid.

First up on the chopping block - Food
Continue reading this entry »

Comments (0)

You don’t believe we’re on the eve of directions?

I love the smell of a conference in the morning. Not really, more of the pre-conference coffee. It’s taken me pretty much all day to get to a stage where I think I can have a 1 hour rush tomorrow and be completely packed and ready to go. I’m watching a live Dio DVD and I cant see myself thinking of anything else to pack tonight.

My schedule at the moment is arriving at 4:15pm at Sydney airport tomorrow afternoon. I won’t be going straight to the Kirk, but instead hanging out(probably in the bar) to see my awesome friend Spidey before she shoots back off to Melbourne. I’ll also probably catch Kay as she comes in a couple of hours later to split a cab. After a small port and civilised conversation about politics and scrimshaw, I will most likely have an early night.

Tuesday I have a workshop with Derek Featherstone. I can’t say I’ve met or even seen the guy before but when I mentioned to Perth people I was thinking of going to his show everyone practically insisted I signed on. I don’t think I heard anything other than praise that thats pretty damn impressive. From the occassional tweet or plurk I can see I’ll run into a few interstate web people there too.

Wednesday - Day off. I think I’ll go to the aquarium. No, really. I’m interested. However, anyone around with nothing to do, DM me via twitter and we’ll grab a coffee and or delicious beer.

Thursday and Friday will be the most packed out and awse days with the conference and meetups. I won’t go into everything specifically because, well, even though the program is out I haven’t decided on exactly what I will be seeing yet. There is just that much on that I think I’ll be making last minute decisions.

I actually leave late Sunday afternoon and haven’t planned anything at all. I haven’t really had a cruisy weekend for a while so I figure if I can do it in a different state, so be it. Perth peeps are flying out at random times so I havent bothered to plan much for the weekend other than wander around and take it easy. Luckily Perthites have a long weekend for…. something…. so plenty of recovery time after what will be a bitchin week.

Comments (1)

Drunken Ramblings

Okay, I’m kiiiiiinda sure this is the first time I’ve blogged when drunk. When I mean first time, I mean, I’m sure I have, I just cant remember at this exact point in time, and when I mean kinda, I mean quite. I’ve got a few things to look forward to at the moment, at about this time in 2 weeks I’ll hopefully be crashing in my hotel room at the Kirk after a kickass night in Sydney. That’s right, I’m off to Web Directions till Sunday at about 5:30pm. I went to Web Directions last year and had an amazing time, between the workshops, conference and Webjam, I quickly decided I had to go back this year. I’m also really looking forward to meeting a few people I’ve met via twitter since then. As much as it crashes and fails, I have met heaps of people I talk to a lot and will definitely make an effort to catch up with “IRL” at AussieTub after this year’s Webjam.

I’ve been to two Webjam’s now and both have been utterly inspiring nights. Seeing what some people do in their spare time is just nuts and the passion and creativity of the entrants is just awesome. Unfortunately, since I spend most of my spare time drinking or fighting, the last thing that co-operates in my time out is my brain. This year I’m looking forward to quite a few things, which I will avoid naming in case I miss something, and one year I’ll attempt to enter something myself. I don’t know what I could enter, but I am friends with some very driven and creative people so I might be able to scam something
Being a proud Carlton fan, I haven’t really had a lot to look forward to in September for a while, but conferences are probably the coolest thing I’ll do this year. And of course, September isn’t the end, there happens to be a freakin’ awse web conference in Perth in November. Kickass conference in my own stomping ground? Hell yeah.

Comments (6)

See Al strum. Strum Al, strum.

For whatever reason, a while ago, I decided I wanted to learn to play flamenco guitar. So far I haven’t exactly done well, but I decided to record a little clip now and then of my playing. I recorded a clip after playing for about 4 hours just to get a base that I can look back at from time to time, to remind myself that I might be improving. From here, I played every day for 4 weeks, and although I still wasn’t great, the improvement was there(kinda).

It’s now been another 2 months and unfortunately I couldn’t keep the ‘once a day’ practice, but I am still really enjoying any time I get to play. Coming from a hard rock/heavy metal guitar background it’s a huge change of pace and hard to get my head around. They are both aggressive styles of music but flamenco focuses a lot more on right hand strumming techniques rather than speed picking or solos. It’s also quite percussive in that the strength of the strum and tapping of the guitar body drastically changes the sound and feel of the chord or note.

Being the kind of person I am, I often get too distracted and do too much to spend time with lessons, so I have been learning online. This is a bit hard because obviously, I can’t tell if my technique is awful and I might be doing something weird, but making flamenco guitar ‘your own’ is a big part of playing. I could play things exactly as the music or instructor shows, but I’m not here for that, its more based on what you like, what you throw in and how you want to play it. Having said that, with such a limited skill set, my stuff isnt exactly unique, but there are a lot of my trademark bum notes everywhere. For anyone interested, my 2 ‘teachers’ so far are Sal Bonavita(whom I learnt a basic rumba pattern and got through the first steps) and Charles Sedlak(whose DVD I am learning off).

Having said that, here is the thing I’m working on now. Its Mr Sedlak’s take on the Malaguena:

Also, for anyone thinking, “That’s it, Al’s gone soft”, shaddap.

Comments (6)

Background Image on Table Rows Repeating

As per the conditions of my parole, I thought I’d write my quarterly Web-based blog post on something I found the other day. I was working on a tables(don’t cringe or vomit, they can be done properly and be used properly) and to make it look nice, there was a background image on the header. Working in Firefox for the majority of the time, I didn’t notice anything wrong with the table. The background image was on the table row so it would sit across the top of the table and I didn’t have a care in the world. I then loaded it up in IE7 and my eye started getting that twitch it gets when something isn’t rendering right, most developers will know what I’m talking about here.

The CSS I used was here:

table {
width:384px;border:1px solid #efefef;
}
th, td {
width:128px;
}
tr.headrow {
background:url(/images/southpark.gif) top left no-repeat;
}
tr.headrow th {
height:140px;
}
tr.light {
background-color:#eeeeee;
}
tr.dark {
background-color:#cdcdcd;
}

and the HTML for the table:

<tr class='headrow'><th>South</th><th>Park</th><th>Al</th></tr>
<tr class='light'><td>Light</td><td>Row</td><td>Here</td></tr>
<tr class='dark'><td>Dark</td><td>Row</td><td>Here</td></tr>


In IE7 it looks like this:

Pretty annoying eh? I thought so too. However, the fix is surprisingly simple.


table {
width:384px;border:1px solid #efefef;position:relative;
}
tr.headrow {
background:url(southpark.gif) top left no-repeat;position:relative;
}
tr.headrow th {
height:140px;background-image:none;
}


All I did was position the tr with background as relative, and remove the repeating image on the th. From what I gather, IE doesnt care about the TR and puts the background on the TH’s instead. I’m not entiiiirely sure how positioning the row relatively allows the background to be put on, but you just have to turn off the image on the TH’s afterwards it you won’t see the difference. I haven’t tested this in all browsers, so if anyone doesn’t see it working somewhere, feel free to let me know. Note, the extra position:relative on here is to sit it properly in my own blog, so it’s not really required.

Here is the coded table:

So there you go, may your designers go forth and round their corners. I swear one day I’ll be able to write a presentation on all the IE problems that can be solved by positioning things relatively.

Comments (1)

Say it isn’t Snow

I don’t know why, but everything seems to remind me of an episode of the Simpsons in some way:

Is it just me?

Comments (1)

Because I like weird things - 27 Day Trial

For a few months, a friend of mine from Kung Fu has been researching the benefits of Royal Jelly on earthlings. After looking around for a while she decided it was worth a try and tracked down a months supply. Unfortunately, 3 days into the trial, she decided the taste was a bit too much to handle and stopped taking it. A few days later I decided to grab the rest off her and give it a go myself.

I was quietly confident that I could get through the 27 days because I’ve only found 1 food that I haven’t been able to stomach in my life. This might not seem impressive, but I make it a rule to try anything once(obviously the condition is I have to know it won’t kill me). So far this has helped me in trying all sorts of weird things, some not reeeeeally fit for human consumption. However, I’m 3 days in and this has got to be some of the worst tasting stuff I have had.

However, I’m going to keep going through with this. I didn’t really know this stuff existed outside Futurama, but what harm could it do? Other than the rare chance of violent allergic reaction and possible fatality it will be interesting to see how I feel at the end. Until then, my ovaries have never felt stronger.