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