Archive for December, 2012

Opinion Column: Why Won’t Helvetica Go Away?


  

Update: Hours after the publication of this article Indra Kupferschmid published an article in which she corrected some of the facts presented in the original article and provided an opposite view on the issue. We republished Indra’s article to correct the factual errors, with her permission of course. Make sure to check the corrections before reading this article.—Ed.

The other day someone sent me a link to a website with the preposterous title of “The 100 Best Typefaces of All Time�. Topping the chart was Helvetica, and that stirred my ire. I dismissed the list because it was based on marketing figures from one source, FontShop, coupled with the opinions of half a dozen mostly Berlin-based typographers, but I was still incensed.

Photo

When it comes to, say, boxers, you can handicap the various athletes in the ring and predict that Muhammad Ali would beat Jack Johnson or Jim Corbett and that, therefore, he is number one, but a lot of other factors come to bear on your decision: sentimentality, the fact that Ali is acknowledged (by people like me, with no real knowledge of the sport) to be “The Greatest�; he has name recognition, and so on. But how do you evaluate a typeface? Is it just based on its widespread use? Or its suitability to the subject at hand? Ease of reading? Familiarity?

Photo
Bust portrait of Muhammad Ali by Ira Rosenberg, from the World Journal Tribune. (Image: Library of Congress)

For Helvetica, an explanation of its history helps to explain its longevity. Most typeface designs are the result of fashion or changes in taste; some are technologically driven. When iron printing presses were introduced around 1800, sharper, crisper types such as Bodoni and Didot were created. When laser printers came along in the mid-1980s, with their bitmapped fonts, students in Holland began producing typefaces that reflected the quality of the poor printing. Letters in Studie (Eindhoven, Lecturis, 1983) shows examples by Jelle Bosma and Petr van Blokland designed on a 40-pixel grid. Emigré, an early digital type foundry, produced Oakland (1985) and other lo-res types for the market.

So, fashion and technology, which are ever evolving as they become obsolete, are as influential on type design and typography as on any other medium, from dressmaking to car design. When printing technology became so good that uniformly smooth, crisp faces were the norm, designers longed for the grit and noise found in old letterpress posters and started a fad for trashed and distressed faces. But like everything else that is fashionable, typefaces retire to await a future recall.

The art of reviving typefaces began in the Victorian era, and among the choices of contemporaries, the original Caslon is a model that has endured. In the 20th century, typeface revivals seemed to outstrip new designs. Production accelerated as two big companies, Linotype and Monotype, tussled in the field. The head of typeface development at the British Monotype Company, Stanley Morison, said, “Type today does not require inspiration so much as investigation.� He led the charge into the past with modern versions of the types Aldus (Bembo), Fournier, Bell, Walbaum and others. Linotype (under George W. Jones) countered with superior versions of Granjon (ironically named as it is the best Garamond copy of the metal era), Baskerville and Janson.

At that time, two sans-serif types introduced in the late 1920s dominated the market for advertising. These were Monotype Gill Sans and Futura, of the German Bauer foundry. Suddenly there was a rush to create, imitate or revive sans-serif types. The Berthold foundry of Berlin dusted off the matrices for its Akzidenz Grotesk (1898), while their rivals, the Haas Type Foundry of Basel, decided to rework Schelter Grotesk, which had been issued by the Leipziger Schelter & Giesecke foundry in 1880. This became Neue Haas Grotesk in 1957, which was then picked up by the Stempel foundry in Frankfurt. It wanted to identify the type with the emerging popularity of Swiss graphic design and chose the ancient Roman name of Switzerland, Helvetia, and so Helvetica was reborn in 1961.

Photo
Max Meidinger’s original 1957 design of Helvetica (from the Haas Typefoundry brochure “From Helvetica to Haas Unica,� Münchenstein, ca 1979).

The reason for the popularity of Gill Sans and Futura was that they turned their back on these Grotesks of the 19th century, which were worn out. Eric Gill took a new approach: pen-made humanist calligraphy was the basis for his type (he had also worked on the drawings for the London Underground alphabet with his mentor, Edward Johnston). These letters made more coherent word shapes and were easier to read than Grotesks. But Gill’s type standardized the distinct curled-tail “l� and shed-roofed figure “1� of Johnston’s design, which led to confusion with the capital “I� (a problem in many sans serifs).

Photo
The third (digital) version of Edward Johnston’s proprietary London Underground typeface, photographed on the Piccadilly Line in 1983.

Paul Renner’s Futura was designed to reflect the new machine age, with simple geometric shapes, straight lines and circles that gave it a cool Art Deco elegance. Both types are now imbued with a lot of cultural baggage, so Gill suggests the British Broadcasting Corporation and Futura has become nostalgic shorthand for the era of streamlining.

Photo
Paul Renner’s Futura Light, 1928, from a Bauer type foundry brochure (New York, ca 1930)

But in the 1930s, these two types were immensely popular in Europe and North America, and the other founders had to respond quickly. Returning to the 19th century should have been out of the question for the competition, except that the German foundries had been flattened in the Second World War and were slow to retool.

Helvetica became a national brand, an identity for the popular “Swiss style� of typography of Emil Ruder and Armin Hofmann, which quickly spread as their well-indoctrinated students took the new look back to Yale and other American schools. From BMW, Bayer and Lufthansa in Germany, the Helvetica look spread to Bank of America, Knoll, Panasonic, Target, Crate&Barrel, JC Penney, Mattel, American Airlines, Sears, Microsoft and other corporations.

In the late ’90s Microsoft was selling a million copies of Word each month and gave away 14 fonts with its program. Its knock-off of Helvetica is called Arial. Linotype had taken over Stempel, and then Haas, and so consolidated its ownership of Helvetica and many of the clones. The stark sans-serif look that had first symbolized revolution in the hands of Russian typographers in 1917 became institutionalized as the bland face of corporate smugness.

Photo
Swiss-style poster for the Pratt Institute, Brooklyn, New York, 1972. (Courtesy of Frances Butler)

As it spread over the graphic landscape like melted runny processed cheese, I suggested renaming it Velveetica. Its blandness and general horridness oozed out on all sides. It was neutral, but also tasteless and was taking over typography. Nothing could stop it as designers unquestioningly copied one another in adopting it. The idea that it was more modern than Gill Sans or Futura has more holes in it than Swiss cheese.

Photo
A card advertising Helvetica filmsetting (Bauer Alphabets, New York, no date)

After the adoption of the Swiss style internationally, another event caused the persistence of Helvetica: the arrival of the personal computer. Apple could fit only a few types into the memory of its LaserWriter printer driver. Times and Helvetica were decided by executive fiat (based on their popularity at the time); Symbol and Courier were required by the operating system. Then, a team of experts was called in to choose more types: Palatino, Zapf Chancery, Avant Garde, Bookman and Century Schoolbook were picked by committee. One of the committee, Sumner Stone, told me, “In retrospect they seem pretty strange and random. … Times and Helvetica were redrawn, and with Helvetica the narrow and oblique came free because it was just an algorithm.� With only garbage to pick from, there was a visual blight of Times, Helvetica and Palatino in the early days of “desktop publishing,� which lasted well beyond their sell-by date.

Photo
Helvetica brochure Frankfurt (D Stempel AG, no date)

Speaking of which, the US government (which uses Helvetica for tax forms and other official printed matter) specified it for “generic packaging� in (wouldn’t you guess?) 1984 (see top of page). Everyone blindly accepts Helvetica, most of them we assume because they follow leaders like lemmings, but why do they extoll its worth? Is it a great international hoodwinking conspiracy, like the Emperor’s New Clothes?

In 1993, Robert Norton, who was a Microsoft bagman, invited prominent people in the field of typography to contribute to a book entitled Types Best Remembered / Types Best Forgotten (London & Kirkland, Washington, Parsimony Press) and write about their favorite and least favorite typefaces.

Peter Karow (who created the Ikarus program for type digitization) wrote about Helvetica: how he had digitized it in various clones throughout the 1970s and 1980s as competing companies put out their own similar versions. It was his favorite, it seems, but with reservations. In 1993, he relates, Stefan Rögener told him that “90% of creative directors use Helvetica, Futura, Garamond and Baskerville. Give me a pistol!�

Photo
The Ikarus program allowed designers to alter their Bembo clone into a Helvetica clone, although why would they? (From “Ikarus for Typefaces in Digital Form� by Peter Karow, URW Unternehmensberatung Karow Rubow Weber GHBH, Hamburg, 1983)

I took the opportunity to name Helvetica my least favorite type and wrote a reasoned (I thought) explanation of why it is not a good typeface: “The letters are square and squat and don’t communicate with their neighbors. … There is more internal space in the counters than around the words, creating ugly and standoffish silhouettes.� The point I was making is that, to operate legibly, words have to have a visual balance between internal and external white space, a kind of aerodynamic flow. It’s a physical fact, and types like Syntax or Frutiger work far better than Helvetica, which remains self-enclosed and constipated-looking.

Legibility operates not at the level of characters but of ideational units. Adults read clusters of letters, such as “the,� as a single unit, or their brains group clusters of characters to speed comprehension. The better these units cohere, the more legible they will be (assuming that speed and comprehension are goals). Typefaces that have many characters that resemble one another (such as “a� “s� and “e� in Helvetica) impede the reader, as does the fact that the enclosed letter shapes prevent them from fusing to make more cohesive units. These are scientifically established aspects of letterform design and should take Helvetica out of the equation for anyone looking to create a legible message. Communication is a science and doesn’t really have much to do with aesthetics, other than the reader’s comfort via familiarity.

Photo
Static versus dynamic letterforms

In this illustration from “Syntax-Antiqua, eine serifenlose Linearschrift auf neuer Basis (Syntax, a Sans Serif on a New Basis)� (Gebrauchsgraphik, 1970), Erich Schulz-Anker (Manager of Typographic Development at D Stempel AG) contrasts the mechanical Didone-Helvetica development with a humanist line running from Garaldes (i.e. Sabon) to Syntax, designed by Hans Eduard Meier and released by Stempel in 1969. He contrasts them as “static� versus “dynamic� forms. I would further characterize them as illegible versus legible forms. See how the letters on the left stand apart and isolated from one another, while those in the dynamic group relate to their neighbors.

Of course, most lay people can’t tell one sans serif from another. When people say they prefer Helvetica to Arial because the latter is a bad copy, I ask if there’s a difference between a Big Mac and a Whopper, and, more to the point, would you honestly feed either to your kids?

Adrian Frutiger, “Mister Univers� himself, tried to improve on Helvetica with the Univer series, begun in 1954 (and he succeeded, causing the Helvetians to expand their family of weights in response), but then, in his maturer years, he turned his back on Univers to design the family that bears his own name (Frutiger, 1976). With the Internet, Helvetica has retrenched and, despite the Arial clone that mimics it (see “The Scourge of Arial� by Mark Simonson), gotten new legs as a font that stays the same cross-platform. If you use any Adobe product, you cannot avoid Helvetica.


Comparison of four sans serifs from “My Fonts�

Everything about Helvetica is repellant: from its uptight aura to its smug, splendid isolation. How it persists in the face of such brilliant alternatives as Frutiger and Syntax defies logic.

Mike Parker, who oversaw production of Helvetica at Linotype, wrote, “In the sixties by cutting it for the Linotype we made Helvetica the Swiss sans serif of choice across most of the world.� But, he adds ruefully (in Types Best Forgotten), “Never again should we have to endure quite such dulling repetition of any single design.�

Photo
First showing of American Helvetica (Mergenthaler Linotype, New York, no date)

I sincerely believe that people (even designers) who say Helvetica is legible are simply confused. It’s pervasive, certainly. We see it everywhere — that’s why we think we can read Helvetica — but it is not nearly as legible as, say, Frutiger or Syntax, for the reasons I have stated above. Syntax is not merely a legible typeface: Syntax is beautiful, it’s sublime, it sings. Well, you argue, Helvetica is neutral. Yes, Helvetica is neutral, but it also symbolizes blandness and conformity and… well, sorry Swiss people, boredom.

Photo
Helvetica-Kursiv flyer from D Stempel advertising Linotype-Matrizen in 6 to 10 point (Frankfurt, no date)

In 2007, Gary Hustwit made a documentary film about the typeface in which various talking heads exuded enthusiasm for the wretched mess that is Helvetica. The corporations have agreed, and the bland new world feared by Huxley, Orwell and other writers of the last century is one step nearer.

(al)


© Alastair Johnston for Smashing Magazine, 2012.


Festive Spirit 2012: 50 Awesome Christmas Wallpapers To Santa Up Your Desktop


  
Christmas Snowmen It is December already, and you know what December stands for -- festive season! Yes, that's right. Christmas is just a few days away, and everyone seems to be getting in the festive mood. Speaking of festive mood: We noticed that our older posts, in which we collected Christmas freebies, are much sought-after these days. Thus we decided to not let you stick with the stuff from yesterday and deliver a brand-new set of 50 awesome and fresh Christmas wallpapers.

Passion For Excellence: How To Become A Top WordPress Professional


  

“First, let’s set a few things straight: becoming a top WordPress [developer professional] is hard work — very hard work. It’s going to take a lot of time, energy and determination. If you’re looking for an easy checklist or some “fast passâ€� to the top, you’re going to waste your time. Being one of the best is hard, and statistically speaking, the odds are stacked against you.”

If you’re a regular reader of Smashing Magazine, that will no doubt sound familiar to you. A few weeks back, Jonathan Wold wrote a post on how to be a top WordPress developer. But development isn’t the only way to get ahead in WordPress, because one of the great things about it is that you don’t need to be a developer or an expert. You just need a passion for WordPress, for open-source software and for being part of a community.

How To Become A Top WordPress Professional
Image Credit: @cdharrison

In this article, I’m going to take a look at how you can be a top WordPress professional — this advice could apply to developers, but equally to bloggers, support reps, designers and everyone in between.

But why bother with WordPress in the first place? Cory Miller is the co-founder of iThemes, which offers professional WordPress themes, plugins and Web design training. He’s also the co-author of the latest edition of WordPress for Dummies. Miller started a blog with WordPress in 2006, as a total newbie with no WordPress experience, who started to learn by releasing free themes to the community. I asked him why people should get involved with WordPress.

“With WordPress you’re not sleeping on someone else’s couch. It’s open-source software that you control. You can do whatever you want with it, whenever you want. You’re not reliant on someone else’s stupid terms of services changes, or that you can’t touch the code because it’s locked away on someone else’s servers. I think we take for granted that freedom too often, or maybe forget it when the next [insert hot social media platform] rises up.

But the biggest reason for being involved with WordPress is it just makes Web publishing easy. Virtually anyone can have a blog or website on the Web with WordPress. And that opens up some amazing opportunities for everyone involved.”

WordPress makes it easy for people to publish a blog or website; it democratizes Web publishing. And its ease of use also makes it possible for people who aren’t PHP geniuses to make it to the top.

Why Be A Top WordPress Professional?

The sky is the limit with WordPress.
The sky is the limit with WordPress. (Image: stefanorugolo)

Being average and normal is underrated. You can’t be the best at everything, and if you spend your life trying to be, you could end up with a horrible neurosis. Besides, it can be nice to be just okay at something and accept that you’re okay at it — those things tend to have less stress associated with them. That said, it can be satisfying to strive to be better at the things that you’re passionate about, and whether that’s WordPress itself or the idea of taking control of your own destiny and running your own business, aiming for the top has a bunch of fringe benefits. For instance, the top WordPress professionals:

  • Make the most money
    If you want to make the most money, you need to be the best at what you do, whether that’s writing, training, supporting, launching startups or project management. If you’re good, your reputation will grow and you’ll be able to get higher rates. Check out this eBook from Code Poet with advice from top WordPress professionals on getting your pricing right.
  • Get the best clients
    As Wold pointed out in his article, once you get to the top you have a lot more freedom about what you say “yes” to. I’d like to add that as your rates start increasing, you’ll find that clients are increasingly easy to deal with. Charging more = better clients.
  • Have the most influence
    If you’re passionate about open-source software and WordPress itself, building your reputation means more opportunity to have influence.
  • Be part of a community
    The WordPress community is huge and growing. By taking part in that community and building a reputation for what you do, you’ll make connections with other people who are passionate about WordPress and who are at the top of their game. You don’t need to be the best developer to make it in WordPress, but it helps to make connections with them.
  • Make the right connections
    If you build your reputation in the WordPress community by contributing back, going to WordCamps and Meetups and generally getting involved, people will start to take notice of who you are. Once you’re on a person’s radar, work will be sent your way.

I’m Not A Developer! What Can I Do?

You do not need to know how to write code to get ahead in WordPress. If the only people involved in WordPress were developers, then WordPress wouldn’t be the software that it is today. Here are some of the things you can do:

  • Designer
  • Project Manager
  • Entrepreneur
  • Support Pro
  • Consultant
  • Blogger
  • Documentation Writer
  • Teaching & Training

If you aren’t convinced that you can make it doing these things, check out my post on the WordPress Economy to scope out some of the people who are already doing it.

A great example of this is Mika Epstein (more commonly known as Ipstenu). For her, WordPress started out as a hobby but it quickly became more rewarding than her IT job at a bank where she did everything from application installs on desktops to deployment automation and monitoring for servers. Recently, though, she’s started a job as a support specialist for DreamHost.

Epstein is also the support representative for WordPress, leading up the support and documentation teams on WordPress.org. This has involved talking to hosting companies and theme/plugin shops about what is expected from them on the support forums. She’s responsible for the Supporting Everything WordPress blog, wrangling people into editing, helping out and supporting other supporters.

Epstein is just one of the people who I’ll be talking to who are at the top of the WordPress game but who wouldn’t be simply categorized as a developer.

Starting Out

To be a top WordPress professional, you don’t need to be able to write PHP, know how to query a MySQL database or know how to schedule a cron job. The WordPress ecosystem is vast, and there is room for lots of different specialties. However, if you are going to be a top WordPress professional, you should at least know how WordPress works, have a good imagination and become an expert in some area of it.

Use WordPress

It may seem self-evident, but using WordPress for yourself is a great place to start. This could be publishing your own personal blog or building a website for a friend or family member. Find a way to use WordPress. It’s a little crazy to start out deciding you want to get to the top of something when you’ve never experienced that product from perspective of the user.

“You’re involved with WordPress the minute you use it for yourself. That’s the beauty of open-source software and community. Your initiation into it is your ‘Hello World!’ or your first website and blog post with it.

So just start blogging and fall in love with it like I did 7 years ago.”

- Cory Miller

Install WordPress Locally

Use MAMP to install WordPress on your computer.
Use MAMP to install WordPress on your computer.

You don’t need to be a developer to set up a development environment on your computer. It may seem daunting. I remember that the first time I set up Xampp with WordPress, I was totally confused and had no idea what I was doing. I muddled through it eventually and was amazed that it was something I could do. Now I have more local WordPress installations than I can keep track of. Installing WordPress on your computer means you can do whatever you want with it, without having to worry about a live server. You can break it, hack themes and plugins, install whatever you want and you don’t need to worry about domain names, production websites, etc. I run local installations for specific plugins such as bbPress and BuddyPress, which allows me to explore working on websites in different contexts. Once you’ve installed WordPress a few times on your computer, you’ll realize how remarkably simple it is. Tutorials: install WordPress using Xampp (Windows) or MAMP (Mac)

Follow the Blogs

There are a plethora of WordPress blogs out there that you can learn from. Add them to your RSS reader and stay up-to-date. With so many blogs that have “WP” as a prefix, it may seem like they all have the same thing to offer, but the best are distinctive and each offers something unique. Here are some of my favorites:

  • Smashing Magazine (WordPress Category)
    Long form articles, tutorials and editorials
  • WP Realm
    International WordPress news, opinion and articles from experts across the community (and edited by me!)
  • WPCandy
    WordPress news and podcasts. There’s also a Pros section which you can sign up for once you’re a Pro!
  • WPBeginner
    WordPress tutorials, how-tos, videos and reviews, along with a nice coupon section for getting discounts on WordPress-related products and services.
  • WPMU.org
    Daily tips, tutorials and WordPress news.
  • WPLift
    Regular round-ups of WordPress plugins and themes, as well as the occasional tutorial.
  • Code Poet
    Interviews with prominent WordPress experts, short and useful eBooks and links to useful resources.

It’s also worth signing up for wpMail.me which is a weekly email with WordPress articles from across the community.

Be Enthusiastic

A little bit of enthusiasm goes a long way. Mason James started out applying for a job as a WordPress developer at WPMU DEV, but he did a terrible job at the plugin modification task they gave him, and he was turned down for the job. However, they so appreciated his communication skills and positive attitude that they took him on as a supporter.

“Regardless of the industry, people want to work with someone they enjoy being around. Having a positive attitude and being willing to tackle challenges are both qualities any company is going to be looking for. I’m also passionate about supporting websites and seeing any problems resolved. I’m a natural problems solver — it’s like a game to me, so that fits in quite nicely.”

His enthusiasm has taken him a long way, and now Mason is CEO of his own WordPress support, management and project management agency, WP Valet.

Listen

It’s approaching 10 years since WordPress was born. That means that there are a lot of people in the WordPress community with lots of experience. There are people with experience running startups, managing support forums, building plugins or theme shops or contributing to WordPress itself. Find these people and listen to what they have to say. Dougal Campbell curates a Twitter list called WPLeaders, which is a great place to find people with WordPress experience.

Don’t just rush in with your awesome idea, making yourself look a little dumb in the process (though even that can be a good learning experience). Take the time to learn how the community works and functions, along with the etiquette, before you dive in.

Get Involved

People gathered at WordCamp Netherlands 2012.
People gathered at WordCamp Netherlands 2012. (Image: Erno Hannick)

Now that you have learned the basics of WordPress, it’s time to start getting involved. Of course, you could go it alone, and there are plenty of people running successful WordPress businesses who have nothing to do with the community. But there are so many reasons to get involved that you should jump straight in. Here’s why.

  • The community provides a free training ground where experts will give you feedback and help you to make WordPress better.
  • If you’re freelancing or running your own business, the WordPress community can provide support and human connections in what can be an isolating situation.
  • By getting involved with WordPress, you’re helping to create a better product which everyone can benefit from.

Follow Make WordPress.org

Make WordPress.org is where you can find blogs for all the contributor groups.
Make WordPress.org is where you can find blogs for all the contributor groups.

Where there used to be mailing lists, now there are blogs. All of the different contributor groups are gathered together at Make WordPress.org. You can follow all of them or check out the ones that are relevant to you. The Make WordPress.org blogs are:

  • Core
  • Plugins
  • Accessibility
  • Support (including support forums and docs)
  • UI
  • Themes
  • Polyglots
  • Events
  • Systems

There is something for everyone, and each blog has a vibrant community working in their area to make WordPress better. Each group has its own lead who is responsible for shepherding, wrangling and leading the team.

Support Others

The WordPress support forums are an excellent resource for WordPress users, but they’re also a great place for you to hone your WordPress skills. We learn best by teaching things to other people. I have learned 95% of what I know about WordPress from writing articles about it. Equally, answering questions in the support forums will help to clarify your own knowledge of WordPress. When you an explain a concept clearly to someone else, you know that you’ve got it — answering support questions is a great tool for that.

And not only will it help to clarify your own thinking, but it introduces you to different perspectives. Here’s Epstein:

“If you want to learn about WordPress, there is no faster way to figure out the nitty gritty than to try to help people. You can only imagine what you can dream up, but the millions of users out there come to this from a totally different place, and they have myriad different ideas. Bar none, I learned more about WordPress by helping than I did by ‘researching.’ Being asked a question and not knowing the answer means you have a goal you never would have given yourself, and it’s inspiring.”

Check out Epstein at the recent WordCamp San Francisco talking about getting involved in the WordPress support forums.

Write About WordPress

You could start off writing about WordPress by heading to the WordPress Codex, finding a random page that needs to be edited and editing it. The Codex is run on MediaWiki, and anyone with a WordPress.org username can edit it. The Codex is always in need of updating and editing, and contributing your own articles will help to hone your WordPress skills. You could also help out with the WordPress user handbook, which is currently in the process of being edited at the Supporting Everything WordPress blog.

WordPress.org isn’t the only place to write about WordPress. If you find a solution to a WordPress problem, write it up on your personal blog. People will find it via Google, and it’ll help them with their own problems. You could also submit a post to a WordPress blog. Many blogs are often looking for guest posts, and some of them are even paid writing gigs! Like providing support, the process of writing things up will make processes and solutions even clearer in your own mind.

Translate WordPress

Around 40% of WordPress downloads are not in the English language — that is a whole lot of non-English language copies of WordPress in the wild. Translating WordPress is a great way to help out and make connections in your local community. Here’s what Zé Fontainhas, the WordPress Polyglots lead, had to say about it:

“Translating WordPress has loads of benefits for you as a WordPress Professional: not only do you increase your karma in both the global and your local community, but in the process you get to look at the code more closely than most. You may pick up bugs or improvements that no one else sees, and this unique perspective will teach you far more about WordPress than the average WordPress user will ever pick up.”

Meet the Community

Working online is great, but there’s nothing like meeting your peers face-to-face to create stronger and deeper relationships. The WordPress Foundation supports two types of WordPress events: WordCamps and Meetups. WordCamps are large annual conferences, usually two days long, at which WordPress experts and enthusiasts gather to share their experience of WordPress. Meetups are more regular, often once a month, and are short informal gatherings that might involve hacking or presentations. Attend events, and, once you feel confident enough, speak at them. Don’t feel that you have to be a WordPress genius to give a presentation. If you’ve done something useful that is worth sharing, then share it. Having been to three WordCamps this year already, I can’t stress how important they are in terms of building relationships, friendships and your profile. You can check out my write-up of WordCamp Netherlands to learn more about them.

Form Relationships

There are times in the WordPress community when arguments erupt between personalities, and people are yelling at each other on Twitter or flaming in comment threads. But this is the exception, not the norm. While that is going on, there are hundreds of people working on WordPress itself, and thousands of people all over the world building WordPress businesses, who are working at improving WordPress.

From my own experience, I wouldn’t have built my own business if I didn’t have developers to ask dumb questions of, designers to make things look good for me, other WordPress experts to offer advice and help me to improve. At the same time, I offer advice on writing, proofreading and editing where I can. The diverse group of people whom I consider to be my closest WordPress peers have been invaluable in getting me to where I am today, and will no doubt take a role in shaping my future. These relationships are important. Seek out people you can work with and hold on to them.

Get Ahead

Get ahead of the race.
Get ahead of the race. (Image: Tambako the Jaguar)

Know Who to Ask

By forming relationships with the right people, you’re on the first step to getting ahead. These don’t need to be the most prominent people, but rather people with knowledge and expertise, people who you can trust. You don’t need to be the best developer to make it in WordPress, sometimes it’s just a matter of knowing the right people to answer your questions. This does not mean (and this is important) that you find out who the best people are and bug them on Twitter, nor should you call people at 4 a.m. to ask them for help finding WordPress themes (true story). By building relationships and interacting with the community, you’ll have a whole collection of people who can help you with issues whether it’s caching or media queries or finding a good developer or finding the right hosting company. Getting ahead isn’t always about being the best at something yourself; it’s just knowing the right people and asking the right questions.

Know What’s Happening

If you want to get ahead, you need to know more than just WordPress as it is in the current release. You should stay up-to-date with what will be appearing in WordPress, and not just in Core but in the wider community. If you’re working with clients in any capacity, you should know what’s in store for them in upcoming WordPress releases. There are plenty of ways to do this.

  • Run the nightly builds
    Keep the nightly builds installed on a local WordPress installation. This will keep you up-to-date with any changes as they happen.
  • Keep up with Core development
    You can follow what’s going on in Core in a number of ways: following Make WordPress Core, keeping up with the recent development chats and following WordPress Trac. You can also follow @wordpresstrac on Twitter for live updates in your feed.
  • Follow user interface (UI) changes
    Major changes to the UI can be confusing for unprepared WordPress users. Keep your clients and customers informed of any updates by watching the Make WordPress UI blog.

Call Things Out (Without Trolling)

Once you’ve gotten to know WordPress well, are engaged with the community and are aware of all of the nuances around it, you’ve gotten yourself into a great position for calling things out when you see a problem. Some problems don’t warrant a public airing, others do. Here are some great examples of criticisms of WordPress or the community that have led to extensive debate and discussion in the comments:

Know When to Take a Break

Don’t get rid of your TV, and definitely don’t throw away your computer games, or your books or any of the other things you love to do. For the first few years I worked on WordPress, I was working all day and all night. Even now, I regularly clock off after midnight. Working with WordPress, running your own business and getting involved with the community can be intense. There are a lot of personalities; there are clashes and arguments and upsets that will get to you. This could be anything from a rude person on a support forum, to a flashpoint on Twitter, to just feeling overworked and tired. You need to have things that you can do to switch off and take a break.

Andrea Rennick is part of the support team at StudioPress, co-author of WordPress All-in-One for Dummies and runs WordPress eBooks. She’s an avid quilter.

“I have my sewing table set up right next to my desk. I can swivel from one to the other. Quilting gives my brain something else to work on, whatever problem I may be focused on. It’s hard to be distracted when there is a sharp needle running up & down at top speeds right next to your fingers. It also gets me up and moving, out of my chair. Selecting fabric, cutting the pieces and especially the basting process give me another reason to not sit for yet another hour.”

Whether it’s quilting, opening a bakery, doing yoga, driving fast cars or whatever, it is essential to step back from the WordPress world, switch off your brain and get a little perspective from time to time.

Keep Listening

Once you’ve got to the top, you still need to listen. Other people continue to have different perspectives from you and no matter how right you think you are, there are cases where you are going to be wrong. It may be that you’re so wrapped in WordPress that it takes an absolute beginner to point out something that you’re missing, or you’re lacking the knowledge in a specific area. Getting to the top doesn’t mean you know all things about everything, just that you’re really good about something. Keep listening to those who are also really good, and even those who aren’t.

Miller highlights another great reason to keep listening.

“Look for people’s pain points and frustrations. Those are opportunities to serve people AND make money doing it. The best products and services fill gaps in where WordPress can’t or stops short. Innovate and make something better, which often means saving people time, energy, headaches and money.”

Conclusion

In his article, Wold suggests that the top 20% of developers earn more than $50 an hour. That’s not entirely true. The WordPress survey didn’t only gather info from developers, but from people like me, other WordPress professionals who have built businesses around writing, project management, design, support, blogging, training, consulting or any of the myriad things that you can do with WordPress. And there are plenty of WordPress professionals who are earning far in excess of $50 per hour.

There are other rewards too, beyond the financial. Our world is increasingly fragmentary, especially for those of us who make our livelihoods online. Being part of a community means having people to communicate with, to share ideas and collaborate, to form business partnerships and friendships. If you want to take the easiest route to the top, and have fun while you’re doing it, then it’s by listening, learning, sharing, collaborating and contributing.

(cp)


© Siobhan McKeown for Smashing Magazine, 2012.


From The Server To The Client: Client-Side Templating


  

Using templates in the browser is becoming more and more widespread. Moving application logic from the server to the client, and the increasing usage of MVC-like patterns (model–view–controller) inspired templates to embrace the browser. This used to be a server-side only affair, but templates are actually very powerful and expressive in client-side development as well.

Client-side templating article image
Image Credit: Viktor Hertz

Why Would You Use It?

In general, leveraging templates is a great way to separate markup and logic in views, and to maximize code reusability and maintainability. With a syntax close to the desired output (i.e. HTML), you have a clear and fast way to get things done. Although templates can be used to output any kind of text, in this article we provide examples using HTML, since that is what we want in client-side development.

In today’s dynamic applications, the client frequently needs to update the user interface (UI). This might be done by fetching an HTML fragment from the server that can be readily inserted into the document. Yet this requires the server to support delivering such fragments (as opposed to complete pages). Moreover, as a client-side developer who is responsible for the markup, you want to have full control over your templates. No need to know anything about Smarty, Velocity, ASP, some other obscure server-side syntax or even worse: dealing with spaghetti code such as HTML containing those infamous <? or <% tags all over the place.

So let’s take a fresh look at a viable alternative: client-side templating.

First Impressions

For starters, I’d like to give a definition of the term “template”. Here is a good definition from foldoc:

“A document that contains parameters, identified by some special syntax, that are replaced by actual arguments by the template processing system.”

Let’s observe an example, and see what a basic template might look like:

<h1>{{title}}</h1>
<ul>
    {{#names}}
        <li>{{name}}</li>
    {{/names}}
</ul>

This probably looks pretty familiar if you know HTML. It contains HTML tags with some placeholders. We will replace them with some actual data. For instance with this simple object:

var data = {
    "title": "Story",
    "names": [
        {"name": "Tarzan"},
        {"name": "Jane"}
    ]
}

Combining the template and data should result in the following HTML:

<h1>Story</h1>
<ul>
    <li>Tarzan</li>
    <li>Jane</ul>
</ul>

With the template and data separated, it becomes easy to maintain the HTML. For example, changing tags or adding classes will only need changes in the template. Additionally, adding an attribute to repeating elements such as the <li> element only needs to be done once.

Template Engine

The syntax of the template (i.e. the format of the placeholders such as {{title}}) depends on the template engine you want to use. This engine takes care of parsing the templates, and replacing the placeholders (variables, functions, loops, etc.) with the actual data it is provided.

Some template engines are logic-less. This doesn’t mean you can only have simple placeholders in a template, but the features are pretty limited to some intelligent tags (i.e. array iteration, conditional rendering, etc.). Other engines are more feature-rich and extensible. Without going into details here, a question to ask yourself is whether and how much logic you allow in your templates.

Although each template engine has its own API, usually you will find methods such as render() and compile(). The render process is the creation of the end result by putting the actual data in the template. In other words, the placeholders are replaced with the actual data. And if there is any templating logic, it is executed. To compile a template means to parse it, and translate it into a JavaScript function. Any templating logic is translated into plain JavaScript, and data can be fed to the function, which concatenates all the bits and pieces together in an optimized way.

A Mustache Example

The production of the example above can be performed by using a template engine, e.g. mustache.js. This uses the popular Mustache templating syntax. More about them, and alternatives, later. Let’s take a look at a little JavaScript to produce some results:

var template = '<h1>{{title}}</h1><ul>{{#names}}<li>{{name}}</li>{{/names}}</ul>';
var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};

var result = Mustache.render(template, data);

Now we want to show this in the page. In plain JavaScript this could be done like this:

document.body.innerHTML = result;

That’s all! You can try the above in your browser by placing the Mustache script before your own code:

<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>

Or, you can try this example at jsFiddle.

Organizing Templates

If you’re like me, you probably don’t like to have the HTML in one long string. This is hard to read, and hard to maintain. Ideally, we can put our templates in separate files so we still have all the benefits of syntax highlighting, and the ability to properly indent the lines of HTML for readability.

But this leads to another issue. If our project contains a lot of templates, we don’t want to load all of those files separately, since this issues a lot of (Ajax) requests. This would be bad for performance.

Scenario 1: Script Tags

An often seen solution is to put all the templates within <script> tags with an alternative type attribute, e.g. type="text/template" (which is ignored for rendering or parsing by the browser):

<script id="myTemplate" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
    <ul>
        {{#names}}
            <li>{{name}}</li>
        {{/names}}
    </ul>
</script>

This way, you can put all of your templates in the HTML document and prevent all the extra Ajax requests to those templates.

The content of such a script tag can then be used later in your JavaScript as a template. The following code example, this time using the Handlebars templating engine and a bit of jQuery, uses the previous <script> tag:

var template = $('#myTemplate').html();
var compiledTemplate = Handlebars.compile(template);
var result = compiledTemplate(data);

You can try this example as well at jsFiddle.

The result here is the same as in our Mustache example. Handlebars can use Mustache templates as well, so we use the same template here. There is one (important) difference though, which is that Handlebars is using an intermediate step to get the HTML result. It first compiles the template into a JavaScript function (we named it compiledTemplate here). This function is then executed using the data as its only argument, returning the final output.

Scenario 2: Precompiled Templates

While only one function to perform the template rendering may seem convenient, there are significant advantages to splitting up the compilation and rendering process. Most importantly, this allows for the compilation part to happen on the server-side. We can execute JavaScript on the server (e.g. using Node), and some of the templating engines support this precompilation of templates.

Putting it all together, we can organize and serve a single JavaScript file (say, compiled.js) that contains multiple, precompiled templates. This could roughly look like this:

var myTemplates = {
    temlateA: function() { ….},
    temlateB: function() { ….};
    temlateC: function() { ….};
};

Then, in the application code we only need to populate the precompiled template with data:

var result = myTemplates.templateB(data);

This is generally a far better-performing approach than putting templates within <script> tags as discussed before, since the client can skip the compilation part. Depending on your application stack, this approach is not necessarily harder to accomplish, as we’ll see next.

Node.js example

Any template precompilation script should at least do the following:

  • read the template files,
  • compile the templates,
  • combine the resulting JavaScript functions in one or more files.

The next basic Node.js script does all that (using the Hogan.js templating engine):

var fs = require('fs'),
    hogan = require('hogan.js');

var templateDir = './templates/',
    template,
    templateKey,
    result = 'var myTemplates = {};';

fs.readdirSync(templateDir).forEach(function(templateFile) {

    template = fs.readFileSync(templateDir + templateFile, 'utf8');
    templateKey = templateFile.substr(0, templateFile.lastIndexOf('.'));

    result += 'myTemplates["'+templateKey+'"] = ';
    result += 'new Hogan.Template(' + hogan.compile(template, {asString: true}) + ');'

});

fs.writeFile('compiled.js', result, 'utf8');

This reads all files in the templates/ folder, compiles the templates and writes them to compiled.js.

Note that this is highly unoptimized code, and does not include any error handling. Still, it does the job, and shows that it doesn’t require a lot of code to precompile templates.

Scenario 3: AMD & RequireJS

The Asynchronous Module Definition (AMD) is gaining more and more traction. Decoupled modules are often a great way to organize an application. One of the most popular module loaders is RequireJS. In a module definition, dependencies can be specified, which will be resolved and made available to the actual module (factory).

In the context of templates, RequireJS has a “text” plugin that allows you to specify text-based dependencies. AMD dependencies are treated as JavaScript by default, but templates are just text (e.g. HTML), so we use the plugin for that. For example:

define(['handlebars', 'text!templates/myTemplate.html'], function(Handlebars, template) {

    var myModule = {

        render: function() {

            var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};
            var compiledTemplate = Handlebars.compile(template);
            return compiledTemplate(data);

        };
    };                

    return myModule;
}

This way, the advantage lies (only) in the ability to organize the templates in separate files. This is nice, but it needs an extra Ajax request to get the template, and it still needs to compile the template client-side. However, the extra request can be removed by using the r.js optimizer that comes with RequireJS. This resolves dependencies, and will “inline” the templates (or any dependency) into this module definition, vastly reducing the number of requests.

The absence of a precompilation step can be solved in a couple of ways. It may come to mind to have the optimizer also precompile the templates (e.g. we could write a plugin for r.js). But that would require a change in the module definition as well, since we would be using a template string before optimization, and a template function afterwards. Yet this would not be terribly hard to deal with, either by checking for this variable type, or by abstracting away this logic (in either the plugin or the application).

Watching Templates

In both scenarios #2 and #3, we can do even better by treating our templates as uncompiled source files. Just like CoffeeScript, or Less or SCSS files. We can have our template files watched for changes during development, and recompile them automatically when a file is changed, i.e. just like you would compile CoffeeScript into JavaScript. This way, we’re always dealing with precompiled templates in our code, and the optimizer effortlessly inlines the precompiled templates in the build process.

define(['templates/myTemplate.js'], function(compiledTemplate) {

    var myModule = {

        render: function() {

            var data = {"title": "Story", "names": [{"name": "Tarzan"}, {"name": "Jane"}]};
            return compiledTemplate(data);

        };
    };                

    return myModule;
}

Performance Considerations

Rendering UI updates by using client-side templates is often the way to go. Still, the best performance for the initial full page load is achieved by serving that page as a whole. This allows the browser to render the HTML as is without requiring any JavaScript parsing or extra requests for data. This might be a challenge, especially for pages that are both dynamic and require the best initial loading times possible. Then, ideally, templates are being developed and reused on the client and the server to both support the best performance and still be maintainable.

Two questions to consider here are:

  • What part of my application is mostly dynamic, and what part requires the best possible initial loading times?
  • Do you want to move the processing to the client, or should the server do the heavy lifting?

The answer can only be given by actually measuring different approaches. Yet by using precompiled templates, the client usually doesn’t have a very hard time rendering them on the fly. And in case you want to reuse templates on the client and server, you will find a logic-less template syntax to be the most versatile.

Conclusion

We have seen many strengths of client-side templating, including:

  • Application servers and APIs are best at serving just the data (i.e. JSON); client-side templates fit in perfectly.
  • HTML and JavaScript naturally match the skills of client-side developers.
  • Using templates enforces a good practice of separating presentation and logic.
  • The templates can be fully precompiled and cached, this leaves only the actual data to be refreshed from server.
  • Moving the rendering phase from server to client may positively affect performance.

We have been looking at quite some aspects of (client-side) templating. Hopefully by now you have a better understanding of the concept, and why you would use it.

(cp)


© Lars Kappert for Smashing Magazine, 2012.


Is Concrete5 The Right CMS For Your Website?


  
Back in October, I did an evaluation cum review article about MODX. The aim of the article was to assess the usability and feasibility of MODX as a Content Management System for your website. My sole purpose behind the article was to help the readers in their quest to choose which CMS to use for their websites. The response to the article was good, and I’d like to thank everyone who read the article and took time to share it and comment on it. Carrying on from October, today, I shall be taking a look at yet another CMS...

  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress