Note: This is part two of a three-part series titled "Developers in the New Age of the Web"
The Front-end Role
So front-end Engineers need to understand all three browser languages to be successful, but there are non-technical traits that are essential to their success as well.
One of the amazing things about the front-end is how quickly it's changing. Most of the features in CSS3 weren't widely available a few years ago.
Responsive design, an approach allowing a website to change layouts on the fly depending on screen size, was introduced in 2010. Only two years later and it was #2 on a list of top web design trends by .net magazine.
Many times in the front-end engineer's career they will be asked to pick up a new framework and learn it in a week. After that week, they'll spend the next year learning why everything they thought they knew was wrong. They can't be afraid to make mistakes, but they also have to know how to pick up the pieces and move forward.
One of the most satisfying parts of front-end engineering is the visual aspect. It's not about plugging in numbers into a formula.
A great Front-end engineer bridges the gap between design and implementation. Many time designers only have time to paint an overall picture of the site. It's up to the front-end engineer to fill in the details of a design and really make it stand out.
They have to know what details matter and what details don't. Will a user care that the space between two elements is different from the design? The answer to that depends on what those two elements are and the developer should know the difference.
At the end of the day, no matter how well-designed something is on paper, it's the person putting together the fully-functional website that truly controls the design.
Everyday, front-end engineers are forced to rethink their solution when what was supposed to work didn't. They can't just program for a single browser on a single screen size for a single device. They have to know 100 different solutions to the same problem, because they're deploying their code to 100 different environments.
They have to think apart from what they already know and it's up to their creative mind to come up with new approaches when the old ones fail. Without the ability to proverbially think-outside-the-box, a developer will struggle to meet the browser support requirements.
Despite all the curiousity needed to keep on top of things, the front-end engineer needs to be a specialist in their craft. They should understand things like...
Companies like Google know that website performance is highly correlated to conversion success. According to some metrics
"47% of consumers expect a web page to load in 2 seconds or less" and a "1 second delay in page response can result in a 7% reduction in conversions".
A lot is done to optimize response time on the server, but "80-90% of the end-user response time is spent on the frontend". How crucial it is then to make sure that the front-end code is performant?
Websites are about humans interacting with computers. Understanding what disabilities can affect those humans really impacts their experience with your website.
Accessibility, sadly, is a topic that many front-end engineers haven't focused on. This impacts people's lives daily, as they're unable to freely use the web due to the way it's coded. Fortunately, once a front-end engineer understands accessibility, they're in a perfect position to fix it.
"Despite CSS being so hard to maintain, it's often the part of the FE stack people are least interested in protecting from tech debt." - Nicolas Gallagher
This is an important concept to grasp. It's incredibly easy for a CSS file to grow to such a size that it impacts site performance and become a beast to maintain.
It's obvious that Front-end engineers need to know the latest about browsers, including what each one supports and how to test/debug in each of them. But what's not always obvious is how important this really is.
'Browsers are the most hostile software development environment imaginable' - Douglas Crockford
Fixing a single browser-related bug can take days, and if you do it wrong, can cause regressions in existing code. Having someone with the proper knowledge to handle this is important to delivering code in a timely manner.
Continue reading "Developers in the New Age of the Web":