<commit_before><!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Making SilverStripe easier (and better) for yourself and your customers</title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css" id="theme">
		<link rel="stylesheet" href="css/custom.css">
		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">
		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="reveal">
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section data-background="/images/bg-bigfork.jpg">
					<h1><br />SilverStripe, Brochure Websites and You.</h1>
					<aside class="notes">
						<ul>
							<li>Colin / Bigfork / Digital Marketing Agency in Norwich</li>
							<li>I&rsquo;m going to talk about Brochure Websites</li>
						</ul>
					</aside>
				</section>
				<section data-background="/images/example-brochure-website.jpg">
					<aside class="notes">
						<ul>
							<li>We build a lot of these – talk through elements (logo, nav, carousel)</li>
							<li>Often building for other agencies so little to no design input, so working to whatever we're given</li>
							<li>Can't rely design around frameworks, grid systems or consistency, it's always bespoke</li>
							<li>Always have content management system requirements, so we have to make it work, make it easy to use and client-proof it as much as possible</li>
						</ul>
					</aside>
				</section>

				<section data-background="/images/bg-landscape.jpg">
					<blockquote>
						&ldquo;Bigfork are second-to-none at taking our InDesign files and recreating them in a content-managed website using Silverstripe.
						<br /><br />
						The CMS is very simple to use &ndash; allowing us and our clients to update websites quickly and easily.&rdquo;
					</blockquote>
					<aside class="notes">
						<ul>
							<li>SilverStripe is awesome for this because it gives complete freedom to accommodate whatever is thrown at us, and the CMS is really user friendly</li>
							<li>The better job we do here, the less ongoing support we have, so everyone's happy</li>

						</ul>
					</aside>
				</section>
				<section data-background="/images/bg-process.jpg">
					&nbsp;
					<aside class="notes">
						<ul>
							<li>This is about our ideas, processes and go-to approaches to make everything easier and better all round</li>
							<li>It's meant to be beginner friendly, so if anything isn't clear please ask me at the end</li>
						</ul>
					</aside>
				</section>

				<section data-background="/images/bg-landscape.jpg">
					<h1>Bootstrap</h1>
					<pre class="language-bash"><code>$ git clone https://github.com/feejin/Silverstripe-CleanInstall.git
$ cd my-project
composer install</code></pre>

				<aside class="notes">
					<ul>
						<li>This is how projects start - our own bootstrap. Modules, gulp, blank theme.</li>
						<li>It's an ever-shifting setup that we continually improve</li>
						<li>Streamlines setup by putting as much in place as possible without being overly opinionated</li>
						<li>It relies on some environmental stuff so don't copy it, but please do see if there's anything that might inspire you.</li>
					</ul>
				</aside>

				</section>


				<section data-background="/images/bg-landscape.jpg">
					<h1>Composer.json</h1>
					<pre class="language-json narrow"><code>{
    "require": {
        "silverstripe/cms": "~3.1.15",
        "silverstripe/framework": "~3.1.15",
        &hellip;
    },
    "autoload": { "psr-4": { "Bigfork\\": "util/Bigfork" } },
    "scripts": {
        "post-install-cmd": "Bigfork\\Installer\\Install::postInstall",
        "post-update-cmd": "Bigfork\\Installer\\Install::postUpdate"
    }
}</code></pre>

				<aside class="notes">
					<ul>
						<li>Tilde explanation</li>
						<li>As well as framework and CMS we're loading modules, talk about that next</li>
						<li>Autoload and scripts</li>
						<li>Config info for silverstripe database credentials, theme name and package.json setup</li>
						<li>Configuration through _ss_environment so never any issues with editing config files that need to live in the repo</li>
					</ul>
				</aside>

				</section>

				<section data-background="/images/bg-modules.jpg">
					<h1>Modules</h1>

					<aside class="notes">
						<ul>
							<li>So, modules are installed with bootstrap</li>
							<li>As a note, if you have a module on packagist, please use semver and tag releases!</li>
							<li>Prevents breaking changes and tagging commits makes it hard to refer to later</li>
							<li>I don't know what anyone in the SS community looks like so shout if I mention your module</li>
						</ul>
					</aside>

				</section>

				<section data-background-color="#ffffff">
					<h1 class="alt">Menu Manager</h1>
					<pre class="language-bash"><code class="alt">"heyday/silverstripe-menumanager"</code></pre>
					<pre class="language-bash fragment"><code class="alt"><% loop $MenuSet('SideBar').MenuItems %>
	<li><a href="$Link" class="$LinkingMode">$MenuTitle</a></li>
<% end_loop %></code></pre>

					<aside class="notes">
						<ul>
							<li>For managing menus, not usually main nav bar as site tree does a good job</li>
							<li>Edge cases - when pages don't have permissions you can still do it with Menu Manager</li>
						</ul>
					</aside>
				</section>

				<section data-background="/images/example-menumanager.jpg" data-transition="fade-out">
					<h1>Examples</h1>
					<ul>
						<li class="fragment fade-in">Auxiliary Links</li>
						<li class="fragment fade-in">Footer Links</li>
						<li class="fragment fade-in">Navigation Menu</li>
					</ul>

					<aside class="notes">
						<ul>
							<li>Auxiliary links, point to sites scattered throughout the site</li>
							<li>Why we started menu manager - footer links - reliable means of doing them without hardcoding or nonsensical CMS placement</li>
							<li>Bit about unbreakable nav bars - impossible with CMS</li>
						</ul>
					</aside>
				</section>

				<section data-background-color="#ffffff">
					<h1 class="alt">Responsive Images</h1>
					<pre class="language-bash"><code class="alt">"heyday/silverstripe-responsive-images"</code></pre>
					<aside class="notes">
						<ul>
							<li>Extends image and implements the picturefill polyfill</li>
							<li>Configure it with picturefill.yml</li>
						</ul>
					</aside>
				</section>

				<section data-background="/images/example-picturefill.jpg">
					<h1>Picturefill.yml</h1>
					<pre class="language-bash"><code>ResponsiveImageExtension:
sets:
GallerySet:
  method: CroppedImage
    sizes:
      - {query: "(min-width: 200px)", size: 480&zwnj;x&zwnj;240}<commit_msg>scale backgrounds in case of different res<commit_after><!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Making SilverStripe easier (and better) for yourself and your customers</title>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css" id="theme">
		<link rel="stylesheet" href="css/custom.css">
		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">
		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="reveal">
			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section data-background-size="100% 100%" data-background="/images/bg-bigfork.jpg">
					<h1><br />SilverStripe, Brochure Websites and You.</h1>
					<aside class="notes">
						<ul>
							<li>Colin / Bigfork / Digital Marketing Agency in Norwich</li>
							<li>I&rsquo;m going to talk about Brochure Websites</li>
						</ul>
					</aside>
				</section>
				<section data-background-size="100% 100%" data-background="/images/example-brochure-website.jpg">
					<aside class="notes">
						<ul>
							<li>We build a lot of these – talk through elements (logo, nav, carousel)</li>
							<li>Often building for other agencies so little to no design input, so working to whatever we're given</li>
							<li>Can't rely design around frameworks, grid systems or consistency, it's always bespoke</li>
							<li>Always have content management system requirements, so we have to make it work, make it easy to use and client-proof it as much as possible</li>
						</ul>
					</aside>
				</section>

				<section data-background-size="100% 100%" data-background="/images/bg-landscape.jpg">
					<blockquote>
						&ldquo;Bigfork are second-to-none at taking our InDesign files and recreating them in a content-managed website using Silverstripe.
						<br /><br />
						The CMS is very simple to use &ndash; allowing us and our clients to update websites quickly and easily.&rdquo;
					</blockquote>
					<aside class="notes">
						<ul>
							<li>SilverStripe is awesome for this because it gives complete freedom to accommodate whatever is thrown at us, and the CMS is really user friendly</li>
							<li>The better job we do here, the less ongoing support we have, so everyone's happy</li>

						</ul>
					</aside>
				</section>
				<section data-background-size="100% 100%" data-background="/images/bg-process.jpg">
					&nbsp;
					<aside class="notes">
						<ul>
							<li>This is about our ideas, processes and go-to approaches to make everything easier and better all round</li>
							<li>It's meant to be beginner friendly, so if anything isn't clear please ask me at the end</li>
						</ul>
					</aside>
				</section>

				<section data-background-size="100% 100%" data-background="/images/bg-landscape.jpg">
					<h1>Bootstrap</h1>
					<pre class="language-bash"><code>$ git clone https://github.com/feejin/Silverstripe-CleanInstall.git
$ cd my-project
composer install</code></pre>

				<aside class="notes">
					<ul>
						<li>This is how projects start - our own bootstrap. Modules, gulp, blank theme.</li>
						<li>It's an ever-shifting setup that we continually improve</li>
						<li>Streamlines setup by putting as much in place as possible without being overly opinionated</li>
						<li>It relies on some environmental stuff so don't copy it, but please do see if there's anything that might inspire you.</li>
					</ul>
				</aside>

				</section>


				<section data-background-size="100% 100%" data-background="/images/bg-landscape.jpg">
					<h1>Composer.json</h1>
					<pre class="language-json narrow"><code>{
    "require": {
        "silverstripe/cms": "~3.1.15",
        "silverstripe/framework": "~3.1.15",
        &hellip;
    },
    "autoload": { "psr-4": { "Bigfork\\": "util/Bigfork" } },
    "scripts": {
        "post-install-cmd": "Bigfork\\Installer\\Install::postInstall",
        "post-update-cmd": "Bigfork\\Installer\\Install::postUpdate"
    }
}</code></pre>

				<aside class="notes">
					<ul>
						<li>Tilde explanation</li>
						<li>As well as framework and CMS we're loading modules, talk about that next</li>
						<li>Autoload and scripts</li>
						<li>Config info for silverstripe database credentials, theme name and package.json setup</li>
						<li>Configuration through _ss_environment so never any issues with editing config files that need to live in the repo</li>
					</ul>
				</aside>

				</section>

				<section data-background-size="100% 100%" data-background="/images/bg-modules.jpg">
					<h1>Modules</h1>

					<aside class="notes">
						<ul>
							<li>So, modules are installed with bootstrap</li>
							<li>As a note, if you have a module on packagist, please use semver and tag releases!</li>
							<li>Prevents breaking changes and tagging commits makes it hard to refer to later</li>
							<li>I don't know what anyone in the SS community looks like so shout if I mention your module</li>
						</ul>
					</aside>

				</section>

				<section data-background-color="#ffffff">
					<h1 class="alt">Menu Manager</h1>
					<pre class="language-bash"><code class="alt">"heyday/silverstripe-menumanager"</code></pre>
					<pre class="language-bash fragment"><code class="alt"><% loop $MenuSet('SideBar').MenuItems %>
	<li><a href="$Link" class="$LinkingMode">$MenuTitle</a></li>
<% end_loop %></code></pre>

					<aside class="notes">
						<ul>
							<li>For managing menus, not usually main nav bar as site tree does a good job</li>
							<li>Edge cases - when pages don't have permissions you can still do it with Menu Manager</li>
						</ul>
					</aside>
				</section>

				<section data-background-size="100% 100%" data-background="/images/example-menumanager.jpg" data-transition="fade-out">
					<h1>Examples</h1>
					<ul>
						<li class="fragment fade-in">Auxiliary Links</li>
						<li class="fragment fade-in">Footer Links</li>
						<li class="fragment fade-in">Navigation Menu</li>
					</ul>

					<aside class="notes">
						<ul>
							<li>Auxiliary links, point to sites scattered throughout the site</li>
							<li>Why we started menu manager - footer links - reliable means of doing them without hardcoding or nonsensical CMS placement</li>
							<li>Bit about unbreakable nav bars - impossible with CMS</li>
						</ul>
					</aside>
				</section>

				<section data-background-color="#ffffff">
					<h1 class="alt">Responsive Images</h1>
					<pre class="language-bash"><code class="alt">"heyday/silverstripe-responsive-images"</code></pre>
					<aside class="notes">
						<ul>
							<li>Extends image and implements the picturefill polyfill</li>
							<li>Configure it with picturefill.yml</li>
						</ul>
					</aside>
				</section>

				<section data-background-size="100% 100%" data-background="/images/example-picturefill.jpg">
					<h1>Picturefill.yml</h1>
					<pre class="language-bash"><code>ResponsiveImageExtension:
sets:
GallerySet:
  method: CroppedImage
    sizes:
      - {query: "(min-width: 200px)", size: 480&zwnj;x&zwnj;240}
{'fraction_non_alphanumeric': 0.14487702222806786, 'fraction_numerical': 0.009075364987504933, 'mean_word_length': 3.204312966546862, 'pattern_counts': {'":': 18, '<': 411, '<?xml version=': 0, '>': 411, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2670686', 'n_tokens_mistral': 6046, 'n_tokens_neox': 4649, 'n_words': 1405}