I have built plenty of websites for freelance, and I thought I had everything down. I know how to guide a client away from bad decisions, give advice that may go against what they want to do, get the information I need, and everything else that goes with starting a project. At least…I thought I did. I came across a problem with my latest project that I wasn’t really prepared for: building a site where the client wasn’t even sure what the whole idea was from the start. They knew what the basics were, but not the whole, and that is where I ran into trouble. It is because of this, that I learned how not to do things in the future. The most important being writing out the project’s scope.

Enter Closet Fish…

In the beginning…

The clients are two very cool women who work in the fashion world. Something that I know absolutely nothing about. Their concept was a voting site where the user pays to upload photos of outfit options and get professional advice from the owners of the site. While I got the information I needed from them, I realized that I couldn’t build this on my own. There was going to be a lot of back-end programming that was beyond me. Part of the learning process for me was the role of project manager. I have never really done that with more than the client and myself. I was going to need to involve other developers who knew some crap.

I ended up being pretty good at that. At least I think so. Anyway, I recruited a programmer I know, and he came up with a time frame and a dollar amount. I then went back to the client and told them the price. I have no idea if they shopped around, but I believe they did and realized more quickly than I did that we had completely underbid.

Colors, colors, colors

All I knew about what the client really wanted the site to look like was that it had to have pink. Not just any old pink, but freakin’ HOT pink. The kind that blinds you in its awfulness. It was something though, and I went with it. Hot pink is not easy to use in a design. In fact, you should never do it. I tried 2 designs, going through every color pallet I could think of that would make hot pink bearable. Even using hot pink as the accent color wasn’t working. I then said enough is enough. Hot pink is out. I then toned it down to a very soft and mellow pink and everything went much smoother.

I then called the clients and said “Hot pink is out. You will respect my authority in this matter.” Ok, I didn’t say that, but I was able to get them out of the hot pink mode, and they were happy with the colors once they saw it. One of the best things working with these particular clients was that they were very open to any ideas. If I gave them a good reason, they would listen and usually take my advice. There were a couple of times they did not, but they did when I thought it really mattered. I love them for that.

Logos are not easy

After designing the layout I added a temporary logo to show what it would look like. Nothing fancy, just a nice font with a gradient and some cute little bubbles floating around it. A very quick logo design, with barely any thought put in because I knew I wasn’t going to be using it. I then sent them the design, telling the clients that “Hey, this logo is just for placement, I am having one created for you.”

I then call a graphic designer friend of mine (ironic because my degree is IN graphic design) to come up with a logo. Why didn’t I do it? One, I didn’t want to spend time doing that when I could be writing the front-end, and two…he is better at it than I am. I knew he would do a good job. When I got the design back, I knew that I had made the right decision.

After replacing the logo on the mockup and resending it to them, I waited to here back. Which I did right away. “This is AWESOME! But…we think we like the other logo better,” came the reply. Not good because I was paying my friend to do this, and his logo was clearly better. Once the project all came together I think they are happy with me talking them in to using it. What do you think?

My 5 minute job:

Or his:

Things started to get crazy

After some time went by I start getting emails about other websites the client has seen. Can you add this? What if we do that? Lets make most of the site free where EVERYONE can give advice and then….Wait, what? After a few emails back and forth and a couple of calls, the scope of the project had changed. Looking back now, I realize a whole ton of crap I should have done.

First, I should have written a good old contract, but I didn’t because I dealt with this client before. I needed to have something down that said, here is the cost for what you have asked for. Anything further will have additional charges added, and the date for launch pushed further. But the programmer and I were yes men on this one, so we changed everything so that everyone could give advice, but you still had to pay for professional comments.

The second issue was photos. I generally pick the photos for a site I am doing. This time, because I had no idea about the fashion world, and because I thought they would want some specific things, I thought I would let them give me some options. Very VERY bad. on two counts. I didn’t specify that only certain photo groups could be picked from. Why did that matter? Because they started picking photos that were going to cost about $200 a pop….for web quality. Screw that!

Part B of this has to do with the website’s actual name. Closet Fish. Cool name once you understand what the site is doing and what people are doing on it. BUT, and this was a big head slapping moment when the emails came in with image selection. They were picking images that contained women and….take a guess! Got it? Freakin right! Images with women in lying in bed with a dead (though very fresh looking) fish lying on the pillow next to her. Images of mermaids, and marine scenes with fish swimming all over the place. After looking at a bunch of their choices, I made a quick phone call and told them to halt what they were doing.

See, it took a while for me to come around and start actually liking the name. The thing was, while it has the word fish in it, I felt the site shouldn’t have anything what so ever to do with actual fish. We are closet fishing for clothes here, and having people think of dead smelly fish is not a good way to get people to the site. Once I had them on the band wagon with that, image selection became easier.

Shit hits the fan

When the project was FINALLY coming down to the wire, we came to a round of testing. I called them up and said “You guys need to start getting people to come and test this website.” To which I get a reply, “Great idea! We’ll get some friends to do that!” A few days later I get an email saying things looked great, we just want this changed to that. No problem, cause you expect a ton of the micro changes crap. A couple of more days go by, and it is like 3 days before we said we were going to launch, and things went bad. “WHAT THE FUCK! WE CAN’T GET ANY IMAGES UPLOADED TO THE SITE! IT KEEPS GIVING US AN ERROR!”

To which I replied, “Don’t panic. THIS is why we wanted you to test the site.” After some thorough problem solving we found the issue. Rule number 4 of web development: NEVER rely on web developers alone to test your stuff for you. When we tested image upload, we were grabbing images from the internet…Google, Facebook, whatever we could find. It didn’t matter because it wasn’t going to stay up there. Any idea what the problem with that is? Real users are going to be using their camera or phone to take these images. Bigger problem? I’m guessing no one adjusts the image size of the images they are taking.

Question…WHY would you take an image with your phone that is 3000 pixels wide?? WHAT THE HELL are you going to do with that photo? Aren’t most photos taken thrown up on Facebook anyway? Well regardless of what I think people SHOULD do, they don’t. The problem was that each image was like 4 megs each. We were uploading photos that were like 200k each. The server had a built in limiter, and the image resizing script did as well. When they uploaded their images, server said nooooo way, and crashed. That got fixed and everyone was happy.

Now, I calmed them down, but I learned another very valuable lesson. I already know to expect things like that to happen at the last minute. The client that doesn’t know that though, will panic and start freaking out all the while calling you unprofessional.

I am now smarter for doing this project

Why? Well for one, this project was easily worth $15-$20k. I bid substantially lower because none of us knew what was going to be involved. A contract would have equaled this all out for us. This would have helped us more than them.

I really understand what project management is all about now because of Closet Fish, and I found that I really liked doing it. I found I was good at getting it all together, but learned a lot in the process. I think the biggest thing I learned though was the danger posed by a client who (while having a good idea) doesn’t have everything ironed out.

If a client comes to you and says “I have this great idea for a website. People come and do X,” you had better start asking questions about how they do X. What happens after they do X? Get all the details about how the site is going to function before you do anything. Then give them a quote for that work, and then let them know that anything else besides what you talked about, goes beyond the scope of the project. Which will cost more and set the deadline back. I saw this in action, and it is the one thing I do not want to repeat again in my career.

So what did we learn here? And by we I mean me

It basically comes down to these:

• No client is perfect, but these two were close
• Get ALL the details hammered out BEFORE you start working on a project
• Write up a contract, regardless if you worked with the client(s) before
• Anything beyond what was talked about for the quote will cost more, and push the deadline
• The people working on the site make horrible testers – they won’t use the site like a normal person would
• Explain to the client before hand that SOMETHING will go wrong…just don’t panic

All in all, I had a really good time working on this project. I think what made it so awesome to do was the fact that I got really lucky in who the clients were. They were open to suggestions, trusted my advice, and were extremely friendly and nice. I wish them all the luck with Closet Fish, and I really hope to work with them again sometime. It is rare to see the amount of drive these women have, and I hope you go check out their new website.

If you haven’t heard of Adobe’s latest offering, Muse, then you probably don’t read any web development blogs, including this one. If you do read them, and still haven’t heard of it, well, you have now! You may thank me for your enlightenment later. Anyway, there are a LOT of comments from web developers bashing the hell out of this product. I have not seen many (I can’t even recall one actually) comments praising it for what it does. What does it do? Write serious crappy code. I mean divititus to the umpteenth degree.

This product isn’t meant for my people though. Who do I mean by “my people”? I’m talking about those who hand code their sites and left software like Dreamweaver in the dust years back. Muse is meant for graphic designers, or web designers that don’t actually know how to create a site but design them anyway. They create a design, and then use Muse (which has tools like other Adobe products – think Photoshop) to make a nice little layout. Hit a button and BAM! Here is your website.

I think many of the people doing this for a living though feel a slight twinge of fear, thinking this might cut into our freelance projects, or possibly worse…our jobs.

Damn…that went all serious, didn’t it?

Nothing to fear

If anything, Muse might actually GIVE us more work for the future. Some designer building a site for a client that wants a little functionality, or some jQuery bit added later, is going to get screwed. “I’m sorry Mr. Client, but I don’t actually know how to do that cool widget thing,” which in turn makes the client go out and look for someone like us. They give us a call, and we say yes, we can help. We go to their current site, look around and say “Nice design you have.” But…then we look at the source. In two seconds we think “Well this is interest…WHAT THE F#$@!?” Because we are looking at something like this:

<div class="colelem" id="n4"><!-- group -->
     <div class="grpelem" id="n5"><!-- group -->
      <div class="grpelem" id="n6"><!-- content -->
       <p id="n8">Some stupid line about hummingbirds</p>
       <div class="wrap"></div>
      </div>
      <div class="grpelem" id="n10"><!-- content -->
       <p id="n12">Yes, hummingbirds are indeed small.</p>
       <p id="n14">&nbsp; <span id="n15"></span></p>
       <p id="n16">They are even fast as hell!</p>
       <div class="wrap"></div>
      </div>

Ok, I changed the actual text in there, but the HTML is actually from one of Muse’s showcase sites. What is worse is, that is only a small piece. While looking at this poor client’s site, after the initial shock, we take a look at the CSS and pray for something brilliant. What do we see?

#n18, #n148
{
	z-index: 100;
	width: 534px;
	min-height: 82px;
	position: relative;
	margin-right: -534px;
	margin-top: 199px;
	left: 299px;
}
 
#n26, #n156
{
	z-index: 108;
	width: 447px;
	position: relative;
	margin-right: -447px;
	margin-top: 10px;
}
 
#n28, #n158
{
	z-index: 110;
	width: 534px;
	min-height: 214px;
	position: relative;
	margin-right: -534px;
	margin-top: 301px;
	left: 434px;
}

At that point I would get up and throw my trackball at the wall cursing the heavens for making my eyes see this offense to the gods of web development. “Why?!” My first reaction was actually just speechless. I seriously HATE negative margins. HATE them. This stylesheet is littered with it. On top of that, everything is positioned pixel perfect. That is just a few items you see positioned relatively, and z-indexed to hell. Trust me, the whole THING is like that. So what would you do if a client comes to you for some changes or additions to a site built like this?

For me, there are two options: 1) I either flat out tell them no, because I don’t want to get involved knowing that this type of client isn’t going to want to pay me what I need/want, or 2) I charge them my usual hourly rate and warn them this could possibly cost them more than what they paid for the site. I either get the money for the work I’ll have to put into it, or I won’t end up having to deal with this pile of crap.

People are overreacting

I understand all of the bad comments I’ve read. I agree with some of them. Muse writes horrible code. Must writes horrible CSS. Muse is bad for the web. Wait…what? See that is where I don’t agree. One, I think the audience for this product is going to be very small. It’s not like every freakin’ graphic designer is going to go out and buy this and think “HAHAHA! Screw all you HTML junkies, I can build websites too!” Absolutely not. If people are really into learning how to build a website, they aren’t going to be getting into Muse. No one is going to start a business where they build websites for clients using it. Just won’t happen.

The people that will use it are going to be designers who want a portfolio of their work up, but don’t know how to build a site, or maybe a person starting a small business that has no budget or a willing relative that dabbles in HTML. Or maybe a print designer who has done a bunch of advertising work for a small client, who then needs a basic info site which they can provide now. We are talking about a very small fraction of people here.

Here is a quote from the comment section of this article that really sums up what others are also probably feeling:

“This whole idea to me seems like cheating and it devalues our trade. To top it off, it does not even create elegant, semantic or as you rightly say, fluid markup either!”

Does it create non-semantic code? Yes. Does this matter to anyone that isn’t a web developer? No. Clients do not know, nor do they care about semantics. I’ve never had a client actually even look at the HTML of a site I’ve built. Ever. It just needs to work for them to be happy.

Does Muse take the web a step backwards? Are we going to see thousands of sites made with Muse, and end any type of innovation? What?? No, that is ridiculous. We all need to take a step back and take a breath. Web developers are taking such huge offense by this product. “How dare they make a product that makes it seem like what we do is easy!” Adobe didn’t take aim at our jobs. There is no hidden agenda trying to belittle what we do. They are trying to make money, that’s it.

Read about it and forget it

My whole point is that the people hating on Muse, are the people that won’t be using it. It was NEVER intended for web developers. I will never open the program, and mostly likely neither will you. Muse is meant to get a website up by people that have no idea about how to do it. It is another WYSIWYG, and we left those behind some time ago anyway, haven’t we? I say bring on the freelance projects that might come our way because of it. The amount of time it will take to correct Muse’s crap will bring in some nice cash! Unfortunately it is hard to gauge how actual users like the product because we are the only ones commenting on it. Which kind of seems unfair. Let a designer use it who hasn’t built a site before make the call. I don’t see much difference between Muse and Dreamweaver’s design view. Muse just writes the HTML/CSS in a much more offensive manner.

Your opinion and mine don’t really matter on it. I’d like to know what the actual potential users of it think, but by now they are probably too scare to comment because a lot of us are bitching up a storm.

If you wish to read another article about Muse, this one was worth the effort as well.

Coupon Code: webmachine

When I started doing web development and design, Dreamweaver was THE program to use. Everyone was talking about it. When I first started using it, I was blown away. I spent hours upon hours creating fake sites trying to get the hang of everything. I even remember thinking about trying to get the Dreamweaver Certification that Adobe offered so I could put the logo on my first portfolio site. Everything was easy to understand because of the graphical interface and no real need to know HTML. This was in the days when tables were the way to go, and CSS was just getting started.

Then along comes a book called Dreamweaver 4 Magic, one of the authors being a guy name Al Sparber (which you can buy on Amazon for less than $1 now!). The book was awesome. It taught a lot of cool things you could do in Dreamweaver, and it taught me some basic HTML and CSS. Al Sparber though did more things that helped me grow as a developer – he created the site projectseven.com.

The Golden Age for Dreamweaver

When CSS was just starting to get popular, Projectseven was creating some really cool plugins specifically made for DW. I even bought one called Menu Magic for somewhere in the area of $90 or so. Expensive yes, but I thought that if I was going to be building a lot of sites, this was perfect for getting menus built quickly. Not only were they selling products, but Projectseven was putting up turorials up so you could learn some advanced techniques. Take into account that this was before all the popular blogs we love now, were not around then. We are talking some 8 years ago, or close to it at least. Their article on Uberlinks using CSS pretty much showed me what CSS was capable of, and I took off from there. This is what I would call the Golden Age for Dreamweaver. Everyone was using it, and ‘web developer’ or ‘front-end’ were terms not really being used yet. If you were designing websites or just getting into it, Dreamweaver was where it was at.

Fast forward to today

While I have fond memories of starting in web development using Dreamweaver, I only use it to build eblasts now because it is easy using its Design View to create tables. And since I don’t have to do those anymore at work, the only thing I will be using it for is ftp (because it is easy for me). I don’t mind it as a text editor because I think it does really nice auto-completion of HTML and CSS, but I mainly use Notepad++ now, with an occasional dip into NetBeans or Aptana. Notepad++ though is so simple to use and stripped of all the crap I don’t need, I pretty much fell in love with it the first time I used it. Don’t get me wrong, Dreamweaver has a lot of cool stuff now, but I dislike that it is specifically for DW.

My question for people reading this is, is Dreamweaver still relevant in our field? Projectseven still makes plugins for it, and while I will never buy one again, people obviously still do or they wouldn’t be in business. Someone has to be using it, and not just someone, but a lot of them. Who though? Does Dreamweaver cater to hard core professionals or ‘basement’ designers? People who build sites at a company or someone who does it for fun for their friend’s band?

If you use Dreamweaver as your main editor, please leave a comment and let us know why you use it, what you think its advantages are over other editors that are free, or why you think it still has a place as a relevant web development tool.

Coupon Code: webmachine

So I was asked to teach a second class to some of the people who I taught the first. To recap, I had showed them the basic HTML tags they will need to know, some extremely basic CSS and it’s syntax, and how to slice up a page in Photoshop. They went and built a web page on their own, and now they wanted to know more. My problem was, I wasn’t sure what to teach them. One of them wanted to learn some Flash, and while I could have shown them some basic animation stuff, the more I had thought about it, the more and more this made less sense to do. Why would I show them something that would only complicate things, when there was still more they needed to know that was far more important. So I was kind of at a loss on what to teach.

My awesome lesson plan

Ok, there wasn’t a plan, I totally flew by the seat of my pants. Mostly because I couldn’t anticipate the questions I was going to get, and my outline the previous time went to crap within minutes of starting. How did it go, you ask? Fairly well, actually!

Several people got into it more than I thought they would. One of the people I was teaching had to come over the night before since he couldn’t make it the day I was teaching the rest. While he had just done some basic HTML for his content, he didn’t do any CSS. What did impress me though was that his design for his site was way better than I thought it would be. It was clean for one thing, and he had obviously listed or understood what would happen, when I talked about repeating images. So for him, we went through building his site using CSS and getting the structure down.

Another actually got some more CSS down than I would have thought any actually would. Now, I’m not saying that all of his CSS was awesome. There were plenty of errors, but there was enough good in there that I was impressed with how much he grasped. So for the main group, I opened up there files, went through what was bad and had to be corrected, while telling them what was right. Basically I tore their websites apart, but there were a lot of “a’HA!” and “oooooooh” moments this time around as things started clicking into place.

I feel much better now

Why? Because the first class I taught for them I felt dreadful when it was over. I couldn’t tell if they actually understood a single thing I said, or if they were humoring me. Turns out they got at least 60%, which is very damn good considering how much I covered. What does this all mean?

Simple. I overestimated them the first time by how much they could grasp. I didn’t think how hard HTML would be for someone with no experience, let alone CSS. I underestimated them this time by how much of what I taught actually stuck in their heads.

So I came away with two valuable lessons. First, what I taught the first time just needs to be pruned down a bit. From what I saw the second time, I’m not as horrible as a teacher as I thought I was. Second, your students need to actually build something for the web to fully grasp what it was you taught them.

No amount of talking is going to get them to understand fully what you are talking about. I can explain HTML tags and CSS all day, but until they do it, it doesn’t really make a whole lot of sense.

I look forward to the future

Will there be another class? Yes. It will be much easier for me from here on out, because now I have something in common with them. They are getting the ‘lingo’ down, and talking in my terms rather than me explaining things in a very awkward way.

When the class was winding down I realized something that kind of made me feel….I’m not sure actually. Angry? Jealous? Maybe both…I don’t know. But I do know what caused it. Why couldn’t I have had someone teach me like I am teaching them? Do you know how much faster I could have learned what I know? I’m completely self taught. I didn’t have anyone to guide me through the ins and outs and all of the beginner mistakes to avoid. This group of people have such a head start compared to me, it made me a little pissed off.

I had plenty of time though to actually think on that and why those feelings were stupid. Yes, I committed a ton of mistakes…some mind blowing in their badness.

Coupon Code: webmachine

I recently had the opportunity to teach beginning web development to 8 people, that were all graphic designers, and absolutely no web experience. I don’t mean they haven’t used Google, I mean no HTML or CSS. I was basically working with a clean slate, and could teach them how to do things the right way directly out of the gate. Needless to say, I was very excited. Not being easy though, is a huge understatement. That is because there is a really, REALLY big difference in teaching someone who has a little knowledge of HTML, and someone who has none. I quickly became aware my outline was going to be thrown out the window.

What went wrong?

Well, first thing was that I totally overestimated the seeming simplicity of HTML. I only talked about 15 or so elements, just the basics you would need to create a web page. Nothing fancy, and no HTML5 what-so-ever. I am self taught, and I don’t really remember how I learned it, only that I really wanted to, so set out and did it. I was dealing with people who were about to be laid off and just wanted to add a skill set to their resume. I think that alone is a huge difference. I was dedicated to learning it and getting into the field. These students of mine, were not really looking into going into web development per say, just have the knowledge to build a basic site to make them look better for future job positions. What is the difference? I knew it was going to be a long and difficult road, the people I was teaching didn’t expect it to be as hard as it is.

Ok, stop bitching because I can already hear your thoughts. HTML and CSS is NOT hard. I know. But we’ve been doing it for a while, right? I can look at a psd and know instantly how to slice it up, what divs and tags I’ll need, and most of the CSS is already written in my head. Now try to picture yourself not knowing any HTML. You go on the internet, and you click links, but have absolutely no idea how any of it works. You never thought about it, you just click and go. The only thing my students had knowledge of that was helpful was Photoshop. But then, they don’t know how to slice or save for web.

What size do I make the image?

That is the question I got that really hit home and made me realize I was in some serious trouble. “Whatever size you need it to be, only use pixels, not inches,” was my response. To which I was asked “What should the dpi be?” Ah, then I was getting what they were asking. I then explained that dpi has no relevance on the net. I was then asked again a little later what size the image should be. I will admit to some serious frustration because I wasn’t understanding the questions I was getting. In honesty though, it wasn’t there fault. They just asked questions that made sense to them relating to print design, but web development and design is so much more fluid.

I decided to go with “Let’s build a simple web page, and you will see how all this fits together, better than me just telling you what the names of these tags are. This produced easier questions to answer, but presented me with even harder questions.

Syntax, layout, and a lot of confusion

HTML syntax is easy, right? You really don’t have to worry about much. If you have never dealt with ANY kind of thing like that before, I believe it seems quite alien. It did go better though once I just started building a page and talking through it. CSS was even harder because there are so many properties to go over, even just the basic ones, plus there is ‘id’ and ‘class’ to explain. Which leads to how to put the id or class into the HTML element.

One of my best friends, who was one of the people I was teaching, threw a comment at me that confused me yet again. Three hours after I started this class, and they were grasping some of it, he says to me “I get the idea with the id and class thing, and divs, I just don’t understand where I put everything.”

Personally, I thought I had done ok with explaining that a ‘div’ was a box that you put other crap in. Kind of like you are packing for a move. You have a content box, so throw the main text stuff in that. You have a navigation box, so put your menu in there. You have a footer box, so toss in all the junk you want at the bottom of the page in there. But then you get, “Ya, but what goes in the footer?”

What I would do differently

I would split it up into different classes. HTML one day, and CSS on another. That they could practice just laying out the HTML elements without having to worry about styling. I would also begin the class with just them asking questions before I started teaching anything. That gets the preconceived notions out of the way, and will create less confusion later. Too much information all at once is not good, regardless how quickly the student wants to learn. My expectations were way too high, and the bar should be lowered by quite a bit.

I enjoyed teaching people a little of what I know, and after doing it once, I’ll be better prepared for the kinds of questions that threw me for a loop. I would definitely do this again. If you are ever asked to teach a class like this for the first time, feel free to ask me any questions you might have, I’ll be glad to prepare you for the inevitable confusion.

Coupon Code: webmachine

My second Informal Interview is with Joseph McCullough, co-founder of Vert Studios, a web and graphic design company located in Tyler, Texas. He’s been in the industry since 2008, and has been featured in respected web development publications including 1stWebDesigner and Onextrapixel. Joseph is currently pursuing a computer science and math double major at the University of Texas at Tyler.

I found Joseph through a random link, and we have traded comments on each others blogs, as well as Twitter for a while now. Feel free to follow him! Let’s get to the questions, shall we?

How did you get into web development?

How did the partnership with fellow co-founder of Vert Studios, Justin Edwards, come about? Were you friends before and just thought about starting a web development company, or something like an ad in the paper?

What does Vert Studios do to get their name and brand out to the public? Buisness cards, mailers, ads on Google…?

How do you go about getting clients?

After completing your degree at the University of Texas, what are your plans for the future? Will it still be Vert Studios?

What is the hardest thing you find in operating your own business?

Do you only handle the development while Justin does the design, or do you two cross into each other’s realm fairly equally?

I find your blog slightly different than most in that you or Justin sometimes seem to write articles for potential clients (people looking for websites), rather than other web developers (though you obviously do that). Is this a business decision to get clients to find your website, or do you guys like helping out the people who are looking for a designer? Who is your intended audience with Vert’s blog?

I read an article on your blog that seemed to target a specific competitor because they used templates, and you implied that they over charged. What was the intent of that article? Was this a direct strike at a competitor, or a general dislike of using templates by any web studio?

What is the one thing you are really focusing on learning in web development right now?

Is there anything you would do differently in your web development career so far?

What advice would you give someone just starting to get into web development, or thinking about it? Anything specificto learn or master?

Two down…whos is next?

I have no idea yet, but I hope you enjoyed this Informal Interview. Joseph is a cool guy, and I’m glad I found him through some random clicking. Check out Vert Studios’ blog and do some good reading.

Any suggestions for the next person I should interview?

Coupon Code: webmachine

2010 saw a lot of arguments pop that were rehashed throughout the year that it was really making it hard to go through my RSS feeds for a while. I jumped on the bandwagon on one, but soon saw the truth of it, and never really touched upon it again. If you scour the web development blogs like I do, you can name three right of the top of your head without even trying. I’ll give you a few, see if you can add any that I missed. These are actually in the order I remember reading about them:

• Flash vs HTML5
• The Web Design/Development Community is Dead (or dying)
• Should we use CSS3/HTML5 yet?
• How bad you suck at web development

Flash vs HTML5

This whole debate failed before it began, and I will admit I was in on it on the first round. Though my scope was more limited in that I really wanted to see the video tag come through, and not rely on swfobject.js. The two don’t really have anything to do with each other. I’m done with reading about it. Flash does its thing, HTML5 does all that other crap.

The Web Design/Development Community is Dead (or dying)

This one pissed me off more than anything, and I wrote about why it is not. This started as one argument that blew up into a hundred others. The community is NOT dead, dying, sick or anything else. If anything, I felt it gained a huge amount of ground. I think this was just a bunch of people that wished it was a smaller tight knit group. More of being in a secret club, but they were finding out there were a LOT of other people invited than they were led to believe. The community, or whatever you want to call it, is going strong.

Should we use CSS3/HTML5 yet?

It’s not that I don’t care, it’s just that I don’t care enough anymore. You either do or you don’t. Sometimes you are allowed to, and sometimes you just plain can’t. If you do, and want to support other browsers, there are things like CSS3Pie or Modernizr. Let’s stop talking about if we should or shouldn’t, and start talking about how.

How bad you suck at web development

This was not as prominent, but there were a lot of articles based on how we all suck at what we do, and here is a list of things you can do to not be so stupid. The funny part is, most were written by people I never heard of, or only had the one article published. Here is the real truth of it all: We do suck, but that is what keeps us going and trying to get better. If we didn’t strive for that, we would suck even worse.

Any others?

Yes, and I’d like to here which ones you thought of that I didn’t. One I didn’t list is Sass vs LESS. That was gaining ground in the later part of the year. I love that one because they usually discuss the merits of both, and why people prefer one over the other rather than degrade into why one or the other sucks.

What tired crap will 2011 bring?

I am actually dreading finding this out. I read enough now that I think I will be able to pick them out a lot quicker. The HTML5 now or later one is going to last for another half year or so, then no one will talk about it again. Here is a prediction of one I see coming with the advent of more browsers supporting CSS3 more fully: CSS3 vs Javascript. With CSS3 animations and transitions, I think we will see more articles on what we should be using to do the stuff Javascript usually handled.

What else do you see happening in 2011, good or bad?

Personally, I see more abstracted languages coming. We already had Sass, then LESS showed up, now CoffeeScript. I think we are going to see a lot more of these types of things than we should. Only a few will have a decent enough following, but I predict 3 more by the end of 2011. For what coding language I have no idea, but I feel that is going to be a very dominate thing in web dev world.

Thoughts? Let’s hear ‘em.

Coupon Code: webmachine

Wow, my first list? I’m not sure I approve of what I am about to write just because I usually don’t care about what they say. A list like this though, is one I usually read. Same with the year’s trends in web design or development because I want to see what others have been doing. This list though is unique, because it pertains to what I learned or what I personally thought were the top innovations of 2010. By 2010 I either mean they came out this year, or I actually learned them this year. If you haven’t used, learned or heard of these…you should. Otherwise you are dumb. Na, I don’t mean that. Ok, yes I do. Anyway, to the winch, wench!

The HTML5 Boilerplate

The HTML5 Boilerplate in my opinion, is literally #1 in my book. Why? The damn thing is packed with so much awesome that you can learn a lot just by looking through it. It includes HTML5, Javascript to enable element detection in IE, Meyer’s CSS reset, the DD_belatedPNG.fix so that png’s work in all browsers (I’m looking at you IE6), and one very important block of code that will forever stop the use of CSS hacks:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

Once I saw this, no more underscore, or !ie, or any other hack in my CSS files. There is so much more included in it, and so well done, there is absolutely NO reason you shouldn’t be using this template. If you aren’t, you probably think ‘Bats’ was a great movie.

Compass

Compass didn’t come out this year. I’m not even sure when it came out, I only know that it changed the way I develop on my projects. Compass is a framework for Sass, so if you don’t know Sass, it’s pretty much useless. With it though, it has made life a LOT easier when writing my stylesheets. Sass and Compass together is probably the most impressive thing I have seen in the web development world. Since the HTML5 Boilerplate not only came out this year, but it is the starting point to use before you even get to style something, I put Compass second. Not only does Compass come with some powerfully pre-built mixins so that writing CSS3 box-shadows, gradients, and border-radius are a breeze, it added CSS PIE and a sprite generator called Lemonade to its arsenal today.

I honestly can’t stress in words how much this changed the way I thought about CSS. Pretty much to the point that writing straight CSS has become tedious. Sass is really good…but Compass made it great.

CSS3 Pie

CSS3 Pie is not something that most of you would probably put on your list. But when you are creating websites that must look the same across all browsers, CSS3 Pie made it possible to start using some of CSS3′s most used properties and have them actually work in IE. It only supports a few, but for border-radius and box-shadow it made my life at work a lot easier. Because of it, there are now a few items you can scratch off the list for graceful degrading. Now go eat some Pie!

WordPress 3.0

I don’t think I need to provide a link to this because I am pretty sure you guys know how to use a search engine. Did WP3.0 revolutionize the way we used the platform? No. Did it change the way you thought about something? No. In fact, it is just a good release of an already awesome CMS. What it did add though, was a fantastic menu management system that allows users to change the navigation menus themselves fairly easily. That alone was worth it for me. Now I can create themes for clients, and they don’t need me to make changes for them. I know that seems like throwing money away, but clients love this fact, and I personally hate doing changes on a site when they can do it themselves with a little training. Thank you for that WP3.0.

CSS3 Flex Box

The CSS3 Flex Box is probably not that well known yet, even though I’m pretty sure if you are reading this, you do. That is how much I respect your knowledge. That is a lie by the way, because I don’t know you, and I hate people. Back to the point though. I believe it works in Firefox, Safari and Chrome now, too. It does exactly what it is called, a flexible box model. You can position elements where you want, what order, and which one(s) gets to be flxible or not. I have been looking for something this easy to use since I started writing CSS, and now it is finally here. I can’t wait for this to become wide spread, and screw IE.

I wish there were six

My biggest joy turned into biggest disappointment would have been number one on my list. Unfortunately, it now can’t even make the list at all. Spoon’s browser sandbox was by far, the BEST thing to hit web development in a long time. If you don’t know what I’m talking about, Spoon has what they call the ‘browser sandbox’ that let you test your sites in any version of the top browsers. On top of that, it could be done without having them all installed on your machine. Want to check it IE6, 7, 8 or 9 Preview? How about Safari or Chrome or Opera? All multiple versions! What happened though to take it out of any running in my list? Microsoft forced Spoon to take down the IE browsers due to some licensing issues. I call bullshit, and if you look at Spoon’s Facebook page, you will notice I am not the only one. Many a developer has bitched, and there is nothing Spoon can do.

Because of the sandbox, Spoon was probably my most used tool in my web developer toolbox, and I became very dependent on it being there for me. Once IE was taken off, followed by Safari, it is now useless to me. Yes, they provide a TON of other services that are great, but the sandbox was the crown jewel and all I needed. Now I have to use IE Tester, or some other crap way of testing IE. The day IE was taken off of Spoon was probably the worst feeling I have ever had that has to do with web development. Thank you Spoon for giving me the time I had with you, and screw Microsoft for actually (and this is weird typing this) hurting me.

What will 2011 bring?

It is hard to imagine what the next year will bring. I believe there are peaks and a leveling off of things that happen in our field. 2010, in my opinion was a huge peak. From jQuery going to 1.4, to the ability to really start using HTML5 and CSS3, and WordPress going to version 3.0, I don’t think we will see such a spike untill 2012. There will be small things I think, but none of the jumps we saw and made our own like this year. Which is good in a way because it will let all of us really soak in the knowledge that we all gained from this one. Maybe I’m wrong though, and if I am, it’s going to be a blast seeing it happen.

Coupon Code: webmachine

We are all into making our job easier right? We love writing less but doing more. jQuery is an abstraction of Javascript, it takes less of it to do the same stuff. What if though, you could use something else to write the jQuery, only it took even less to write that. Is there a point where the abstraction level is just plain ridiculous? There are a ton of different languages and code out there to make what we write everyday take less and less time, but today I started wondering if there was a line of stupidity that we can cross by using all of these. My answer is at the end of the article, but let’s go through some of the ones I know of that, in theory, are supposed to make our normal process of building a website faster by abstracting the code you write. If you are asking me though (in your head of course) what abstraction in this case means, it is basically like writing the code in a very short hand method to the point that while it bears a resemblance to the original, it is not.

Sass

I know, I know. I talk about this all the time. That is because I am a full fledged fanatic. I must convert one of you to using this or I will be very upset. Anyway, once I got the used to the syntax, I was able to write my CSS much faster. Not only that, it made me pay attention more to what I was writing. If you use the original syntax of Sass, then you eliminate the curly brackets and semi-colons. On top of that you are using variables to make site wide changes even easier than they are in CSS. Personally, I use the SCSS syntax of Sass which is more like CSS, but there is still a lot of abstraction going on. If I had to guess I now write about 40% less to get the same amount of CSS as before. I can probably increase that percentage over time as I get better. I’m not sure how you can disagree with that being a good thing?

I can write the following in Sass (SCSS):

@mixin sprite($left, $top) {
    background:  url(../images/iconSprite.png) no-repeat $left $top;
}

And anytime I want to use that png, I just do this:

#myDiv {
@include sprite(210px, 13px);
}

In normal CSS, I would have to write it out every time I needed to use it:

#myDiv {
backgroudn: url(../images/iconSprite.pnp) no-repeat 210px 13px;
}

If you have an argument against Sass, let’s here it. You better have tried it out though, cause otherwise your opinion won’t count.

Haml

What the hell is Haml? Haml is to HTML, what Sass is to CSS. Here is the example they have on the home page:

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

And the HTML that you get:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

Just looking at that makes me want to jump in and use it right freakin now. So compact and simple. If you need a definition of what abstraction is, Haml would be it. Look at the above example and tell me you would rather type out all the extra syntax? I know I don’t.

And then there is Coffeescript

A while back someone tweeted something about this thing called Coffeescript. I was curious, so I went and checked it out. My first thought was “Holy crap. The mother of all code abstractions!” Honestly, I am not even sure what to think about this one. It is so stripped down that I think if I started using it, I would forget how to write the regular stuff. If you didn’t check out the link, Coffeescript is an abstraction of Javascript. Even more so than jQuery. Why? Because you can even use Coffeescript to write jQuery! No braces, no semi-colons.

Here is a quick example just to show you. The jQuery first:

$('#myDiv').animate({
  top: 20,
  left: 20
});

And the Coffeescript that you would actually write:

$('#myDiv').animate top: 20, left: 20

Obviously this is just a silly little nothing, but now think about if you wrote something a lot more complex, and what it would look like. Then think about if you got really good at writing Javascript this way. Just go look through their examples and you will see how much less you would write.

My thoughts on abstraction

I’ve shown you some examples of things that abstract the original coding into something more simple and less time consuming. So? I know that was what you were mentally saying to me. Now say you were good at all of them, and built a website using them all together. Could save you a lot of time, right? I have seen plenty of people saying this kind of thing is stupid. I don’t remember what they said exactly but the point is, the examples above are not widely adopted by front-end web developers. I would think that this would be the main driving point though in a web developers career: Do what you do faster while keeping the quality the same or improving it.

One argument against code abstraction I remember reading was that they didn’t have time to learn another language. That is the kicker though. You aren’t learning a new language. You can’t use any of these without knowing the original. If you don’t know CSS, you sure as hell are NOT going to be able to write Sass. If you don’t know HTML, Haml is useless. Don’t know javascript (or at least one of its many libraries), Coffeescript will look like nonsense to you. I can’t stress this enough: You are not learning a new language, just a new way to write the one you already know.

With all that said though, I wonder if there is a line you can cross whereby abstracting everything actually becomes a hindrance? Does one use something like this so much that you never write it the original way and soon forget how to do so? Doesn’t seem possible, but who knows? I would think if you are writing Sass, you are keeping up with everything new in CSS anyway so you can add it. Same with Haml or Coffeescript. My opinion? I love this crap. Game on, because I want to build it quicker than you while keeping the quality level the same or raising the bar because of how it makes me think.

I am surprised by the amount of people that are either against code abstraction, or don’t want to learn to use tools like this. If you are taking a car ride and have 2 options, one that takes 4 hours and one that takes 8, and both get to the same place (AND THERE IS NO SCENERY TO LOOK AT – JUST CORN – so don’t pull that crap on me!), which one are you taking?

Coupon Code: webmachine

I took the week off during the Thanksgiving holiday. I didn’t realize I needed it until I was already two days in. The first day I was just waiting for a call from work to say something was jacked up and needed to be fixed. Thankfully the call never came. The second day of my vacation I wanted to sit in front of the computer and do some work of my own, but forced myself away. I was on a break after all, I should enjoy it right? After that, it was heaven.

Sometimes you need a break to make you realize you were dangerously close to getting burned out without even knowing it. I love what I do, as most of do, but as I have found the past week…you just have to get away from it for a while. I hadn’t had any time off this year until then, so it was very weird not doing ANYTHING related to web development. I thought about it a lot, but I didn’t touch the computer. And you know what? I feel soooo much better. Sorry I didn’t post, or tweet, or whatever, but trust me when I say I needed to go away for a week.

What now?

I’m recharged (except for having a damn cold) and ready to go. What are my plans? Ruby. I am setting goals for myself to learn this, which is the first time I have done something like that. Which tells me I am really dedicated to getting this language down. More Sass and Compass, which of course drags CSS into it. If I can’t get one person to use Sass within the next year, I am going to be pissed. That will be goal number two: get someone to convert to using Sass.

I think most of you have noticed that I am writing twice a week now, which has been helping because it leaves me more free time to carry on with my own thing. It also helps in thinking more about what I am going to post about. Before I was post 4 times a week and was starting to struggle with topics to write about. Two times cuts down on crap. There, I nailed three goals. Good enough. Oh wait, I’m also going to launch my redesign. Probably gonna post the home page tonight just so I can stop worrying about it. It looks good in FF, Safari and Chrome, I just have to do some adjustments for IE and I’m good to go.

Project: Freelance Cam

I recently scooped up a nice freelance project that I am going to start working on that is going to be done in WordPress. Yes I will be using Sass/Compass, along with the HTML5 Boilerplate, and some other things I can’t think of, but I will drag you along for the ride from step 1 to the end to show you newbies how a complete website is done. Oh, I lied though, I won’t have it on camera. That would just be boring as hell.

Spoon and Microsoft screw my development process

If you were reading my tweets just before Thanksgiving, you will know that Microsoft has asked Spoon to take down the IE browsers off of their browser sandbox. This was an essential part of my development process because it enabled me to test all versions of IE at the same time, and very quickly. Now that MS has stupidly taken the best resource out there to test 4 versions of their crap browser on the same machine away from me, I am forced to use IETester. NOT the same thing. Why the HELL would you hamper developers by taking away such an awesome tool? Do you want sites to look like crap on your garbage browsers? Sure seems like it, because you are hurting the developers big time by doing that. I literally can’t find words to describe how much this pisses me off.

So there you have it

I took a much needed break, I am ready to dig in and learn some new things, and feel happy (EXCEPT FOR THE SPOON THING!). I’m going to drag you along with me for the ride, and hopefully show you some cool crap along the way.