WHAT THIS WORKSHOP IS

▸ Semantic HTML

▸ Clean CSS

▸ Performant Javascript

▸ Basic Testing

▸ Refactoring
ROUTINE
▸ Topic

▸ Exercise + Bonus

▸ Elaboration of exercise
SEMANTIC HTML
▸ Roughly 100 semantic elements

▸ <p>, <a>, <article>…

▸ They enable communication

between developers and browsers.

▸ We help screen readers, search

engines and ultimately users
understand our content.
Last week was
▸ <div> or <span> provides no the 28th Birthday of HTML Tags!
meaning.
🎂🥳🎉
CONTENT SECTIONING ELEMENTS
▸ <h1>…<h6>

▸ <article>

▸ <section>

▸ <header>

▸ <nav>

▸ <main>

▸ <aside>

▸ <footer>

▸ <address>
TEXT CONTENT
▸ <p>

▸ <ul>

▸ <ol>

▸ <time>
INTERACTIVE ELEMENTS
▸ <dialog>

▸ <summary> and <details>

WHEN YOU ARE NOT SURE
▸ HTML Specs:
https://html.spec.whatwg.org/

▸ MDN:
https://developer.mozilla.org/en-
US/docs/Web/HTML/Element

▸ Can I use:
https://caniuse.com/

▸ Validate:
https://html5.validator.nu/
https://validator.w3.org/
EXAMPLES
INTRO TO THE EXERCISE
▸ Collapsible component

▸ After each topic we will create the

relevant part of the component.
SETUP
▸ Create a new branch:
git checkout -b workshop/frontend-skopje-workshop

▸ Create Collapsible folder under:

ui.frontend/src/components/molecules

▸ Add doc.md, Collapsible.vue and mock.js files

ASSIGNMENT-01
▸ Update doc.md file

▸ Prepare the semantic Markup in the Collapsible.vue file

Duration: 20 Minutes

Bonus 💯💥😍: Include aria labels

https://bit.ly/2JXoHuN
ASSIGNMENT-01
▸ Solution
git checkout workshop/frontend-skopje-workshop-assignment-1
SMOOTH CSS
▸ Correct Spacings and Font-Sizes

▸ Avoid magical numbers although the design

says otherwise

▸ Low specificity

▸ No redundant styles

▸ Edge cases (e.g long/short text, multiple items)

ASSIGNMENT-02
▸ Add collapsible.pcss file to the Duration: 15 Minutes

Collapsible folder. Bonus 💯💥😍: Add transition for hover

▸ Import collapsible.pcss:
ui.frontend/src/register/component.css

▸ Font Styles:
Trigger => @mixin setfont h5
Content => @mixin setfont body

https://zpl.io/25oLLmW
ASSIGNMENT-02
▸ Solution
git checkout workshop/frontend-skopje-workshop-assignment-2
COFFEE BREAK ☕ ~ 10 MINUTES
PERFORMANT JAVASCRIPT
▸ Lazy initialisation

▸ Reduced DOM Manipulation

▸ Redundant 3rd Party Script

Integration (beware of new APIs)
ASSIGNMENT-03
▸ Add v-collapsible directive under:
ui.frontend/src/directives Duration: 20 Minutes

Bonus 💯💥😍: Toggle functionality

▸ Register the new directive under:
ui.frontend/src/register/directives.js

▸ Open the clicked collapsible

▸ Close the active collapsible when

another item is clicked
ASSIGNMENT-03
▸ Solution
git checkout workshop/frontend-skopje-workshop-assignment-3
BASIC TESTING
▸ How do we prevent bugs?

▸ Static Types: Flow / Typescript

▸ Linting: ESLint

▸ Testing…
BENEFITS OF TESTING
▸ Enforce coding best practices e.g
separation of concerns, avoid side
effects, immutability

▸ Talk about the aim of our application

▸ Enable us to refactor our code more

confidently
ASSIGNMENT-04
▸ Add collapsible.spec.js under Duration: 20 Minutes

Collapsible folder Bonus 💯💥😍: Add a snapshot test

▸ Test following scenarios:

▸ When a user clicks on the

collapsible trigger, its content will
be shown.

▸ When a user clicks on the

collapsible trigger, the active
collapsible item will be closed.

▸ Hint: language-navigation.spec.js
ASSIGNMENT-04
▸ Solution
git checkout workshop/frontend-skopje-workshop-assignment-4
REFACTORING
▸ Refactoring is the process of
changing a software system in such
a way that it does not alter the
external behaviour of the code yet
improves its internal structure.
BEST PRACTICES
TEST

▸ Before you start refactoring, check

that you have a solid state of tests.

▸ The purpose of refactoring is to

make the software easier to SMALL
CHANGE
understand and modify.
THE RULE OF THREE
▸ The first time you do something, you just do it. The second
time you something similar, you do not feel comfortable
because of the duplication, but you do the duplicate thing
anyway. The third time you do something similar, you refactor.
OPPORTUNISTIC REFACTORING
▸ Always leave the code behind in a
better state than you found it.
FIN