Daily Business with a Living Styleguide

How working with components and a living styleguide transformed the way we at sitegeist develop new features for our clients.

#typo3 #t3muhh #techsummer20

Transcript

1. Real Values. Simon Praetorius Daily Business with a Living Styleguide
2. Real Values. Simon Praetorius: Daily Business with a Living Styleguide Simon Praetorius 2004
 first steps in HTML
 since 2009
 working with TYPO3
 since 2017
 Senior TYPO3 Developer @ sitegeist (Hamburg)
 Technical Lead
 Software Architecture
 TYPO3 Development and Integration
 TYPO3 Coaching
 Open Source
3. Real Values. Simon Praetorius: Daily Business with a Living Styleguide tools/ fluid-components fluid-styleguide
 workflow/ rapid-prototyping hot-potato-process hand-over integration agenda
4. Real Values. tools/ fluid-components Simon Praetorius: Daily Business with a Living Styleguide
5. Real Values. teaser component Simon Praetorius: Daily Business with a Living Styleguide ICON TITLE DESCRIPTION LINK THEME
6. Real Values. <fc:component> <fc:param name="title" type="string" /> <fc:param name="description" type="string" /> <fc:param name="link" type="Typolink" /> <fc:param name="icon" type="string" optional="1" /> <fc:param name="theme" type="string" optional="1" default="light" /> <fc:renderer> <a href="{link}" class="{component.class} {component.class}-{theme}"> <h3 class="{component.prefix}title">{title}</h3> <p class="{component.prefix}description">{description}</p> <f:if condition="{icon}"> <i class="icon icon-{icon} {component.prefix}icon"></i> </f:if> </a> </fc:renderer> </fc:component> Simon Praetorius: Daily Business with a Living Styleguide Components/Molecule/Teaser/Teaser.html
7. Real Values. {namespace my=VENDOR\MyExtension\Components} <my:molecule.teaser title="TYPO3" description="The professional, flexible Content Management System" link="https://typo3.org" icon="typo3" /> Simon Praetorius: Daily Business with a Living Styleguide Resources/Private/Templates/MyTemplate.html integration
8. Real Values. tools/ fluid-styleguide Simon Praetorius: Daily Business with a Living Styleguide
9. Real Values. paper/pdf web Simon Praetorius: Daily Business with a Living Styleguide = = dead living
10. Real Values. Simon Praetorius: Daily Business with a Living Styleguide
11. Real Values. ! designers " developers testers $ project managers clients Simon Praetorius: Daily Business with a Living Styleguide audiences communication tool frontend workshop quality assurance documentation transparency applications
12. Real Values. workflow/ rapid-prototyping Simon Praetorius: Daily Business with a Living Styleguide
13. Real Values. Simon Praetorius: Daily Business with a Living Styleguide
14. Real Values. CORONA EDITION Simon Praetorius: Daily Business with a Living Styleguide
15. Real Values. workflow/ hot-potato-process Simon Praetorius: Daily Business with a Living Styleguide
16. Real Values. DESIGN IMPLEMENTATION Simon Praetorius: Daily Business with a Living Styleguide waterfall danmall.me/articles/hot-potato-process/ hot potato process
17. Real Values. workflow/ hand-over Simon Praetorius: Daily Business with a Living Styleguide
18. Real Values. Dear client, please review our design for your new feature in the living styleguide: example.com/fluid-styleguide/… Best regards, your project manager Simon Praetorius: Daily Business with a Living Styleguide
19. Real Values. workflow/ integration Simon Praetorius: Daily Business with a Living Styleguide
20. Real Values. Simon Praetorius: Daily Business with a Living Styleguide DEMO
21. Real Values. tools/ fluid-components-linter Simon Praetorius: Daily Business with a Living Styleguide
22. Real Values. Simon Praetorius: Daily Business with a Living Styleguide quality assurance
23. Real Values. <fc:component> <fc:param name="data" type="array" /> <fc:param name="item-text" type="string" /> <fc:param name="itemLink" type="string" /> <fc:param name="i" type="integer" optional="1" /> <fc:renderer> <f:format.html>{item-text}</f:format.html> </fc:renderer> </fc:component> Simon Praetorius: Daily Business with a Living Styleguide Components/Molecule/MyComponent/MyComponent.html generic parameter names fluid-components-linter
24. Real Values. <fc:component> <fc:param name="data" type="array" /> <fc:param name="item-text" type="string" /> <fc:param name="itemLink" type="string" /> <fc:param name="i" type="integer" optional="1" /> <fc:renderer> <f:format.html>{item-text}</f:format.html> </fc:renderer> </fc:component> Simon Praetorius: Daily Business with a Living Styleguide Components/Molecule/MyComponent/MyComponent.html consistent naming scheme fluid-components-linter
25. Real Values. <fc:component> <fc:param name="data" type="array" /> <fc:param name="item-text" type="string" /> <fc:param name="itemLink" type="string" /> <fc:param name="i" type="integer" optional="1" /> <fc:renderer> <f:format.html>{item-text}</f:format.html> </fc:renderer> </fc:component> Simon Praetorius: Daily Business with a Living Styleguide Components/Molecule/MyComponent/MyComponent.html use of data structures fluid-components-linter
26. Real Values. <fc:component> <fc:param name="data" type="array" /> <fc:param name="item-text" type="string" /> <fc:param name="itemLink" type="string" /> <fc:param name="i" type="integer" optional="1" /> <fc:renderer> <f:format.html>{item-text}</f:format.html> </fc:renderer> </fc:component> Simon Praetorius: Daily Business with a Living Styleguide Components/Molecule/MyComponent/MyComponent.html ViewHelpers that limit reusability fluid-components-linter
27. Real Values. more information: fluidcomponents.sitegeist.de sitegeist @sitegeist_de / github.com/sitegeist / sitegeist.de Simon Praetorius @s2bproject / @somethingphp / praetorius@sitegeist.de links Simon Praetorius: Daily Business with a Living Styleguide
28. Real Values. Thank you!