Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twig Super Power Roundup (Craft CMS 3)

Jason Mayo
November 01, 2018

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.

Jason Mayo

November 01, 2018

More Decks by Jason Mayo

Other Decks in Technology


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

  2. DotAll2018

  3. None
  4. None
  5. Commerce

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

    = Better conversion
  7. Performance

  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)
  9. https://speakerdeck.com/nystudio107/making-a-craft-cms-website-that-flies Eager loading Cache everything where possible to lower TTFB

  10. Languages

  11. INTL

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

    locale based formatting
  13. https://speakerdeck.com/drifteaur/multilingual-sites-in-craft-3 Translate & Replace Set a variable in a string

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

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

  16. Including Templates Pass an array of templates to the include,

    the rst one found will be output.
  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
  18. Design Process https://www.slideshare.net/CourtneyBradford/design-processes-and-systems-in-craft-116882979

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

  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.
  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.
  22. organisms Molecules give us some building blocks to work with,

    and we can now combine them together to form organisms.
  23. https://medium.muz.li/building-design-systems-with-atomic-design-93a13286f676

  24. Neo Dynamic Fields Matrix / Supertable

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

    correct folders
  26. Neo Group seperate elds (Atoms) together, in Matrix blocks to

    create molecules (Or, organisms)
  27. Output Molecules Loop through matrix and output selected molecules /

  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.
  29. None
  30. Include Utility Macro Output the utitlity via a macro so

    it can be reused through multiple molecules / atoms
  31. https://vimeo.com/294976443

  32. https://vimeo.com/295001383

  33. https://vimeo.com/craftcms

  34. Thanks @madebyshape @madebymayo