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.

Immediately escalating the issue

An interesting story this week was Google Kenya’s improper access of the database of a local company, Mocality. Google workers used Mocality’s business directory to try and sell a competing service to Kenyan businesses.

This issue became a big story because Mocality set up a “sting” operation to gather a lot of data and proof about Google’s activities in Kenya. After collecting all this information, they wrote an extensive blog post detailing the issue, and that post subsequently spread across social media before being picked up by traditional press.

Mocality apparently didn’t choose to contact Google directly regarding the issue. They also didn’t contact the local authorities (given that their allegations were about illegal practices). They took a social media route to make their allegations and spread them as widely as possible. It caused a lot of criticism of Google, a quick response from that company admitting the malpractice by their Kenyan team, an apology to Mocality and a promise to immediately investigate the issue further. A win for Mocality.

Public allegations vs private queries

If I have an issue with a company then my first thought is to contact them directly. The Mocality situation is an extreme example, but even if it’s merely a case of poor customer service the idea of contacting customer support directly seems to be becoming less common. It’s common to see widespread Twitter or Facebook memes highlighting poor customer service or other unfortunate activities by companies; forcing them to respond to a public outcry.

There are advantages to acting in this way.

• A widespread public outcry forces the offending company to respond
• It provides an opportunity for other people who’ve had similar problems to speak with a single voice
• The public nature of the criticism often forces a company to provide greater recompense so that they’re seen to be taking the problem seriously

There’s also a downside.

• A genuine accident or oversight can become “proof” of deliberate action
• The seriousness of an issue can become extremely exaggerated or inaccurate
• A company can become tarred for something outside of their direct control (the action of an individual, the behavior of a subsidiary, etc)

Gossip as a means of provoking action

Social media provides an opportunity to gossip on a global scale. I know that a strong allegation, particularly against a big company (because people always like taking big names down a notch!), can get a lot of traction online. It seems to me, however, that social media is a good avenue to redress problems if a company doesn’t respond to a direct communication effectively.

If I receive poor customer service from Amazon, then my first task is going to be contacting Amazon and attempting to resolve the issue. If Amazon deal poorly with my customer support request, then I might start talking about my bad experience through social media.

Social media is incredibly powerful in giving consumers a wider voice, and ensuring that their concerns and difficulties can be escalated. Should that come after other avenues have been exhausted, or is social media a legitimate first choice when demanding a response from another company?

The bill’s important, not the person

OK, here’s the story. The author of SOPA, Lamar Smith, was accused of copyright violation himself. A pre-SOPA version of his website uses a Creative Commons licensed image by DJ Schulte without correctly attributing the photographer. Cue every single SOPA related Tweet turning into a link to this article, as if it was some kind of silver bullet.

Instead of continuing to focus on SOPA, its huge flaws and dangers to free speech and a creative, entrepreneurial web, the argument’s suddenly been reduced to “look, Lamar Smith is a bad guy!” Everybody is talking about a mistaken copyright violation. Which means that everybody has stopped talking about what matters.

Lamar Smith could be the greatest paragon of virtue in Washington and SOPA would still be a terrible piece of legislation. It doesn’t matter whether he’s a hypocrite for the mistake on his website. All the focus on this issue merely distracts from SOPA itself.

It makes the opposition look small-minded

Here are two arguments against SOPA;

It’s a seriously flawed piece of legislation that will negatively impact American business and undermine free speech.

or…

Lamar Smith is a hypocrite.

I know which I find a more powerful motivator to oppose the legislation.

The triviality of using a minor “gotcha” moment as a focus of the anti-SOPA argument makes people think the issue itself is trivial. It’s not even a great proof of hypocrisy. “Congressman’s web designers make minor error in not attributing credit to otherwise free photograph”. Not exactly a Watergate moment.

Trying to censor the internet isn’t enough?

SOPA can certainly be stopped. If huge websites like Facebook and Google shut down then it’ll be a huge news story. These are sites used by the general public, rather than sites whose audience is more likely to be more heavily involved in digital/social media issues. The argument against SOPA is strong in terms of constitutional rights of free speech and in terms of potentially negative economic impact.

They’re trying to censor the internet. It’s an argument that people can understand, and which can be used to bring pressure to stop the legislation. Why waste that by instead talking about a picture that Lamar Smith used to have on his website?

Using fonts in web design

Used to be that web designers were limited to seven or eight standard fonts. These fonts were the only ones which had a relatively universal level of support across different platforms and operating systems. There weren’t many other web safe options.

Various interim options such as sIFR and Cufon provided designers with additional options, displaying a wider variety of fonts. These options had serious limitations, however. Loading times could be slow, text might be non-selectable, they could be awkward to install.

More recently, the universal adoption of @font-face has meant that theoretically designers can use any typeface on a website. All they need to do is host that font on the same server as the site,. They no longer have to rely on a visitor having the font on their own computer. CSS3 further provides greater options for altering the appearance of the fonts themselves (e.g. text-shadow). The technology is there.

The problems of licensing

While the technology is there to render any font on a website, the capacity to do so is seriously limited by the failure of font licensing to keep up with technological advancements. When a web designer uses @font-face to store a font on their server, it’s relatively easy for a technologically savvy user to be able to find…and download…that font file.

Protecting intellectual property

From a font provider’s point of view, that’s the same as illegally distributing the font. For perfectly legitimate reasons, font creators don’t want their font files to be available in this way. They want to protect their intellectual property, and therefore many commercial fonts specifically forbid using that font with @font-face.

Online font libraries as a solution

There are a couple of really good options to address the issue of font licensing. Online font libraries like Typekit or Google Web Fonts provide access to a wide range of fonts. They store these fonts in their own libraries, and allow users (either free or via a paid subscription) to access these libraries with a small piece of code. They utilize @font-face capability in a way which web designers can use both technically and legally.

The issue of wider branding

Online libraries are great. I use Typekit all the time. But for a business on a limited budget, and looking to make their website an integral part of their overall brand, there are some potential limitations.

Branding is more than just a website. It includes a wide range of physical media, too. Logos, business cards, letterheads, flyers, etc. Online font libraries don’t give any help when it comes to using those fonts outside of a web page. This isn’t an issue with free fonts provided by these libraries, but they often have limited character sets or limitations on commercial use. Commercial fonts often remain the best design option.

Except you might have to pay twice

Let’s say a company wants to use the font Atrament.

If they buy the font directly from a source like MyFonts they can use the font for physical media, but they can’t use it online (because they’d have to upload the font to their server to use @font-face and the license likely forbids this).

If they buy a portfolio subscription to Typekit they can use the font on their website, but they don’t have any capacity to use it offline.

To get the universal use of the font necessary for their online and offline branding, they have to pay for both options.

To buy all 10 weights and styles of Atrament on MyFonts is $339. A portfolio subscription on Typekit is $49.99 a year. While this might not seem like a huge amount of money, for a small or new business every penny can count. Having to pay twice in order to gain universal use of a single font is just another additional expense.

Future solutions

Even services like Typekit are still interim options. The long term solution will likely be the Web Open Font Format (WOFF). This file format allows fonts to be hosted on a server, and usable with @font-face, but in a compressed, encoded manner which resolves the licensing problems.

While WOFF is supported in the latest versions of all major browsers, Internet Explorer only started offering full support with the recent version 9. With the extensive use of earlier versions of IE likely to continue for at least a few more years, WOFF doesn’t provide sufficiently universal support.

In the meantime web designers will have to continue using imperfect methods. These methods, increasingly advanced and convenient to use as they are, still create a division between online and offline font support.

Yes, WordPress is great

The article argues that WordPress, as a free content management system with downloadable themes, makes it completely unnecessary for small businesses to hire a website designer.

WordPress is great. It makes hosting and administering a professional website easy and accessible. There’s lots of free support out there in the form of the WordPress codex, forums and blog posts. It’s the most popular content management system out there for very good reasons.

But a content management system is what makes a website work…it isn’t a website in itself.

Those ‘tricksy’ website designers

The biggest flaw in Mitz Pantic‘s argument is the suggestion that custom design has no benefit over a downloaded WordPress theme (commercial or free).

But you don’t need to customize your layout beyond adding your company logo (which you can do from the WordPress menu). Any professional-quality layout, like those included with WordPress, will put your customers and clients at ease. Spending extra money to create a custom layout won’t attract new customers or increase your sales—it’ll just waste your money on something you don’t need.

This is dead wrong.

There are great WordPress themes out there. Many of them are really high quality, and can be a great way to get started. They can give you a solid, professional looking website, with some customization options to brand the site, but it’s very difficult to make it truly “yours”.

The suggestion that there aren’t significant potential benefits in a custom design is really misleading. Spending extra money to create a custom layout can attract new customers and it can increase your sales and conversions. Sure, you don’t need to customize your layout beyond adding your company logo, but you’re hardly differentiating yourself from the crowd if that’s all you do.

The advantages of great web design

• A genuinely unique look and feel to your site (not a cookie cutter approach)
• Real “ownership” of your brand and design
• Calls to action specific to your customers
• Bespoke options and functionality that might not be available as part of a theme
• Strong code structure that naturally gives solid SEO
• A web designer who can answer your questions and give you honest feedback and advice

No theme, however exceptional, can provide all of these benefits. Gary Vaynerchuck in his awesome book ‘Crush It!‘ points out that getting custom web design is a possible exception to his general rule that anyone can start their own business without the need for financial investment.

Make an informed decision

I’m not criticizing WordPress themes. Many of them are genuinely great, and they can provide a really strong foundation for a new business, at a reasonable price.

Of course if you are a big wig with a big budget then you cannot go wrong with a customized designed website, but for the average person, see the cheap and stress free way to get a website.

What frustrated me about the article was the implication that custom web design is only for these “big wigs”, and that web designers were likely to unethically pass off an existing theme as their own design work. Neither of these accusations is universally, or even commonly, true.

One of the huge benefits of open source (and free) content management systems like WordPress is that they’ve made great web design accessible and affordable. You don’t need to pay for a bespoke content management system (and, indeed, you absolutely shouldn’t). A good web designer can help you differentiate yourself while still using a free platform. Often for a very reasonable price.

Custom web design will cost you more than using a free or commercial theme. Good custom web design will also provide a lot of additional benefits. If you choose to go with a theme, then that’s great. It might well be the best option for your business. Make it an informed choice, not a choice based on the false impression that a generic theme is indistinguishable from great custom design.