Twig Super Power Roundup (Craft CMS 3)

Talk given at Craft CMS Manchester Meetup #12. Pulls together all the TWIG tips gained from DotAll2018 + some.

Transcript

1. Twig Super
   Power Roundup*
   @madebyshape
   @madebymayo
   *Twig’in hell!
   

   View Slide

2. DotAll2018
   

   View Slide

3. View Slide

4. View Slide

5. Commerce
   

   View Slide

6. https://speakerdeck.com/sjcallender/building-a-smarter-craft-commerce-website?slide=17
   Detect user account to make checkout smoother
   Less clicks = Better conversion
   

   View Slide

7. Performance
   

   View Slide

8. https://speakerdeck.com/mattweinberg/scaling-craft-cms-sites-for-large-launches?slide=11
   Cache aggressively!
   Cache everything where possible to lower TTFB (Debug bar FTW)
   

   View Slide

9. https://speakerdeck.com/nystudio107/making-a-craft-cms-website-that-flies
   Eager loading
   Cache everything where possible to lower TTFB
   

   View Slide

10. Languages
    

    View Slide

11. INTL
    

    View Slide

12. Provides Internationalisation support (INTL) which uses
    ICU library that enables locale based formatting
    

    View Slide

13. https://speakerdeck.com/drifteaur/multilingual-sites-in-craft-3
    Translate & Replace
    Set a variable in a string and translate via t() lter
    

    View Slide

14. https://speakerdeck.com/drifteaur/multilingual-sites-in-craft-3
    Number Formating
    Translate numbers via t() lter
    

    View Slide

15. Extras
    Had these in my notes... Not sure who mentioned them!
    

    View Slide

16. Including Templates
    Pass an array of templates to the include, the rst one found will be output.
    

    View Slide

17. Null-Coalescing Operator
    Returns the rst value if it is de ned and not null, otherwise second value
    Plugin (Better) version - https://github.com/nystudio107/craft-emptycoalesce
    

    View Slide

18. Design Process
    https://www.slideshare.net/CourtneyBradford/design-processes-and-systems-in-craft-116882979
    

    View Slide

19. atoms
    molecules
    organisms
    http://bradfrost.com/blog/post/atomic-web-design
    

    View Slide

20. atoms
    Atoms are the basic building blocks of matter. Applied to
    web interfaces, atoms are our HTML tags, such as a form
    label, an input or a button.
    

    View Slide

21. molecules
    Molecules are groups of atoms bonded together and are
    the smallest fundamental units of a compound.
    For example, a form label, input or button aren’t too
    useful by themselves, but combine them together as a
    form and now they can actually do something together.
    

    View Slide

22. organisms
    Molecules give us some building blocks to work with, and
    we can now combine them together to form organisms.
    

    View Slide

23. https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676
    

    View Slide

24. Neo Dynamic Fields Matrix / Supertable
    

    View Slide

25. Folder Structure
    Store all atoms and molecules seperatly in their correct folders
    

    View Slide

26. Neo
    Group seperate elds (Atoms) together, in Matrix blocks to create molecules (Or, organisms)
    

    View Slide

27. Output Molecules
    Loop through matrix and output
    selected molecules / organisms
    

    View Slide

28. Tailwind / Utility Class
    If using utility classes e.g.
    Tailwind, go a step further
    to make molecules more
    customisable using Colours,
    Transitions etc.
    Using Dynamic Fields.
    

    View Slide

29. View Slide

30. Include Utility Macro
    Output the utitlity via a macro so it can
    be reused through multiple molecules / atoms
    

    View Slide

31. https://vimeo.com/294976443
    

    View Slide

32. https://vimeo.com/295001383
    

    View Slide

33. https://vimeo.com/craftcms
    

    View Slide

34. Thanks
    @madebyshape
    @madebymayo
    

    View Slide