As we kick off a new year, most of us make resolutions …and some of us even stick to them! Here are 10 ways to be a better front-end developer in 2014. This is a helpful guide for designers and developers alike. The list is partly wise advice based on previous experience, and partly a new year’s resolution. To help keep track of accomplishing these goals, I’ve added a checklist to tick off as you progress through the year.
If you are new to the world of front-end development, the best place to start is to take a course with one of the e-learning websites. You can find our review of these e-learning websites on our article Web design & development training site comparison.
Don’t get too attached to any given framework or platform
When it comes to the web, there’s always going to be something newer, shinier and faster around the next corner. Web technologies also have the habit of being suddenly rendered obsolete (we are looking at you, Adobe Flash). Be sure to research and trial a new technology, as just because something is new, doesn’t mean it’s better.
Utilise the right tools for the job and identify them quickly
These days there’s a framework for pretty much everything. Go out and research absolutely every possible technological solution before starting a new project. If you keep looking for a solution to a nitty-gritty problem and haven’t found it after a hard hour of Googling, it may be time for you to step up and build it yourself. Just make sure you’re not reinventing the wheel.
Let the tools do all the hard work!
In this fast-paced industry, any tool that can save you time is extremely precious. Here are my recommendations for a front-end development “stack”:
- Don’t slog away at vanilla CSS, use a pre-processor like Sass with the Compass library to handle the tedious stuff.
- Use Bootstrap 3 for scaffolding simple responsive websites where you want fine-level control over presentation and functionality.
- Use Foundation 5 to quickly build responsive sites and web apps with feature-rich interactivity.
- Use Yeoman to manage your workflow. Yeoman combines Bower – for package management and Grunt – for task running and testing.
- Test across every device and OS imaginable with BrowserStack
- Use SourceTree to manage Git repositories.
- Use DeployHQ to deploy apps straight from the repo.
- Once your websites or apps are deployed, use Raygun to track errors and keep things running fast and cost-effectively.
Get on GitHub
If you haven’t done so already, create a GitHub account and start coding. GitHub makes collaboration within a team really easy (and it’s not just for software developers). Once you’ve got the hang of Git, weigh-in on other developers’ projects. Whether it’s fixing up the front-end for a couple of bemused software developers or dipping your toe into the murky waters of application development with some Django devs – just get involved. If people don’t like your additions, they can simply choose not to include them, so you really can’t go wrong!
Testing can be easy
Testing is probably the biggest …and most dreaded… task that a front-end developer has to do. Luckily there are tools at hand to help you test as you develop:
- Qunit: Unit testing on the client-side
- CSSLint: Identifies potential browser compatibility issues and points out any dodgy CSS
- BrowserStack: Test a website or local site across pretty much every device and browser imaginable.
Decisions should be made with user experience in mind
Make sure that you’re not building something for yourself or for other developers. Think about how your target audience or your client’s target audience will use your product. This idea should be the main factor in every usability decision and at the forefront of your mind at every stage of development, even if you are not a designer by trade.
Develop a well rounded skill-set
Front-end specialists are a rare breed. Unless you’re a super-genius building the next CoffeeScript, these days it seems essential that you broaden your experience beyond the text editor. Immerse yourself in the web industry; build tutorials, attend conferences, teach students, learn project management, and maybe… if you’re feeling brave… start writing blog posts 😉
Keep a keen eye on web trends
Immerse yourself in blogs, portfolios, apps and anything awesome. You should constantly be on the look out for new tools and design trends because developers are always coming up with better, faster and more efficient ways of solving problems. Check out resources like DZone, Hacker News, Flippin’ Awesome and Open Web Platform Daily Digest for the latest in what other developers are up to around the web.
Stay on top of bugs
Bugs come in many forms, and as much as we’d like to think that our code is bug-free, there will always be a few that slip through the net. As you progress through your career, taking on a multitude of different projects, keeping track of bugs becomes increasingly difficult. Bugs can cause inefficiencies in code, meaning slower sites and apps. They can also lead to unpleasant things like security vulnerabilities.
Find a platform that works for you
Here’s a checklist of various goals for front-end developers of all levels to tick off throughout the year:
|The front-end developer's goal checklist for 2014|
|Start writing Sass instead of CSS|
|Create a GitHub account|
|Build a PHP app|
|Build a Ruby app|
|Build a Python app|
|Contribute to another developer's project|
|Attend a web-related conference|
|Give a seminar to some students|
|Write a blog post about an interesting web topic|
|Attend a course which expands your skill-set|
|Subscribe to DZone and the Open Web Daily Digest|
|Start using Trello to organise your tasks|
|Use Raygun to detect errors in your websites and apps|
|Build a website or app using Yeoman to manage your workflow|
Keep coming back to the checklist and tick things off as you make progress and don’t forget to tell us how you are tracking during the year.