What a Front of the Front End Developer Brings to Your Team

What a Front of the Front End Developer Brings to Your Team Aubrey Sambor

Find me online Aubrey Sambor Lead Front End Developer Lives in Massachusetts Loves the front of the front end Mastodon https://labyrinth.social/@starshaped Website https://aubreysambor.com LinkedIn https://www.linkedin.com/in/aubreysambor

Also, I’m looking for work! 3

What will I talk about today? ● ● ● ● What is a front of the front end developer, and how is it different from a back of the front end developer? Why front of the front end skills matter in todayʼs web development world How to convince your team that a front of the front end developer belongs on your team How front of the front end developers can work with other members of a team to build a great website

Some definitions… 5

What is a front of the front end developer?

A front of the front end developer… ● ● ● ● ● Keeps up to date with CSS Focuses on semantic HTML Thinks of accessibility from start to end of a project Writes presentational JavaScript such as show/hide toggles and animations Knows when to use CSS instead of JavaScript to solve a problem

Now, what is a back of the front end developer?

A back of the front end developer… ● ● ● Focuses on JavaScript frameworks such as React or Vue Is more knowledgeable in build tool setup using Webpack or Vite Writes and implements APIs for others on the team to consume

Well, what about full stack developers?

A full stack developer… ● ● ● Can handle the responsibilities of both a front of the front end developer AND a back of the front end developer! Is equally proficient at both back and front end technologies Is a magical unicorn that can do it all 🦄

” In my experience, “full-stack developers” always translates to “programmers who can do frontend code because they have to and itʼs ʻeasyʼ.” - Brad Frost, “Full-Stack Developers”

Why front of the front end skills matter 13

Important skills we offer ● ● ● ● Modern CSS Semantic HTML Accessibility knowledge Presentational Javascript

CSS Front of the front end developers keep up with the latest and greatest in CSS, leading to more performant code and smaller file sizes: ● ● ● ● ● Modern CSS such as text-wrap: balance (Codepen) Logical properties are a more concise way to write directional styles in CSS Uses Flexbox and CSS Grid when building layouts Implements basic transitions and animations using CSS when possible … and more!

Semantic HTML Front of the front end developers know what HTML element to use in each scenario ● ● ● ● When to use a button vs a link Details and summary elements Popover API The dialog element

Accessibility Front of the front end developers know the best ways to ensure accessibility when building a site: ● ● ● ● Building a button using semantic HTML (Codepen) Knowing when to use or not use ARIA in general Using color palettes that follow color contrast guidelines Tests sites using multiple accessibility tools and manual testing such as keyboard navigation and screen readers

Presentational JavaScript Front of the front end developers know how to write presentational JavaScript to enhance a site: ● ● ● Writing vanilla JavaScript toggles to show/hide navigation dropdowns Using the web animations API to implement transitions and animations that canʼt be done using CSS… yet! Implementing tooltips and modals (also ensuring all of these are accessible, of course!)

To summarize: front of the front end developers add a LOT to a team. Our skills matter to the success of a project.

How to convince your team that our skills matter 20

The importance of our skillset ● ● ● Our knowledge of accessibility and semantic HTML In-depth knowledge of new CSS techniques can save developers time and can easily add a more immersive experience Collaboration with many members of a team to build a successful site

Accessibility and semantic HTML ● ● The WHO estimates that 15% of the world population (1.3 billion) live with some form of disability, so itʼs important to build sites that people with visual, auditory, vestibular disorders, and others can use the sites we build. The WebAIM Million from 2025 notes that 94.8% of home pages had detected WCAG 2 failures, most from color contrast issues. ○ ARIA usage has increased 18.5% just in the past year, and home pages with ARIA averaged 50% more detected errors than pages without.

Why is this important?

Why accessibility is important ● ● People with disabilities use the web as much as people without disabilities, so they shouldnʼt be left out of the website experience. The web is for everyone so it should be built for everyone. Not making your site accessible can have a legal impact. Lawsuits against inaccessible websites have been increasing in recent years. This shouldnʼt be the main reason to make your site accessible, but itʼs important.1

1. “What is digital accessibility?”, web.dev

Why accessibility is important ● ● A front of the front end developer would work to eliminate accessibility issues such as color contrast, empty links, missing form input labels, and other issues as much as possible. A front of the front end developer would also know when to use ARIA and when to use semantic HTML to build a component, avoiding extraneous ARIA which might cause more accessibility problems than help.

Upcoming CSS techniques ● interpolate-size instead of the Web Animations API to animate the <details> element (Codepen) ● ● ● ● Relative color syntax, an easier way to implement colors in your design system using less code (Codepen) margin-trim (Codepen) View transitions and scroll driven animations @scope can reduce duplicate code and help avoid style leaks to different components

Why is this important?

Upcoming CSS techniques ● ● ● Knowing how to write CSS using the latest technologies can save coding time and reduce the size of your CSS files Utilizing new CSS techniques for animation and transitions can make your site stand out, driving more traffic to your site New color techniques can help build design system colors faster, saving time when setting up your color system

Collaboration with your team Front of the front end developers have skillsets that complement other members of their team: ● ● ● Some have design experience so they can assist designers in building prototypes Some have back of the front end development experience so they can step in and help with JavaScript framework tweaks Some have back end development experience so they can help implement the design in a way that makes the most sense with the back end

Why is this important?

How front of the front end developers collaborate with others 31

How FEDs work with others The most important job of a front of the front end developer? Collaboration! Front of the front end developers work well with: ● ● ● ● Designers Back of the front end developers Back end developers Project managers

Collaboration with designers ● ● Having a front of the front end developer work alongside a designer at the start of the project helps the development process later on, with the front end developer catching any discrepancies in the design that might not be possible or doable within a tight deadline. On the flip side, designers can bring new ideas to a front of the front end developer, assisting with transitions or animations that would make the website stand out.

Collaboration with back of the front end developers ● ● Back of the front end developers focus on setting up tooling, writing and configuring APIs, and writing the business logic. Front of the front end developers ensure that the HTML the JavaScript framework generates is semantic and accessible, as well as write any styles and add any presentational Javascript thatʼs needed.

Collaboration with back end developers ● ● In a system such as Drupal, back end developers can build modules and write custom functions for front of the front end developers to pull in and implement in Twig templates. On the other hand, front of the front end developers can write the CSS needed in a custom Drupal module, leaving back end developers to focus on writing the PHP code needed for modules and other parts of the site.

Collaboration with project managers ● ● Front of the front end developers can help with ticket creation, defining the definition of done by ensuring accessibility testing and visual regression testing satisfy the defined criteria. Front of the front end developers can also get involved with the project early on if possible, helping with the discovery process before theyʼre brought onto the project.

In conclusion: front of the front end developers can be useful at every part of the project, beginning to end, and collaborate effectively with every member of the team.

Wrapping up… 38

Wrapping up Front of the front end developers are an important part of every team: ● ● ● We have a unique skillset that integrates with the skillsets of other members of the team including CSS, HTML, and accessibility We bring value to your team by keeping up with the latest CSS, focusing on accessibility best practices, and writing semantic HTML for each area of the site We effectively collaborate with other members of the team including designers, back of the front end developers, back end developers, and project managers

Further reading ● ● ● ● ● ● ● ● ● ● ● https://benmyers.dev/blog/dont-use-aria-label-on-static-text-elements/ https://blog.logrocket.com/styling-html-modern-css/ https://css-tricks.com/the-great-divide/ https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-d evelopment/ https://css-tricks.com/what-makes-a-good-front-end-developer/ https://alistapart.com/article/owning-the-role-of-the-front-end-developer/ https://blog.jim-nielsen.com/2023/meaning-in-web-tech-stack-ordering/ https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-20 24-edition/ https://zellwk.com/blog/good-frontend-developer/ https://web.dev/learn/accessibility/why/ https://thinkdobecreate.com/articles/a-call-for-consensus-on-html-semantics

Find me online Aubrey Sambor Lead Front End Developer Lives in Massachusetts Loves the front of the front end Mastodon https://labyrinth.social/@starshaped Website https://aubreysambor.com LinkedIn https://www.linkedin.com/in/aubreysambor

Any Questions?