HTML

As stated above, this layout required that each product column be spit out in one big list. To achieve this zigzag effect, the first list item of every 26 items must be floated to the right.

<ul class="prodlist">
    <!--List #1 Large/Float Right-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #2~13 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #14 Large/Float Left-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #15~26 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
    <!--List #27 Large/Float Right-->
    <li><a href="#"><img src="lrg.jpg" alt="" /></a></li>
    <!--List #28~39 Small/Float Left-->
    <li><a href="#"><img src="sm.jpg" alt="" /></a></li>
    ...
</ul>

CSS

Style the columns using a list and take note of the last line of CSS using :nth-child(N). To read further on how the :nth-child(N) works, take a look at Chris Coyier’s article.

ul.prodlist {
	margin: 0; padding: 0;
	list-style: none;
}
ul.prodlist li {
	margin: 10px; padding: 0;
	float: left;
}
ul.prodlist li img {float: left;}
ul.prodlist li:nth-child(26n+1) {float: right;}

Browser Support?

Almost all modern browsers support :nth-child(N) except our red headed step child Internet Explorer. To cater for IE, we can write a quick line of jQuery.

jQuery – IE Support

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.

Initial Step – Call the jQuery file

You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. All we do now is add a float: right; to the :nth-child(26n+1).

$(document).ready(function() {
	$('ul.prodlist li:nth-child(26n 1)').css({'float' : 'right'});
});

Conclusion

I decided to call this post advanced columns since it was out of the norm for me to style columns this way, but as you can see the technique of achieving this effect was quite simple. I also thought this was a good example of how to use the :nth-child(N) in a real life example, I hope you can take something from this tutorial and learn to use pseudo-selectors for your future projects. Props to the design/dev team at Johnny Cupcakes for coming up with a complex and unique layout.

Why the Redesign?

I try to keep a tradition of redesigning my site every year to test my skills and also to look back at my progress. Another reason for the redesign was to fix some usability issues as well as re-organizing my categories and posts. I felt some posts were hard to find and the categories were getting a bit mixed up. This redesign was way over due and I’m happy I’ve finally finished it off so I can move on with my other projects.

The Color Scheme

The main reason why I chose this color scheme was to tie Design Bombs back into my personal website. I wanted to have my blog and the gallery side by side, and having similar color schemes and having the gas mask mascot seemed to tie things into place.

The Blog

• Blog Top Navigation / Sub categories

  
  I reorganized the top navigation so you can easily find the articles you are looking for. I also created a Beginners and Intermediate section for those who are trying to filter tutorials by their learning levels.

• Side Column – Design Bomb Gallery + Resources

  I have been wanting to integrate some good finds on Design Bombs on the site, so now you can keep up to date with the latest and greatest design entries as well as the resources.

• Full Archives

  I’m not sure why I never had this page but now that I have a decent amount of articles, it was a good time to list them for those who wanted to quickly browse.

• RSS Subscriptions (All posts vs Tutorials only)

  
  You can now subscribe in three ways: All feeds, tutorials only or by email.

• Sticky Tool Box & Switch Article View

  
  In the post level pages (like this page for example), I added a sticky tool box on the left side so you can easily access them as you read the article.

  Since the site is dark, I wanted the users to still be able to have a choice of reading text on a white background. Reading long articles on a dark background can be straining on the eyes, so now you have a choice on how you can view each post.

Specs

This site was my first attempt at HTML5. I had a lot of fun coding it and I also learned some great things about the new features and benefits. One of my favorite places to research about HTML5 was www.HTML5Doctor.com. It was an excellent source and they do a great job breaking it down. Some CSS3 were also sprinkled on top for those with modern browsers.

I stopped supporting IE6 (if you are a regular visitor and still on IE6, please upgrade!). Knowing that 2% of my visitors were IE6, I felt it was now time to lay this browser to rest. Good bye ol’ friend…

Big thanks goes out to Jeff Star for all the great WordPress tutorials on www.perishablepress.com. I was on his site many times researching various functions and custom hacks.

Also thanks to Rogie at Komodo Media, Nick at Icon Dock, Mark at famfamfam, and Yusuke Kamiyamane for their beautiful icons.

A New Direction

As I was redesigning this site, I tried to view this as if I was the client. I felt the previous site didn’t really show my true personality and didn’t represent who I really was. I would like to switch gears and make this more of a personal blog (on top of the regular tutorials of course). I won’t bombard you with personal gibberish day after day, but I am planning on sharing something I find inspiring or interesting once a week (maybe on Fridays).

Critiques, Comments, & Feedback

I am always open to constructive criticism and feedback. If you have any, please don’t hold back!

Starting from the Los Angeles airport we flew to Seoul Korea (13 hours + 5 hour layover), then to Cebu Philippines (5 hours), pretty much the entire day of traveling.

The City

What shocked me the most was the large beautiful shopping centers/plazas on one block and shacks on the other. It was a diverse combination of the poor (referred as “squatters” by the locals) and the rich.

Traffic there was pretty wild as well; everything on a first come first serve basis (no such thing as the Right-of-way), traffic lights and signs didn’t seem to matter as we drove through the city. The convenient thing was the fact that most places were only a few minutes away and the taxis there were very cheap.

We stayed at a hotel across the street from a big indoor/outdoor shopping center called “Ayala” and it was probably one of the nicest malls I have ever been to. Not too far from where we stayed is a spot called “IT Park” where it got its name from all the call centers that are located there. Call centers are one of the fastest growing job markets in Cebu, and the restaurants and bars there are open 24/7 to cater mainly for the call center workers.

A friend also took us to a local skateboarding/BMXing practice spot/park where I got to play a game of horse (S.K.A.T.E) with the locals. There were also a group of kids who were practicing backflips in a pile of grass. It was definitely a cool vibe there.

The Night Life

The entire vacation blew by pretty quickly with each night having bar/club hopping on the agenda. The bars and clubs in Cebu do not close at any given time like here in Los Angeles, and people party till the sun comes up. Drinks were fairly cheap and house music was blaring everywhere you went. I was told that January was a big party month in Cebu since a lot of people are in town for Sinulog (A huge annual festival with over 8 Million people attending).

Each night (around 5am) somehow ended with us cruising to the local street food stand and getting our grub on. Each spot we hit up was in some sort of alley way or street corner but the food was ridiculously on point. From grilled chicken/pork/beef/fish to shumai, noodles, etc, these guys served it up proper.

Island Hopping

By far one of my most memorable days was the day we went island hopping. We started in Maribago Beach where we had a private boat where they took us to three islands.

Snorkeling felt like I was in Hawaii, the water was clear and there were colorful fish all around us.

We later stopped at a floating restaurant where we picked our fresh fish, lobster, crab, clam, and had them cook it on the spot. It was delicious!


Our last stop was at Pandanon Island (a sandbar beach); we were the only tourists on the island for that afternoon. We kayaked, swam, and ate some lechon (roasted pig) which was awesome.

The Grand Finale – Sinulog

As the days got closer and closer to the day of Sinulog, the city seemed to get crazier and crazier. Sinulog this year reached about 8 million people from around the world. This wild street parade starts in the afternoon and lasts until early morning, with people drinking, eating, dancing, and blasting music on every block. I would compare this as almost like a riot, but all in good vibes. Face paint was smeared everywhere from friends and strangers and we roamed the jam packed streets.

Detox and Some Relaxation – Shangri-la Resort

After all of the madness that went down in the first 2 weeks, the last few days were reserved for relaxation at the Shangri-la resort. The beach was crystal clear and it was the perfect setting to just kick back and relax.

Reflecting Back…

Being labeled as a Third World Country, I flew down there not really knowing what to expect. What really struck me the most was how diverse Cebu is. From the beautiful beaches to the city life it was all an amazing experience and I loved every moment of it. If anyone is looking to vacation anytime soon, I would highly recommend checking out Cebu Philippines!

Taking a Dive into the Deep End

Every year has its ups and downs, but 2010 was by far the toughest year for me. There were a few major f***d up incidents that went down in 2010, some I can’t mention since its a bit personal but one of them was my mother being diagnosed with stage 4b breast cancer. Just when I thought things can’t get any worse, the news of my mom really drilled me to the ground. There were many complications, we were unsure of how far the cancer had grown, many calls with multiple doctors, waiting for results, thinking about survival rates, etc it was an incredibly stressful time (and still is). Dealing with multiple issues from various angles, I had a really rough time balancing everything in my life. The obvious thing was to back off from work, and really attend to what was important. My mom is now on her second treatment of chemo (the first type was not very effective), and will be going through radiation in a couple of months.

Since then I’ve come to a realization of how much family really means to me. I often get lost in my personal life, work, friends, and sometimes I start to take things for granted. My goal now is to enjoy family and spend quality time with people that I love. I feel most of us designers/developers are so involved in our work lifestyle, that we forget we are still humans. Work hard but never let it become your life, this is something that I’ve been working hard to balance. One of my new years resolution is to slow it down and really find the right balance with work, family, and take some time for my self.

Here is a photo of my mom and dad, please keep her in your prayers.

Now that the bad news is out of the bag, here are some good news.

The Transition

After graduating college, my first professional design job was at 4 Wheel Parts (a large e-Commerce retailer specializing in off road products). 4 Wheel Parts had been my training ground, I learned everything from Design to SEO, and even writing my first line of CSS there. After serving them for about 4 years, I was ready to move forward to my next big challenge. The thought of going full force with freelance did cross my mind, but I’ve always loved working in a team environment and surrounding myself with people that are smarter.

I’ve taught myself for the past 5 years and was incredibly hungry to be surrounded and schooled by the top designers and developers in my area. I’ve realized that to get the schooling and creative environment that I was seeking, I had to join a creative agency. I applied to many agencies in Los Angeles, denied by some, interviewed with some, and even turned down some. It was a truly humbling experience and I got to meet and interview with some very talented people on the way. After a long and patient journey, I finally found myself at Soap Creative.

Soap Creative

Soap Creative is originally based in Sydney Australia but has a Los Angeles team here in Culver City. The talent here is very diverse, the team is well balanced with concept artists, 3-D motion graphic designers, developers, vector illustrators, Flash devs and more. Although Soap is well known for its online arcades and interactive flash sites, the clients are seeking more accessible sites these days so I feel I jumped on board at the right time to contribute my design and CSS skills. I am proud to be here and look forward to learning tons from the creatives here at soap!

Exploring Other Creative Exercises

To get through the stressful times, I don’t know what I would do without my trusty skateboard and good music to dance to. Skateboarding and popping has been my way to release the stress and it has helped me in many ways both physically and mentally. After quitting skateboarding for about 8 years, I picked it up again this year and I’ve been enjoying relearning old tricks and learning new ones as well. Here is a quick video of me skating at a local high school.

On the dance tip, my good buddy Madd Chadd from Step up 3D had recruited me to take part in a street dance webisode called “The LXD” which showcases some of the best bboys and poppers in the states. I was in the last episode of the second season called “The Good, the Bad and the Ra, Part 2“. Enjoy my butt tight jeans and bandit outfit lol.

Lastly, here is a short segment I did with some local dancers for Myka9′s latest music video “I Must Cross”.

and Finally… I Quit Smoking

I picked up my first cigarette back when I was about 15 or so. I was a social smoker up to about end of highschool, then started smoking regularly. I finally put an end to it last month and hope to never return to it again!

Thanks for All of the Support

I’m very blessed to have all my friends and readers support me during tough times. There were many who kept in touch and checked on how I was doing, I really appreciate it and it really did make a big difference. To all my readers who still stuck around after 3 months of dead silence, I apologize for that and I am looking forward to writing some new tutorials very soon.

Thank you always, I hope you all have a great year ahead of you. Goodbye 2010, hello 2011

I am developing in HTML5, a few CSS3 tricks, and a mixture of my jQuery widgets and features. I will be writing a full review of my process once I am complete. Stay tuned, thank you for your patience!

Home

Blog

Portfolio

Soh Went Missin. WTH happened?

I’ve been battling “Burnout” for a while, and it finally caught up to me around December. Juggling a day job, freelance, personal/guest blog, family/friends, and holidays has always been a challenge for me and this is something I would like to improve on this year. I know there are many others in the same shoes, and for those who are handling business while maintaining a healthy balance between work and life, I applaud you and give you the utmost respect. If you have any advice on how to better handle this, I would love to hear about them

What Have I been Working On Recently?

I recently met DStyles who is a famous turntablist (Beat Junkies/Invisibl Skratch Piklz) at a weekly underground hiphop/electronica spot here in Los Angeles. Dstyles works for Vestax and they were in need of a website for their new product “Spin” which is a mixer strictly for the Mac. With a tight deadline of 3 weeks, I was able to pull this project off for them. I’ll have an update later when the site is live.

I also decided to redesign my portfolio and started messing around with ideas here and there. The main reason for my redesign was to first test how far I’ve come since my last redesign, but also to make my tutorials easier to find. This may take me a little while longer since clients always come first, but its something that I would like to accomplish within the next few months. Updates coming soon!

Whats Up Now?

I’m going on vacation to Cebu City, Philippines with my wife starting today! Its a vacation long overdue, and I am planning to enjoy every moment of it. I will be gone for 2 1/2 weeks, when I return, I will back in action with new tutorials and projects. Thank you for your patience and again I apologize about the silent moments on this blog. This is my time to decompress, reorganize my thoughts, set goals for 2010, and hopefully find new inspirations. I hope to come back refreshed and ready to take on the new year. If you guys are interested, I will be happy to post some pictures of my adventure.

Whats Coming up?

I have another exciting project lined up around Feb/March. I would like to keep it on the down low for now but will keep you updated. I also wrote a tutorial for .Net Magazine on a portfolio image slider which should be out this month (Issue #197). I will be releasing a tutorial to follow up with that piece very soon.

Final Thoughts

All in all, I hope my burnout will pass, and I will be back in the game shortly. 2009 was a great year and I learned a ton from the design/dev community. Big thanks goes out to Steven Snell for bringing me up when I was just starting to blog, Chris Coyier for his fantastic tutorials and all the lessons I have learned over the years, Vitaly Friedman for inviting me to write for SM and being so patient with my schedule, and to all my readers, I appreciate all of the support, feedback, and patience. I wish you all a healthy and successful 2010!! Its time to make moves, lets make it happen!

What I Learned from Blogging

My director at my day job always told me that it’s important to give back to the community. I’ve had a great year being able to do just that, and in return I’ve had the opportunity to get to know some brilliant and talented people. I ended up learning more about the technique I was sharing from reader feedback and comments, and most importantly it made me overcome my fear of writing.

I was never the type to write, I actually hated it and avoided it at all costs. Although I still make stupid spelling/grammar errors, I am now able to communicate my thoughts much easier than ever before. Not only did it help my verbal and writing skills, but it has also helped me effectively teach people and allowed me to understand usability in a new light. Good communication is good usability (whether its written or demonstrated graphically), I never thought of it this way till now.

For those who hate or fear writing the way I did, its never too late to change. Get your blog started and see where it takes you. When you write about things you love, its much more enjoyable and your words will flow more naturally. Communication is key in dealing with clients and working in a team, blogging may be your gateway to overcome those fears.

Thank You

To all of those who have supported me, I truly appreciate your support and encouragement. Thank you for all of the comments, feedback, suggestions, calling out my fails, etc. this blog would not be where it’s at without you. Looking forward to another great year, feel free to catch me anytime!

Post Highlights

Just in case you missed some of my older posts here are some highlights:

CSS

• Sexy Ordered Lists with CSS
• Markup Hierarchy – Advantages in SEO
• CSS On-Hover Image Captions
• 5 Step Style Sheet Weight Loss Program
• Fixed Footer Backgrounds with CSS
• Achieving Double Background Effect with CSS
• Beginner’s Checklist Before Debugging CSS
• CSS Vertical Navigation with Teaser
• Using Print Stylesheets Effectively
• Debugging CSS – The Plan of Attack
• Liquid + Fixed Two Column Lists with CSS
• 5 Ways to Spice up Your Images with CSS

jQuery

• Simple Page Peel Effect with jQuery & CSS
• Smart Columns w/ CSS & jQuery
• Simple Tabs w/ CSS & jQuery
• Animated Navigation with CSS & jQuery
• Fancy Thumbnail Hover Effect w/ jQuery
• Simple Toggle with CSS & jQuery
• Side Navigation Tooltip / Popup Bubble

Thoughts on Web Design

• Do You Eat and Run?
• So You’ve Mastered CSS. What’s Next?
• Passion – It’s What Drives Your Success
• Bullet Proof Design Procedure

This blog was luckily backed up once a week with this awesome plugin, but unfortunately DesignBombs.com was not. I had to enter all its entries from the ground up. If this site went down completely without a backup I really don’t know if I would have had the patience to write all of my tutorial all over again. Please let my mistake and foolishness be a lesson to anyone out there that is not in a routine backing up!

WordPress Backup Plugins

If you don’t have a backup system yet, I highly suggest you set something up. If you are on WordPress like me, here are two that people are highly recommending.

• WP-DBManager
• WP-DB-Backup

Where am I hosted Now?

I asked a couple people I really trust with large communities, and they had pointed me to a couple good hosting companies to look into. I decided to run with Media Temple, and am now on their Dedicated-Virtual setup.

Other recent articles related to backing up

• Belts and Suspenders: Backing Up Your Data
• 8 Useful WordPress SQL Hacks
• Ultimate Round-Up For Version Control with Subversion
• 10 Ways to Automatically & Manually Backup MySQL Database
• WordPress Backups Explained

Although Design Bombs kind of unravelled out of no where, it was a cool little personal project and I had a lot of fun designing and building it. I know there are a lot CSS Galleries out there already, hope there is still room for another one!

Follow me on twitter!

http://twitter.com/SohTanaka