$30 off During Our Annual Pro Sale. View Details »

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

Simon Praetorius

July 31, 2020
Tweet

More Decks by Simon Praetorius

Other Decks in Technology

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 / [email protected]
    links
    Simon Praetorius: Daily Business with a Living Styleguide

    View Slide

  28. Real Values.
    Thank you!

    View Slide