diff --git a/src/deploying-drupal-ansible-ansistrano/slides.md b/src/deploying-drupal-ansible-ansistrano/slides.md index e256545..f87cf2d 100644 --- a/src/deploying-drupal-ansible-ansistrano/slides.md +++ b/src/deploying-drupal-ansible-ansistrano/slides.md @@ -1,5 +1,9 @@ -autoscale: true build-lists: true code: line-height(1.2) header-emphasis: -#53B0EB text: alignment(left) theme: simple, 8 +autoscale: true +build-lists: true +code: line-height(1.2) +header-emphasis: #53B0EB +text: alignment(left) +theme: simple, 8 # [fit] **Deploying PHP applications**
using Ansible, Ansible Vault
and Ansistrano @@ -9,10 +13,6 @@ tools are tool and language agnostic. --- -# [fit] **Deploying ~~PHP~~ applications**
using Ansible, Ansible Vault
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: - hosts: - 192.168.33.10: +all: + children: + webservers: + hosts: + 192.168.33.10: + vars: + ansible_ssh_port: 22 ``` --- @@ -466,6 +474,10 @@ mysql_users: --- +# `ansible-playbook`
`-i hosts.yml`
`deploy.yml`
`--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
@opdavies \ No newline at end of file diff --git a/src/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md b/src/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md index be435a3..b37ce8e 100644 --- a/src/taking-flight-with-tailwind-css/taking-flight-tailwind-css.md +++ b/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
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`
`src/css/app.css`
`-o dist/css/app.css` +# `npx tailwind build`
`src/css/app.pcss`
`-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,
group-hover, focus-within,
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` - ---- - -```html - - Read more - -``` +# `hover:text-red-500` --- @@ -402,6 +419,14 @@ normally --- +```html + + Read more + +``` + +--- + ```js // defaultConfig.stub.js @@ -446,17 +471,7 @@ screens: { --- -```html -
-
- Column 1 -
- -
- Column 2 -
-
-``` +# `md:hover:bg-red-500` --- @@ -480,6 +495,20 @@ screens: { --- +```html +
+
+ Column 1 +
+ +
+ Column 2 +
+
+``` + +--- + # **Keeping Things Small:
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
unused classes +# **Automatically removing**
unused classes --- @@ -617,7 +646,29 @@ be coming from, no generated output directory --- -# **Avoiding Repetition:
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 -- opdavi.es/tags/tailwind-css +- drupal.org/project/tailwindcss +- oliverdavies.uk/tags/tailwind-css +- oliverdavies.uk/tailwind-repos --- # **Questions?** ---- - -# **Thanks!** - -# opdavi.es/talks/tailwind - -## _@opdavies_
_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 +### oliverdavies.uk/tailwind-talk
@opdavies