I code websites for a living. So it’s not a surprise that I hear the question from a lot of people, “So I’m thinking about redesigning my website, what do you think of . . . ?” How people finish that question ranges from color preferences to the benefits of certain technical features. On occasion I offer my advise or my opinion if it’s something I feel strongly about, but the majority of the time my answer is, “I don’t know, have you looked at your analytics?”

Analytics, anlytics, analytics. I can’t stress it enough Personally I would never redesign a website without first studying the data.

If you aren’t familiar with analytics for a website, it’s a snippet of code that is included on your page that sends information about your users back to a source that compiles all of that data. Google Analytics is a popular provider, but there are lots of other data collecting services out there. It’s nothing invasive or private but important things like how long did a viewer stay on the site, what pages were visited most, what  keywords were used or what search engine led users to the site. It can even show data like screen dimensions, browsers or operating system of your users. All of which can be very important when considering making changes to your website.

Naturally all of us that have put up or maintain some sort of web presence feel our content is important. We all have this idea that there are people out there just waiting to read or see what we have to published. Which may indeed be the case, but what if you learned that not a single person was getting to your site? What if you discovered that every visitor you had clicked away from the site within seconds of seeing a page. That tells you something right? Something is broken. Perhaps you’re not sure if you are using space on your site properly and want to make it wider to accommodate more information,  when in truth all of your users have very narrow screens. Wouldn’t you want to know that before you change your layout?

Your web designer won’t look at the site again after she’s done designing it for you, your brother-in-law doesn’t look at or use your website regularly, in fact there is a good chance that you don’t even use your own site as much as others do. Don’t build a website for your designer, not your uncle, not me, not even for yourself. Build it to meet the needs of your customers and you can do that by getting their opinion directly from their behavior. That behavior is shown in the analytics.

Redesigning a website can do as much damage as it can good. When done properly your site will become more efficient and successful over time. You will learn the habits and preferences of your audience and adapt your presence to meet their needs for a positive reaction. If you ignore those needs and users are not finding your site useful they will tell you in how they behave.

If you are not sure if your site is gathering analytics, talk to whoever built your site and get them to add them immediately or sign up for a service like Google Analytics and follow their instructions to add them yourself. If your site does have data, get that data before you start the redesign process. Otherwise you may be in for a longer, more frustrating process that may or may not even be helping your site.

Good luck, happy redesigning.

Our family enjoys backpacking. For a recent trip we felt it was important that our 2 (nearly 3) year old son begin to carry a few of his own supplies. But we ran into a snag; it’s difficult to find a “real” backpack for a toddler. I checked online for toddler hiking backpacks but was surprised to find nothing. There are plenty of backpacks to carry a toddler in or backpacks made for toddlers to carry, but all were geared for books or school. We needed something with multiple pockets, durable and flexible if he was going to do any hiking with it.

I made a few trips to local retailers, outdoor outfitters and major department stores. Closest one I could find was a woman’s day pack at EMS, but it was a $100 and if the bag was loaded he certainly would not have been able to carry it.  I went back to the internet where I found some advice on doing it yourself.

I can’t remember the site, but the idea was buried deep in a forum on the subject: convert a camelbak into a toddler backpack. Seemed simple enough and I learned a few things about the process that I figured it may be helpful to share, in case anyone out there is doing a similar search and coming up with no results.

So here are some steps on how I made a toddler hiking and travel backpack

1. Picked up a simple Camelbak – in our department store search we found a very small Camelbak at Walmart for something like $20. The bag itself was the perfect size for a toddler, but of course the straps were designed for an adult. So we had to do some adjusting.
2. Remove water bladder - Of course he wasn’t just going to pack around a ton of water. We removed the bladder system to free up space for his clothes and gear.
3. Tighten down all the straps – Just as you’d expect I tightened the straps as far as they could go and wrapped the excess in black tape to get out of the way. But even pulled all the way tight there was too much give and not fitting right on his shoulders.
4. Relocated the front chest strap - What normally lines up with an adults chest came to about the belly of my son. The straps on the model we purchased were restricted from going further up by some stitches. We cut the stitches which then allowed us to relocate the cross-chest strap up to his actual chest level. That did a lot to add stability.
5. Use a flexible chord to tie in the shoulder straps to appropriate length – Despite tightening all of the straps and relocating them to the correct placement the shoulder straps were still simply too long. The backpack was hanging off his back and the unsecured weight was too much for him to handle or be comfortable with. I had previously purchased a tent pole replacement kit that included extra stretchable chord. It occurred to me to use the chord to tie in the excess straps. Using the hole that the water tube typically goes down I strung chord down and tied it near the chest strap. I then strung the chord back up into the backpack and down the other side, pulled tight and and tied off. Excess chord was ran just straight back into the backpack through the same hole for the water. (See pictures at the bottom)

That last step did the trick perfectly. The backpack fit snug on his back and he was then able to carry the load. The stretchable chord was the key. It allowed the bag to fit tight on his back but the straps remained very flexible. On occasion I need to take his pack off and on quickly while we travel so having the flexible straps makes that easy. On outings where my wife and I need to leave our bigger packs behind and carry a day pack, we simply untie the chord on my son’s backpack, loosen the straps and it becomes instantly available to use as a day pack for an adult.

My son really loves having his own real backpack. He feels involved and challenged and everywhere we go people compliment him on it which really makes him proud carry his own things. I still can’t believe with how many people hike and travel that no one offers a legitimate backpack option for a 2 or 3 year old.

Steps with images are provided below.

Last year I tried something a little bit different with my new years resolutions. Instead of making goals I could check off, I decided to go with a little less measurable approach. It included quite a few things that I meant to do daily  or monthly or just aimed to get better at.

Last year was a great year, we accomplished many things as a family and grew individually as well as together. Although we did accomplished many things, I didn’t find myself using my resolutions list like I have in previous years. I didn’t really go back and look at it because I knew there was nothing specific and the less I looked at it the less I thought about doing things on the list. So this year I went back to the measurable and more check-off-able approach and put together a few things I would love to accomplish this year.

• Read the New Testament
• Get to the top of each rope at the YMCA climbing gym
• Go on an international trip
• Study and take the GMAT
• Attend the Temple 12x a year
• Log at least 150 miles into my nike+
• Maintain last years savings goal & pay off the car

I enjoy posting my goals because I know wherever I am I can go back to this site and read them, I also enjoy reading other people’s goals, as they also inspire me to accomplish more in my life.

I’m excited for another year of excitement and change. We have our international trip planned, this year we will be making another excursion to Central America, this time to Costa Rica. We are also excited for the birth of our next child (we find out the gender later this week).  Our son just keeps growing, learning and always an adventure. This last Fall both my wife and I were inspired to look into the possibility for me going to business school. To follow those promptings I have made it a goal to study for and take the GMAT. It will certainly be a couple years before anything could develop from that, but taking the test will give me an idea what my options are.

So farewell 2010, it was a fantastic year only to be outdone by 2011.

I  came across this tip on a Youtube review for running a Nintendo Wii on iMac using Elgato EyeTV. But since I can’t remember what video it was and have yet to find the solution on any website or forum, I decided to repost it. Hopefully I can save someone else the couple hours it took me to solve the lagging issue with Nintendo Wii running over Elgato EyeTV for Mac.

Using  default settings there will be a couple second lag between when you wave the controller and what appears on thescreen. It’s frustrating but there is an easy fix for it:

EyeTv > Preferences > Devices > Analogue > Enable Timeshift (uncheck)

I’m surprised it isn’t documented very well on forums or tutorials.  I forgot about this last week when we formatted our hard drive and reinstalled everything. I knew there was a trick so I searched up and down the net with Google. I messed around for hours with different combination of deinterlace settings. I knew there was a trick for it and Googled up and down but couldn’t find out exactly where the setting was. So there you go, if you have a couple seconds lag on Nintendo Wii on your Mac using Elgato EyeTV, give that a try.

While I’m on the subject I have to say we absolutely love our Elgato EyeTV. We don’t have a television in our place and use our iMac for just about everything. We wanted a Nintendo Wii for a long time but didn’t want to purchase a television and all the associated costs with it. So last Christmas we picked up the Elgato EyeTV Hybrid and have loved it. We play Wii on our Mac all the time and works perfectly. We are able to access basic channels and have even recorded a few episodes of Public Television for our son to watch over and over on the iMac. The iPhone app and remote apps available for it are awesome. Something really cool about watching live television from iPhone. No need for a television and the USB device will move up with us when we upgrade our computer down the road.

Valentines Day is of course a day of showing love and appreciation for the people around you. Family is of course the closest people to me in my life. Even more than New Years, Valentines is a day of reflection for me, a day to remember all of the great memories we’ve made together and all the fun we’ve had. I put together a slideshow of 2009 with some of the highlights.

Happy Valentine’s day to my beautiful wife and baby boy. It’s been another amazing year. I can’t believe how blessed I am to have someone who supports me and pushes me to achieve and experience new things all of the time. She is my great inspiration and I know with her I can accomplish anything. I love you two so much.

It’s no secret that WordPress is being adapted to go well beyond its traditional blog functionality. In my free time I’ve been doing a lot with WP and in most cases it becomes a content management system. But for a site that isn’t a blog it’s kind of like fitting a square peg in a round hole. Pages aren’t quite pages, posts turn into special pages, tags and categories are adapted for organizing and showing data, widgets are modified to make universal yet flexible pieces on the site, and the whole thing you have to kind of “get used to”. Plugins help expand the functionality and I’ve recently started playing around with Flutter, which is proving itself to be very a powerful step in using WordPress as a content management system.

I was so excited after I learned how to use custom fields in WordPress. It gave me the chance to break up the data that a user would put into their post and place it in different portions on the web page. It did the trick, but there were issues. The data was sometimes different. In one field it would be a little text, in others it would be an image link, sometimes it was even more important than the post itself. Plus it was difficult to explain to the user or client what each custom field did and explain to them they had to make sure to set and each one. Flutter leverages the custom field options in WordPress, but takes it to a whole new level, finally making it very clear what each field is used for, with clear labels and structure on the admin side.

Flutter changes the idea of posts and pages in WordPress. With the Flutter Plugin you can create a template type for any type of data you want. Maybe you don’t add posts on your page, but you add information on Events or Reviews, maybe you have specific pages with completely different layouts and type of data. With Flutter you create what’s called a Panel. You can add custom data fields and types to that panel to create your very own template for the kind of data you wish your user to add. It then becomes a new option on your admin menu, just like a post or page, but the write/edit template is completely custom. In the settings menu you can even turn off posts and pages completely if you’re not going to use them at all.

I first read about the plugin about 6 months ago but didn’t have the time or experience with programming to really get into it, until today. Today I used it on a project for the very first time and I have to say, I wish I would have started using it 6 months ago.

Displaying a Single Variable or Image in your Theme

The plugin does require some coding work. Like using custom fields, you need to manually add the placeholders to your theme. Luckily it’s done pretty easy. Hear is some example of how to include the custom data into your theme:

  <? echo get('variable_name'); ?>
  <? echo get_image('variable_name'); ?>

It depends some on what kind of fields you get setup, and of course it can get a lot more complicated depending on what you want to accomplish. Here is a screenshot of just one part of the template that I created for a friend’s site:

Displaying a Duplicate Fields in your Theme

There are some downsides to this plugin that I discovered quickly after I began to use it. First is that there is not a lot of documentation. The website has enough basics to get you started, but there is not a lot of resources when it comes to looking for help with specific things. For example there is a really neat feature that allows the user to duplicate fields. Say for instance you have a custom template to enter for Teams and you want to have a field where a user can add Team Members. It’s a simple text field and Flutter is set up to allow the user to add more fields. It gets a little complicated on the display side, because you have to have the logic to find out how many fields have been created and to pull in each one. Luckily I wasn’t the only one with this problem and found a solution to it in the comments on a post at doc4design.com. I wanted to pass that along, as it is kind of a big issue. The code that I found works best is:

  <?php
    $total = getFieldDuplicates('variable_name',1);
     for($i = 1; $i < $total+1; $i++){ echo "<li>" .get('variable_name',1,$i). "</li>";
   }?>

This code needs to be run within the loop and of course swap out variable_name to whatever yours is. Something little like that can be super frustrating if you’re new to php like I am.

There are more disadvantages, it’s buggy. While inspecting the code that it places into the admin menus, there are a lot of tags unclosed or added in a funky way. It’s difficult sometimes to manage the Panels and it’s a little unclear the differences between a Panel, Module, or Template Option. I’ve heard the bugs get worse when you get into Edit-in-Place. That’s another feature I want to get into. I’ll be sure to blog more about it when I get into it. That will add a new layer of tools to the pages themselves to edit content, no longer requiring users to go into the admin tools just to change text. That I think will be even a bigger move to a true CMS.

So it has some bugs, but it does help change WP to fit that CMS role that so many of us are using it as anyway. If you have any experience with Flutter or questions please share them in the comments below. I’d love to hear from you.

UPDATE:

Just wanted to share some more of the fun stuff I’ve learned with Flutter since I wrote the last post.

Displaying Duplicate Groups of Fields in your Theme

In my original post I described how to show single data, even duplicated fields. But I didn’t at the time know how to setup duplicate groups of fields. I found out it’s actually almost identical to multiple fields. All you need to do is first call on one variable in the group and get how many duplicates there are (just like a duplicated fields) but in the loop go ahead and include the code to return the values of the other variables in the group and there you.

          <?php $total = getGroupDuplicates('variable_name');?>
          <?php for($i = 1; $i < $total+1; $i++):?>
              echo "<li>" .get('variable_one',$i,1). "</li>";
              echo "<li>" .get('variable_two',$i,1). "</li>";
              echo "<li>" .get('variable_three',$i,1). "</li>";
          <?php endfor;?> 

Flutter Alternatives

I discovered in working with Flutter that there are actual a couple different branches of the project. One popular alternative, based on the same original code is a plugin called Magic Fields. It works exactly the same way as Flutter and the code that I’ve provided works the same for both. Magic Fields however has stripped out a lot of the typically unused features of Flutter, making the plugin overall a lot more simple to use and less weight on your application. Another benefit to Magic Fields is currently their community is more active than Flutter, making it easier to find information on the plugin, how it works, and what you can do with it. Checkout magicfields.org for more info. I’ve personally made the switch from Flutter to Magic Fields for the reasons stated above.

I’ve done a lot with Magic Fields/Flutter these past couple months. It’s become a pretty crucial tool in taking WordPress development to the next level. Especially when using it as a content management system. Of course a lot of the functionality that this plugin offers can be done manually with adding custom codes and functions to a theme, I’d rather let the plugin do most of the heavy lifting and just leaving the only work to be done setting up the fields and putting the placeholders in the theme.

*This post has been updated to support the latest version of nikeplusphp (2.0.1). Sorry it was out of date for so long

Nike+ is a system designed by Nike to work with Apple iPod nano, touch, and iPhone 3GS to keep track of your running and a lot more. I’ve been using it for almost two years now and love it. It’s a device that attaches on my iPod nano and gets data from a chip that’s inside my Nike shoes and keeps track of my pace, distance, etc. I can then sync my running data to nikeplus.com where it graphs and keeps track of my running history. The site is ok, it does have its weaknesses. The site is done completely in Flash. Which can be frustrating for a number of reasons.

There are your standard Facebook and Twitter sharing features built into the site, but as far as your data goes, there isn’t a lot you can do with it. When I created my blog my goal was to have all my content available in one place. I wanted to be able to share all my latest data here on my WordPress blog and wanted to customize the look. For the majority of these widgets, it’s achieved through RSS feeds. My running data had no such feed.

I did some reading and found that the Nikeplus.com handled the running data in an XML feed. I would have to find the feed and then get the latest run information to update on my site. One big problem is that XML isn’t allowed to be displayed across different sites or hosts. Meaning if you have an XML file you want to share, you have to host it on your own site. There is a way around that however, you can using server-side language parse an XML feed from one place to make it availble to use on your own project.

After a little digging and a little trial-and-error I found out how to do it. I figured I’d share what I learned, in case others are out there struggling with getting your nike plus data into your own site. Here are the steps:

1. Get your nike+ login email & password: Great news, you no longer need your Nike+ ID. Which is good because it was a pain in the butt to find. nikeplusphp 2 now takes your normal log in information
   
2. Upload Nike+PHP: If you’re using WordPress, upload nikeplusphp.2.0.1.php file into your template folder. If you’re not using WordPress, upload it into your project and just keep in mind where you put so you know where it is come time to link to it.
3. Add the code to your theme or page: Next thing you need to do is add this code where you want your data to show up. Just make sure to replace the email and password for your own credentials. 

            require_once 'nikeplusphp.2.0.1.php';
     $np = new NikePlusPHP('nike_email@address.com', 'nikepluspassword', true );
     (add true on the end like that if you want your data in miles, otherwise false will return data in KM)
         
   

4. Add a function: in that same block of php add a function. There are many to choose from, but in general they will look like this:

   $runs = $np->fullRunInfo();
   

   There are a few different things you can call here. You can get your profile information, first run, latest run, all runs, runs between, past, or before a specific date. The full list is found here at the Nike+PHP website documentation page.

5. Display the data you want: I had actually done pretty well before this point and from the instructions on the Nike+PHP website it showed a function to display the entire array, but I didn’t want that, I wanted just a couple pieces of data. For that you need to pull out that data out by doing something like this $lastrun['duration'] the $lastrun is whatever the function was assigned to it previously. You can pass things into it like ‘runId’, ‘startTime’, ‘distance’, ‘duration’, ‘synctime’, ‘calories’, ‘name’, ‘description’, ‘howFelt’, ‘weather’, ‘terrain’, or ‘equipmentType’ and just echo the result:

   $lastrun = $np->basicLastRun();
   echo $lastrun['distance'];

6. Tips: What I described above should give you the basics of pulling the data you want. Thing is though the data probably isn’t what you expect. Duration is measured in milliseconds for example and distance is measured a more precise than you might think. Here are some things that I did to change the milliseconds to minutes, cut off measurements past the 2nd decimal place, as well as figure out my pace.

   	$distance = number_format( $lastrun['distance'], 2 ); (cuts distance off at 2 decimals)
           $minutes = ($lastrun['duration'] % (1000*60*60)) / (1000*60); (gives the distance in minutes)
           $pace = $minutes / $lastrun['distance']; (with distance and minutes we can determine pace)
   

   All Together

         <?php
   		require_once 'nikeplusphp.2.0.1.php';
   		$np = new NikePlusPHP('email', 'password', true);
   
   		$lastrun = $np->basicLastRun();
   
   		$distance = number_format( $lastrun['distance'], 2 );
           $minutes = ($lastrun['duration'] % (1000*60*60)) / (1000*60);
           $pace = $minutes / $lastrun['distance'];
   
         ?>
   
         <p>Distance: <?php echo $distance; ?> Miles</p>
         <p>Time: <?php echo number_format( $minutes, 2 ); ?> Minutes</p>
         <p>Pace: <?php echo number_format( $pace, 2 ); ?> Minutes per Mile</p>
         <p class="credit">Nike+PHP</p>
   

   As you can see I had to modify things a bit. First was to change duration to minutes. For that the formula is minutes = (#milliseconds % (1000*60*60)) / (1000*60). To cut off the duration and distance after 2 decimal places I passed the variable into number_format( $variable, 2); that cut off anything past the second decimal. And pace I found by dividing the duration in minutes by the distance.

I hope this has been more helpful and not more confusing. My case was pretty simple, I simply wanted the time and distance of the last workout, but with all the data available, you can really do a lot with it in the way of customizing the showing of your own workout. The creator of this code is really nice and answered my questions via email pretty quick so if you’re really stuck I suggest to shoot him an email. If it’s something simple, like getting something like this to work you can also send me a message or leave a comment on this post and I’ll see if I can help.

Two things you need to have to start your own website is a domain name and hosting. A name and a place to put it. Buying a domain name is pretty straightforward. Some companies offer different services, but pretty much all of the ones I’ve had experience with do and cost more or less the same thing. I personally like having my domain and hosting accounts through the same people, as it is easier to keep track of and handle, but that’s not even a necessity.

Hosting however is a different story. Not all hosting providers offer the same service for the same price. Not even close. And it’s not even a case of what you get, you pay for. I’ve met a lot of people that spend $15 to $20 a month for less service that you could find for $4 or $5 a month. I’m not going to tell you who to go through, but I can share a little bit of my experience and what I’ve chosen. I don’t want to give the impression that I know everything about every hosting provider, quite the opposite, but hopefully I can help spare you some heartache. Bottom line is, do your homework before you get in bed with a hosting provider. You can switch providers and move all your content and get used to a whole new system, but it’s a lot easier not to.

Things to consider when looking at a web hosting service:

• Speed and capacity: First thing I would look at and ask yourself is what kind of traffic do I plan on getting? I know we all have dreams of our websites getting hit hundreds of thousands of times a day, but realistically what do you expect it to handle? Chances are if you’re reading this post and just getting into it, a shared hosting account is fine. You more or less rent space on a hosting server. Now if you’re expecting to create the next Facebook or if you have a celebrity or prestigious client, then you’ll have different needs and may need to explore different options like dedicated servers. But look at the storage space and bandwidth capabilities. A lot of affordable shared hosting accounts allow unlimited space without any set limit on bandwidth. Look for those. My first first hosting account was the most basic of Godaddy’s accounts. It had a limit on both space and bandwidth. For the most part it was fine, until one day almost overnight, my podcast started getting very popular on iTunes. With that many video downloads, my bandwidth cap was reached and I got a fat penalty charge and my material was no longer available for the rest of that month. That was a costly life lesson. I paid more on that fee than I did for the hosting account the entire year. Think about what kind of site you’ll have and what kind of needs you’ll have in the future and plan for that.
• Multiple vs single site: Some hosting services require you to have only one site, others offer multiple sites. It’s always nice to have the option to run multiple sites. Even if you don’t plan on it, the opportunity does arise. A client I worked on for example last year wanted to start a new domain/site to handle all of their non-profit work, having at least the option to host multiple sites is something you want to weigh into your decision.
• Database and software options: If you are having someone else do the development on your site you’ll want to consult them about software and database capabilities before pulling the trigger on a host. If you’re going to do everything by hand with html (which hardly anyone should be doing these days) anything will work, otherwise you’ll want to know what kind of software and services the host supports. For example this site runs on wordpress, which requires php and database services. Read or ask if they have installation tools as well, those kinds of things will make the site much easier to develop for.
This isn’t something you normally think about it until you really need it.
• User tools and features: A lot of hosting places offer a demo, go in and try them out. Are services clear and easy to use? I can tell you, I hated logging into my Godaddy account. I felt like everything I clicked I had to triple check to make sure it wasn’t adding/charging me for a new service and I could never find the tools I needed. Another preference tip is I look for something called cpanel. It’s pretty consistent between different hosting services but the tools are always in the same place and all-in-all pretty good. Whatever you get into you’ll just have to familiarize yourself with it. Especially when switching, that can be particularly frustrating. Give it some time and things will come more smoothly the more you use it.
• Customer Support: This isn’t something you normally think about it until you really need it. Watch out, a lot of hosting companies don’t even provide tech support over the phone. That can be extremely frustrating when a site is down or if you are in the middle of something and you need support. It would be ideal if you never needed them, but you don’t want to get stuck in a sticky situation without the assistance.

There are probably a lot of other factors that play into finding the right hosting provider for you. I’ve based this solely off my experience and some of the snags I’ve come across along the way. If you have something to add or know something someone else went through, please share them in the comments. I’d love to hear and learn from your experiences as well. Anything to reduce the overall frustration when it comes to finding the right hosting provider will be appreciated I’m sure.

So you know you need a website, or perhaps you already have a website but it’s being hosted by some free limited service. They had a catchy ad that said you could create an amazing website with anything you wanted, without any experience necessary. The more you use them however, the more you find out just how limited and frustrating they are. There are a lot of benefits of creating a site yourself or having a website custom created for you. Two of the biggest benefits that I always talk to people about are how important it is for a custom experience and the fact that you own and control all of your own content.

• Fully custom experience: Say you have a blog through blogger. It works fine, you change the background image and font color every-once-in-a-while, but you always have hated the way that pictures upload. It’s a long buggy process and you wish you could just upload an entire album. Maybe you want to add a footer or change the layout a bit. Having your own site means the sky is the limit. The ability to add features to already templated systems is near impossible (except a few plugins usually) but if you have your own site time and money is your only limitation.
• You own and control all of your content: I know this is completely hypothetical and unlikely to happen soon, but what would happen if officelive.com suddenly went away? A virus wipes out the whole thing or something happens to the company that causes the service to instantly shut down. What happens to your free business website? Content, information, everything is now no longer accessible. You haven’t paid for anything, you don’t own your right to that content. This isn’t an attack on officelive, something like this could happen with any service. Paying for your own website means you own your own content and you have complete control over it.

You can enjoy these benefits by actually designing and developing a website yourself or having one custom built for you. But which one of those right for you?

Finding a good designer and/or developer can be difficult. I’ve known a lot of people that have gone out on the web and hired the first cheap designer/developer they could find, only to have heartache when the project is almost completed and now no longer can get in touch with their developer. Sounds crazy but it happens, a lot. I’ve been asked by many to finish or start over a project that where another developer just disappeared. On the flip-side to that, a good designer and developer could cut off years of work to your website.

That’s a big mistake I’ve found with do-it-yourself type websites. Yes someone got a website up very cheap, but it does not perform at all like it was meant to. Professional designer and coders have often been doing it for years, with a lot of different types of projects under their belt for experience. Their knowledge and talent can shave off years worth of work and frustration on a site. Not to mention they have the tools to do this effectively. Did you know for instance that the same website can and does often look different in different browsers? on different operating systems? and screens? Did you know that search engines read your site much differently than a human does? Web design and developers have tools and experience to help them address these challenges that the average user doesn’t have.

But sometimes an agency or developer is just simply out of the budget or perhaps you just are curious and want to get started in the world of web publishing, like I did several years ago. I remember being very confused and frustrated at times. I decided I wanted to share what I learned and hopefully make your experience a better one. After all web publishing can be very exciting and fulfilling. To know that your content will be broadcasting to the world 24 hours a day, 7 days a week. I can’t tell you how excited I was the morning that I woke up to find an email in my inbox from Australia, a guy who just wanted some advice on a topic I made a video about. How exciting. So whether you’ve decided you just want to learn more about the web, your jumping into your very own first web project, or even if you’ve done web work before, feel free to read my upcoming posts and please leave comments. I’d love to answer any questions or comments you may have.

I am a front-end web developer. The bulk of my day is writing and editing html and css. If you’ve ever written css and fought with browser compatibility or tried a million ways to get something to show up where and how you want it to on a website, you know how frustrating it can be.  Occasionally I come across tools and tips to help make my life easier, which of course gets me excited and I just want to share them. Sometimes they are small and help a little bit, other times I smack myself in the forehead and say, “man, why didn’t I know about that?”

So my first post on coding tips is on something that I ran across today called Zen Coding. I must publicly thank Elijah Manor for his tweet about it this morning. Elijah is actually a great developer to follow on Twitter. He usually has fabulous tech tweets for developers running the whole gambit front-end to back-end. This morning he linked to a tutorial by net.tutsplus.com on Zen Coding. Zen Coding is a plugin created for a lot of major text editors that expedites writing html and css. The project and code to download for the plugins can be found http://code.google.com/p/zen-coding/

Html and CSS is notoriously repetitive. With nearly everything there is an opening and closing tag, with id’s, classes, and attributes. When Zen Coding tries to do is limit the data that you need to type down to the essentials, while allowing the text editor to fill in the necessary yet repetitive parts of the code. Lets take a look at an example:

Take for instance a typical site navigation.

<ul class="nav">
  <li class="nav-1"></li>
  <li class="nav-2"></li>
  <li class="nav-3"></li>
  <li class="nav-4"></li>
  <li class="nav-5"></li>
  <li class="nav-6"></li>
</ul>

Zen coding simplifies this down to:

ul.nav>li.nav-$*6>a

That tells the editor you want a ul with the class “nav” and 6 list-items with the class “nav-( and number of how many li’s you want)” and an anchor tag inside each one, all instantly. Now all you have to go through and add is the content. This method works more than just for nested items. You can also add items after. Instead of > you can use +. Say for instance you know you’ll have 3 paragraph tags and then a div. That can be created with:

p*3+div.test

That will output:

<p></p>
<p></p>
<p></p>
<div class="test"></div>

Not bad eh? My first thought was, “oh I just copy and paste.” but I decided to give it a shot anyways. In only the few minutes I’ve messed around with it I became pretty impressed. Even new to the system I found I was writing code significantly faster. I can only imagine that if I continue to use it where it become second nature, it will significant reduce the time (and not to mention dullness) of writing standard Html.

It looks like there is a similar plugin for css and I’ve tried messing around with it, but couldn’t get it really to work yet. I’ll keep trying though.

So to use the plugin in textmate go to that google code link I mentioned earlier, download and install TextMate.Zen.CSS.1.3.1.zip TextMate.Zen.HTML.1.3.1.zip and Zen Coding for TextMate v0.5 Create an Html file and enter in the code like how I mentioned then use command+e for the plugin to expand the line of Html.

Have fun, I hope you find it as useful as I do.