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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Real Values.
   tools/
   fluid-components
   Simon Praetorius: Daily Business with a Living Styleguide
   

   View Slide

5. Real Values.
   teaser component
   Simon Praetorius: Daily Business with a Living Styleguide
   ICON
   TITLE
   DESCRIPTION
   LINK
   THEME
   

   View Slide

6. Real Values.
   
   
   
   
   
   
   
   
   {title}
   {description}
   
   
   
   
   
   
   Simon Praetorius: Daily Business with a Living Styleguide
   Components/Molecule/Teaser/Teaser.html
   

   View Slide

7. Real Values.
   {namespace my=VENDOR\MyExtension\Components}
   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
   

   View Slide

8. Real Values.
   tools/
   fluid-styleguide
   Simon Praetorius: Daily Business with a Living Styleguide
   

   View Slide

9. Real Values.
   paper/pdf
   web
   Simon Praetorius: Daily Business with a Living Styleguide
   =
   =
   dead
   living
   

   View Slide

10. Real Values.
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

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
    

    View Slide

12. Real Values.
    workflow/
    rapid-prototyping
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

13. Real Values.
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

14. Real Values.
    CORONA
    EDITION
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

15. Real Values.
    workflow/
    hot-potato-process
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

16. Real Values.
    DESIGN IMPLEMENTATION
    Simon Praetorius: Daily Business with a Living Styleguide
    waterfall
    danmall.me/articles/hot-potato-process/
    hot potato process
    

    View Slide

17. Real Values.
    workflow/
    hand-over
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

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
    

    View Slide

19. Real Values.
    workflow/
    integration
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

20. Real Values.
    Simon Praetorius: Daily Business with a Living Styleguide
    DEMO
    

    View Slide

21. Real Values.
    tools/
    fluid-components-linter
    Simon Praetorius: Daily Business with a Living Styleguide
    

    View Slide

22. Real Values.
    Simon Praetorius: Daily Business with a Living Styleguide
    quality assurance
    

    View Slide

23. Real Values.
    
    
    
    
    
    
    {item-text}
    
    
    Simon Praetorius: Daily Business with a Living Styleguide
    Components/Molecule/MyComponent/MyComponent.html
    generic parameter names
    fluid-components-linter
    

    View Slide

24. Real Values.
    
    
    
    
    
    
    {item-text}
    
    
    Simon Praetorius: Daily Business with a Living Styleguide
    Components/Molecule/MyComponent/MyComponent.html
    consistent naming scheme
    fluid-components-linter
    

    View Slide

25. Real Values.
    
    
    
    
    
    
    {item-text}
    
    
    Simon Praetorius: Daily Business with a Living Styleguide
    Components/Molecule/MyComponent/MyComponent.html
    use of data structures
    fluid-components-linter
    

    View Slide

26. Real Values.
    
    
    
    
    
    
    {item-text}
    
    
    Simon Praetorius: Daily Business with a Living Styleguide
    Components/Molecule/MyComponent/MyComponent.html
    ViewHelpers that limit reusability
    fluid-components-linter
    

    View Slide

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
    

    View Slide

28. Real Values.
    Thank you!
    

    View Slide