Modern Front End Fundamentals

Room 10

09:00 - 17:00

(UTC+02)

2 Days

Monday

What does a modern front end actually look like? It's one that built using semantic HTML, the layouts are built with modern CSS and no frameworks, is accessible to all users no matter their abilities or how they consume the site and all this is backed up with a completely automated testing pipeline to ensure code changes only affect what we intended.

Web

Unless you're working in the front end on a daily basis, it's hard to keep up to date and ensure that your front end is still modern. This hands on workshop covers modern front end fundamentals, enabling you to create a layout and components without the need for any third party code. You learn core accessibility concepts to make your project more accessible without having to write complex code, take shortcuts or deal with browser specific implementations.

Once that is done, we then move on to testing our application, making sure that our accessibility improvements are there, watching for any unintended changes and making sure that the application works as it's supposed to. Through automated tools that can be implemented as part of a deployment pipeline, to manual tools to check on the fly, there are plenty of options to ensure the front end is being tested as thoroughly as the back end.

After the tests are written, we'll then integrate them as part of an approval and deployment pipeline. Automating the tests for pull requests, running through GitHub actions and ensuring that code is fully tested before it reaches the production branch of your repo.

TOPICS

Semantic HTML
Accessibility
CSS Layouts
Modern CSS
Accessibility Testing (automated and manual tests)
Visual Regression Testing
UI Testing
Setting up an automated testing pipeline

TOOLS
This workshop involves using various testing tools, and involves getting started with the tools from the beginning without any prior experience. Where possible, open source tools are used.

Accessibility Testing: aXe and Pa11y
Visual Regression Testing: Percy
UI Testing: Playwright
Automating tests: GitHub Actions

WHO SHOULD ATTEND
This workshop is aimed at anyone who works with front end code on a regular basis and needs to keep up to date with the constantly changing world of front end development. Even if you're just brushing up on your skills, this is the workshop for you.

PRE-REQUISITES
Some experience with front end code desirable, a basic understanding of HTML and CSS as fundamental concepts won't be covered. Some experience with JavaScript is also useful as the tests will be written in JavaScript.

Amy Kapernick

Amy is a business owner, senior developer, mentor and international conference speaker. She has a passion for sharing knowledge with the community with a focus on nurturing the next generation of developers. This has led to her organising and volunteering at events, running technical workshops, and writing and producing her own video content. She also regularly presents and keynotes at events all over the world, informing and entertaining audiences from a variety of industries and backgrounds.

A familiar face in the developer community Amy volunteers her time with several groups, including DDD Perth as Vice Chair and Director of Conference Content, Perth Azure User Group as one of the organising team and She Codes as a regular mentor. These contributions are not unnoticed, as she’s been recognised as a Microsoft MVP and a Twilio Champion since 2019 for her contributions to the tech community and ongoing commitment to helping those around her.