Because I’m nerdy I decided to write a quick PHP script to handle the assigning of people for my family’s Secret Santa. It’s short, simple, and not-error checked or bug proof in the least.

So nerdy. Maybe later I’ll do it as a javascript snippet.

This post originated with a comment I made in a discussion about web design on Hacker News concerning what skills someone should have to be a good web developer. At the time I wrote a quick five minute response listing a few things that I felt were important skills for new web developers to have for website design. These are things that I wish I had had a better grasp on when I entered the world of professional web development.

First I need to clarify the difference between web design and web development. Web design tends to lean towards the user interface and the actual website. Web development refers to the underlying code, and the inner workings of a site. There’s a good amount of overlap but they often get used as synonyms when they’re not; I wanted to clarify their meanings to those who may be fuzzy on the differences.

photo credit: stevendepolo

Of the two I’m a web developer, my design skills resemble that of a four year old with crayons. Well maybe a little better, but I definitely trend towards the underlying code when it comes to what I work on.

For web development you need to start at the front-end. You don’t need to be a whiz in Photoshop, the fact is that most web developers form a sort of symbiotic relationship with designers they know. So when a project comes in they are able to outsource the design to the designer and then take it to build the site. The inverse holds true also; designers usually will call upon developers to write the backend code for them. In doing so everybody wins!

However, you can’t do this job without a good understanding of the the front-end. While designers may do the graphics, and even the html creation, it will eventually fall on you to make the site look right in the browser. And to do so, you need to understand HTML, CSS and Javascript.

• HTML – This entails knowledge of the main tags. HTML is, in truth, a very simple language and anyone can learn it at its basic levels. To be a developer though you need to understand more than that. You’re the engineer to the designer’s architect. If they want something, you must know how to make it happen. Clients and designers both hate hearing the word ‘no.’ There are, in truth, very few limitations to what websites can do these days. It’s up to the developers to know how to make something happen.
• CSS -This is knowing how to style pages, this is really a core skill these days. You’ll get the designs from the designer and sometimes they may have done all of this for you, sometimes you just get the graphic of how it should look and it’s up to you to cut the image and reassemble it on the page. Before the days of CSS, people used Tables to accomplish a lot of the stuff CSS is used for today, but CSS is so much more powerful (and in turn, more confusing) that it is a core skill for web developers.
• Javascript – Javascript is also a mandatory skill, though these days the Javascript libraries really overshadow Javascript itself. These days I write almost no javascript and only jQuery. Now jQuery may not be for you, you may be more of a Prototype or moo or YUI person and that’s fine. The library only matters to those who work with it. If you’re working for a web development firm they most likely have a standard library they want you to use so that other developers are able to work on the project as well.

photo credit: library_chic

These front-end skills are akin to learning some of the basics of home improvement. Knowing how to spackle, paint walls, properly hang paintings and mirrors, do tiling in the bathroom. They are all “superficial” as they take place on the surface of the house.

Then shifting to the server-side (backend), you’ll be best served by picking a language and focusing on it: PHP is probably the easiest in terms of entry. Lots of documentation (albeit spotty) and lots of people asking questions you’re likely to ask. PHP gets a bad rap because programmers so often turn to Google for answers, but the fact is that if you don’t know how to do something you can probably find it elsewhere online. But I urge you not to just copy, edit and paste. Be sure you read the code and understand it. Once you understand it you can then learn from it.

The reason I recommend PHP is that it doesn’t cost anything to work with. ASP.net is a bit more difficult to get working for free. Also Ruby on Rails is up and coming as a solid backend coding language, quite hot among web 2.0 companies but it isn’t near as popular as PHP and ASP.net. The fact of the matter is any programming language can be used as a server side backend, people write in Lisp, Perl, Scheme, C, C++, Ada, probably Fortran. It’s just finding the system that allows you to do it in a way which makes sense to you.

In most any language you’ll find frameworks which provide a good basis for web applications. CodeIgniter, CakePHP and a whole host of others currently exist for the PHP language and are used in corporate level projects. Again there is no “right” choice, you’re just going to have to begin playing around and dive into them to decide which ones to pursue.

photo credit: Looking Glass

The strength in a framework is that it can smooth the rough edges in a language as well as present you with added functionality. While the language is like working on building the house from the ground up, from laying the ground supports and a sturdy base, up to building the roof and walls, frameworks are like buying a pre-built house exterior. You have an exterior which takes care of a lot of things, keeping the rain off your head, holding out intruders, it’s not a home really. You’ve got a lot of work to put in walls, doors, hallways, and other conveniences. It just gets you closer.

At a lower level, when writing the sites, you need to understand Object Oriented Programming as well as other core Computer Science elements. Web developers are still computer programmers and so the programmers who came before us have explored and analyzed a very good amount of knowledge which is pertinent to us. When I was in college I mistakenly thought that I could do web development and not need to know OOP and algorithms but I’ve since learned just how wrong I was.

For websites, Content Management Systems are a main component in projects these days. WordPress, Drupal, MovableType and ExpressionEngine are just a few of the many CMSs out there. Again these are things where depending on what project you do, and who you do it with, and what your preferences end up being. There is no single solitary CMS though there are definitely some that have a deal more respect than others. The power of a CMS is that it handles a great deal of the backend of a website. Managing users, all the different content, the different types of content, and the many ways to present the content, these are all tasks which would take you a while to get a grasp on, even in the most simple of contexts. So for a CMS to handle this in a tested and solid way can allow you, the developer, to dive into the “fun” stuff in building the site.

CMSs and Frameworks have a lot of overlap, the real difference is the amount of completeness. If a framework is an empty shell of a house, a CMS is a pre-fabricated house that lacks furnishings and the other things which make a house a home.

photo credit: {Guerrilla Futures | Jason Tester}

After exploring CMSs, next step is to begin learning to use other sites and their APIs. Like writing a Facebook application, or a Twitter application. To learn these, a good plan is to reinvent the wheel. Want to learn the Twitter API? Build a web twitter client. What to learn Facebook? Make a simple game. A web developer’s knowledge is his coin, and in a realm where the technology changes so quickly you owe it to yourself to explore as much as you can.

Link shorteners seem to be the whipping boy of the Internet right now, everywhere I turn someone is griping about their evils, and their faults, and how they are going to be the downfall of the Internet. And yet, Digg, StumbleUpon, Bit.ly, Facebook and others are all working on this in various ways.

Digg and Facebook both use iframe wrappers to put a toolbar at the top of the window, offering the user enhanced functionality but in turn cloaking the content owner’s site and generally being uncool. Site owners, ones who are serious about blogging and building their following, usually dislike this as they feel that they lose credit or value from the links and traffic.

StumbleUpon has a private beta going on for their http://su.pr link shortener and today they released info about something I am VERY keen on. It’s called Supr:Short according to this page, and it solves a major problem I have with Digg and Facebook’s linking.

Digg and Facebook use iframes to display a javascript toolbar that provides extra functionality and control back on the home site. This is done using a less than desirable iframe because it is the only way to maintain the javascript bar at the top of the window. But StumbleUpon is providing site owners with the ability to host the necessary scripts on their own site by some PHP code and a locally remotely hosted javascript file thus negating the need for the nasty iframe.

The fact that they put the scripts in the control of the user means that everyone wins. The site owner does because they regain the value and the address bar reads their own url. StumbleUpon does because the script sends them the necessary information and analytics and maintain their control bar.

The downside is that it possibly means issues as site owners will need to keep their script up to date. But the gained value more than makes up for the needed maintenance.

I can’t stress enough how exciting this possibility is and that it is a very good direction for link shorteners to go. I unfortunately do not have a beta invite for StumbleUpon, but would love to get one to play with this new development!

Update: – Minutes after I posted this, StumbleUpon released 250 more beta codes into the public. I successfully snatched one and have implemented the SuprShort code on the site. I’ll test it over the next few weeks and write a follow-up detailing my experience. Just a heads up, if you came to this page from http://trickjarrett.com/3gFN then you just used the Su.pr code I talk about above.

Here’s another lunchtime jQuery snippet as the last one proved semi-popular. This one came about today as I needed to expand on an existing expand/collapse functionality to allow users to expand or collapse all of the objects with this functionality.

What had already been done was set a jQuery function to react on the presence of the .expanded class. The way it works is very simple, jQuery grabs all the elements with the .expandable class and then using the :first selector it tests the first one to see whether it is expanded or not. Then depending on the outcome it applies or removes the .expanded class.

The headache with this snippet was my misunderstanding the jQuery.addClass and jQuery.removeClass pieces, originally I had “.addClass(‘.expanded’)” and that add the class ‘..expanded’ – Oops.

I opted to use .is as opposed to the .hasClass simply for it’s short length, no real reason here as both work by my understanding.

Here’s a quick lunch time post to share a simple snippet.

It’s no new technology to have a page break out of frames when they’re not supposed to be in frames. But what if you do want the page to appear in a frame and only break the frame if a link is clicked? Well then we turn to our trusty jQuery and use this little code snippet:

Why would you want to do this? That’s a fair question. For one of our clients at work they embed the header from their site onto the page for a site which sells merchandise for them. Now, we could have created a separate header but then when the header gets updated it needs to be changed in two places. This way it’s just one header file to maintain.

Hopefully this saves other developers ten minutes of their lives.