Slide 1
What a Front of the Front End Developer Brings to Your Team
Slide 2
About me
- Aubrey Sambor
- Senior Front End Developer
- Organizer at A11yTalks
Find me online
Slide 3
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
Slide 4
What is a front of the front end developer?
Slide 5
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
Slide 6
What is a back of the front end developer?
Slide 7
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
Slide 8
Well, what about full stack developers?
Slide 9
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 🦄
Slide 10
”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”
Slide 11
Wait. Doesn’t full stack mean something else?
Slide 12
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
Slide 13
Why front of the front end skillsets matter
Slide 14
Important skills we offer
- Semantic HTML
- Modern CSS
- Presentational Javascript
- Accessibility knowledge
Slide 15
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
Slide 16
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
Slide 17
<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.
Slide 18
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 commandforcommandfor acts as a connector between the button and the element the command acts uponcommand 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
Slide 19
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
Slide 20
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
Slide 21
Modern CSS
Front of the front end developers keep up with modern CSS, leading to more performant code and smaller file sizes:
Slide 22
Presentational JavaScript
Front of the front end developers know how to write presentational JavaScript to enhance a site:
Slide 23
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
Slide 24
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.
Slide 25
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
Slide 26
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.
Slide 27
To summarize: front of the front end developers add a LOT to a team. Our skills matter to the success of a project.
Slide 28
Front of the front end developers’ collaboration superpowers!
Slide 29
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
Slide 30
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.
Slide 31
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.
Slide 32
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.
Slide 33
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.
Slide 34
Slide 35
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
Slide 36
