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!
2. DotAll2018
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 them!
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 / organisms
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.
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