Frontend Workflow with Umbraco

A presentation on frontend tools and solutions for a specific Umbraco site.
Presented at Umbraco DK Meetup, November 10, 2015 in Aarhus, Denmark.

Transcript

1. Frontend Workflow with Umbraco Umbraco Meetup, Aarhus, november 2015
2. Chriztian Steinmeier @greystate Vokseværk
3. Tools
4. Tools » TextEditor: TextMate » Preprocessing: CodeKit » Live Preview: CodeKit » Graphics: Avocode » Device Stuff: Viewport Resizer Bookmarklet Responsive Design Mode (Safari) » Source Control: GitHub Desktop
5. TextMate » Snippets & Commands » Scope
6. CodeKit » Concatenates and compiles CoffeeScript, LESS & Kit files
7. Kit
8. Kit?
9. Kit??
10. Kit???
11. So, CodeKit » Concatenates and compiles CoffeeScript, LESS & Kit files » Has a built-in webserver with synced live preview » Also does image optimization
14. Responsive Design Mode
15. GRAND fromage
16. grand-fromage.dk
17. Features some rather large images with banners on them...
18. Nested Content Allow you to essentially attach documents of another Document Type as children, but neatly tucked away in a single property.
19. How to not have to account for the banner’s position when taking the image?
20. “Actually, R2 has been known to make mistakes... ...From time to time.” C-3PO
21. “nuPickers with Custom Labels are all kinds of awesome”
22. Custom Labels » Yes, it's very simple » But they make a whole lot of difference
23. “Can we have a look behind the scenes?”
24. PROJECT_FOLDER
26. Now, about those assets...
27. Only uncached files, please...
28. I'm so not fond of these: <link rel="stylesheet" href="/css/app.css?rnd=876237474764876237"> <script src="/scripts/9336de71-aa4b-47c8-ac8a-e80c7c02b3dc.min.js"></script> #logo { background-image: url(/images/logo.png); } #icon.tools.chainsaw { background-image: url(../../css/skins/leather.jpg); }
29. OTOH, I like ! this: <link rel="stylesheet" href="/assets/G0F2/app.css"> <script src="/assets/G0F2/libs.min.js"></script> #logo { background-image: url(logo.png); } #icon.tools.chainsaw { background-image: url(leather.jpg); }
30. SiteSettings.config <SiteSettings> <Deployment> <assetsFolder>G0F2</assetsFolder> </Deployment> </SiteSettings>
31. GitHub Desktop » Hides all the geeky stuff » Submit Pull-Request from within the app
32. Time for some ad lib?
33. Questions, questions? ?
34. Tak! !