Exam overview
Associate
Developer
This guide outlines everything you
need to know to prepare for the
Associate Developer certification.
It includes practical details, key
topics and expected knowledge
areas for the exam.
1 Associate Developer Exam Overview
Hyvä Certified
Associate Developer
exam details.
This certification will require existing Magento experience in relevant frontend
areas. No Hyvä project experience is needed. It is designed so it can be passed
after self-study of the Magento and Hyvä developer documentation (with access
to Hyvä source code) or after completion of a training course.
↗ Register for your exam ↗ Hyvä Docs: Getting Started ↗ Get in touch
This exam will validate the skills and knowledge needed
Audience for developers to document their initiative and provides an
entry way into the Hyvä ecosystem.
It consists of scenario-based questions.
You should have an understanding of Layout XML, Blocks,
and View Models; Templates; Magento Themes; Hyvä
Compatibility Modules; Tailwind CSS and Hyvä; Alpine.js
and JavaScript; Frontend Performance; Hyvä Features.
90 minutes, 60 questions
Duration (subject to change)
€200
Cost
A score of 70% or higher is needed to pass.
Passing (subject to change)
2 Associate Developer Exam Overview
Exam topics.
① Layout XML Blocks and View Models 15%
② Templates 10%
③ Themes 5%
④ Compatibility Modules 10%
⑤ Tailwind CSS and Hyvä 20%
⑥ Alpine.js and JavaScript 18%
⑦ Frontend Performance 14%
⑧ Hyvä Features 8%
3 Associate Developer Exam Overview
Exam topic
Layout XML Blocks
①
and View Models
1.1 Demonstrate the ability to use Layout Merging for theme customization
Adding a block to a container. Effects of redeclaring a block from a parent theme in a
child theme. Avoiding code duplication with custom layout handles. Moving a child block
from a container into a template block.
1.2 Demonstrate the ability to use Block Arguments for theme customization
Adding a data argument in layout XML to a block instance declared in the parent theme.
Specifying CSS classes in layout XML for containers and blocks.
1.3 Demonstrate the ability to use ViewModels via layout XML and the View
Model Registry
1.4 Demonstrate the ability to use Layout handles to implement
customizations.
4 Associate Developer Exam Overview
Exam topic
Templates
②
2.1 Determine how to override a Hyvä default theme
template in a custom theme
Overriding a default theme template in a child theme.
2.2 Determine how to override a Hyvä default theme
template in a custom module
Overriding a default theme template in a custom module. Changing the template name in
layout XML.
2.3 Determine how to escape values securely and depending on context
Escaping JSON to be rendered in a data attribute. Escaping the value in a textarea input.
Escaping a strings in a HTML context, e.g. a product name.
5 Associate Developer Exam Overview
Exam topic
Themes
③
3.1 Create a new theme based on the Hyvä default theme
Required steps to create a child theme. Debugging common errors
(missing preview image, theme-type set to 1 in the DB).
6 Associate Developer Exam Overview
Exam topic
Compatibility Modules
④
4.1 Configure a module’s template/layout directory
so it is found by Tailwind
Including a Tailwind configuration in a compatibility module. Excluding CSS from a
Compatibility module in a child theme. Setting up a compatibility module to be included
in the Tailwind content path automatically. Adding a module path to the Tailwind content
path of a theme explicitly.
4.2 Override a template provided by a
compatibility module in a theme
Choosing the correct module folder name for template overrides, depending if it is a
template from the original module vs. the compatibility module.
4.3 Demonstrate understanding of common steps to replace Luma JS with
Alpine/vanilla JS
7 Associate Developer Exam Overview
Exam topic
Tailwind CSS and Hyvä
⑤
5.1 Compile styles in a Hyvä theme
Demonstrate an understanding of the difference in the styles.css generated by npm run
watch and npm run build
5.2 Customize a theme using the theme Tailwind configuration
Changing of the color theme and breakpoints. Demonstrate an understanding of the
extends section in the tailwind.config.js.
5.3 Demonstrate understanding of influencing the size
of the generated styles.css file
Describe steps to debug excessive styles.css size. Strategies to keep the generated
styles file small, compose common classes rather than declaring new ones.
5.4 Demonstrate knowledge how Tailwind decides what classes
to include in the generated CSS
Composing class names programmatically in templates.
5.5 Demonstrate ability to use CSS variables to customize a Hyvä theme
Declaring and using CSS variables to avoid template overrides
8 Associate Developer Exam Overview
Exam topic
Alpine.js and JavaScript
⑥
6.1 Demonstrate understanding of JavaScript events
with and without Alpine.js
Using the debounce, throttle, passive and other Alpine modifiers. Subscribing to events in
the window scope vs element scope. Dispatching an event in JS and in Alpine.js.
6.2 Design Alpine components encapsulated within a single template
Creating a component encapsulated in a single template. When to choose to extract a
script to avoid too much duplication in the rendered page.
6.3 Design JavaScript components to be reused on different pages or
multiple times on a single page
Avoid rendering script instance specific values in the JS by using data attributes instead.
6.4 Demonstrate how to load JavaScript files without
impacting performance metrics
Using the init-external-scripts event and facades
6.5 Demonstrate understanding of how to use x-defer
to optimize frontend performance
Choosing between x-defer=intersect vs x-defer=idle. Determining good candidate
components for x-defer.
6.6 Demonstrate ability to implement a frontend component without
generating an excessive DOM size
Benefits and drawbacks of strategies like paging, AJAX, and Alpine templates to reduce
the DOM size.
6.7 Demonstrate ability to create JS without relying on the content security
policies unsafe-eval and unsafe-inline
Avoiding scripts within Alpine templates. Using Alpine.data(). Using data attributes as
arguments. Using iteration variables within component methods. Avoiding injecting
scripts from AJAX responses after the initial page load.
9 Associate Developer Exam Overview
Exam topic
Frontend Performance
⑦
7.1 Demonstrate understanding of FCP, INP, TBT, LCP, CLS
Understanding the dependency of all metrics on TTFB.
7.2 Demonstrate ability to improve given performance metrics of a page
Resolving excessive DOM size issues. Resolving CLS issues. Resolving LCP issues.
7.3 Demonstrate ability to use performance measuring tooling effectively and
follow recommendations (Lighthouse, CWV)
Improve performance in PageSpeed results. Determining low-hanging fruit in
PageSpeed recommendations.
7.4 Demonstrate understanding of CWV
Difference between Lighthouse data and RUM data. Understand the role visitor devices
play in regard to performance results.
10 Associate Developer Exam Overview
Exam topic
Hyvä Features
⑧
8.1 Demonstrate understanding of the application
of the theme-fallback module
Configuring a site to use Luma pages for specific routes. Configuring a site to use Hyvä
Theme only for the checkout.
8.2 Demonstrate ability to use the Hyvä modal library
to create custom dialogs
Using multiple modals on the same page, avoiding naming conflicts. Using the return
value of the show promise. Updating modal contents depending on outside values when
it is opened.
8.3 Demonstrate ability to use the Hyvä JavaScript
form validation library in custom forms
Making the form validation library available on the page. Benefits and downsides of
using browser native HTML5 validation compared to JS validation. Writing custom
validation rules.
11 Associate Developer Exam Overview
Practice questions.
You'll find the answers to these questions on the last page of this document.
Good luck!
1 You are working on a large B2B site focused on security. You have added
a new product attribute named sales_message which can be displayed
on the frontend.
How do you render the new attribute securely in a <p> tag?
A <?= /** @escape */ $product->getSalesMessage() ?>
B <?= html_safe($product->getSalesMessage()) ?>
C <?= $escaper->escapeHtml($product->getSalesMessage()) ?>
D Enable Is HTML Allowed in the attribute settings
2 You are converting a module built for a Luma based store. The module
provides in-depth technical specification data for customers in certain
customer groups. Given the amount of data, the original module uses the
mage/storage RequireJS module to get and post data via AJAX upon
various user interactions.
storage.post(
url, JSON.stringify(payload)
).done(function (result) {
...
}).fail(function (response) {
...
}).always(function () {
...
});
How do you convert the AJAX post request implementation to make it
compatible with Hyvä?
A Use the Alpine.js $dispatch magic method.
B Use the native browser fetch() method.
C Use the $.ajax() method.
D Use the axios.post() method.
12 Associate Developer Exam Overview
3 A merchant lists many brand logos on a page of their site. The custom
template uses PHP to iterate through all brands and render each one as
an inline SVG image.
The Lighthouse results for the page flag excessive DOM size as an issue.
How do you improve this?
A Make each logo an Alpine.js component and hide them with x-cloak and
x-defer="intersect" until they enter the browser view port.
B Replace the inline SVG images with <img> tags referencing external files
or a data-uri.
C Extract each logo into a separate .phtml template and declare them as child blocks
of the main content area in layout XML.
D Merge all logo SVGs into a single combined SVG image and display it instead of the
individual SVGs.
13 Associate Developer Exam Overview
Next steps.
Spoiler alert!
Practice question answers: 1 C / 2 B / 3 B
Demonstrate your skills
↗ Register for your exam
Brush up on your knowledge
↗ Hyvä Docs: Getting Started
Read the FAQ or contact us
↗ Get in touch
hyva.io hyvä-themes
[email protected] @hyva_io
