Don’t be weak to make others look good

A group of workers having a game of poker over lunch. The boss mentions that there’s a promotion opening up. Someone “smart” will get the opportunity. Our “hero” decides that folding his great hand to give the boss a win will help him professionally.

I couldn’t be professionally successful by being weak and servile. I’m confident in my abilities. I’m happy to highlight my strengths. I’m not blind to diplomacy, but nobody is going to respect someone who simply tells them what they want to hear.

Want to succeed? Be honest, open and never hide your strengths.

Don’t lie about a bad situation

A guy is having lunch with his friends. They ask him where he’s living now. He just had to move back with his parents. He says he has a “cool loft space”. All his friends think that’s great.

…And that’s all going to come back to haunt him when the obvious lie is discovered. Same goes true in the workplace. Hiding a bad situation will be disastrous. If I did it I’d lose respect from my colleagues. I wouldn’t be trusted to work independently.

If things aren’t going great the first part of solving it is to admit the problem.

Never be ashamed of yourself

I know that the McDonald’s commercials aren’t that serious. The suggestion that being a dishonest sycophant is somehow “smart” is still a terrible message.

Go and buy that dollar menu burger, beat the boss at poker, and tell your friends when things are bad. Life would be so much better!

The usual solution to this would be to create different page templates, and assign those templates to the pages I created. Each template would call a different sidebar file, e.g.

page-template1.php

<?php get_sidebar(‘sidebar1′); ?>

page-template2.php

<?php get_sidebar(‘sidebar2′); ?>

NB: WordPress’ use of “sidebar” is kind of confusing. They really mean “widget area”, because it doesn’t have to be a sidebar at all.

Too many files

There were a number of problems with this seemingly easy solution.

1. I would need to create an additional file for each page template and an additional file for each sidebar. That’s a lot of extra files to manage.
2. Every new page created would need to have a template manually assigned in the WordPress admin. That leaves a lot of room for error.

I wanted a solution that would mean less files in the theme, and a more automated system that didn’t need much manual administration.

Making a new function

I wrote a function which I could call from a page template instead of the standard WordPress get_sidebar.

The function needed to do a couple of things.

• Determine the top level parent of a page, so each content silo would assign the same sidebar to all its pages.
• Automatically call the correct sidebar file and assign it to those pages, without the need for manual configuration.
• Fall back to the default sidebar.php file if a section specific one wasn’t present.

function whichParent()
{
  global $post;
  if($post->post_parent && 'page' == get_post_type())
  {
    $ancestors=get_post_ancestors($post->ID);
    $root=count($ancestors)-1;
    $parent = $ancestors[$root];
    $pageData = get_post($parent);
    $slug = $pageData->post_name;
  } 
  else
  {
    $parent = $post->ID;
    $pageData = get_post($parent);
    $slug = $pageData->post_name;
  }
  get_sidebar($slug);
}

This function identifies the top level parent of a page, and creates a variable from the slug of that parent page. It then uses WordPress’ standard get_sidebar method.

Extending the WordPress get_sidebar function

If I wanted to call the default WordPress sidebar.php I’d use this call in my page template:

<?php get_sidebar(); ?>

If I wanted to call a specific sidebar file, such as sidebar-secondary.php, I’d use this call:

<?php get_sidebar('secondary'); ?>

Now I use my new function in the page template instead:

<?php newSidebar(); ?>

All this does is take the page parent’s slug, and use that as the variable in the standard WordPress get_sidebar. I have the following page structure.

• About Us
  • The Team
  • Contact Us
• Terms and Conditions
  • Privacy

I have a single page.php file which uses <?php newSidebar(); ?>. For any of the pages ‘About Us’, ‘The Team’ or ‘Contact Us’ this is the equivalent of:

<?php get_sidebar('about-us'); ?>

…but for ‘Terms and Conditions’ or ‘Privacy’ it is the equivalent of:

<?php get_sidebar('terms-and-conditions'); ?>

Why it’s useful…

I can now use a single page.php file but call multiple different sidebar widget areas. All I have to do is create sidebar-xxxxxx.php files, where ‘xxxxxx’ is the slugs of the top level parent pages for each section.

Even better, because we’re simply tweaking the default WordPress get_sidebar function, we can rely on its fallback. If we try and call sidebar-something.php and that file doesn’t exist, get_sidebar will automatically fall back to the default sidebar.php file. We always have a redundancy.

The benefit of a killer app

It’s clear why LESS is so popularly used as a CSS preprocessor. Twitter Bootstrap uses LESS and Twitter Bootstrap is excellent. It’s a great framework and it’s attached to the Twitter brand. It’s the branding that will have a bigger influence.

A killer app, in its most general terms, is something that persuades someone to use a certain technology. It’s why the most successful consoles are the ones with the best games, not necessarily the ones with the best hardware. It’s why Space Invaders quadrupled the sales of the Atari 2600 when that console was three years old. It’s why the Game Boy fought off so many handheld gaming competitors for so long.

I don’t think a killer app has to be an actual “app”. I’d argue that VHS’ superior recording time, in what was an otherwise lower quality product, was a “killer app” that helped it overcome Betamax in the video format wars of the 1980s.

Killer apps can make certain platforms dominant. They can help inferior technology become more popular than a superior alternative. Bootstrap, and its connection to the Twitter brand, could be LESS’ killer app.

A tipping point of popularity

At some point in future, one of the CSS preprocessors will achieve a market share that makes it the industry standard. It will be necessary to know that preprocessor because that’s what’s in demand. That becomes a virtuous circle for that brand; it becomes the industry standard, people need to know it, they learn it instead of alternatives, its market share increases.

It happened for jQuery. It arrived after Dojo, Mootools or Prototype, but once it reached a certain level of popularity it was necessary for most developers to learn it in preference to alternatives. Perhaps more importantly, new developers learning only a single Javascript library would almost universally choose to learn jQuery.

Pick your poison

One of Sass or LESS is going to become dominant. A number of factors will influence that. Once one does become popular enough it’s going to be very difficult to justify learning anything else. It would just mean limiting my opportunities to engage with the most widely supported option. Less development time will be focused on alternative technologies.

What becomes the standard will remain the standard until there’s a genuine leap forward in the technology or usability of a new product. Incremental improvements simply won’t cut it.

I hope it’s Sass. I know it already, I think it’s more powerful and more flexible than LESS. I prefer that it’s server side by default, instead of by configuration.

It’s very tough to predict. Neither technology is clearly superior. I prefer Sass, but others would argue for LESS. LESS has a great boost from the Twitter branding; but that link only makes it a “killer-ish app”. It’s not a game changer by itself.

It could be worse

In this situation, the transition isn’t going to be a painful one. It doesn’t matter which becomes the industry standard. It’s not massively difficult to make the transition from working with Sass to working with LESS, or vice versa. It’s simply something that’s going to happen.

Popularity encourages greater popularity. That’s definitely true in technology. The whole process is self-sustaining. There’s nothing wrong with that.

It’s something that any developer needs to be aware of. It’s something they need to be prepared to react too. Never back yourself into a corner by becoming wedded to a particular technology.

You might think your preferred technology is better. You might even be right. But if another technology has become the industry standard, then what you think doesn’t matter.

Nicholas Cardot’s article correctly identifies some myths about nofollow. But there is a big difference between pointing out why nofollow isn’t as harmful as people think, and demonstrating a strong argument why dofollow shouldn’t be used.

A basic intro to nofollow

Nofollow is an attribute that can be added to a hyperlink.

<a href="link" rel="nofollow">Some link</a>

It instructs seach engines that the link shouldn’t influence the link target’s ranking for that search engine. By default, if I link to a website and Google follows that link, the site I’m linking to will receive some small ranking benefit because I linked to it. Nofollow removes that endorsement.

Why does nofollow exist?

Nofollow was originally designed to address spam in blog comments. If you own a blog you’ve probably seen this; comments that are just big lists of links that are completely irrelevant to the topic (often linking to piracy sites, porn, etc). Spammers would do this because they knew that having lots of sites linking to them would increase their search index ranking.

Are there any accepted standards for nofollow?

Yes. Google lists three types of links worth adding “nofollow” to;

• Untrusted content.
• Paid links.
• Crawl prioritization (i.e. stopping search engines trying to follow links they can’t use, such as user registration pages)

Nofollow and blog comments

This is the big one. Most blogs will add nofollow to links in their comments (both the URL of the commenter themselves, and any other links they might reference in their comment text). WordPress does this by default.

That’s an excessively strict interpretation of the “Untrusted content” standard for nofollow. It assumes that no comment content can be trusted. By doing so, it devalues comment links that are relevant and add value to a blog post.

This would be a reasonable step to take if nofollow did what it was supposed to do, which was to address spam in blog comments. But it doesn’t solve that problem. WordPress creator Matt Mullenweg acknowledges such. Spam still has to be addressed through other services (e.g. Askimet).

If spam is being dealt with in another way, as it has to be, then the main justification for using nofollow is removed. Assuming that comments that do reach the blog are “de-spammed” in advance then they’re relevant and are adding value to the main content. If they’re adding value then they should be acknowledged, rather than having nofollow.

Don’t try to artificially influence search rankings

The web, at its best, develops organically. That includes interlinking. Search engines are a way to navigate that organic growth. There are various ways of maximizing search engine ranking that are perfectly legitimate. Good practices that highlight the best and most relevant content on a site. Nofollow isn’t as legitimate; used badly it’s an artificial way of trying to deliberately curate link value.

Websites are naturally interconnected. If nofollow was successful in addressing the problem it was supposed to solve; blog spam; then it would have more value. It doesn’t do that. Outside the specific conditions summarized above, there’s no strong argument for using it.

I stopped looking for a “mini-me”

Early in the search and interview process I was looking for developers with similar skills to my own. Function(x) is an exciting workplace, and very busy. There’s a lot for me to do, and I started searching for staff who could help take on some of that workload. Once I started to think about it I realized that this wasn’t the best way of building out a team.

Someone with the same kind of skills as me could certainly contribute. If the team is really going to become exceptional it needs more than that. I needed to find skilful developers who could complement my skills, not replicate them.

Finding complementary skills means that a team will have the capacity to do a wide range of tasks well. It’ll also give every member of that team the opportunity to grow and develop their talents. I want to bring in people who I can teach. I also want to bring in people I can learn from.

I started asking better questions

As I defined the type of roles I wanted to fill, I started interviewing more effectively. A big part of this was coming up with effective questions. Getting a general feel for a candidate’s personality and skills wasn’t enough. It’s important that anyone joining the team at Function(x) hits the ground running. I needed more specific questions so that I could be confident I was talking to someone with a good technical knowledge.

I’m not trying to ask “trick” questions to candidates. I know that even the best developers still often refer to various online resources on a day to day basis. There are questions that can quickly identify a level of understanding of HTML, CSS, jQuery and other technologies. E.g.

• How would you use an <aside> tag?
• What are the drawbacks of HTML5 form validation?
• What’s the difference between visibility:hidden and display:none?
• What is responsive design?
• Do you know what event bubbling is?
• How would you populate a paragraph with new text using jQuery?

Some of these questions don’t have a simple right or wrong answer. A strong candidate will be able to give an answer and justify it. Answers to technically specific questions are a good demonstration of overall skills.

Make sure and get more opinions

There are lots of engineers at Function(x) interviewing candidates for a variety of roles. We’re all going to have to work together effectively. We all need an understanding of each other’s skills.

I’ve got a lot of benefit out of having other people speak with front end developer candidates. It could be one of our platform engineers getting a feel for how the candidate would integrate front end and back-end code. Our iOS engineers might give me some great feedback on the candidate’s understanding of combining web and native app work.

A note for the candidates

There’s a lot of good talent out there. It’s a competitive market. I’m surprised at how many candidates aren’t taking logical steps to maximize their chances. Some big things for me:

• If you’re looking for a front end development role, have your own website. Put together a portfolio of past work; professional and personal projects. It’s all very well saying in your resume that you’ve worked on x project for an agency, or on your major corporation’s website. I need to be able to see what you did, take a look at your code, get an idea of your design aesthetic.
• Be well read and demonstrate an interest in your profession. If you draw a total blank when I ask you what blogs, websites and publications you read, it tells me that you’re not motivated to always be improving your skills. The best candidates will always be those who are passionate about what they do.
• Learn about the company you’re interviewing for. If I’m meeting with you and ask what you know about Function(x) “not much, I took a quick look at the website” isn’t a great answer. If you have no idea what Viggle is then I’d be really worried.

Every interview is an opportunity

Not just an opportunity for a candidate to get a job. Interviews are an opportunity for interviewers to hone their skills too. To be able to more effectively define their own skills, and their needs. To be able to quickly summarize the kind of work they need someone to do. For candidates, treat every interview like it’s a dream opportunity. Not only will it help you impress for that job, it’ll make you better at the interview process all round.

I worked hard to get my job at Function(x) and I’m excited to be working here. In helping to build a team of front end developers, I want other people who are as passionate as me about their profession, and excited about the company and opportunity. Those are the best interviews, when the lessons I’ve learned about meeting with candidates in the most effective way possible help me to find great new colleagues.

We’re still looking for great front end developers. Or if you’re interested in another area, take a look at the Function(x) careers page.

Something different than ‘Read More’

Using the_excerpt in a WordPress theme truncates your post to a default of 55 characters and adds “…” (called an ‘ellipsis’) and a link to the main article with the text “Read More”. That’s fine, but it also can’t be changed. You might want to change that text to read “Read the full article”, remove the ellipsis, or add surrounding HTML and styling.

This flexibility can be added in the functions.php file. All we need to do is add a simple filter to the default function excerpt_more. I’m going to make three small changes.

• Replace the standard &hellip; with three actual periods (not exactly semantically correct, but I never like how &hellip; looks)
• Add a class to the “read more” link
• Update the text to ‘[read more]‘ instead of ‘Read More’

function new_excerpt_more($more)
{
  return '... <a class="heavier" href="' . get_permalink($post->ID).'">[read more]</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

That’s all that needs to be done. Now, whenever I call the_excerpt within my WordPress theme, the read more link will be formatted exactly as I want it.

Tweaking excerpt length

The WordPress default excerpt is 55 characters long, with the HTML tags stripped from it (so no bold text, no links, etc). There are plugins which give you significantly more flexibility and control over excerpt formatting (Advanced Excerpt is a great one), but I just want more control over the length of that excerpt.

The simplest way to do this would be to add a filter that just resets the excerpt length to whatever I want.

function new_excerpt_length()
{
  return 30;
}
add_filter('excerpt_length', 'new_excerpt_length');

Now the default excerpt length when I call the_excerpt is 30 characters.

I’d like to do more though. I want to have different excerpt lengths in different parts of my template. 50 characters in my index.php, but 75 characters in my search.php. I could even set different excerpt lengths in different parts of the same page. E.g. a featured story might have a longer excerpt than other news.

To achieve this I’m going to add to the filter I’ve already created.

function new_excerpt_length()
{
 global $customLength;

 if($customLength)
 {
  return $customLength;
 }
 else
 {
  return 30;
 }
}
add_filter('excerpt_length', 'new_excerpt_length');

This gives me the capacity to change the excerpt length wherever I call it in the template. In my index.php I do the following instead of simply calling the_excerpt.

<p><?php
$customLength=50;
echo get_the_excerpt();
$customLength=0;
?></p>

Couple of quick things.

I’m echoing get_the_excerpt instead of making a call to the_excerpt, so I’m wrapping the php in a <p> element (the_excerpt does this automatically).

I’m resetting the $customLength to zero after get_the_excerpt is called. I’m doing this because in the functions.php I set a default value of 30 for excerpt lengths. If the excerpt is called anywhere else on this page, it’ll use the default length now (or any new $customLength I set).

Simple tweaks add value

It’s always great to have more flexibility in design and content. Even the most minor changes can give a website a greater sense of uniqueness. Tweaking how a “read more” link is displayed, or how long a story excerpt is might not seem huge. For the user, however, such changes demonstrate an attention to detail which can help them feel like they’re not just on any other site.

Many aspects of design and content are appreciated on an almost subconscious level. Very small details, particularly added together, can have a strong positive impact on user experience.

Nested confusion

I’ve come across this problem on multiple occasions. I know that there’s a problem somewhere in the code, but there are elements nested several levels deep. In simpler websites this might not be a problem. Great semantic markup can make code easy to read, and identify which element is which.

In more complex websites, and particularly when working with content management systems such as WordPress which eliminate the ability to totally control the visual layout of your HTML code, it can become a much more difficult problem.

<div id="foo">
  <div class="bar">
    <ul>
      <li>Lorem ipsum</li>
      <li>Dolor sit amet</li>
      <li>Sed risus enim</li>
    </ul>
    <div class="intro">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
    <div class="content">
      <p><strong>Sed risus enim, laoreet ut hendrerit sed, auctor...</strong></p>
	</div>
    </div>
</div>

Even in this relatively simple piece of code, as soon as the tabbing becomes inconsistent, it’s difficult to identify at first glance that there’s a missing closing tab, or which closing tag is relevant to which div.

HTML5 improves the situation a little. A wider range of elements means less reliance on multiple divs with different purposes. Even within HTML5 code, however, it’s likely that there’ll be nested sections, articles and the still useful divs.

Take notes while you’re coding

A quick and easy way to eliminate the issue is to clearly identify in your markup where divs start and where they finish. If an element has the id of “foo”, then immediately after the closing tag I add a comment identifying the closing tag as being for the “foo” id.

<div id="foo">
<div class="bar">
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit amet</li>
<li>Sed risus enim</li>
</ul>
<div class="intro">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
<div class="content">
<p><strong>Sed risus enim, laoreet ut hendrerit sed, auctor...</strong></p>
</div><!-- .intro -->
</div><!-- .bar -->
</div><!-- #foo -->

Even when all indentation is removed, these comments make it easy to identify the issue. In this example, there is no closing tag for the div with the “content” class.

Easy and it works

There’s nothing very complex here. It has a minor negative impact on file size, but the benefits easily outweigh that problem.

Simple as it is, I still find it one of the most useful habits that I’ve ever picked up. There are so many occasions when it’s helped me to quickly identify a markup problem and fix it. It makes code easier to read, and going back to old code a much more pleasant experience.

The idea is interesting

paper.li touts itself as a service for creating your own newspaper website. You can set topics, pull in stories, and publish a “daily newspaper” around the subject matter you want. All the stories are pulled together into a newspaper-look design, and published.

Nice idea. Removes the barriers to entry for publishing news, current events and opinion, whatever your area of interest.

The implementation is poor

paper.li doesn’t know what it is. That lack of focus means it fails across the board.

It isn’t an effective aggregator

If I set various keywords and let paper.li search, it’ll come up with a full list of articles to populate my site. It’ll categorize them…kind of accurately. It’ll pull in items of no real interest, and leave out other items that might be “on topic” but miss a vital keyword.

If I want to look at aggregated recent articles on a certain topic, there are a multitude of services out there which are more effective. They’re more effective in pulling in the initial aggregation, but they also give me more power to further refine my search.

It isn’t an effective newspaper

A good newspaper isn’t just an aggregation of all the latest stories. Newspapers are a powerful medium; whether online or offline, because the stories they gather are curated. Curating the content means that topics of importance are effectively highlighted. Less relevant pieces are reduced in prominence or discarded altogether.

A newspaper that’s created automatically isn’t really a newspaper, and doesn’t work.

It isn’t an effective traffic driver

I’d like to see some statistics on paper.li traffic. I know that the web content I create has been referenced multiple times, on multiple people’s paper.li sites. I can’t remember ever seeing analytics that suggest any of those links has brought traffic back to my site.

That trend seems to continue regardless of whether the story is featured prominently on the paper.li site or not, or whether the paper.li publisher has tens of thousands of Twitter followers. It leads me to wonder whether  individual paper.li sites have any significant visitor numbers.

Better to do one thing well

If you want to read an aggregation of content based on your interests, there are good options. iGoogle, Yahoo or MSN personal homepages. They all let you set topics and bring in aggregated content based on searches and keywords.

If you want to curate your own collection of content more actively then use an RSS aggregator like Google Reader. Choose the feeds that you want to sign up to. Categorize and sort them. Check in daily.

If you want to highlight great articles for others, share them on Twitter, Facebook, Google+ and other social networks. Write articles on your site that link to that external content. Show that you’re not just recommending something that was automatically aggregated, but something that you’ve read and rated yourself.

Do you think that paper.li has any strong benefits? Are there better alternative services for this kind of thing?

I need more walls!

On Halloween I went to a party at Artworks in Trenton. There was a lot of great art there, all available to buy. I fell in love with a piece called “Bride of Frankenstein”. I’m running out of space on my apartment walls, but I bought it anyway and found a place for it, because it’s a cool piece.

I always love finding awesome art, it’s always an inspiration to me. I love it for its own sake, but also think about which aspects I can incorporate into my digital media and web design.

Finding out more

The piece is by an artist called Bridget Roach. I wanted to find out more about her work, but I couldn’t find much information online. So I was really pleased a few weeks later when Bridget found me on Facebook! Just as I wanted to know more about the artist, she wanted to find out more about the person who bought her art.

Before the wider advent of social media, it would have been a lot more difficult for either of us to find each other. Now the tools exist for us to develop a greater engagement.

The wider benefits

In this case it means i’ve found a local artist whose work I really love. It’s vibrant and powerful, and in a great style. I can enjoy the art for its own sake and also be inspired for my work. I’ve also found other artists that Bridget engages with, e.g. by seeing posts on her Facebook wall, and seen more great art I wouldn’t otherwise have seen.

Bridget’s at the very least found a new fan. I definitely want to invest in more of her work. She’s also found a cheerleader, because I want to tell others about her talent. Some of my friends have already started following here on Facebook.

I’m hoping that at some point she might also have found a collaborator, because i’d love to come up with a project to integrate her art with my web design (Oh, and Bridget, you should have your own website!!).

Encouraging collaboration

I wanted to highlight how social media can benefit me as a designer. It’s easy to talk in generalities about social media, but speaking personally is more powerful.

As an art fan and a designer, I found a great artist with inspirational work. I hope the engagement will benefit both parties in future. It doesn’t have to be art and design, though. It could be anything.

Social media engagement can be used to develop encounters that originally started offline, and turn them into longer term relationships. Social media is a tool to build engagement, but remember it doesn’t always have to start and finish in the online medium.

Moving on, moving up

I had a good time working at TerraCycle for nearly two years. Designing and implementing the front end web experience for a growing global company was great for my professional development. When I first heard about the Web Engineer role at Function(x), however, I had to pursue it. It’s a great step forward in my career.

I’m working at a dynamic digital entertainment company with a great product. I’m excited to be involved during the early stages. Excited to be working to build a great core team of front end developers. I’ll be stretching my design implementation skills and improving my management and strategic abilities.

A product that excites

During my first couple of interviews with Function(x) they couldn’t tell me about what they were working on. When I first got to see Viggle in action it made me even more enthusiastic about the company. I was really happy last week when news about Viggle broke publicly, because it meant I could start telling people about it!

Jeff Bullas wrote yesterday about why social media will disappear. Despite the extravagant title to his article, his underlying point is well made. The future development of social media isn’t likely to be as a standalone service. The next stage for social media is closer and closer integration into other forms of media.

Viggle, the loyalty points and rewards program for watching TV, takes that evolution a step forward. It seamlessly integrates the TV watching experience with the sharing and discussion of social media…and it gives its users tangible rewards. It’s a very cool product.

New challenges

New challenges are important. They keep me motivated to push myself and develop my skills. Challenges stop me from getting complacent. From what I’ve seen at Function(x) so far, complacency certainly isn’t going to be an issue!

It’s important to work for a company whose vision I’m invested in. I have a strong belief in what Function(x) are trying to achieve, and in their future success. Investing in that vision means that I’m going to be motivated to push myself. I’m not only going to benefit Function(x) with that motivation, I’m going to make great forward strides myself.