About a month ago I hired a freelance front-end developer to code around twenty pages for Uncover – both marketing pages and pages behind a login. Interestingly enough, I hired this person via Twitter. While I didn’t vet him extensively – not asking for references, previous projects or code samples – we did speak on Skype for a solid hour, going over his experience and my requirements. After negotiating a budget, we got to work the very next day.
When hiring freelance front-end developers, I always have two concerns: (1) is their code going to be well-written, and (2) will they be pixel perfect when it comes to replicating the PSD files? More often than not when working with freelance front-end developers, I’ve found that you rarely find both capabilities in anyone under $80/hour. As Uncover is a bootstrapped company, I was looking to pay $40/hour for this job, knowing perfectly well that I’d be working with someone more junior at that price. My hope was that the person would produce well-written code and that I could project manage my way to pixel perfect.
As my new contract front-end developer began to deliver coded pages, it was clear that his code was up to snuff. Maybe a few small convention issues here and there, but ultimately those are matters of opinion in front-end development. The bigger issue – as I had foreseen – was that there were far too many mistakes on the pixel perfect side of the job. When I looked at these coded pages alongside our PSD files, there were obvious mistakes such as spacing issues, font sizing problems, and missing components, All easily spotted when comparing the two files side-by-side.
Contents
Having to fix the mistakes
I was working remotely with this front-end developer, so he would push changes to our GitHub repository for me to look at and review. I’d then load the pages that had been delivered side-by-side in my browser with the png file we had outputted from Photoshop. It became very clear when switching between the two where the differences were.
I would then reply to the front-end developer’s email with a list of changes that sometimes included screenshots of obvious mistakes. As I mentioned above, I anticipated some of this happening because of the low hourly fee, but not to this extent and not repeatedly. Some errors were blatant and definitely should not have been overlooked. Others were subtle but stood out when you tabbed quickly between the mockup and the completed HTML/CSS. I was hoping that I would see fewer mistakes going forward as more pages were delivered, but this wasn’t the case.
Luckily, the person I was working with was more than happy to fix things as I compiled lists of changes for each page. Even though with all said and done it wasn’t all that big a deal for me to create these lists, I would still implore all front-end developers to focus their attention on pixel perfect development. When you are being handed a PSD file that has been carefully styled and spaced, it’s your job to slice and dice it perfectly. The designer chose 30px spacing rather than 40px spacing for a reason. I shouldn’t have to go through each page with a comb to find mistakes.
How you can prevent mistakes
The biggest way to prevent mistakes as a front-end developer is to keep learning and continuing to practice. You can keep learning by taking advantage of Treehouse lessons and staying abreast with the latest conventions through following Hacker News, browsing Stackoverflow, reading Reddit and other notes on the craft.
As a person who learned to program in the past two years, I know what’s helped me the most in continuing to practice. Take any PSD files you can get your hands on and work on developing the front-end for them. One of the best lessons I received on front-end development when I was first starting out was when one of my friends gave me the PSD files of their website and I had to go through them and rebuild the HTML/CSS using Bootstrap. It was very helpful to him because his codebase was quite out-of-date and using Bootstrap would help with that; and it was very helpful for me as I got to learn while doing.
While practice will help you learn how to prevent mistakes, the best thing you can do is to review your code before handing it in. Just as writers write rough drafts and then edit them, code requires editing as well. You may have fudged something to get you by while you were getting a handle on the project, but it’s important to go back and fix things before delivering the work.
It’s not nitpicking if you want to be great
It may sound like I’m being picky, but mismatches of this kind taint the quality of the completed work. The work you do as a front-end developer is a reflection of the finished product (i.e., the pages) that you produce. Any errors or omissions reflect poorly on the job you did – even if you got 99% of the way there – and your employer will not be pleased to see anything but pixel perfect work.
Front-end developers have two responsibilities, and if you want to be great in that field then you need to care about both of them:
- The quality of the code needs to be excellent and modular. If you code the designs so they’re not extensible, then you’re making it very difficult for other people to work from the code you’ve written. Part of programming excellent code is to be up-to-date on the new ways of doing things. Programming languages and conventions are ever-changing, and it’s important to keep up.
- The other responsibility is to deliver back pixel perfect code in relation to the design. Anything short of that is failing to deliver great work.
I’ve worked with many front-end developers over the years – both freelance and full-time – and you can easily spot a great one based on their attention to detail, which is required for both (1) and (2) above. I’m still very happy with the front-end developer I hired and I would hire him again, but I hope he learns — and others do too — that pixel perfect front-end development matters as well as great code.