Daily Business with a Living Styleguide

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

D598a1abc4f74b2e50744397bd586658?s=128

Simon Praetorius

July 31, 2020
Tweet

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!