How Do You Spot a Front End Developer?
You may have come across a front end developer without even realizing it. Remember that friend who brought a uniquely designed, homemade card to your ninth birthday party? Or that classmate who was always creating…
How Do You Spot a Front End Developer?
You may have come across a front end developer without even realizing it. Remember that friend who brought a uniquely designed, homemade card to your ninth birthday party? Or that classmate who was always creating custom MySpace profiles? Well, we’re all grown up now, and you can find us manipulating WordPress into a fully functioning website.
What We Do
The front end development niche lies somewhere in between the creative and the technical. Our bread and butter is bringing a designer’s vision to life on the world wide web, while setting the organizational structure of the code for the backend developer.
New tools are constantly created to make these languages easier to work with, which helps take front end development, and web design as whole, to the next level. Here at Fastspot, we utilize:
- LESS or SASS for CSS
- Twig makes the switch from HTML to PHP smooth
- Grunt or Gulp to automate build processes
- Formstone - a jQuery library of front end components that are highly customizable [Learn more about how we use Formstone]
How We Work with Design
Design has the biggest impact on a front end developer’s work. Our primary job function is executing a designer’s concept in web form.
First, we use design tools, such as Sketch, to examine the design’s fine details. We take measurements, find font sizes, copy hex colors, export icons, and save images. However, we employ our most useful visual by overlaying grid columns on top of the design to watch how elements line up on the page. Once we execute this on the web, we can test our success by overlaying the design window on top of our browser window, and everything should line up.
Even though the design lays the foundation for our work, reading the Look and Feel and Voice and Tone keywords in the Creative Brief allows us to dream up animations and interactions that align with our client’s brand and creative direction.
When interpreting a designer’s intentions through code, sometimes changes have to be made. This could be due to browser support, accessibility concerns, or code organization. In these situations, the front end developer collaborates with Design in order to reach the most beautiful, functional result.
Interacting with Backend Development
A good front end developer will set up their backend developer for success. We don’t work with data or APIs, but we do lay out the organizational structure of a website in the front end code. In order to do that, we have to make a lot of behind the scenes decisions. This includes addressing accessibility and analytics. We can best work together as developers if our code is so organized that it’s predictable.
It’s true that most of our job revolves around the design provided. But there are times that we have to work from a technical perspective first. As a front end developer, we have to be quick and nimble to adapt the design to what the data is throwing at us. We carefully juggle utilizing existing styles with trying not to make extra work for the back end developer.
At Fastspot, our backend developers specialize in building websites on WordPress, Drupal, and BigTree content management system (CMS). As front end devs, we keep this in mind while building the site statically. Once we’re done, the back end dev moves the code into the CMS, where it will then reach the client and be ready for content entry.
Along the course of the project, there may be updates needed due to bugs or new requests. We would make this update on our static version and can typically get into the CMS and make the edit if we are feeling dangerous. But often times, that work is better left to the backend’s expertise.
In the End…
…communication is key. Front end developers have to bridge design and backend development. The best way to achieve this is by talking with our team, one component at a time.