I’m very new to this career path and don't presume to know it all, or even a small portion of what there is to know, what follows is my take on the role of a front end developer and why graduates might struggle when entering the job market.
I have been in a front end developer role for almost a year here at Creode, so im still a rookie and I’m still learning things on a daily basis, slowly developing into a “full stack” developer.
Since starting what i’ve come to find is that the role of a front end developer operates in a very unstable display environment, it requires a skill set that needs to range from code to design as well as requires an eye for usability, and inevitably the blame when the end product does not look or function the way a user expects.
“It’s a hybrid position, you are someone that paints with code. Programmers don't accept your work as real code, and designer don't consider it design.”
We come across issues when we get given a design that has been done by a designer who is not firm in web design. The web being a form of media that has to work intuitively for customers, a design might look good on paper but may not work in practicality. This is why it's important for any front end developer to have had some input in the design process, especially when it comes to the UI/UX within the design. The developer will be thinking about how the site is to be built based off of the design rather than the aesthetics of the design itself.
The largest obstacle most of us face is to create a pixel perfect design that not only works well on all devices and screen sizes but on older versions of browsers. We all know the pain of trying to make things work in IE8. Whilst there are many best practice methods out there and resources one can draw off to make the job an easier one. The challenge comes in understanding why it's a best practice for those specific browsers, which comes down to understanding how the browser renders the page, something i'm still learning.
“So as a web developer learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices” - David Mosher
Im sure all of us care deeply about developing our craft, but another challenge is staying up to date with the many technologies, frameworks and best practices there are, all of which together can be a lot to take in.
Coming from a creative background as opposed to a computer science background or from a course like creative media technologies where the “basics” of front end development are covered I have had to rely on the wealth of resources available online from places like CodeAcademy, Treehouse, stackoverflow, css-tricks and more.
These resources give a good understanding of the basic principles of html and css and cover more advanced principles that can be used by front end developers but many of the skills I have learnt whilst working at Creode have come from peer reviews and working with more experienced developers.
Having spoken to many of my colleagues and lecturers who teach this stuff it seems apparent to me that universities are behind the curve in terms of what is taught and what is needed by the industry. These days i'm inundated by messages on linkedin and through twitter with a plethora of jobs being advertised. It's obvious that market competition is off the scale, simply because the surging demand for developers outweighs the supply, and from what i’ve come to learn from my more experienced colleagues and recruiters themselves is the skills coming out of univeristy don't cut it.
So what were the first things I had to get to grips with?
The main thing lacking which is a rather large requirement of any agency life is the use of version control, this concept was new to me when joining Creode and I quickly had to get to grips with how to use GIT and the software Creode prefers to keep everything organised.
Preprocessors - who writes directly to css these days?
Using sass speeds up workflow, no one could argue this fact. Being able to use a more programmatic approach to styling up a site, using variables and breaking things up into a more modular project not only makes things easy to edit in the long run but improves the workflow when building the project from the ground up.
The use of frameworks, my fellow front end developer Ste Allan recently did a talk on the benefits of some frameworks at Forefront. In this talk he mentioned frameworks like bootstrap, zurb, inuit and yeoman. There are many more frameworks out there, the question for any front end dev is which framework works for them and their project. Im sure we all have our preferred method of working and as most tasks come down to in front end development, when taking in backwards compatibility and device compatibility, it is a matter of which is the correct method for the task at hand. There could be several right answers to any given problem, the idea being to choose the leanest and most efficient method to solve the task.
It's imperative as a developer in this fast paced industry to keep abreast of new developments, tools, frameworks and general ideas floating around. The community behind development is massive and the amount of resources online innumerable. Overall my experience as a developer in an agency has taught me more than years of self directed learning. The best way to learn of course being to listen, take notes and ask questions! Your peers will always find time to help a new developer hone their skills. Network, build connections and keep an ear to the proverbial development ground.
If you’re wanting to learn more about life as a developer post graduation ask me a question in the comments!
I have collected some resources any budding front end developer should look into below.
Chris Coyier is a web designer who writes about web design at CSS-Tricks, talks about web design every week on the podcast ShopTalk, and co-founded the code playground CodePen.
In this talk David focuses on how browsers handle all the different parts of a website and render out a final result, a lot of which still goes over my head but the concepts presented make it easier to understand why some browsers are trickier to code for that others!
The Developer Tools built into Google Chrome provide powerful ways to understand, debug, and profile web applications.
An overview of the popular pre-processors: Stylus, Less & Sass, with features subdivided up into easy to learn sections of beginner, intermediate and advanced.
A brief look at the cool new tools coming to a front end developers palette soon, the only issue being the ever present backwards compatibility challenge we all face.