jQuery for Designers and a weekly screencast!


book-coverI’m pleased to announce that after months and months of writing and editing that the 2nd edition of jQuery for Designers is now available!

Even if you’ve already got the 1st edition sitting on your bookshelf (thank you for that, by the way), you’ll want to check out this updated edition because it’s a huge update. I’ve added in new chapters on responsive design, creating charts and graphs, working with images, and parallax and other scrolling effects.

I’m really proud of how well it’s turned out. I literally combed through each and every code snippet and made sure it was updated to use the latest and greatest from the jQuery library. I removed references to any outdated or abandoned plugins and subbed in updated plugins that are being actively maintained.

And if that’s not enough jQuery learning for ya, I’ve also released a weekly screencast – short snippets that walk through how to use jQuery in digestible bites. If you’re just getting started learning jQuery, then you’ll definitely want to check it out – each week you can follow along and learn a little something new about jQuery.

Here’s the first episode, though there are a few more to go with it!

Now, with that big project out of the way, I’m looking forward to working on some new and interesting stuffs. Stay tuned!

How I beat writer’s block


In today’s episode of the WP Unicorn Project, Suzette and I were lucky enough to speak with Jennifer Bourn about content strategy. We spoke a little bit about techniques for overcoming writer’s block, and I wanted to share mine. It’s call free writing.

I learned this technique in a writing class in college. You get three pieces of paper, a pencil or a pen, and a timer. Set the timer for 15 minutes, then scribble furiously as you try to fill all three pages full from top to bottom in 15 minutes with your writing. No stopping to think, no pausing, no editing.

You might be thinking, “But if I have writer’s block, what am I going to write?” Well, if nothing comes to mind, then just start writing “I don’t know what to write. I don’t know what to write. I don’t know what to write.”

If all you do is just write that over and over again for the entire 15 minutes – mission accomplished! The goal isn’t to write anything usable or useful or even anything that makes sense. The only goal you have is putting words on a page. Any words. Any words at all. The goal is to write fast and fill as much of the three pages as you can. At the end of the 15 minutes, you crumple up the pages and throw them away.

Within 15 minutes, a funny thing happens. Your brain quiets down, you focus, new ideas form. It’s a form of meditation. And no, you can’t type. There’s something about the physicality of the pencil moving across the paper that makes it work so well. It’s just not the same when it’s a keyboard.

How it works

I usually kick off a free writing session by complaining about all the things that are clogging up my brain and making it impossible for me to write: the electric bill I have to remember to pay, the client who wants something by tomorrow, phone calls I need to make, emails I have to write, the fact that my oven desperately needs to be cleaned. Somewhere around the 7 minute mark, things shift. My brain clams down, I feel focused, and my thoughts actually become coherent. By the end of 15 minutes, my writer’s block is cured and I’ve got at least one idea for something I can write about.

I use free writing for other things as well. If I get an upset email from a client and I’m not sure how to respond, a free writing session helps me to move past my own emotions and see the situation from my client’s point of view. If I’m stressed out by the length of my to do list and unable to focus on anything, a free writing session helps to clear my brain and clarify what my priorities should be. If I make a mistake or let somebody down, a free writing session helps me put my gaffe in perspective, focus on how I can fix it, and not get too worked up about it.

Try it!

Next time you’re stuck for an idea for a blog post, try a free writing session. Have to write your own bio? Ugh, that’s the worst. Free writing session! Unsure what sorts of content to include on your website’s homepage? Free writing session!

It always works for me without fail, so why don’t you see if it works for you too? All you need is paper, a pen or pencil, and 15 minutes.

Image credit: Fredric Guillory

Responsive sticky footer woes and fixes


Over the years, I must have used about a dozen different approaches to coding up a sticky footer, with varying degrees of success. I recently stumbled upon an elegant CSS3 solution and immediately put it to work on the theme on this site. But then I discovered some problems. Here’s how I fixed them.

What’s a sticky footer?

Alright, let’s say you’ve got a design that involves a big, chunky footer like the one on this site. If you have a page or a post that’s light on content, maybe just a few lines (like my contact page) and your site visitor happens to have a tall browser window, you don’t want that big footer hanging out in the middle of the screen. You want it down at the bottom of the browser window.


That is the art of coding a sticky footer.

The flexible CSS3 solution

Before CSS3, many sticky footer solutions required you to specify an exact height for a sticky footer, in either pixels or ems. But if your sticky footer contains some WordPress widgets that could be just about any height, then a fixed-height solution just won’t work. Enter CSS3. I usually start a WordPress theme with Underscores, which gives us an HTML structure for the page like this:

We can add just this bit of CSS to code up a responsive sticky footer that works, no matter how tall (or short) it might be:

Now we’ve got a responsive sticky footer that will stick to the bottom of the window.

The first problem and solution

The first problem I encountered was trying to get images, especially images with captions, to behave as expected in a responsive layout. No matter what I tried, the .wp-caption was just too wide, causing horizontal scrolling when the screen was narrower than the image/caption. After hours of downloading assorted themes to check my own responsive image CSS against theirs, it finally occurred to me what the issue was.

Anyone who’s ever had to place a long string of unbroken text, like a URL, in a narrow HTML table column has bumped up against the HTML table’s weird handling of widths when the content in a table cell is too wide. I went back in and added a fixed table layout to the .site div, and voila! My layout was fixed.

I thought it was all smooth sailing from there, until I got a message that my blog was difficult to read on iOS.

The second problem and solution

There I was, all gloaty that I’d remembered about using fixed table layouts, when I got this comment on Google Plus:

Screen Shot 2014-05-07 at 12.27.30 AM

Eek, that didn’t sound good. So I opened up my iPhone to take a look and confirmed that I was seeing the same behavior. The issue was that iOS’s famous momentum scrolling wasn’t working. So you had to laboriously scroll line by line and there was no way to swipe quickly up or down the screen to set off a smooth scroll up or down the page. And, yep, about halfway down, the page was just suddenly blank. What was going on?

Luckily, I didn’t have to poke around too long to find a hint on Chris Coyier‘s CSS Tricks. Turns out that because I had set the <html> element to overflow: hidden, and then the <body> element to overflow: scroll, iOS had taken that as a cue to disable momentum scrolling. Luckily, it was a quick fix to add it back:

And now we’ve got a nice, responsive sticky footer that scrolls nicely on iOS. Phew.

A new approach on the horizon

One thing you’ll quickly learn with CSS is that you can never get comfortable with anything. As much as I like this solution to a sticky footer for now, Flexbox has it all over CSS table-like layouts. Browser support isn’t quite where I’d like it to be just yet, so for now, I’ll stick with this solution, but I’ll be keeping an eye on browser support for CSS Flexbox as it’s an even better solution to the sticky footer conundrum.

Image credit: Mahalie Stackpole

Why frameworks make me cranky


The past few years have been witness to an explosion of frameworks and libraries: CSS frameworks, WordPress theme frameworks, JavaScript frameworks, PHP frameworks…frameworks for just about any language you might want to write code in.

On one hand, this is great. As developers, we tend to solve the same problems over and over again. It makes sense to take advantage of code that’s already written that solves the problem we’re solving right now. On the other hand, it’s so easy to become over-reliant on frameworks. It’s so easy to solve every issue by looking for a a bit of code somebody else already wrote to solve our problem.

What’s so bad about frameworks?

I think that probably the biggest problem is one that I see growing and growing – new and junior-level developers who learn frameworks rather than learning to code from scratch. Rather than learning vanilla JavaScript, they learn jQuery. Rather than learning to make multi-column, responsive CSS layouts, they learn Foundation or Bootstrap. Rather than learning to build WordPress themes, they learn Genesis or Headway. Why is that a problem?

Because someone who’s got jQuery and Bootstrap down can build just about anything, right?

It’s a problem because there’s no real understanding of how the underlying languages work. There’s no knowledge of cross-browser CSS bugs and differences and how to work around them. There’s no knowledge of all the quirks and idiosyncrasies in JavaScript and how they can work for or against what you’re trying to accomplish. There’s no craftsmanship. There’s no deeper understanding of how multiple languages fit together or how the whole is greater than the sum of its parts.

If you can’t create a complex layout without using Foundation, then you’re not a front-end developer. If you can’t code up a slideshow without using jQuery, then you’re not a JavaScript developer. If you can’t create a WordPress theme without using Headway, then you’re not a WordPress themer.

If you don’t know how to create a multi-column, responsive layout that works across current versions of all major browsers without the use of a framework, then you simply aren’t equipped to properly evaluate a CSS framework and determine if it’s the right one for the project at hand.

As my good friend Alex Vasquez likes to say, every framework has a point of view. The person or persons creating the framework have to make certain assumptions, and he/she/they will have their own viewpoints on best practices, how best to deal with Internet Explorer, how best to deal with situations where JavaScript is disabled, etc. The best frameworks for you to use are the ones that match best with your own point of view, assumptions and opinions.

When is it appropriate to use a framework?

You might think after that little rant that I don’t use frameworks, but you’d be wrong. I do. In fact, there are a few that I’m downright smitten with. All their potential drawbacks aside, there are times when it just doesn’t make sense to re-invent the wheel. Let’s be pragmatic. When should you use a framework?

  1. When you can read through a framework, understand everything it’s doing, and why it’s doing it. When you can understand what decisions were made, and agree with why they were made. Go grab an uncompressed copy of jQuery and read through it some time – it’s beautiful, it’s simple, it’s elegant, it’s smart.
  2. When you wrote it yourself. Any developer finds themselves solving the same issues over and over – if there isn’t a pre-built framework that matches your style, create one yourself. You’ll learn more than you thought possible about the language you’re working in and will develop an even deeper and greater understanding.
  3. When you are not, and do not desire to be, a developer, but you really just want to get something accomplished fast. In the real world, sometimes a business owner really does want to build out their own website. They don’t care about making a CSS layout work cross-browser for anyone but themselves. They’re unlikely to ever tackle a web development project again.
  4. You’re learning and you need a leg up to be competitive. There are a million caveats here, but let’s face it – we all need to pay our rent, or land that job, or finish that project before the deadline. If this is where you are, see if you can poke around in the framework you’re working with to understand what’s going on. Read the documentation to understand the point of view of the creator and the assumptions that were made. A well-written framework can be a great learning tool. Be very careful not to rely too heavily on a framework – that’s like a baby that continues to crawl long after he should have learned to walk. Take every opportunity you possibly can to work without a framework so you can learn.

Hand-crafted by master craftsmen
(and craftswomen)

On a recent episode of The Big Web Show, Jeffery Zeldman described a perfect analogy.

Let’s say you wanted to learn to be a luthier – a violin-maker. You could attend an all-weekend intensive course in violin-making. There, you’d learn how to choose the best pre-cut pieces of wood to assemble into the violin body. You’d learn how to evaluate the different types of violin strings on the market and how to buy the best ones for the type of wood you used for the body. You’d learn how to buy the right bow to match the violin you made. You’re a luthier, but you’ve taken many shortcuts to arrive there, and you continue to take shortcuts while you ply your craft.

Or, you could go and be an apprentice in Stradivarius’s workshop. There, you’d learn to walk in the forest and select just the right tree to fell for the wood. You’d learn how to cut and cure the wood. You’d learn how to cure and cut sheep gut to make the strings. You might even learn which shepherds would sell you sheep that produced the best possible raw materials. You’d learn how to gather and treat horsehair to create a bow – what breeds of horses, what age of horse, etc. were the best. And eventually, after months or years of working with journeymen and masters, you’d eventually be awarded by a panel of masters and be allowed to join a guild and call yourself a master luthier. No shortcuts taken.

You can tear a poem apart to see what makes it technically tick, and say to yourself, when the works are laid out before you, the vowels, the consonants, the rhymes or rhythms, “Yes, this is it. This is why the poem moves me so. It is because of craftmanship.”

But you’re back again where you began. You’re back with the mystery of having been moved by words. The best craftsmanship always leaves holes and gaps in the works of the poem so that something that is not in the poem can creep, crawl, flash or thunder in. - Dylan Thomas, My Definition of Poetry

In our hurry-hurry world, we’re always in such a rush to get where we’re going, but there are no shortcuts to becoming a master.

It takes time to learn the nuances. It takes time to develop an appreciation and a deep understanding of a complex craft and to learn to do it well. And it takes time to continue learning as things change – as new browsers are released, as new versions of JavaScript and CSS and HTML are developed, as the web moves forward. It also takes a community of journeymen and masters to help you along your way.

Dig into the nitty-gritty details. Read up on different opinions about progressive enhancement and graceful degradation and form your own. Tear apart frameworks, looking for the assumptions, the points of view, the opinions. Look for all the places you can ask “What happens if …?” and find out. Experiment. Play. Ask questions. Anticipate the unexpected. Learn your craft and execute it beautifully.

Because code really is poetry.

Image credit: Alice Carrier

Eight tips for improving responsive typography

Taryn https://www.flickr.com/photos/tarale/

Don’t underestimate the importance of well-done typography in making a website appear more professional, polished, and just plain nicer. But in the world of responsive design, we need to have a few extra tricks up our sleeve for accomplishing gorgeous web type. Here are eight things you can do to improve typography in your responsive designs:

1. Use a modular scale

A modular scale is series of numbers calculated with a ratio. You choose an ideal text size (often 16 pixels for web) and then divide and multiply that number by a ratio multiple times to create the scale. Then, when you’re selecting font-sizes, line-heights, margins, and paddings for paragraphs, headings, lists, etc., limit yourself to values from the scale. You’ll find your typography has a more polished and professional feel than if you just eyeball the values. My favorite tool for calculating a modular scale quickly is ModularScale.com by Tim Brown. Read Tim’s A List Apart article or watch his Build Conference talk for in-depth instructions on how to create and use a modular scale.

2. Use a global reset

The modular scale is really nice, but it’s not going to do you much good if you’re fighting against the browser’s default styling of various HTML elements. To start off with a totally clean slate and gain full control over the elements on the page, use a global reset in your CSS. My favorite reset is Eric Meyer’s Reset CSS. I use it on nearly every website I work on. Just copy and paste that CSS snippet to the top of your CSS file, and you’re all set.

3. Choose an appropriate typeface

The typeface you choose for your text communicates a feeling more strongly more than nearly any other element in your design. Slow down, do some research, and find a typeface that’s appropriate for your content, your audience, and one that conveys the right emotional feel.

Additionally, if you’ll be using bold, italic or bold italic text, be sure to select a font that includes a true bold, a true italic, and a true bold italic. Otherwise, the browser will just do its best to emulate bold and italic text and the effect is often less than desirable. If you’re choosing a Google font or some other web font, check for the existence of a true bold and a true italic, and be sure to select and embed those styles on your page, too.

4. Work with flexible units

Rather than setting font-sizes, margin, and padding in pixels, choose a flexible unit, like ems or rems. Ems are relative to their parent while rems are relative only to the root element (HTML). Jonathan Snook’s got a very nice writeup on his blog explaining the differences in detail. In a nutshell, the advantage is that you can resize all the text in your document in one line of CSS while maintaining the size difference ratios between your headings and text. Here’s an example using ems:

As the screen gets wider, the base font-size for the document gets bumped up – and all the text in the document resizes along with it. You can accomplish the same thing with rem units. You can’t do this with pixels – you’d have to write a media query on every single element to adjust its size according to the width of the screen.

5. Set leading carefully

In web design, we usually refer to leading as line-height, as that’s the CSS property we use to set it. As with font-size, margin, and padding, you’ll want to select numbers from your modular scale for setting line-height. But there’s an important key: you don’t want to specify a unit of measurement with those numbers. Keep your line-heights flexible by using unitless numbers. This allows the line-height value to cascade down the DOM in a much more elegant and useful manner.

Also note that the amount of leading you need depends on a number of factors – some typefaces will be more readable with looser leading, while others have a nicer feel when it’s a bit tighter. Larger headlines almost demand a tighter leading than the leading set for the body text. And if you’re working with a reversed design – with light text on a dark background – it’s almost guaranteed that more leading will make your text a lot more readable. And the wider your column of text? The more leading you’ll need to make it easy for your reader’s eye to easily track to the beginning of the next line.

6. Control measure

On wider screens, unconstrained text very quickly gets to a really long measure that’s challenging to read. You’ll want to be sure to take steps in your design to control the length of each line of text. There are a number of techniques you can use to do so: set a max-width on your content to be sure it stops growing with the window width, add a column or columns to the side of the main content area when the screen gets wider, or even bump up the font-size a bit as the window gets wider. The ‘ideal’ number of characters per line varies, depending on typeface, leading, font-size, etc., but you want to try to get somewhere in the range of 35 to 70 characters per line. Any narrower and the text gets annoying to read as your eye spends more time jumping to new lines than cruising comfortably across. Any longer, and it’s difficult for your eye to keep track of which line is next.

7. Take advantage of new CSS psuedo-classes

CSS now provides us with the ability to select and style the first letter, the first line, and to select the first element of a given type. This allows us a lot of flexibility in designing gorgeous introductions to our text passages, while still being flexible and allowing our text to wrap, resize, and otherwise adjust to different screen sizes.

Alice’s Adventures in Wonderland

CHAPTER I. Down the Rabbit-Hole

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book,’ thought Alice ‘without pictures or conversations?’

So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.

There was nothing so VERY remarkable in that; nor did Alice think it so VERY much out of the way to hear the Rabbit say to itself, ‘Oh dear! Oh dear! I shall be late!’ (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually …

These styles for the first paragraph, first line, and first letter are this simple:

8. Get a little help from JavaScript

As flexible as CSS can be in responsive design, we can progressively enhance our pages and add a little extra punch with just a bit of JavaScript. And we have no shortage of scripts to take advantage of. Here are some of my favorites:

  • FitText: Great for creating headlines that perfectly fill the screen width
  • Lettering.js: Fine-tune kerning or apply styles to individual letters. Check out the gallery for ideas
  • Responsive Measure: Automatically adjusts font size to create an ideal measure
  • Molten Leading: Automatically adjust line-height depending on screen width
  • SlabText: Creates big blocks of perfectly sized headlines

It just takes a bit of extra planning and forethought to accomplish beautiful web type and push your responsive designs over the edge from ‘nice’ to ‘wow’. Your readers will thank you, too, when your articles and content are just that much easier for them to enjoy.

Image credit: Taryn

Animate text over images on hover without JavaScript


A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript. When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it too. Here’s what we’ll be creating:

There are three animations happening simultaneously when you move your mouse over each image:

  1. A zoom effect on the image itself, created by scaling the image up 140%
  2. The text and its transparent black background fading in
  3. The text dropping in from the top

You’re free to use all of the animations or to remove 1 or 2 of them – it all depends on how you’d like your final product to look. Let’s take a look at how to accomplish this.

1. HTML Markup

I’m going to put the images in a list, and then use the HTML5 figure and figcaption elements to hold the images and associated text:

2. CSS Styles

First up, we’ll modify the list style so that our images display side-by-side rather than in a list with bullets as they usually would. I’m going to use Eric Meyer’s reset, and then add these styles for the list of images:

We’re also setting a width and height for the list items, images, captions and the paragraphs inside the captions. We position the captions over the images, but set their opacity to 0 so that they’re not visible.

3. Show text on hover

Now let’s add a bit of CSS to show the text on hover:

This just changes the opacity of the figcaption to 1 when the list item is hovered. Now we can see the text. This will work just fine in most browsers, even if they don’t have support for the other CSS3 tricks we’ll be adding in the next few steps.

4. Zoom the images

Now it’s time to dig into adding the animations. Let’s tackle the image zoom effect first. I mentioned earlier that this is accomplished by scaling the images up 140%. Here’s how we’ll do that:

That first selector, for .photo-grid img was already in our CSS file. We’re just adding a CSS transition – along with the required browser prefixes. Then, we’ll add a :hover pseudoclass and add a CSS transform to perform the scaling, with browser prefixes.

5. Drop in the text

Next, let’s tackle that dropping-in effect on the text.

Just like with the image zoom, the .photo-grid figcaption p selector was already in our CSS. We’re just adding in the CSS transition. Then we add in a CSS transform to move the text 40px down.

6. Fade in the caption

Finally, let’s add the fading effect for the figcaption.

Here we’re adding two new CSS properties – a transition and a transition-delay. Because we’re zooming the image and dropping the text, we are going to wait a beat to start the fading effect so that the other animations aren’t lost in the shuffle.

And that’s it. Once again, our example is progressively enhanced. For those people who visit our page using browsers that don’t support CSS transitions or transforms yet, they’ll just see the figcaption and text appear when they hover their mouse over each image. But those who do have capable browsers get a little extra treat. And these are just the tip of the iceberg. Use your creativity to invent new animation combinations. Then share your links here so we can learn from each other!

Image credit: Moyan Brenn

How to Create an Alphabetical Index of Posts in WordPress


About a year ago, I was handed a design comp from a designer that required me to build out an alphabetical index for a custom post type in WordPress. You know, something like this:

WP Alpha Index

…where clicking on one of those letters would take you to a page showing only posts with titles starting with that letter. I managed to cobble together a solution that works pretty well. Not great, but passable. It involved writing quite a few custom functions – one to generate that bunch of links you see in that image above, one to register a query parameter so I could use it in WordPress, and then a few more functions to do the right queries in the database, a bunch of code in the template to make sure I was showing the right posts…and on and on.

I remember spending quite a bit of time hacking that all together and being pretty pleased with the results at the time. And then I promptly forgot about that ball of kludgy code…until that same designer handed me a design comp for another WordPress project just a couple months ago:

AZ Index WP

…and my first thought was, “Oh hey, I know how to do that. I’ll just open up that project from last year, and copy … OH SWEET MOTHER OF CHEESE WHAT WAS I THINKING?” Yeah. As I started hunting for and finding the bits of code scattered throughout the theme and plugins I’d written to accomplish that last time, I realized that there had to be a better way to go about this.

I was right. You can do this with a lot less code.

I was lucky to come across this post from Kathy is Awesome which set me on a much, much better path, though I quickly realized this bit of code was missing a few important things I needed. But with this little push in the right direction, I was off and running. And here’s how you can accomplish this bit of WP magic:

1. Plan a new plugin

This new plugin is going to do three things:

  1. Register a custom post type (I’m working with songs and song titles for my example)
  2. Register a custom taxonomy
  3. Use the ‘save_post’ hook to automagically assign new posts to the right taxonomy

If you’re going to be creating an alphabetical index of regular old blog posts, then you can skip that first step.

And, in case you’re wondering, yes, you could do all three of these things in your theme’s functions.php. But chances are that you’d like to have your custom post type, custom taxonomy, and alphabetical index available even if you decide to change themes or re-design your site, so a plugin is the better way to go.

2. Create a plugin

Go to /wp-content/plugins and create a new folder. I’m going to call mine alphaindex. Then create a blank index.php inside that folder.

Now, inside of index.php, we’ll add our header comment that tells WordPress about our plugin:

3. Register a custom post type

Next up, we’ll create a custom post type. I’m working with songs for my example, so I’ll create a post type called ‘song’.

This is a pretty common WordPress thing, so I won’t go into detail about creating a custom post type here. If you want to learn more about working with custom post types, check out the Codex.

4. Register a custom taxonomy

Now that we have a custom post type, we’ll create a custom taxonomy for that post type. I’m going to call mine ‘alpha':

Again, since this is a pretty common WordPress thing, I won’t go into detail about creating custom taxonomies – there’s the Codex if you want to learn more. But I do want to point out a couple of important things about the way this taxonomy is set up.

First, be sure to set 'hierarchical' to 'false'. We don’t want to work with a hierarchical taxonomy here. Next, by setting 'show_ui' to false, we’re hiding the taxonomy from the WordPress admin. That allows our alphabetical index to appear to work automagically – you can set that to true if you want to see the taxonomy in the WordPress admin for troubleshooting or to assure that it’s working as expecting while you’re coding it up.

Also, yes, if you wanted to, you could register the custom post type and and the custom taxonomy inside the same function since they both get called on the 'init' hook. It works fine either way – just personal preference.

5. Automagically assign the correct taxonomy to the post when it’s saved

We’ll use the save_post hook. Here’s the function:

I’ve included comments throughout to explain what we’re doing step-by-step. Now, each time we save a post, the correct alphabetical taxonomy gets assigned.

6. Link to letters

Now that we’ve used a taxonomy for the letters of the alphabet, we’re just working with a taxonomy. To display a list of links to each letter, we just use wp_list_categories in the theme templates wherever we want them to display:

If you want to set up a special layout for these pages, create a taxonomy-alpha.php template in your theme.

7. Sort the posts alphabetically

Since we’re sorting our posts by alphabet letters, it makes the most sense to also sort them alphabetically. We’ll use the pre_get_posts hook. Use this function:

Now anytime we view the post archive for our custom post type or an archive page for our alpha taxonomy, the posts will be sorted alphabetically.

Now, next year if I need to do this again, hopefully I won’t find my code quite as cringeworthy. I especially like that we’re using the taxonomy functionality that’s already a part of WordPress – it makes it easier to work with and makes for nicer URLs too. Yay for no query parameters being required (as long as you’re using pretty permalinks of course).

In my case, I was creating this alphabetical index on a new site that didn’t have any content yet. What if you’re adding an alphabetical index to a site that already has dozens or hundreds of posts? That original post I referenced over at Kathy is Awesome shows you how to go through any existing posts and assign them to the correct taxonomy.

Image credit: Kristin Nador


Should everyone learn to code?


You keep using that word…

We hear about this a lot. Learning to ‘code’. But what are we talking about when we’re talking about coding?

Because that’s not just one thing. There are any number of different languages you could learn – HTML, JavaScript, Python, Java, Objective C, Basic, PHP and on and on and on. At some level, all of those could be considered ‘coding’.

When I say coding, I’m talking about anything you can use to make something with a computer, whether that’s a website, an iPhone app, a game, or a piece of software.

When I say I think everyone should learn to code, I mean that I think everyone should have the skills to make at least one simple, basic thing using a computer.

A generation of coders?

During Computer Science Education Week in December, the White House released a video of President Obama encouraging kids and teens to learn to code. He said, in part:

“Don’t just buy a new video game; make one. Don’t just download the latest app; help design it. Don’t just play on your phone; program it.”

And unfortunately, this message received a lot of backlash from programmers and developers. Rightfully proud of our hard-earned and specialized skills, we programmers balked at the suggestion that just anyone could learn to do what we do. The Year of Code initiative, announced this month in the UK, was received with similar outrage.

On one level, I agree. Because not everyone is cut out to be a coder.

But, I think it’s still important that everyone gets the chance to learn.

And no, I don’t think that if we start making some sort of coding a regular part of our school curriculum that we’ll produce a generation of coders. After all, we all learned anatomy in health class, but precious few of us are qualified to perform a heart transplant. We learned about history, literature, social studies, music, mathematics, biology, physics, economics, psychology, and anthropology, but few of us make our livings in any of those fields.

Teaching coding in schools does not mean turning out a generation of qualified coders. It means exposing a generation to yet another area they might consider for future study. Many will find they don’t have the knack for it, many will find they don’t care for it, but a precious few will discover a natural inclination and will fall in love with a skill and a field they wouldn’t have considered otherwise.

And that, to my thinking, is one of the points of our wide-ranging approach to education. We teach all the students a wide variety of topics not just to produce well-rounded, intelligent adults. But also to allow students to explore and discover the topics that make their hearts sing and where their natural talents shine through.

Why it matters

I think that because I deal so frequently with technologically-challenged small business owners, I see the gap that seems to be getting larger and larger where many people lack even a basic understanding of what’s involved in coding a web site or an app. So often, a potential client’s expectations about how long a project will take or how much it will cost are so far out of touch with reality that a project can’t possibly move forward.

I don’t mean to criticize, because it’s not their fault. They’re sold constantly on the idea that everything with computers is easy and quick and involves little more than flipping a few switches and clicking a few buttons. They’ve never attempted to get a fancy JavaScript trick to work correctly in a dozen different browsers and have no idea what goes into actually making that work.

Admittedly, that’s a purely selfish reason for wanting everyone to learn to code. But there’s more to it than that. There is currently such tremendous opportunity in coding – there are more available jobs than there are people to fill them. When we teach people to code, we empower them. We enable them to break through glass ceilings, provide for their families, make meaningful contributions, and live better lives.

To that end, I’m proud to be a founder of the Los Angeles chapter of Girl Develop It. We’re currently half-way through our first offering, a four-session course introducing students to HTML and CSS. A class of a dozen women and 1 man, ranging in age from college students to retirement, have now built a simple web page that’s got a custom background color and text in the typeface and color of their choosing. It’s a humble beginning, but I hope it leads to so much more for them.

If you believe in our cause, I’d be ever so grateful if you’d get involved. We need classroom spaces throughout Los Angeles, we need teachers who are passionate and engaging, and we need sponsors to help cover costs. Just contact me if you’d like to help.

And if you’re not in Los Angeles, maybe you could get involved with your local chapter. And if there isn’t a local chapter, maybe you could be the one to start one.

Image credit: focus on aperture


Radical Inclusion


At WordCamp Las Vegas 2011, I gave my first ever WordCamp talk. My topic was Progressively Enhancing Your WordPress Theme.

I chose that as my topic because I believed then, as I believe now, that progressive enhancement is nearly always the best way to build a website or web application. Focus on getting the content to someone, no matter what device they might be using, or what capabilities they might have. Then work on adding extras to that experience for devices and for people who have the capability to enjoy them.

As the web’s reach expands, the ways that people access it change, too. We take for granted that everyone else is having the same experience on our websites that we are – sitting at a desk with a nice, big monitor or maybe even balancing a laptop while sipping a coffee. But people access websites on gaming consoles, ebook readers, phones (only about half of which are smartphones),  tablets, televisions, etc. And all those different devices have different capabilities.

We also have a wide range of people using our websites. People who can see and people who can’t, people who can hear and people who can’t, people who have control over the movement of their fingers and people who don’t. All of these people deserve to access our content, purchase our products, publish their own ideas and opinions, and connect with others.

While working at a Fortune 500 company, I pitched the idea of progressive enhancement in a meeting where we were discussing possible approaches to a new project. The project manager’s only comment when I finished speaking was that the decision was a business decision, not a technology decision — in other words, his decision to make, not mine.

I don’t think it’s either. I think it’s a human decision.

I think it’s about empathy, dignity, compassion, and making the web the universal gathering place for all of humankind that it was intended to be. It’s about not excluding anyone from your content because they’re using the wrong browser, the wrong device, or have the wrong capabilities or abilities.

There’s a rush to embrace what’s next, to abandon old principles, like progressive enhancement. But you can embrace all that’s new without leaving people out, if you just take a moment to think, “How will this work without x?” Where x is JavaScript, or media queries, or CSS3 animations, or HTML5 form elements, or the history API, or the location API, and on and on.

That doesn’t mean that your website has to look and work exactly the same on every device and in every browser known to man. Just that your content should be accessible, no matter how I’ve arrived at it. Slick animations and parallax scrolling effects won’t work on a Kindle Paperwhite, but I might still like to use mine read your latest blog post. Just make sure that I can.

Progressive enhancement isn’t a stumbling block holding us back from innovation on the web. It’s about giving people the ability to access content, no matter who they are. It’s not about holding back and designing for the least capable devices and browsers. It’s about starting with the least capable browsers and adding on from there. It’s about ensuring that a rich and interactive experience for the most capable browsers doesn’t exclude those with lesser capable browsers. Innovate, experiment, move the web forward — just don’t unnecessarily leave anyone behind.

Image credit: Jason Pearce


The ‘Best’ WordPress theme is…


In case you didn’t know, I’m a regular over on the WordPress forums on LinkedIn. I like helping people out with their WordPress puzzles and conundrums.

Without a doubt, the most popular question people ask is some variation on “What’s the best WordPress theme?” For example, looking through page one of the forums today, I see:

Any insight into the best themes for mobile responsive?

What’s the best free or premium theme with featured page blocks on the home page?

What are the best free customizable themes available?

Which framework do you guys suggest for making responsive child themes?

These questions are tough, if not impossible, to answer. Not because there aren’t any great themes, but because the premise is all wrong. Here are the bad assumptions I see people making over and over again:

Mistake #1: The first step in setting up a WordPress site is finding the perfect theme.

As I discussed in my presentation at WordCamp Phoenix last year, finding a theme should actually be one of the last things you do when you’re setting up a new WordPress site. If you try to choose a theme from the beginning, you’ll be shaping your content to fit that theme rather than shaping your content to deliver your message.

Mistake #2: My theme should handle everything I want to do on my site.

This is a frequent topic of animated debate on the LinkedIn forums. At least once a week, someone will post a request for the best theme for an events calendar site, or the best theme for displaying feeds to create a real estate site, or the best theme with a slider on the homepage.

There’s a lot of confusion over what a theme should do. And people who are new to WordPress are tempted by bloated themes that promise all-in-one solutions with sliders, event calendars, dozens of shortcodes, contact form builders, portfolios and more, all built into the theme.

There are several problems with themes like this, not the least of which is that the site owner gets locked into their theme. If they want to change the look and feel of their site, they have to start over again from scratch. That’s just not the way WordPress is supposed to work.

Another big problem is that themes that are bulging with features increase the chances that if you do choose to use a plugin, there will be a conflict. I recently gave some help on the forums to a site owner who had chosen a theme with built-in event handling only to discover later that the theme’s event handling was inadequate for her needs. She couldn’t use an events plugin, because any events plugin she tried conflicted with her massive theme. She was stuck choosing between settling for her theme’s inferior event handling and starting her site over from scratch.

Mistake #3: There’s one single theme that’s ideal for all real estate / responsive / portfolio / etc sites

There are thousands upon thousands of WordPress themes out there. It’s overwhelming to try and sort through all that and choose one. I get that.

And it’s oh-so-tempting to post to a forum and just ask, “I want to make a website for my <insert type of business here>. What’s the best theme?”

You’ll get answers. And the people answering mean well and are genuinely trying to help. But the answers aren’t very valuable, because they’re missing some crucial information. To figure out a theme that will work well for you, you have to know:

  • What’s the best way of communicating your message?
  • What type or types of content will you have?
  • What type of business do you have?
  • What designs/color schemes/typography are consistent with your branding?
  • Do you have the budget to purchase a premium theme?
  • Are you a DIY person who wants a theme that looks amazing out of the box?
  • Or are you DIY person who is looking for a theme you can customize yourself?
  • If you’re a DIY person, what’s your skill level and experience with WordPress? Are you a beginner, or do you have it all figured out?
  • Or, are you going to hire someone to help you?
  • Or, are you going to hire someone to build it for you?
  • And on, and on, and on.

You have to be really clear on what your needs and goals are before you can choose a theme. And just because you’re a beauty salon, doesn’t mean that the theme some other beauty salon is using will work for you. Your business is different, your needs are different, your clientele are different, your message is different.

Get clear about where you’re going

If you don’t have a destination in mind, then any road will do. If you’re not clear on your business goals, your message, your branding, or your target audience, then any WordPress theme will do.

Also, step away from that determination to find the ‘best’ theme. That’s a road to perfectionism that means you’ll never get your site completed. Just look for a theme that meets your needs.

And if you’re still overwhelmed or can’t seem to find a theme that fits, get some help. Sometimes you can’t see the forest for the trees and a great theme is sitting right there in front of you. Other times you can find a theme that gets you 75% of the way there, and a bit of code and a few cleverly applied plugins can get you the rest of the way. And then there are the times when the only way to communicate your message and what you’re all about will be a completely custom theme, built just for you.

But you can’t figure any of that out if you don’t know where you’re going.

Themes are the theme of the week

If you’re hungry for some more thoughts on themes, there’s been plenty of discussion this week. First up, my friends kicked off the week by talking about finding a WordPress theme to match your business goals on the WPwatercooler. Then Chris Lema wrote about finding the best WordPress theme for your business. Alex ‘Nice Hair’ Vasquez wrote about about WordPress themes and business over on his blog. So if you’re looking for more thoughts on themes from some pretty darn smart and big-hearted people, then check out all the things. You can’t get much more awesome than these peeps. Serious.

Image credit: purplezebra