What a front of the front end developer brings to your team

A presentation at Florida Drupal Camp in February 2025 in Orlando, FL, USA by Aubrey Sambor

Find me online Mastodon https://labyrinth.social/@starshaped Aubrey Sambor Blog https://aubreysambor.com Lead Engineer at Lullabot LinkedIn https://www.linkedin.com/in/aubreysambor Proud front of the front end developer Drupal.org https://drupal.org/u/starshaped LULLABOT Lives in Massachusetts

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 LULLABOT ●

LULLABOT What is a front of the front end developer, anyway?

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

LULLABOT Now, what is 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 LULLABOT A back of the front end developer…

LULLABOT 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 🦄 LULLABOT ●

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

LULLABOT Why front of the front end skills matter 13

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

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! LULLABOT ●

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 LULLABOT ●

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

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!) LULLABOT ●

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

LULLABOT 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 LULLABOT ●

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 2024 notes that 95.9% of home pages had detected WCAG 2 failures, most from color contrast issues. ○ ARIA usage has increased 15% just in the past year, and home pages with ARIA averaged 32% more detected errors than pages without. LULLABOT ●

Why accessibility is important ● 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 LULLABOT ● 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.
“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. LULLABOT ●

Upcoming CSS techniques ● Using anchor positioning and popover API to create dropdown navigation (Codepen) ● 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 LULLABOT ●

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 traﬃc to your site New color techniques can help build design system colors faster, saving time when setting up your color system LULLABOT ●

Collaboration with your team Front of the front end developers have skillsets that complement other members of their team: Designers, back of the front end devs, and back end devs: ○ Some front of the front end developers also have experience in design, so they can assist designers in building Figma prototypes ○ ○ Some may have back of the front end development experience, so they can step in and help with Javascript framework tweaks Some may have backend development experience in a language such as PHP or Java, so they can help implement the front end design in a way that makes the most sense with the back end paradigm LULLABOT ●

LULLABOT How front of the front end developers collaborate with others 32

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 LULLABOT ●

Collaboration with designers ● Front of the front end developers collaborate effectively with designers in particular. 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. LULLABOT ●

● Front of the front end developers and back of the front end developers also work well together. Back of the front end developers can focus on setting up tooling, writing and configuring APIs, and writing the business logic, while the front of the front end developer makes sure the HTML the Javascript framework generates is semantic and accessible as well as writing any styles and adding any presentational Javascript thatʼs needed. LULLABOT Collaboration with back of the front end developers

Collaboration with back end developers ● Front of the front end developers collaborate effectively with back end developers as well. 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 module, leaving back end developers to focus on writing the PHP code needed for modules and other parts of the site. LULLABOT ●

Collaboration with project managers ● Front of the front end developers collaborate effectively with project managers because they 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. LULLABOT ●

LULLABOT 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 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 can effectively collaborate with other members of the team to build a great website, including designers, back of the front end developers, back end developers, and project managers LULLABOT ●

● ● ● ● ● ● ● ● ● ● ● 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-frontend-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://blog.jim-nielsen.com/2023/meaning-in-web-tech-stack-ordering/ https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css -spring-2024-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/ LULLABOT Further reading

Aubrey Sambor
@starshaped

1 / 43

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!

What a front of the front end developer brings to your team

Link for this presentation:

HTML code for embedding:

Share on social media:

Video