A presentation at Umbraco Meetup (Aarhus) in in Aarhus, Denmark by Chriztian Steinmeier
Frontend Workflow with Umbraco Umbraco Meetup, Aarhus, november 2015
Chriztian Steinmeier @greystate Vokseværk
Tools
Tools » TextEditor: TextMate » Preprocessing: CodeKit » Live Preview: CodeKit » Graphics: Avocode » Device Stuff:
Viewport Resizer Bookmarklet
Responsive Design Mode (Safari) » Source Control: GitHub Desktop
TextMate » Snippets & Commands » Scope
CodeKit » Concatenates and compiles CoffeeScript, LESS & Kit files
Kit
Kit ?
Kit ??
Kit ???
So, CodeKit » Concatenates and compiles CoffeeScript, LESS & Kit files » Has a built-in webserver with synced live preview » Also does image optimization
Responsive Design Mode
GRAND fromage
grand-fromage.dk
Features some rather large images with banners
on them...
Nested Content Allow you to essentially attach documents of another Document Type as children, but neatly tucked away in a single property.
How to not have to account for the banner’s position when taking the image?
“Actually, R2 has been known to make mistakes... ...From time to time.” C-3PO
“nuPickers with
Custom Labels are all kinds of awesome ”
Custom Labels » Yes, it's very simple » But they make a whole lot of difference
“Can we have a look behind the scenes?”
PROJECT_FOLDER
Now, about those assets ...
Only uncached files, please...
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) ; }
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) ; }
SiteSettings.config <SiteSettings>
<Deployment> <assetsFolder> G0F2 </assetsFolder> </Deployment> </SiteSettings>GitHub Desktop » Hides all the geeky stuff » Submit Pull-Request from within the app
Time for some ad lib?
Questions, questions? ?
Tak! !
A presentation on frontend tools and solutions for a specific Umbraco site.
Here’s what was said about this presentation on social media.
for free. You
can too.