front endWORKFLOW

Sponsored by

Husain Abbasi

Modularity

Split your code into reusable or independent chunks. Use consistent naming for classes or attributes in

HTML Scope CSS with prefixing Use classes and/or namespacing in JavaScript

What does writing modular code actually mean?

Distributed Development Versioning Dependency Management Maintainability Scalable Responsive

Why?

Easier to integrate the HTML with the backend code. Make the modules as close to backend partials as

possible Each module is it’s own entity and may not depend on

others.

How does it affect sitecore

Root _CSS _JS

Partials Layouts Pages

Automation

Perform repetitive tasks automatically Concentrate more on the actual coding rather than all

the processes. Provides a unified workflow across a team Save time!

Why use Automation tools?

Our awesome toolkit and process

#grumpyduck

All content should be in HTML files

Avoid Internal JS. Can cause conflicts between the FE and BE JS code Difficult to troubleshoot. Clutter. Difficult to maintain.

Comments are important

Prefer handling of logic from backend rather than JS

IDs should be valid Must contain at least one character Must not contain any space characters All values are case-insensitive Should be unique Must begin with a letter ([A-Za-z]) and may be followed

by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

For and ID elements should match

Remove the HTML tags if the text is empty Mess up screenreaders Can cause unwanted behaviors. Unnecessary bloat Can cause style issues. CSS is usually written keeping the

flow of the document and the availability of HTML tags in mind

Collab with FE before adding JS Conflicts Dependency issues

Avoid adding extra HTML between elements

Thank You!

Questions?

Sponsored by