Tea Demonstration at the BBG Oct. 1

Follow Me On Dribbble!

One of my lovely coworkers "drafted" me on Dribbble. I had heard about it before, but because membership is by invitation only, I hadn't really looked into it. I wish I had! IT IS AMAZING! So many talented people are putting up "shots" on a daily basis. It is very inspiring!

I cover my major projects in detail on this blog (usually when they are complete), but I plan to do detail shots while projects are WIPs on Dribbble.

Please follow me if you'd like to see what I'm working on. :)

Using jQuery to fade in your webpage progressively

Okay, so something I want to do, now that I'm able to really focus on expanding my web knowledge, is post some things I learn along the way. Hopefully they'll be helpful to someone.

So, I was trying to find a way to fade in the sections of my website, one after the other. A simple query fade of the background took everything from white to visible, which I didn't like. Fading in body items one by one made the page expand while they were loading - also not a great effect.

This is what I came up with. The page holds the background and will progressively fade in any element you wish, one by one.

Demo Page - See the effect

<script>
$(document).ready(function() {
function fadePage() {
// Target the tag(s) you want to effect with the fade
var fadingTag = "div";
 
var delay = 0;  // Initialize delay - Should start at 0
var delayStagger = 600;  // Delay stagger - Time between elements fading in

// Find out how many elements you need to hide   
var fadingNum = document.getElementsByTagName(fadingTag).length;
    
// Get and fix the overall document height before it disappears (which will happen when elements are hidden)
var pageHeight = $(document).height() + "px";
$("body").css("height", pageHeight);
    
// Hide all targeted tag(s)
$(fadingTag).css("display", "none");
    
// Fade each targeted tag in, one by one
for (var i = 0; i < fadingNum; i++){   
$($(fadingTag).get(i)).delay(delay).fadeIn(delayStagger);   
delay += 350; 
}
}

fadePage();

});
</script> 

All you have to do is add the name of your tag to the "fadingTag" variable. In this demo, I have all divs fading in, one by one. Targeting classes/ids/etc is also VERY EASY with jQuery. Some examples:

// Target divs with class of "test"
var fadingTag = "div.test";

// Target all elements with a class of "test"
var fadingTag = ".test";

// Target all images
var fadingTag = "img";

// Target all images inside a paragraph
var fadingTag = "p img";

jQuery is just endlessly flexible.

If you want to adjust the timing, just change the delayStagger variable.

Did you find this useful? Please add your comments. :)

Now Launching: Kani Web

Well, I took it upon myself this weekend to work like a madwoman and create a new site and brand. I dub thee: KaniWeb!


I mean, what else am I going to do with my weekend? RELAX? Pfft.

This is my first HTML5 site with some CSS3 goodies thrown in. I still have a lot of things I need/want to do with it, but at least the bare bones site is now live -- after 1.5 days' work! I feel like I am getting pretty quick. :)

I chose the name "Kani" after much deliberation. My name is LONG [see: current name of this blog], so it's hard to make a brand of it. My name by itself doesn't really convey a theme to build a site around. So I started taking two letters from my first and last name, seeing what I could get; "Kani" ("crab" in Japanese) seemed like it had potential for some cuteness. So now I have a cute little mascot, woohoo! Also important - I don't see any other web designers with this name. So yay!

Next steps:

• IE7 debugging - looks like 100% crap in this browser. sigh.
• IE6 debugging... maybe? Is it still worth supporting this browser...? I mean, when Microsoft itself makes a "Death to IE6" page... I'll probably just have a script that tells people to get with the program and d/l a new browser
• favicon - the cherry on top
• Possible CSS3 parallax background animation - maybe some moving seaweed at the bottom?
• Install a lightbox for portfolio items
• Do a hard launch of the Facebook page
• Maybe make a KaniWeb linked in profile?
• Do something cool with my boring footer
• Style this blog to match the new site :)
• Get a more descriptive domain
  

Japan: Day One, Part One - A Fourteen-Hour Flight

The night before, I couldn't sleep. Running on pure adrenaline, I was busy making sure everything was packed and ready to go and just so. Our pets had already been boarded, and the apartment felt awfully quiet.

My boss was kind enough to pick us up before the sun rose in order to take us to the Birmingham airport for our 6:35 flight. I remember thinking, "I can just sleep on the plane..."

Total time it took us to get through the security at BHM and to our terminal at 5:30 on a Friday morning? 15 minutes. Pretty cool.

We had a layover in Houston, and while flying over I recognized the area where I used to live, with a little nostalgia. The nostalgia ended inside the airport. IAH sucks completely. Crowded and terrible, TERRIBLE food. Like they want to make everyone as miserable as possible. But here is where we boarded the giant Sky Cow that would fly over the Pacific and to Japan! I had been nervous that I would somehow collapse in a pile of exhaustion from the lack of sleep, but I was still wired with adrenaline.

So, what is a flight from Houston to Narita like? 100% pure hell. Sleep? Not possible. It seemed like the air carried some kind of death fog, and sound just isn't the same inside that cabin. Even with headphones on, everything seems a little distorted and uncomfortable. And seat space? Well obviously the coach sections of airplanes do not have a great reputation for their roominess, but I was wedged in the middle seat with my arms tucked in the whole time. How long were we on this plane? OVER FOURTEEN HOURS. Long enough to be served 3 lackluster meals.

And dehydration? It's a stark reality in that environment. Even though they brought water by quite often, my mouth was continually dry. It's like a desert in the sky. Basically, between the terrible feeling of the cabin, the lack of space, the dehydration and the unpalatable food, the whole affair seems designed to make a person feel like complete crap.

The one consolation is the very small TV screen in the back of each headrest. I got to watch FOUR movies during that flight: Iron-Jawed Angels, CJ7, Recount, and Yatteman. Well, most of Yatteman anyway. The last half hour was EXTREME turbulence. That whole thirty minutes, I really thought I might vomit (but didn't! go me!), and any motion at all (including the movie playing on the screen) heightened my feeling of absolute barfitude. So I had to cut Yatteman short.

After this formative experience in international travel (a first for me), we stepped off the plane and were in JAPAN. I capitalize it because, being on the other side of the world and all, it sometimes sort of feels like this unattainable, golden fantasy place. I was EXCITED. But no one else around me seemed to be skipping down the halls or anything, so I tried to contain it.

The airport was very easy to get around. There are lots of friendly, large, multi-lingual signs to direct people. The security check did not make us feel like dirty criminals - I didn't even get patted down. It only took us 30 minutes to make our way through, taking out cash, exchanging cash, and buying Narita Express passes along the way. We also got the Suica card, which I highly recommend.

The Narita Express is the most lovely, comfortable train ever. It seemed like a frickin mansion compared to the airplane. We could spread out and watch all the cute little houses zoom by outside as we were whisked towards Tokyo. The sun was heavy and large, an orange ball of flame that I just couldn't quite capture on camera. Granted, I had brought a crappy little point-and-shoot camera for convenience, so it had some limitations. Next time we go - DSLR all the way. A cool thing about the Narita Express - all the seats flip around. So once they've arrived at Tokyo Station, attendants come and turn all the seats to face the other direction, and they're ready to head back to the airport!

Let me just pause and say that when you fly in to "Tokyo," you don't really fly in to Tokyo. It's not like Kill Bill. You fly in to Narita, which is 30-45 minutes by train to the NE. It's not dramatic. It's rather quaint, actually. And so you must take a train like the Narita Express to actually get to that most amazing city that is Tokyo.

The N'EX drops you off at Tokyo Station, which has many levels of tracks. If pulling up to Tokyo Station in the N'EX was actually a scene in Final Fantasy, it would be like arriving in Lindblum in FFIX.

So Tokyo Station is basically a monster. It is the busiest station in Japan in terms of trains per day. Walking between tracks can take a longggg time. It's mostly just endless white and gray corridors, sometimes with walking sidewalks, sometimes with interesting ads. Between the entrances to the tracks are clusters of little shops though, so that's cool right? Well, the constant crowded stream of people means that if you stop to gaze at the shops, you are holding shit up. These people are busy. They have places to go. They are moving at breakneck speed. You are IN THE WAY. So I don't think we really felt comfortable taking a leisurely pace to explore. We were caught up in the herd.

Caught in the flow, we made our way to the Hibiya Line subway. International flight? Check. Train ride? Check? Subway ride? Check. These were all firsts for me. And the subways in Tokyo are the COOLEST. I was pretty intimidated by the tangle of subway lines on the map, which looked like a pile of rainbow spaghetti. But they're actually very easy to get used to, once you're there. And they bring you to anywhere in Tokyo unbelievably quickly. We had JR passes and so could ride the JR loop around the city for free, but we often found ourselves taking the subway because it's just SO convenient.

The Hibiya line took us mere blocks from our hotel, less than a minute of walking and we were there. In Part Two, I'll talk about our excellent stay at the Hotel Sardonyx and our first night in Tokyo, which we spent as any self-respecting nerds would do - in Akihabara.

Big Changes Afoot

Well, I've had a big life-change recently: New job, new position. Instead of all-purpose head of an art department, I am now a web developer (YAY!) at a creative agency. I am EXTREMELY excited to be coding and scripting and also playing ping pong during the day.

But that means these will be my last screen-printing design images (unless I get some t-shirt design work while freelancing).

First up, an update of that "King" shirt. Printed in gold metallic ink, it showed me that halftones can actually be quite excellent, when used in small areas for shading.

I think this is the first time I've seen everyone at the office like, wow, cool halftone! instead of sad groans. Also, look at the great detail our screen-printer was able to hold!

Second-up, my last 2 designs from my old job:

It seemed like there were more creative jobs than usual right at the end (as opposed to just "put my logo on X product").

So third: FREELANCE. I have been up to my ears in freelance work. I have a 3-site project for a legal client going on now and other jobs lined up through to November. The wonderful thing is that now my work and my freelance are complementing each other, and I am learning more about web development than ever before. HTML5, CSS3, WAI-ARAI, etc. And I am DYING to work on that placeholder portfolio site I have right now. Weekend project: Joomla 1.6 from-scratch template.

Fourth, and final: I have resumed my Japanese kanji studies with a passion, and I've finally hit the 1000 mark! Soo... only 1000 more until I know most of the common ones...? ^_^;;

On that note, I thought I would kick off a series of travelogues from our trip to Japan... yeah, the ones I promised a couple YEARS ago... sorry about that.

'It's Good To Be King' Shirt

Sorry for the lack of updates; I've been busy, with many things in progress, but not a lot of complete designs. Here is a quick design I created for a bit of a prank shirt we are printing, in metallic gold ink:

I have one large freelance project in the works, one small freelance project, and a few in the queue. It's really taken off, and I feel quite lucky to have so much work.

I have also updated my main portfolio site at katmcgo.com. You may notice it morphing a bit in the coming weeks. I have installed the Gantry platform to a Joomla 1.6 base (yep, made the leap from 1.5, and it's been excellent so far) and am still playing around with it. I wish I had more time to work on it, but freelance comes first. :)

In spite of it all, the calm of the tea room

I had my first tea ceremony lesson in nearly 2 months yesterday, and was quite excited to be learning the summer temae. On my way there however (and I was almost there!), I was quite abruptly rear-ended while waiting to merge into on-coming traffic. Luckily, the damage was minimal, but the rest of my journey to the tea room was spent shaking and crying.

I had been so mentally ready for this lesson, just to have my composure completely broken right beforehand. It was rather distressing, and I was concerned that things would go very poorly.

However, once I got into the space of the tea room, my mindset quickly changed. I couldn't even hold my worries in my head. There was so much to soak in, and to learn, I simply didn't have room for those worries and negative thoughts. I think my focus was better than it has ever been. I thought that tea was the last thing I needed, but at that moment, it was the best thing for me.

Dear Epson, Please Step Up Your Game

So we got a new Epson printer recently at my work. It is solely to be used for transparency positives for screen-printing - the Epson Stylus 1400. And really, it is lovely, no complaints there.

Well, now we're apparently on their solicitation list, and we received an advertisement from them today.
Wow, stock background + stock a-rainbow-just-exploded-in-here vector + WOWUGLY font. Sorry about the glare, need another taste? The same font is used on the interior panels!

I guess that font is supposed to be "creative"? It is just so terrible... You can do better, Epson (or design company contracted by Epson)!

And another fail - the impossibly small QR codes on Epson ink cartridges for this printer. Smaller than a fingernail... I spent nearly 10 minutes trying to get my phone to "capture" the code before giving up.

Donation Shirts for Pratt City Tornado Victims

Through my company, we will be donating shirts to those in Pratt City who lost everything. Hopefully some fresh, clean t-shirts will provide a bit of relief to them. I made the below design, which we'll be printing on the shirts.

Birmingham Botanical Gardens Sakura Festival

I realize now that I never posted about the Sakura Festival back in March. It was quite lovely. We got there at 10am, and the morning air was cool and refreshing. We had already spent a day cleaning previously, so there was a manageable amount of preparation to do. I was only able to snap a few photos, as I was extremely busy in the tea house all day (10am - 5pm)!

Something really wonderful is all of the friends I was able to see throughout the day, although I was only able to visit with each of them briefly. We ended up serving about 100 bowls of tea throughout the day and performed 2 demonstrations. There were times when the teahouse was absolutely choked with visitors, and it grew quite hot as the day progressed, but we all worked very diligently. Our sensei had prepared boxes and boxes of sakura mochi and other wagashi (wet sweets). They were beautiful and delicious, but quite unfamiliar to most of the visitors. Some of the children made funny faces when presented with them. It was charming to see the change of expression when they realized that, "Hey, this is good!" Hopefully they learned a good lesson about giving new food a try (one that I myself have only recently learned).


I was quite nervous about the tea demonstrations. I had a particular burning passion to do well, as I had invited a lot of people and wanted to show them the beauty of tea ceremony. WELL, the president of our club was explaining what was happening during each presentation, and she is such an engaging speaker. My mind kept wandering over to what she was saying and away from the task at hand. I forgot one of my lines the first time (O Shimai Kudasai - please end the ceremony -- pretty important!), and poor Josh, who was preparing the tea, was left draining the kensui for a prolonged amount of time. Whoops! >_< The second time I was determined to do better, and did not make any grievous errors. My legs did fall asleep both times though - perhaps because I was so tense? I had to literally position the flats of my feet on the floor with my hands to exit the room the first time, as I had no feeling in them whatsoever. The second time I was a little better prepared. Since I was Shoukyaku/first guest, I had a bit of time after drinking my bowl of tea to relax. I shifted my legs out to my left to let some blood flow back into them, then drew them back underneath me after a few minutes. My sensei noticed this (!) and told me I did it very gracefully and discreetly. It is a compliment I dearly treasure.


In her infinite kindness and thoughtfulness, Tamura-san had brought food and drinks for us, and served us lunch with a spicy tea and late afternoon snacks. This was an absolute highlight of the day. Everything was SO DELICIOUS. The onigiri had some sort of little miniature potatoes in it -- I've never had such good onigiri before. We were all quite exhausted, and it was very nice to sit down with everyone in the mizuya for a break.

This was a very special experience for me. It was only my second time in the Toshin-an, and although I know I made mistakes, I learned a LOT from my day spent serving the guests who came. I can only hope that as a beginner, I did not get in the way too much. ;)