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

About me

Aubrey Sambor
Senior Front End Developer
Organizer at A11yTalks

Find me online

Mastodon
Website
LinkedIn

What will I talk about today?

Definitions and terminology
- Front of the front end
- Back of the front end
- Full stack
What makes a front of the front end skillset important?
A front of the front end developerʼs collaboration superpowers

What is a front of the front end developer?

A front of the front end developer…

Keeps up to date with modern CSS
Focuses on semantic HTML
Incorporates accessibility best practices from start to end of a project
Writes presentational JavaScript such as show/hide toggles and animations

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
Configures build tools such as Webpack or Vite
Writes and implements business logic such as routing, state, or caching

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”

Wait. Doesn’t full stack mean something else?

Full stack in Drupal

In the Drupal community, ʻfull stackʼ tends to mean a developer who

Writes Drupal modules
Handles site configuration management
Is proficient in PHP, Symfony, and object oriented programming
Can handle the front end, but it may or may not be their forte

Why front of the front end skillsets matter

Important skills we offer

Semantic HTML
Modern CSS
Presentational Javascript
Accessibility knowledge

Semantic HTML

Front of the front end developers know what HTML element to use in each scenario:

The difference between a button and a link
<details> and <summary> elements
The new Invoker Commands API used with:
- The Popover API
- The HTML <dialog> element

Buttons versus links

Knowing when to use a button vs a link is very important!

As a rule of thumb:

Use a button to trigger an action, such as submitting a form or opening and closing site navigation, a popover, or a dialog element
Use a link when you want to navigate to a different page, either on the same site or externally

<details> and <summary> elements

The <details> and <summary> elements create a disclosure element using semantic HTML, with show and hide functionality built right into the element.

Add the open attribute to the <details> element to display it as open by default.
Add the name attribute to multiple <details> elements to ensure only one element can be open at a time.
The ::marker pseudo-element can be used to style the open and close indicator.

The Invoker Commands API

A new way to control popovers and modal dialogs without using JavaScript!

Introduces two new elements to the <button> element: command and commandfor
- commandfor acts as a connector between the button and the element the command acts upon
- command contains the action that should be taken on the element
Currently the default commands only work on popovers and the <dialog> element, but custom commands can be written to support other elements

The Popover API (with invoker commands!)

The Popover API allows a user to create popover content on a page.

With this API, a user can use either the HTML popovertarget attribute to a button show, hide, or toggle the popover, or use JavaScript to add more fine grained control.
The Invoker Commands API for popovers does essentially the same thing as popovertarget, using the command and commandfor attributes.

Codepen displaying the Invoker Commands API on a popover

The <dialog> element

The HTML <dialog> element is used to create a dialog box that can be either modal or non-modal.

A modal dialog cannot be light dismissed by default, and the rest of the page is disabled while a modal dialog is open.
A non-modal dialog does not disable the rest of the content on the page and a user can continue interacting with other content on the page.
The Invoker Commands API currently only supports modal dialogs.

Codepen displaying the Invoker Commands API on a modal dialog

Modern CSS

Front of the front end developers keep up with modern CSS, leading to more performant code and smaller file sizes:

interpolate-size instead of the Web Animations API to animate the <details> element (Codepen displaying interpolate-size)
margin-trim to trim extra spacing on elements (Codepen displaying margin-trim)
text-wrap: balance for prettier headings (Codepen displaying text-wrap: balance)
Logical properties for directional styles
View transitions and scroll driven animations

Presentational JavaScript

Front of the front end developers know how to write presentational JavaScript to enhance a site:

Implementing accessible modal dialogs (Codepen displaying Javascript to add functionality to a dialog)
Using the web animations API to implement transitions and animations that canʼt be done using CSS… yet! (Codepen displaying the Web Animations API)
Writing vanilla JavaScript to show/hide navigation dropdowns

Accessibility

Front of the front end developers know the best ways to ensure accessibility when building a site:

Knows when to use or not use ARIA and how to implement it correctly
Uses color palettes that follow color contrast guidelines
Tests sites using multiple accessibility tools and runs manual tests with keyboard navigation and screen readers

Accessibility (continued)

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 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.

“What is digital accessibility?”, web.dev

Why accessibility is important (continued)

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.

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

Front of the front end developers’ collaboration superpowers!

Collaboration with your team

The most important job of a front of the front end developer? Collaboration! Front of the front end developers have many varied skillsets:

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

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.

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...

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 We effectively collaborate with other members of the team including designers, back of the front end developers, and back end developers