Update slides after CMS Philly

src/deploying-drupal-ansible-ansistrano/slides.md

@@ -1,5 +1,9 @@
-autoscale: true build-lists: true code: line-height(1.2) header-emphasis:
+autoscale: true
-#53B0EB text: alignment(left) theme: simple, 8
+build-lists: true
+code: line-height(1.2)
+header-emphasis: #53B0EB
+text: alignment(left)
+theme: simple, 8
 
 # [fit] **Deploying PHP applications** <br>using Ansible, Ansible Vault <br>and Ansistrano
 
@@ -9,10 +13,6 @@ tools are tool and language agnostic.
 
 ---
 
-# [fit] **Deploying ~~PHP~~ applications** <br>using Ansible, Ansible Vault <br>and Ansistrano
-
----
-
 ## **What we'll be looking at**
 
 - **Ansible** crash course
@@ -132,6 +132,10 @@ when needed (once)
 
 [webservers]
 192.168.33.10
+
+[webservers:vars]
+ansible_ssh_port=22
+
 ```
 
 ^ Supports wildcards and ranges.
@@ -141,9 +145,13 @@ when needed (once)
 ```yaml
 # hosts.yml
 
-webservers:
+all:
-  hosts:
+  children:
-    192.168.33.10:
+    webservers:
+      hosts:
+        192.168.33.10:
+      vars:
+        ansible_ssh_port: 22
 ```
 
 ---
@@ -466,6 +474,10 @@ mysql_users:
 
 ---
 
+# `ansible-playbook` <br>`-i hosts.yml` <br>`deploy.yml`<br>`--vault-password-file secret.txt`
+
+---
+
 # **Basic deployment**
 
 ---
@@ -506,7 +518,7 @@ tasks:
 
 ![full inline](images/ansistrano.png)
 
-^ Just another role, specifically for deployments Ansible port of Capistrano
+^ Just another role, specifically for deployments Ansible port of Capistrano (Ruby)
 
 ---
 
@@ -943,4 +955,10 @@ all:
 
 ---
 
+# **Demo**
+
+---
+
 # **Questions?**
+
+### oliverdavies.uk/dransible <br>@opdavies

src/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md

@@ -1,4 +1,5 @@
-autoscale: true theme: Plain Jane, 1
+autoscale: true
+theme: Plain Jane, 1
 
 # **Taking Flight with <br>Tailwind CSS**
 
@@ -70,7 +71,18 @@ easier to build visually consistent UIs.
 - Lists
 - z-index
 - Opacity
-- ...
+
+^ Some of the 'original' things that Tailwind would generate classes for.
+
+---
+
+- Screenreader visibility
+- Placeholder colour
+- first-child, last-child, nth-child
+- CSS Grid
+- Transition
+- Transform
+- Spacing / Divide
 
 ^ All generated from a single, customisable configuration file.
 
@@ -249,7 +261,9 @@ something else breaking.
 [.code-highlight: 2-7]
 
 ```css
-#src/css/style.css @tailwind base;
+/* src/css/app.pcss */
+
+@tailwind base;
 
 @tailwind components;
 
@@ -261,19 +275,19 @@ something else breaking.
 [.code-highlight: 5,9,13]
 
 ```
-# app.css
+/* src/css/app.pcss */
 
 @tailwind base;
 
-# Custom base styles
+/* Custom base styles go here */
 
 @tailwind components;
 
-# Custom components
+/* Custom components go here */
 
 @tailwind utilities;
 
-# Custom utilities
+/* Custom utilities go here */
 ```
 
 ---
@@ -284,7 +298,7 @@ something else breaking.
 
 ---
 
-# `npx tailwind build` <br>`src/css/app.css` <br>`-o dist/css/app.css`
+# `npx tailwind build` <br>`src/css/app.pcss` <br>`-o dist/css/app.css`
 
 ---
 
@@ -317,9 +331,17 @@ something else breaking.
 ---
 
 ```js
+// webpack.mix.js
+
 const mix = require('laravel-mix')
 
-mix.postCss('src/css/app.css', 'dist/css', [require('tailwindcss')()])
+mix.postCss(
+  'src/css/app.pcss',
+  'dist/css',
+  [
+    require('tailwindcss')()
+  ]
+)
 ```
 
 ^ PostCSS - useful if you're including other PostCSS plugins like PostCSS Nested
@@ -327,11 +349,14 @@ mix.postCss('src/css/app.css', 'dist/css', [require('tailwindcss')()])
 ---
 
 ```js
+// webpack.mix.js
+
 const mix = require('laravel-mix')
 
 require('laravel-mix-tailwind')
 
-mix.postCss('src/css/app.css', 'dist/css').tailwind()
+mix.postCss('src/css/app.pcss', 'dist/css')
+  .tailwind()
 ```
 
 ---
@@ -360,13 +385,13 @@ mix.postCss('src/css/app.css', 'dist/css').tailwind()
 
 # **Interaction states**
 
-## hover, focus, group-hover, focus-within
+## hover, focus, active, disabled, visited, <br>group-hover, focus-within, <br>first-child, last-child...
 
 ^ Start to differ from inline styles
 
 ---
 
-# `.[state][separator][class]`
+# `[state][separator][class]`
 
 ^ State = hover, focus, group focus, focus within Separator = configurable,
 colon by default Class = the same utility class that you would have used
@@ -374,15 +399,7 @@ normally
 
 ---
 
-# `.hover:text-red-500`
+# `hover:text-red-500`
-
----
-
-```html
-<a href="#" class="text-red-500 hover:text-red-800">
-  Read more
-</a>
-```
 
 ---
 
@@ -402,6 +419,14 @@ normally
 
 ---
 
+```html
+<a href="#" class="text-red-500 hover:text-red-800">
+  Read more
+</a>
+```
+
+---
+
 ```js
 // defaultConfig.stub.js
 
@@ -446,17 +471,7 @@ screens: {
 
 ---
 
-```html
+# `md:hover:bg-red-500`
-<div class="block md:flex">
-  <div class="w-full md:w-1/2">
-    Column 1
-  </div>
-
-  <div class="w-full md:w-1/2">
-    Column 2
-  </div>
-</div>
-```
 
 ---
 
@@ -480,6 +495,20 @@ screens: {
 
 ---
 
+```html
+<div class="block md:flex">
+  <div class="w-full md:w-1/2">
+    Column 1
+  </div>
+
+  <div class="w-full md:w-1/2">
+    Column 2
+  </div>
+</div>
+```
+
+---
+
 # **Keeping Things Small: <br>Controlling the File Size**
 
 ---
@@ -518,7 +547,7 @@ variants: {
 
 ---
 
-# Manually removing unused or unwanted classes
+# **Manually removing** unused or unwanted classes
 
 ---
 
@@ -580,7 +609,7 @@ colors: {
 
 ---
 
-# Automatically removing <br>unused classes
+# **Automatically removing** <br>unused classes
 
 ---
 
@@ -617,7 +646,29 @@ be coming from, no generated output directory
 
 ---
 
-# **Avoiding Repetition: <br>Extracting Components**
+# PurgeCSS is now **included by default** with Tailwind 1.4
+
+---
+
+[.code-highlight: 2-6]
+
+
+```js
+module.exports = {
+  purge: [
+    './src/**/*.html',
+    './src/**/*.vue',
+    './src/**/*.jsx',
+  ],
+  theme: {},
+  variants: {},
+  plugins: [],
+}
+```
+
+---
+
+# Avoid repetition by **extracting components**
 
 ---
 
@@ -852,28 +903,18 @@ module.exports = variants => ({addUtilities}) => {
 
 ---
 
-## **Resources**
+## **Useful links**
 
 - tailwindcss.com
-- tailwindcomponents.com
+- tailwindui.com
 - builtwithtailwind.com
-- github.com/aniftyco/awesome-tailwind
 - youtube.com/adamwathan
-- opdavi.es/tailwind-repos
+- drupal.org/project/tailwindcss
-- opdavi.es/tags/tailwind-css
+- oliverdavies.uk/tags/tailwind-css
+- oliverdavies.uk/tailwind-repos
 
 ---
 
 # **Questions?**
 
----
+### oliverdavies.uk/tailwind-talk <br>@opdavies
-
-# **Thanks!**
-
-# opdavi.es/talks/tailwind
-
-## _@opdavies_ <br>_oliverdavies.uk_
-
-^ Find this talk at opdavi.es/talks/tailwind Follow me on Twitter
-oliverdavies.uk where I blog about PHP, Drupal, Symfony, automated testing,
-Tailwind etc. Subscribe to the RSS feed