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

A presentation at New England Drupal Camp 2025 in November 2025 in Providence, RI, USA by Aubrey Sambor

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

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.

Further reading
https://css-tricks.com/the-great-divide
https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development
https://css-tricks.com/what-makes-a-good-front-end-developer
https://alistapart.com/article/owning-the-role-of-the-front-end-developer
https://zellwk.com/blog/good-frontend-developer
https://www.tempertemper.net/blog/front-of-the-frontend
https://jeffbridgforth.com/front-of-the-front-end-developer

Aubrey Sambor
@starshaped

1 / 36

Are you a front of the front end developer who focuses on CSS, semantic HTML, and presentational Javascript, and do you wonder if your skillset matters in the world of modern web development? Do you think about the best way to mark up an SVG to be as accessible as possible, and write Twig templates with (relative) ease? You’re not alone and your front of the front end development knowledge is still important today.

This session discusses why your front of the front end development skills are still relevant in today’s web development ecosystem, how to convince your team that a front of the front end developer is a valuable asset, and how front of the front and back of the front end developers can work together to develop powerful front end solutions in Drupal and beyond.

Let’s show the web development community that front of the front end developers contribute so much to a team!

Resources

The following resources were mentioned during the presentation or are useful additional information.

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

About me

What will I talk about today?

What is a front of the front end developer?

A front of the front end developer…

What is a back of the front end developer?

A back of the front end developer…

Well, what about full stack developers?

A full stack developer…

Wait. Doesn’t full stack mean something else?

Full stack in Drupal

Why front of the front end skillsets matter

Important skills we offer

Semantic HTML

Buttons versus links

<details> and <summary> elements

The Invoker Commands API

The Popover API (with invoker commands!)

The <dialog> element

Modern CSS

Presentational JavaScript

Accessibility

Accessibility (continued)

Why accessibility is important

Why accessibility is important (continued)

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

Collaboration with designers

Collaboration with back of the front end developers

Collaboration with back end developers

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

Further reading

Link for this presentation:

HTML code for embedding:

Share on social media: