How to Practice Effectively to Improve Your Skills


In my last post, I talked about how deliberate practice is the key to improving your skills. Today we’ll look at the characteristics of this type of practice and how to apply it to web work.

Like my last post, this is based on the book Talent is Overrated. If you want to learn more, I recommend picking up your own copy.

After compiling and analyzing the research on exceptional performance, the book found these five qualities of deliberate practice.

1. It’s designed to specifically improve performance. When most people think of practice,they think of someone doing an activity over and over again.  However, deliberate practice means creating an activity that actually improves your skills.  For example, you shouldn’t choose an activity you’re already good at.

I think about some of the aspiring web designers that I met back in college.  They definitely had skill and I knew they spent a lot of time creating designs on Photoshop, but they didn’t seem to improve much over the years.  When they were seniors, their designs looked similar to their freshmen designs.  As I look back on how they spent their “practice time”, I remember that time was spent on techniques they were already good at.

Your practice rituals should be designed to shore up your weaknesses.  The book gave the great example of Benjamin Franklin, one of the most skilled prose writers in American history.  He learned his craft with an interesting practice ritual.  First, he would find quality essays that were written with more skill than he had.  Next, after some time, he would try to rewrite the essay.  Then, he would check his work to the original work to see how similar they were.

Following Franklin’s example, what if those designers from my college found some designs they wanted to emulate from designers with higher skill?  Next, they could wait a few days and then try to recreate the design from memory.  This activity is much more effective than creating the designs they were already comfortable with.

2. It can be repeated a lot. If you create an activity that’s designed to improve performance, you’ll be failing a lot.  This is because the activity will target an area of improvement, or a weakness.  And no matter how talented you are, research shows that it takes a lot of repetition to shore up a weakness.

Malcolm Gladwell’s bestselling book, Outliers, popularized the term “10,000-Hour Rule”.  This rule states that it takes 10,000 hours of practice to achieve world class success.  10,000 hours is a lot of repetition.  If you practiced 20 hours a week, it would take you 10 years to fulfill all those hours.

3. Feedback on results is continuously available. Many budding writers are advised to write every day to improve their skill.  So, they set a goal to write a certain amount of words every day, but how many of them seek feedback on their work?

Feedback is necessary because you need to know if you’re improving or not.

Franklin had an ingenious method of getting immediate feedback since he would just refer to the existing essay.  Franklin’s practice ritual is a timeless example for any writer.

We can apply this quality of getting feedback to web work.  For example, let’s pretend you’re a web designer and you want to improve your header creation skills.  First, find several quality tutorials for creating headers.  Next, go through the tutorials.  Then, wait a day or two and try to create the headers based on the tutorials.   Finally, seek feedback by checking the steps you took to create the header with the steps in the tutorial.

Programmers can do something similar by finding programming tutorials.  Or you can find quality open source software that uses unfamiliar coding technques and then try to recreate it from memory.  Also, you don’t have to recreate the whole piece of software.  A small but tricky section of code in the software can be useful as a feedback tool.

I can’t leave this point about feedback without talking about mentors.  Mentors are invaluable in feedback process.  If you dig deep enough at the life of any exceptional performer, more than likely you’ll find a mentor that provided helpful feedback to the performer for many years.

The book notes Tiger Woods’ father, Earl Woods.  A lover of golf, Earl mentored and taught Tiger how to play golf starting when Tiger was only two years old.  In the foreword to his father’s book, Woods said: “In retrospect, golf for me was an apparent attempt to emulate the person I looked up to more than anyone: my father. He was instrumental in helping me develop the drive to achieve, but his role — as well as my mother’s — was one of support and guidance, not interference.”

While you may not be as lucky to have a mentor in your field in your family, there are people online that would like to help.  It will take some effort but you should find someone who’s more skilled than you and see if they’ll mentor you.  You’ll probably have to offer something in return since they’ll be spending their valuable time to mentor you.  Yes, this might include cash but if you find a quality mentor, it’s worth spending money for their time, advice, and feedback.

Jonathan Morrow writes how he failed as a blogger until he paid Chris Garrett, a blogging expert, to mentor him.  If you’re a search marketer,  I recommend Aaron Wall’s SEO Training Program.  I’m not a web designer or a coder, so I don’t know of any designers or coders that offer mentoring services.  However, if you have any recommendations, feel free to leave a comment.

Finally, when seeking feedback, it’s important to set aside your ego.  As web workers, we’re often hesitant to ask for feedback on our work, but feedback is critical to improving our skills.  And the best feedback can come from a fellow web worker who’s more ahead of the game than you are.

4. It’s highly demanding mentally. By now you may realize that deliberate practice puts quite a strain on the mental faculties.   It takes a great deal of concentration and mental focus to continually repeat activities that are out of your comfort zone. In fact, the book notes that the mental demands are actually what keep top performers from practicing more.  Top performers understand the benefits of practice but even they can’t practice more than a couple hours a day.  The brain can only sustain so much mental strain before it needs a break.

5. It isn’t much fun. For the vast majority of us, deliberate practice is not going to be enjoyable.  When you’re doing something out of your comfort zone, you will fail a lot and failure is not fun.

I’ve already talked about the mental cost, but there’s also the psychological cost of being honest with yourself and identifying your weaknesses.  The psychological cost continues as you craft practice rituals to shore up those weaknesses.  After you practice, you’ll get feedback, which can be a blow to a weak ego.  Let face it, most people would not consider these things fun activities.

I’ll close with a video from the author of the book and my favorite example from the book.  It’s one of a world class ice skater.  A world class skater looks flawless in the Winter Olympics.  She makes difficult jumps look easy.  However, if you were at her countless practices, you would see the hundreds of falls she experienced before she was able to nail those jumps perfectly.

The same principle applies in any field including web work. You may be envious of other web workers who are more skilled than you. Instead of bemoaning your lack of talent and wishing you had their talent, realize that they achieved their success from hundreds of hours of practice, learning their craft and improving their skills. If you’re willing to practice hard, you too can achieve success.

Here’s the video.


What practice activities can you think of that could help you improve your skills?


Design Focus

Friday Focus 05/29/09: Huge Type

Typography on the Web is growing bigger and bigger—literally! That is this week’s theme on Friday Focus.

Designs of the Week

StackOverflow DevDays

I like the boxy look. Particularly, that there are all these boxes of content in strong contrasting colors all on top of each other on a fixed background. Which happens to be a CSS parallax effect, by the way.

For a Beautiful Web

Huge type can be elegant too. It’s interesting how the inner pages of this site are white on dark gray, while the frontpage is brown on light brown (with a bit of maroon in the footer). And CSS text shadows all over!

Ryan Keiser

I love how bright and bold this site is, apart from the type treatments. It’s very much a study in the colors C, M, Y, K. And this designers loves colors so much he’s got a daily color inspiration (including a downloadable color palette file) section as footer. Good idea!

Social Media Weekly

DesignWhen the Design Doesn’t Match the Messaging

ProgrammingJavaScript Debugging Techniques in IE 6



Transform your text with text-transform

Text-transform is an incredibly useful CSS property, yet also one of the most underused. Here are its possible values (with examples):

none : Default. Defines normal text, with lower case letters and capital letters
e.g. The quick brown fox jumps over the lazy dog.

capitalize : Each word in a text starts with a capital letter
e.g. The quick brown fox jumps over the lazy dog.

uppercase : Defines only capital letters
e.g. The quick brown fox jumps over the lazy dog.

lowercase : Defines no capital letters, only lower case letters
e.g. The quick brown fox jumps over the lazy dog.

How useful is text-transform? Well, let’s say you want all of your h3 headers to be in all-caps on your blog. You could type it in with all-caps in your blog title field, but there are a few problems there:

  • You would have to do this every time you wrote a blog post.
  • Should you decide, in the future, that you don’t want all h3 headers in uppercase- you would have to rewrite everything.
  • For blogs or sites with multiple authors, you would have to make sure each author knows to type in uppercase for a certain field.
  • The search engines that index you will show your titles IN ALL CAPS, which looks kinda spammy.

So here’s what you do. You write your blog titles normally, and in your stylesheet you add:

h3 {text-transform:uppercase}

This way, your titles are in uppercase. You can transform them anytime by changing uppercase to capitalize or lowercase. You don’t need to tell other authors which things to capitalize or type in all uppercase. And the search engines will publish them normally in their results. Everybody wins.

And what if you want your blog title h3s to be uppercase, but not the h3s in your sidebar? That’s where none comes in. Add something like this to your stylesheet:

#sidebar h3 {text-transform:none}

and voila! All h3 titles in your sidebar revert back to normal casing.

Do you use text-transform? What are your favorite underused CSS properties?



Did I break your concentration?

Before I had a laptop, I would grab a pad of paper, a pen, and my dog-eared thesaurus, and go out to our patio to write while watching the sun come up every morning. Once I got my shiny new Macbook, I expected to get a lot more writing done. Except that every time I stopped to check a word or reference online, I’d find another interesting link- to an article that might help my story, maybe, or a forum discussion on a particular theme. I’d stop and check my email, or decide to make a quick visit to Facebook… and, well, you get the idea. The point is that faster, better computers and technology should automatically translate to better productivity- but with all that power comes far too many distractions.

What finally worked for my writing productivity was discovering WriteRoom, a full-screen environment that takes away everything else on your screen- so it’s just “you and your text”. (WriteRoom is for the Macintosh; Windows users should check out DarkRoom).

When I’m designing or coding, I’ve found that Isolator (Mac OSX) helps my concentration tremendously, allowing me to automatically hide everything but the current window I’m working in- including the Dock and the MenuBar. An even simpler application is Backdrop, which gives you a giant blank window against which you can take screenshots and focus your attention on whatever you like (it’s free, too). For something similar on Windows, check out DropCloth or the wonderfully named Jedi Concentrate.

How do you beat your concentration killers?



Friday Focus 05/22/09: Headshots

Don’t laugh! Don’t think it’s anything morbid, either! Let’s see how this week’s websites have made use of people’s heads as part of their designs.

Designs of the Week

Jedal Italian Fashion

This site feels a little heavy because everywhere you look there’s something, but it does help that the headshots in the background are in neutral hues, not bold, high-contrast ones. It makes the colors on the shoe products pop, too. I like that the featured products slideshow use big photos, is placed front and center, and contains ample whitespace.

Seth Said

Now for something cleaner and simpler. Good use of bold colors and whitespace. And you can’t go wrong with Seth Godin’s head!

Gavin Castleton

A one-page site with transparency, grunge, big backgrounds, and horizontal scrolling—what’s not to like? The split-screen effect, with varying fonts even, provides maximum impact and a great way to divide the two main sections of the site.

Social Media Weekly

Fonts, CSS10 great free fonts for @font-face embedding

HTML, AccessibilityImporance of HTML headings for accessibility



About your about page

If you’ve got a new blog up, and haven’t edited your About page, please do. I can’t count how many times I’ve discovered a new promising blog, and clicked through to the About page, only to see the heart-sinking text:

This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.

Think about it: the about page is so important it’s coded into every new WordPress installation- and yet so many of us neglect to edit it.

So what makes a good About page?

  • It’s usually where you introduce yourself (or your company)- although you should definitely have a short introductory blurb on your main page anyway.
  • It helps to put a photo of yourself up, too- people like to see a real human being is behind a site.
  • Contact information is good to have here, even if you have a separate Contact page.
  • More “random” personal stuff belongs here too. If you’re the type who likes to answer those “25 things about me” quizzes, go ahead and post it here.

Here are some excellent About pages I’ve found online:

SitePoint’s About Page They’ve really gone all-out here, with statistics, a historical timeline, a newsfeed, and a short list of who’s who.

Twitter’s About Page not only features avatar links to their employees’ twitter accounts, they answer questions such as “Where did the idea for Twitter come from?” and my favorite “Isn’t Twitter just too much information?”.

Jason Kottke calls his The exciting About page– tongue in cheek, yes, but he definitely gets it right. His About page features a reverse chronology of his life, some answers to frequently asked questions, and details on how to best contact him.

Shaun Andrews’ About Page is an example of a simple but still interesting one. A wonderful designer (we interviewed him here at Devlounge a few years ago), he provides a bulleted list with short bits about himself.

Do you read About pages? Are there any About pages you love?



The Talent Myth: Why Talent is Overrated And What’s Really Important

I just finished reading Talent Is Overrated. It’s an eye-opening book that made me reconsider what I’ve thought about talent, success, and achievement.

I used to believe the common myth that talent has a lot to do with success and achievement. However, the book gives a lot of evidence including in-depth research studies and real world examples that talent may not have much to do with exceptional achievement at all.

Geoff Colvin, the author of the book, argues that deliberate practice is the key.  And not just a couple months of deliberate practice but years.  In fact, it usually takes at least 10 years of deliberate practice before an individual proves his greatness.  He goes over the lives of exceptional performers like The Beatles, Warren Buffett, Bill Gates, and Jerry Rice and shows that each of them had habits of deliberate practice for many, many years before making it big.

Even the child prodigies like Tiger Woods and Mozart that we often think of as supremely talented reached their success early in life because they started practicing very early.  Colvin credits Tiger’s and Mozart’s fathers. Tiger’s dad had him practicing golf when he was only two years old while Mozart’s father had Mozart learn about composing when he was only three years old.

So, what does all this have to do with development, design, and other forms of web work?

Well, if talent is not the answer and practice is, then most of us have to rethink things.

If you consider yourself more talented than your competitors, then you”ll be tempted to coast, rely on our talent, and neglect practice. This leaves you vulnerable to competitors that practice very hard and therefore, will out-achieve you in the future.

If you don’t consider yourself very talented, you can have hope of huge success by practicing hard and well.  You don’t have to be limited by your own perceived talent.

And most importantly, we need to figure out what deliberate practice is and how to create the types of practice activities that actually lead to improved performance.  Fortunately, Colvin gives us a clear definition of deliberate practice.

Next week we’ll look at this definition and see how we can apply it to web work.



Top 5 Online Shop Solutions

When times are hard, every buck counts- and one of the quickest ways to make a buck is to sell something. In the old days, this usually meant holding yard sales, taking out ads in the classifieds, or selling goods at the local farmer’s market.

Today, of course, thanks to the wonderful world wide web, we’ve got options- and I mean way more than Craigslist. Here are some of my favorite solutions for selling your stuff online- whether it’s a scarf you knitted or a WordPress theme.

Shopify is a fully-hosted solution, meaning that you pay them a monthly fee to set up an online shop for you, and take care of everything from hosting to security. What I like most about Shopify is how good their hosted shops look- their templates are 100% customizable, which is great news for designers like me. And if you’re looking to sell digital, non-tangible goods, it’s a snap with FetchApp, which works in tandem with Shopify.

Big Cartel is by far one of the quickest and easiest online shop solutions. Designed for smaller shops (their tagline is “Finally, a shopping cart for the little guy.”), the shops here are customizable to a certain degree with themes- but they all look great. Big Cartel is free for five items- but sometimes, that’s all you need to sell- and they don’t take a percentage of your sales.

PrestaShop. The two solutions above are great if you want something instant and fully-hosted, but what if you want to host it yourself? PrestaShop has my vote as a great e-Commerce shopping cart that’s also free. It’s open-source, with an active user community and some very nice themes.

WordPress Plug-ins. If you’re looking for a WordPress solution, I’ve had very good results with the WP e-commerce plug-in from Instinct. Its free version is quite powerful. But be sure to check out Shopp, which is newer and very impressive so far. It starts a $55 for a single-site license.

Finally, PayPal’s Shopping Cart hasn’t failed me yet- it might be the least sexy solution here, but if you want a solution with no-hassles and no upfront fees, or you think your buyers would feel most comfortable buying on PayPal, this might just be the best solution for you.

What’s your favorite way of selling stuff online?


Design Focus

Friday Focus 05/15/09: Institutional Impact

This week’s Friday Focus features different institutions of society as design inspiration for the featured websites. Did they make you do a double-take too?

Designs of the Week

Tyler Thompson

Very interesting use of these halftone patterns and fine line art juxtaposed against bright, summery colors. I’m not to thrilled I have to scroll horizontally manually (where’s JavaScript scrolling when you need it?) but other than that, fascinating concept.

Bernardo Améndolla

Now this is like the exact opposite of the previous one: bold, dark, warm, gritty. Good execution all the way to the footer.

Dollar Dreadful

If there were an award for the “closest imitation of an ancient publication”, this site would probably win it. The staggering amount of old typefaces and illustrations keep the site interesting despite its stark black and white appearance. Lovely and amusing at the same time.

Social Media Weekly

DesignNegative Space

PhotoshopMake High-Impact Backgrounds for Your Designs with Photoshop

TypographyIlliterate Typography by Simon Page

CSSVertically Center Multi-Lined Text

CSSStyling your Lists: 20+ Brilliant How to’s and Best Practices



PHP for Newbies

I knew my husband really understood me when he came home one day with a present for me: the book PHP for the World Wide Web. At the time, online tutorials- especially for PHP- were few and far between, so I relied on that massive book, balancing it on the edge of my desk as I typed in my first PHP code (“Hello, world” of course) on an even more massive computer.

Today, we have a variety of PHP tutorials online- from well-written text guides, to free courses, to video tutorials. Say what you will about the boom of the Internet, the fact is that it’s made learning so much easier.

If you’re looking to learn the basics of PHP- or if, like me, you know a little bit and want to further develop your skills (I never did finish that book!), here are some good ones to check out:

PHP: A Simple Tutorial. This one, from php.net, is wonderful because it really is simple. They even include comments from users, which I found very useful.

KillerPHP’s PHP Tutorials. Oh, how I wish this was around back in the day! KillerPHP serves up video tutorials on everything from What is a Programming Language to Object-Oriented PHP.

PHP Video Tutorials. The tutorials here are well-presented, and the site is nicely designed. They offer both free and paid video tutorials- the former covering the basics of PHP, and the latter really getting into the “meat” of things (e.g. creating a shopping cart or job website from scratch).

w3schools’ PHP tutorials. I never tire of recommending w3schools- I’m always grateful, and a little overwhelmed, by the sheer volume of the information they provide. Things around here aren’t very sexy, but they’re well written and to the point.

Where did you learn PHP?



Keep Your Marketing Simple to Achieve More Success

I’ve found that the best marketing plans are pretty simple.  Especially if you’re busy, you don’t want to overplan your marketing because you’ll  get overwhelmed by too many marketing activities and end up being less productive.

Over the years, I’ve gained a good amount of marketing experience and knowledge.  I’ve done these types of marketing: social media, SEO, blogging, video, and email.  I could apply every single thing I’ve learned to each of my projects, but if I did that, I would have too much going on.  I would be much more effective if I just picked a few appropriate tools for each project.

The execution of marketing plans is actually harder than it looks at first glance.  It takes focus to carry out a plan competently and it’s easier to focus with simple plans.

Also, productivity is all about getting things done – not having the best plans.  Therefore, you don’t want to spend too much planning.  Plus, most plans inevitably get changed anyways as you spend time on a project and find out what works and what doesn’t.

Right now I’m doing SEO for a client and I’m focusing 70% of my work on just guest posting.  Guest posting is not the flashiest SEO activity but I feel in this case, it’s a good plan.  I did some research in my client’s niche and found that many of the popular bloggers in the niche link out liberally, so guest posting should provide good returns.

Here’s another example.  I recently met a door to door salesman at gaming tournament.  He told me about his work and surprisingly it seemed like lucrative business.  The entrepreneur in me thought that his business could work well online, so I looked at some relevant keywords to check their competitiveness on Google.

They keywords were not competitive at all so I sent him a proposal to partner with him by creating a site that offered his products.  My plans are very simple.  I’ll just optimize his site for local search since he only sells in the city we live in and I’ll ask a couple of my friends to link to the site.

Because his keywords are not competitive, I think these two simple activities will be enough to get him a front page ranking.

Here’s the takeaway.  Each project is unique and requires its own set of marketing plans.  And the simpler the plans, the better.

How can you apply this?  One place you can start is your skills.  If you have some writing chops, then create a blog since blogs are great marketing tools.  Then, be consistent and write 2-3 posts a week and also create a guest post once every two weeks.  If you execute this simple plan for the next couple of months, you’ll attract a lot of traffic to your site.

If you’re interested in video, try creating videos and then uploading them to YouTube.

How simple are your current marketing plans?



Pretty up your tooltips

Tooltips, those little boxes that show up when you hover over a block of text, are one of my favorite types of GUI elements- they’ve become so common, showing up on websites, blogs, and software applications, that when I mouseover something I don’t understand and a tooltip doesn’t appear, I get frustrated.

Adding tooltips to your links are simple enough- use the title tag. Here’s an example of a link with a title tag tooltip- you should see the words “Awesome Web Development Blog” when you hover over this link: Devlounge.

Now that’s fine, but what if you want to pretty up those tooltips? Here are some ways you can do that:

Balloons & Boxes by Sheldon McKay This one, based on balloon.js, is simple enough and is a quick way to make your tooltips stand out. It requires five files, has great online documentation, and allows you to use your own images.

dhtmlgoodies.com’s tooltips I highly recommend looking at their Tooltip for forms script. Forms are usually where you’re looking for interaction from your reader, and offering them tooltips to describe various parts of the form is- well, it’s good form.

Good Looking Tooltips I like this one because it’s by far the easiest to implement among the javascript versions. Uses one javascript file, with css classes to add to your existing stylesheet. It looks great, too.

Pure CSS Tooltips Of course going purely CSS is a wonderful idea- no need to include another pesky js file. You style it using CSS. For slightly more fun, also look at CSS Bubble Tooltips.

Finally, if you’re serious about your tooltips, have a look at Prototip 2, which costs three euros for a single domain, or fifteen euros for unlimited domains. These prices are for non-commercial use- commercial licenses are considerably higher. For your money, you can automatically generate a variety of tooltip styles for your site, some very pretty ones, and others still with more functions than you can shake a stick at. I do think, though, that adding images to your tooltips, as well as very very long tooltips, can be overkill.

Do you respond better to prettier tooltips? Do you use them regularly in your posts?