Brian Rinaldi is as a content and community manager in Developer Relations for the Adobe Developer Connection team, where he helps drive content strategy for HTML5 and JavaScript developer content. He’s a proven expert in the areas of HTML/JavaScript, Flex, AIR, ActionScript, ColdFusion, and SQL. Brian’s writing can be found on his blog at remotesynthesis.com — or you can find him on Twitter @remotesynth.
As anyone who follows web standards knows, we’ve seen a dramatic shift in the industry over the past few years. As the evolution of what we’re able to build within the confines of the browser has been ongoing for both the desktop and the mobile device, the demand for front-end developers has grown.
However, it’s not just the demand for front-end developers but the demands on them that are growing. Simply knowing how to convert a Photoshop template to HTML is not enough — nor is just doing simple DOM (document object model) trickery with jQuery. Nowadays, you’re expected to be an expert in many areas.
In this post, I’ll cover what I feel are the skills you’ll need to break into front-end development. Or, if you already are one, to become a front-end developer superstar!
What Changed? Keeping up with Standards
Let’s take a look at what I mean when I say that the demands on front-end developers have grown dramatically
First, of course, is the advent of HTML5. Yes, at times, HTML5 is just a buzzword, but it also represents a real, significant shift in what front-end developers are capable of doing within the confines of the browser.
New HTML components, JavaScript API’s and CSS capabilities (all of which arguably fall under the “HTML5” umbrella) have made it possible to either accomplish — or at least consider — doing things in the browser that used to require plugins.
Things like local storage, geolocation, and web sockets have made web applications more capable. Things like 2D and 3D transforms, transitions, and animations have made CSS more powerful and complex.
Even for experienced web developers, the ever changing standards and browser compatibility landscape can feel overwhelming. In fact, it is. Thankfully though, there are a lot resources within the community to help developers get a handle on this. If you are just looking for a resource to determine what standard is supported on what browser, WhenCanIUse is an invaluable resource that you’ll probably refer to regularly.
There are a lot of other resources available to help you determine what features you should or shouldn’t use in your application. You can refer to my article on “How to take advantage of web standards” for Adobe Inspire, where I cover this topic in detail. Of course, knowing how to use a feature is at least as important as knowing when you can use it. For some of the best tutorials on the topics of new web standards, I highly recommend the Adobe Developer Connection (of course, I am biased), as well as HTML5 Rocks and MDN.
Learn JavaScript
Another thing that has changed is that front-end developers are now expected to know JavaScript. That includes both front-end developers who focus more on design and layout and, of course, those that focus almost exclusively on hard-core JavaScript development.
In fact, you can even build your entire application (including the back end) using JavaScript running on NodeJS, which is growing in popularity.
By knowing JavaScript, I don’t mean that you know how to copy/paste, and perhaps how to modify someone else’s scripts, or that you can produce some simple UI effects with jQuery. I mean that you really need to know JavaScript.
Due to the growing ubiquity of JavaScript, there are a lot of new free or paid tools available to help people learn it. Sites like Codecademy and CodeAvengers offer free training courses for those who are relatively new to coding or to JavaScript. On the Adobe Developer Connection, we recently published an article by the creator of CodeAvengers that introduces JavaScript for beginners. These are great places to start if you’re a front-end designer/developer who’s looking to improve your skillset with JavaScript.
If you are already a seasoned coder, there are a number of resources offering online and offline training in more advanced topics. Of course, you can always turn to the tried and true resource – books. “JavaScript: the Good Parts” is always considered a good starting point (and is a relatively quick read), but there’s no shortage of books on JavaScript.
Mobile
I’d be remiss if I didn’t mention the necessity of becoming familiar with mobile development. This doesn’t mean you necessarily need to go out and learn Objective-C. Even if your focus is purely on the browser, you must be designing and testing with an eye for the multitude of device screens available.
Speaking of targeting the browser, Responsive Web Design is already a very hot topic and is widely used. Originally coined by Ethan Marcotte in his article for A List Apart in 2010, Responsive Web Design uses things like CSS media queries to make the look and feel of your web page adapt to various device sizes. This is different than the more traditional technique of creating separate mobile versions of web sites that are targeted at phones and other devices.
However, if you need to build apps, you can even leverage your new and improved front-end development skills to do so using tools such as PhoneGap. PhoneGap allows you to build what are often referred to as “hybrid apps” because although they look and feel like native applications on each platform, they’re actually built with web technologies. Services such as PhoneGap Build even help take the complexity of setup and compiling for various platforms out of the equation.
Testing your site on mobile devices has historically been painful. Thankfully, lots of new tools and services such as Adobe Edge Inspect, BrowserStack and AppThwack are continually improving the experience.
Stay Informed
One of the hardest aspects of being a front-end developer can be simply trying to keep up. HTML, CSS and JavaScript development is a very large and active community. There are a lot of people blogging about these topics, releasing new projects, and creating helpful tutorials throughout the community. Following all of them would be an overwhelming, if not impossible, task to accomplish while still having time to actually succeed at your job of coding.
The good news here is that a lot of people are already out there doing this legwork for you. One of the most prolific in this sense is Peter Cooper, who runs both the HTML5 Weekly and JavaScript Weekly newsletters, as well as several others on additional developer topics. Both of these newsletters are invaluable at making sure you’re up to date with the best content and latest projects available.
Other newsletters I can recommend include Responsive Design Weekly, Web Design Weekly and CSS Weekly. The site CoDrops, on top of posting outstanding tutorials, also posts what they refer to as the “Weekly Collective”, that features their top links each week. I also do the same weekly on my blog, summarizing the top links I find in HTML, CSS and JavaScript.
Of course, if you prefer to follow the sources, you can add Paul Irish’s lengthy list of “front end feeds” to your RSS reader. I also have shared my feed list for HTML and JavaScript (which I follow in addition to Paul’s list). I also tweet out and Facebook post all these links as I find them.
Good Luck!
I think it’s pretty clear that becoming a front-end developer or improving your skills as an existing front-end developer is no easy task. However, the payoff isn’t the growing demand for these skills from employers — and it’s not the growth opportunities. The payoff is that front-end development is a field and a job that can be fun, challenging and rewarding. So good luck in your endeavors, and feel free to ping me with questions via Twitter or via e-mail at brinaldi@adobe.com.
