Arbor Web Solutions

WYSIWYG Considered Harmful

2012-02-27T16:03:00+00:00

If you attended my WordCamp Miami 2012 presentation, then you already know my thoughts on the WordPress visual editor: every time we show it to a user, we are telling them a lie. The visual editor's interface looks like Microsoft Word, and users know how to use Word. They know that in Word, if you want to change the way something looks, you just highlight it with the mouse and make your changes. Word doesn't have a notion of "meaning" for parts of your document (unless you are a fairly advanced Word user, which is perhaps 1% of the people who use Word on a regular basis).

The problem with the visual editor looking like Word is that it is not Word. On the Web, content (HTML) and presentation (CSS) are separate. The way content is written actually has meaning. And when our users enter content for their sites, whether they use the visual editor or not, that content will at some point be transformed into HTML markup.

Mandy Brown (@aworkinglibrary) has been releasing a series of articles lately on the content industry, and I was quite pleased to see that her thoughts on the subject mirror my own:

It’s time content people of all stripes recognized the WYSIWYG editor for what it really is: not a convenient shortcut, but a dangerous obstacle placed between you and the actual content. Because content on the web is going to be marked up one way or another: you either take control of it or you cede it to the software, but you can’t avoid it. WYSIWYG editors are fine for amateurs, but if you are an editor, or copywriter, or journalist, or any number of the kinds of people who work with content on the web, you cannot afford to be an amateur.

Mandy suggests learning HTML:

Fortunately, there’s a plus side to all this: HTML is easy to learn. Even if you never peeked at the source for a website, never so much as authored an anchor tag, you already know most of the principles behind it, because they emerged from the texts themselves. You do need to learn a new syntax—a new way of expressing what the text means. But syntax is where editors excel.

(Source link: a working library: Markup)

While it is true that HTML is a new way of expressing familiar ideas for authors and editors, the average WordPress user is neither. That's why I recommend teaching your users Markdown instead - the "meaning" of the text is still hidden from your user, but you separate their content from its presentation. The only way to "emphasize" something in Markdown is to use Markdown syntax; no changing the font-size from a dropdown or giving it a different color.

In either case, WYSIWYG editors are not doing us or our users any favors. Unless your users steadfastly refuse to try something new, turn off the visual editor in WordPress and put your users on the path to better Web content.

On Making Stuff

2012-02-24T09:28:00+00:00

when you don't create things, you become defined by your tastes rather than ability. your tastes only narrow & exclude people. so create.

why the lucky stiff (on Twitter, before he/she deleted his/her account)

Structured Content in WordPress

2012-02-18T15:00:00+00:00

Thank you to everyone who came to my WordCamp Miami 2012 talk today on structured content. Here are some links and resources if you want to learn more:

Slides. You can find the exact website I used to give my presentation today at wcmia.arborwebsolutions.com. You'll need a relatively recent browser (Safari 4+, Chrome, Firefox 9+, IE 9+, maybe Opera 11.60; does not work on mobile / tablet browsers) to see all of the animations.
Structured content. The concept of structured content comes from the broader field of content strategy. If you want to know more about content strategy, look for books and blog posts by practitioners like Karen McGrane (mentioned in my talk), Kristina Halvorson, or Erin Kissane.
Magic Fields. I was using Magic Fields 2. You can add Magic Fields to your own site through the Plugins part of your admin (just click "Add new plugin", search for "Magic Fields", and install "Magic Fields 2"). You can get documentation for Magic Fields at their site, magicfields.org.
Search Everything. Again, you can install Search Everything through the Plugins section of your admin site.
Markdown. The canonical source of information on Markdown is creator Jon Gruber's site, Daring Fireball.
Markdown on Save. Install this plugin by (wait for it…) searching for it through the Plugins section of your admin site. You may also want to try Markdown on Save Improved; the "improved" part is making Markdown the default entry method.

Finally, if you attended my talk this afternoon, please take a moment to leave me some feedback at SpeakerRate. I'd really appreciate it!

Thanks again, and I hope you all enjoyed this year's WordCamp Miami!

On Making Your Own Olympics

2012-02-06T11:20:00+00:00

Assuming we will always have the Olympics, could you suggest a better way of doing them?

Why assume that? If you want to run and jump, go do it in a field for free. If you want to run and jump with a Kenyan or a Croatian, go out and find one – there are plenty around my way – and go and run and jump together in a field. Costs nothing. You may even make a few bob by charging people to watch you.

Will Self, "The Olympics Suck", Bristol University Student Newspaper

On Working in Academia (and Blogging)

2012-01-30T14:50:00+00:00

The prof in charge of my research project offered me a spot in his lab, a tuition waiver, and a whole $12,000 dollars as a stipend if I would commit 4~6 years to him. That’s a great deal if, and only if, you have recently immigrated from a low-wage country and need someone to intervene with the government to get you a visa.

If you really like the atmosphere at universities, that is cool. Put a backpack on and you can walk into any building at any university in the United States any time you want. Backpacks are a lot cheaper than working in academia. You can lead the life of the mind in industry, too — and enjoy less politics and better pay. You can even get published in journals, if that floats your boat. (After you’ve escaped the mind-warping miasma of academia, you might rightfully question whether Published In A Journal is really personally or societally significant as opposed to close approximations like Wrote A Blog Post And Showed It To Smart People.)

Patrick McKenzie, Don't Call Yourself a Programmer, and Other Career Advice

Dieter Rams' 10 principles of good web design

2012-01-25T11:00:00+00:00

I couldn't have said this any better than .net Magazine. This list is golden.

Dieter Rams' 10 principles of good web design

Using Alternating Classes in Sinatra Templates

2012-01-25T07:48:00+00:00

When I started working on this site's redesign, I made a conscious decision to try to make my markup as lean as possible. I was going to use all the new HTML5 semantic elements, and if a CSS selector could get to the item I needed, I would try to avoid using a class or id on an element. So I wrote a lot of style rules like this one:

:::css
.services ol li:nth-child(4) {
    /* do stuff here */
}

:nth-child is incredibly helpful, but there's a problem: it's not supported in Internet Explorer 8 and below. Yes, IE6 is practically dead, and IE9 is the new shiny hotness, but IE7 and IE8 still make up a sizable percentage of web users that few websites can afford to ignore. What to do?

The answer is to go back to older ways of accomplishing the same result - namely, by adding more classes and ids to your elements to provide styling hooks.

A digression on zebra striping.

This brings us to one of the more common uses for :nth-child. One way to enhance the readability of a table is to use alternating background colors on each row, so that the eye can more easily scan a table from left to right. With CSS3, this is easy to accomplish:

:::css
table tr:nth-child(even) {
    background: #ccc;
}
table tr:nth-child(odd) {
    background: #eee;
}

But the scourge of old IE raises its ugly head again - no support for :nth-child. So we need a way to add class names like .even and .odd to each <tr>.

Programming to the rescue

Adding all those class names to your markup yourself is a pain. Thankfully, programmers are good at being lazy and there are a number of ways to make the server do all the work for you.

My pages are using Haml, so I needed to find a solution in Ruby. Searching the internet, I quickly found this approach:

:::haml
%tr{ :class => cycle('odd', 'even') }

But using this approach in Sinatra doesn't work, because cycle here is a Rails function, and we're not using Rails, so the interpreter throws a small fit because it can't find the function definition. Again, what to do?

Just like before, we go back to older ways of doing things. Here is the code I ended up using:

:::haml
- even = true
- for page in pages
    - even = !even
    %tr{ :class => even ? 'even' : 'odd' }

I set up a variable, even, and set it to true. Then, on each trip through the loop, I change even to the opposite value. I add a class to my <tr> with the ternary operator, ?. This tests the value of even, and if it is true, adds class 'even', and if not, adds class 'odd'. The result is zebra striping in old versions of Internet Explorer!

Better. Faster. Stronger.

2012-01-23T20:13:00+00:00

About four months ago, I wrote about my plans to move Arbor Web Solutions from WordPress to Blogofile. Well, as always happens, new solutions presented themselves as I was working. What you are reading now is the new Arbor Web Solutions, rebuilt from the ground up and running on NestaCMS.

Nesta leverages the power of Sinatra, a Ruby-based DSL for web applications, to create a hybrid between fully-dynamic site engines like WordPress and static site generators like Jekyll. Pages and posts are just text files, marked up using a language like Markdown or Haml. Those text files are run through a template on demand and served up as web pages.

Why did I move to this setup? Basically, it fits my workflow and preferences better than the WordPress site I was using previously. All my content is in plain text files that are easily searchable and back-uppable (in my case, on Github), and I can make and edit posts from any device with a text editor and an internet connection. That means I get full access to every aspect of my blogging system from both iPad and iPhone.

If you've visited this site before, you will probably notice a few differences. First, the old site's "articles" have been split into two categories - Articles and Journal. Articles will be the home of tutorials, how-tos, and more in-depth writing on specific topics. Journal, where this post is located, will contain site news, brief posts on a variety of topics, quotes, and links.

Second, I have removed comments from this site. Before you get worked up about this, I would like to offer a compromise. If you would like your comments listed on this site, write your response on any publicly-available forum - your own blog, Twitter, Google+, you name it - and send me a link. I will add the link to your reply on the relevant page of my site.

Finally, the new site should be fully functional in the majority of web browsers out there - including mobiles, tablets, and desktops. However, there are some known issues viewing this site in Internet Explorer. Rest assured that I am resolving these bugs as quickly as possible, and that while some parts of this site may look less than attractive, the entire site is functional in all browsers.

That is all for now. I will be writing a series of articles on the technologies underlying this new site and how it came to be over the next few weeks.

Thank you for reading this, and I hope you will visit regularly!

On Learning to Play Guitar

2012-01-18T13:33:00+00:00

It's not how many years you've been playing that matters - it's how many hours.

Merlin Mann

Triple Dare (CSSOff 2011)

2011-11-20T12:00:00+00:00

For the 2011 UnmatchedStyle CSSOff competition, the designers at Paravel created this single-page design for a fictional TV show, "Triple Dare". Contestants in the CSSOff had to convert a PSD of the design into a fully-working site, with a panel of judges scoring each contestant on the quality of their markup, its usability and appearance across multiple devices and browsers, total file size and more.

In approaching this challenge, I started with a mobile re-design of the layout, progressively adding styling to end up at the design as provided. CSS3 allowed me to size images appropriately for every screen size, and heavily-optimized 8-bit PNG images provided small file sizes (as well as transparency support in Internet Explorer 6). I used CSS3 3D transforms to create fun interactive effects, and a small amount of JavaScript to animate the countdown timer at the bottom of the page.

The result is a fast-loading site that is extremely light on file size, making for a site that works well on everything from a mobile phone to a widescreen TV.