Uncommitted changes
21
LICENSE
|
@ -1,21 +0,0 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2017 Oliver Davies
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
BIN
configure-all-the-things/2018-07-24-drupal-bristol/images/1.png
Normal file
After Width: | Height: | Size: 57 KiB |
55
configure-all-the-things/2018-07-24-drupal-bristol/slides.md
Normal file
|
@ -0,0 +1,55 @@
|
|||
theme: poster, 8
|
||||
autoscale: true
|
||||
build-lists: true
|
||||
header-emphasis: #53B0EB
|
||||
header: alignment(center)
|
||||
text: alignment(left)
|
||||
text-emphasis: #53B0EB
|
||||
code: Monaco, line-height(1.2)
|
||||
|
||||
[.hide-footer]
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Configure all the things!!
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Drupal 8
|
||||
### _Configuration management_
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.build-lists: false]
|
||||
[.header: #111111]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
- Web Developer & System Administrator
|
||||
- Senior Developer at Microserve
|
||||
- Part-time freelancer
|
||||
- Acquia certified Drupal 8 Grand Master
|
||||
- Drupal 7 & 8 core contributor
|
||||
- @opdavies
|
||||
- www.oliverdavies.uk
|
||||
|
||||
^ Work at Microserve.
|
||||
Maintain Drupal modules, PHP CLI tools and libraries
|
||||
Blog on my website
|
||||
|
||||
---
|
||||
|
||||
## What is configuration?
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Thanks!
|
||||
### _@opdavies_
|
||||
### _oliverdavies.uk_
|
BIN
deploying-drupal-ansible-ansistrano/images/ansible.png
Normal file
After Width: | Height: | Size: 145 KiB |
BIN
deploying-drupal-ansible-ansistrano/images/ansistrano-flow.png
Normal file
After Width: | Height: | Size: 44 KiB |
BIN
deploying-drupal-ansible-ansistrano/images/ansistrano.png
Normal file
After Width: | Height: | Size: 409 KiB |
BIN
deploying-drupal-ansible-ansistrano/images/composer.png
Normal file
After Width: | Height: | Size: 120 KiB |
BIN
deploying-drupal-ansible-ansistrano/images/druplicon.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
deploying-drupal-ansible-ansistrano/images/vagrant.png
Normal file
After Width: | Height: | Size: 292 KiB |
540
deploying-drupal-ansible-ansistrano/slides.md
Normal file
|
@ -0,0 +1,540 @@
|
|||
theme: poster, 8
|
||||
autoscale: true
|
||||
build-lists: true
|
||||
header-emphasis: #53B0EB
|
||||
header: alignment(left)
|
||||
text: alignment(left)
|
||||
text-emphasis: #53B0EB
|
||||
code: Monaco, line-height(1.2)
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
|
||||
# [fit] Deploying PHP applications
|
||||
# [fit] _With Ansible, Ansible Vault and Ansistrano_
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.build-lists: false]
|
||||
[.header: #111111]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
- Full Stack Web Developer & System Administrator
|
||||
- Senior Developer at Microserve
|
||||
- Part-time freelancer
|
||||
- Acquia certified Drupal 8 Grand Master
|
||||
- Drupal 7 & 8 core contributor
|
||||
- Symfony, Laravel, Sculpin
|
||||
- @opdavies
|
||||
- www.oliverdavies.uk
|
||||
|
||||
^ Work at Microserve.
|
||||
Maintain Drupal modules, PHP CLI tools and libraries
|
||||
Blog on my website
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.build-lists: false]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
- https://microserve.io
|
||||
- https://www.drupal.org/microserve
|
||||
- https://github.com/microserve-io
|
||||
- https://twitter.com/microserveltd
|
||||
- https://www.linkedin.com/company/microserve-ltd
|
||||
|
||||
---
|
||||
|
||||
[.header: #FFFFFF, line-height(0.7), League Gothic]
|
||||
|
||||
### _Things we'll be_
|
||||
# Looking at
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
|
||||
|
||||

|
||||

|
||||

|
||||

|
||||
|
||||
^ Ansible - software provisioning and deployment tool
|
||||
Vagrant - used for managing virtual machines. Used instead of a real server
|
||||
Drupal
|
||||
Composer - required by Drupal 8 to pull in dependencies (e.g. Symfony)
|
||||
|
||||
---
|
||||
|
||||
1. Ansible crash course
|
||||
1. Initial setup and provisioning
|
||||
1. Basic deployment setup
|
||||
1. Using Ansible Vault for variables
|
||||
1. Adding and configuring Ansistrano
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||
## When should I use this?
|
||||
|
||||
* Dedicated hosting: probably has this already
|
||||
* Shared hosting: probably not flexible enough
|
||||
* VPS or dedicated server
|
||||
|
||||
---
|
||||
|
||||
### _What is_
|
||||
# Ansible?
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111]
|
||||
[.footer: https://en.wikipedia.org/wiki/Ansible_(software)]
|
||||
|
||||
Ansible is _open source software_<br>that automates _software provisioning_, <br>_configuration management_, <br>and _application deployment_.
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
# What is Ansible?
|
||||
|
||||
* YAML
|
||||
* Batteries included
|
||||
* Executes remote commands
|
||||
* Installs software packages
|
||||
* Performs deployment steps
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
# What is Ansible?
|
||||
|
||||
* Hosts
|
||||
* Commands
|
||||
* Playbooks
|
||||
* Tasks
|
||||
* Roles
|
||||
|
||||
---
|
||||
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
# Why Ansible?
|
||||
|
||||
* Familiar syntax
|
||||
* Easily readable
|
||||
* No server dependencies
|
||||
* Easy to add to an existing project
|
||||
* Includes relevant modules (e.g. Composer)
|
||||
|
||||
---
|
||||
|
||||
### _Ansible_
|
||||
# Hosts
|
||||
|
||||
---
|
||||
|
||||
```ini
|
||||
# hosts.ini
|
||||
|
||||
[dransible]
|
||||
192.168.33.10
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### _Ansible_
|
||||
# Commands
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
ansible all -m ping
|
||||
|
||||
ansible all -m command -a 'git pull --chdir=/var/www/app'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### _Ansible_
|
||||
# [fit] Tasks and Playbooks
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# playbook.yml
|
||||
|
||||
---
|
||||
- hosts: all
|
||||
|
||||
tasks:
|
||||
- name: Update the code
|
||||
command: git pull
|
||||
args:
|
||||
chdir: /var/www/app
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
ansible-playbook playbook.yml -i hosts.ini
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### _Ansible_
|
||||
# Roles
|
||||
|
||||
^ Collections of tasks, variables and handlers
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# requirements.yml
|
||||
|
||||
---
|
||||
- src: geerlingguy.apache
|
||||
- src: geerlingguy.composer
|
||||
- src: geerlingguy.mysql
|
||||
- src: geerlingguy.php
|
||||
- src: geerlingguy.php-mysql
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
ansible-galaxy -r ansible/requirements.yml install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# playbook.yml
|
||||
|
||||
---
|
||||
- hosts: all
|
||||
|
||||
roles:
|
||||
- geerlingguy.apache
|
||||
- geerlingguy.mysql
|
||||
- geerlingguy.php
|
||||
- geerlingguy.php-mysql
|
||||
- geerlingguy.composer
|
||||
```
|
||||
|
||||
^ Role order matters!
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
## Let's take a look <br>at the code
|
||||
|
||||
---
|
||||
|
||||
### _Basic deployment_
|
||||
# Ansible
|
||||
|
||||
^ Any questions on Ansible so far?
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/provision.yml
|
||||
|
||||
tasks:
|
||||
- name: Create a database
|
||||
mysql_db:
|
||||
name: mydatabase
|
||||
state: present
|
||||
|
||||
- name: Add the database user
|
||||
mysql_user:
|
||||
name: drupal
|
||||
password: secret
|
||||
priv: '*.*:ALL'
|
||||
state: present
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy.yml
|
||||
|
||||
tasks:
|
||||
- name: Creating project directory
|
||||
file:
|
||||
path: /var/www/app
|
||||
state: directory
|
||||
|
||||
- name: Uploading application
|
||||
synchronize:
|
||||
src: "{{ playbook_dir }}/../"
|
||||
dest: /var/www/app
|
||||
|
||||
- name: Installing Composer dependencies
|
||||
composer:
|
||||
command: install
|
||||
working_dir: /var/www/app
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||
# Disadvantages
|
||||
|
||||
* Single point of failure
|
||||
* No ability to roll back
|
||||
* Sensitive data stored in plain text
|
||||
|
||||
---
|
||||
|
||||
### _Keeping secrets_
|
||||
# Ansible Vault
|
||||
|
||||
---
|
||||
|
||||
```bash
|
||||
ansible-vault create ansible/vault.yml
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
$ANSIBLE_VAULT;1.1;AES256
|
||||
36656233323539616336393838396137343939623233393338666530313730373233663263633065
|
||||
3133633335316364306366333539613936376239383133330a356365666232623537333730663638
|
||||
37393264616134613163663762666464373733663737383039316163336263323538393533323266
|
||||
3432346662613438330a386435393432323761386137333736363436386466643031386662353933
|
||||
30393631386463313265653862633866663530626439623063393934653235666530656462643135
|
||||
39366431353762383434663536663761323565616564336131666339653038326333306433326264
|
||||
31623539643166626234663736656337633036323837333137343533386165366531626462643662
|
||||
66626631663930626266653937323634366231326537626131663662396335393361336635373736
|
||||
3435
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/vars/vault.yml
|
||||
|
||||
---
|
||||
vault_app_db_name: mydatabase
|
||||
vault_app_db_user: drupal
|
||||
vault_app_db_password: secret
|
||||
```
|
||||
|
||||
^ Optional, but easier to see where variables are set
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/vars/vars.yml
|
||||
|
||||
---
|
||||
app_db_name: "{{ vault_app_db_name }}"
|
||||
app_db_user: "{{ vault_app_db_user }}"
|
||||
app_db_password: "{{ vault_app_db_password }}"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/provision.yml
|
||||
|
||||
tasks:
|
||||
- name: Create a database
|
||||
mysql_db:
|
||||
name: '{{ app_db_name }}'
|
||||
state: present
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```bash
|
||||
ansible-vault edit ansible/vault.yml
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### _Better deployments_
|
||||
# Ansistrano
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Just another role, specifically for deployments
|
||||
Ansible port of Capistrano
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(center)]
|
||||
|
||||
Capistrano is an open-source tool for running scripts on multiple servers; its main use is deploying web applications. <br><br><br>It automates the process of making a new version of an application available on one or more web servers, including supporting tasks such as changing databases.
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||
# Features
|
||||
|
||||
* Multiple release directories
|
||||
* Shared paths and files
|
||||
* Customisable
|
||||
* Multiple deployment strategies
|
||||
* Multi-stage environments
|
||||
* Prune old releases
|
||||
* Rollbacks
|
||||
|
||||
^ rsync, Git, SVN etc
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/requirements.yml
|
||||
|
||||
---
|
||||
...
|
||||
- ansistrano.deploy
|
||||
- ansistrano.rollback
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy.yml
|
||||
|
||||
---
|
||||
- hosts: all
|
||||
|
||||
roles:
|
||||
- ansistrano.deploy
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy.yml
|
||||
|
||||
---
|
||||
...
|
||||
vars:
|
||||
ansistrano_deploy_to: /var/www
|
||||
ansistrano_deploy_via: git
|
||||
ansistrano_git_branch: master
|
||||
ansistrano_git_repo: 'git@github.com:foo/bar.git'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/rollback.yml
|
||||
|
||||
---
|
||||
- hosts: all
|
||||
|
||||
roles:
|
||||
- ansistrano.rollback
|
||||
|
||||
vars:
|
||||
ansistrano_deploy_to: /var/www
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### _Customising Ansistrano_
|
||||
# Build Hooks
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy.yml
|
||||
|
||||
vars:
|
||||
...
|
||||
ansistrano_after_symlink_shared_tasks_file: "{{ playbook_dir }}/deploy/after-symlink-shared.yml"
|
||||
ansistrano_after_symlink_tasks_file: "{{ playbook_dir }}/deploy/after-symlink.yml"
|
||||
ansistrano_after_update_code_tasks_file: "{{ playbook_dir }}/deploy/after-update-code.yml"
|
||||
|
||||
release_web_path: "{{ ansistrano_release_path.stdout }}/web"
|
||||
release_drush_path: "{{ ansistrano_release_path.stdout }}/vendor/bin/drush"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy/after-symlink-shared.yml
|
||||
|
||||
---
|
||||
- name: Run database updates
|
||||
command: '{{ release_drush_path }} --root {{ release_web_path }} updatedb'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy/after-update-code.yml
|
||||
|
||||
---
|
||||
- name: Install Composer dependencies
|
||||
composer:
|
||||
command: install
|
||||
working_dir: '{{ ansistrano_release_path.stdout }}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```yaml
|
||||
# ansible/deploy/after-symlink.yml
|
||||
|
||||
---
|
||||
- name: Clear Drupal cache
|
||||
command: '{{ release_drush_path }} --root {{ release_web_path }} cache-rebuild'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Questions?
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Thanks
|
||||
### _@opdavies_
|
||||
### _oliverdavies.uk_
|
|
@ -1,13 +0,0 @@
|
|||
# Deploying Drupal (and anything else) with Fabric
|
||||
|
||||
You’ve built your website, and now you just need to deploy it. There are various ways that this could be done - from (S)FTP, to SCP and rsync, to running commands like “git pull” and “composer install” directly on the server (not recommended).
|
||||
|
||||
My favourite deployment tool of late is [Fabric][0] - a Python based command line tool for running commands locally as well as on remote servers. It’s language and framework agnostic, and unopinionated so you define the steps and workflow that you need - from a basic few-step deployment to a full Capistrano style zero-downtime deployment.
|
||||
|
||||
This talk will cover some introduction to Fabric and how to write your own fabfiles, to then covering some examples and demos of different use case deployments for your Drupal project.
|
||||
|
||||
**Note:**
|
||||
|
||||
I’ve also given a "Deploying PHP applications" version of this talk with more generic examples.
|
||||
|
||||
[0]: http://www.fabfile.org
|
|
@ -1,7 +0,0 @@
|
|||
# Deploying PHP applications (and anything else) with Fabric
|
||||
|
||||
You’ve built your website, and now you just need to deploy it. There are various ways that this could be done - from (S)FTP, to SCP and rsync, to running commands like git pull and composer install directly on the server which is not ideal.
|
||||
|
||||
My favourite deployment tool of late is Fabric - a Python based command line tool for running commands locally as well as on remote servers. It’s language and framework agnostic, and flexible so you define the steps and workflow that you need - from a basic few-step deployment to a full Capistrano style zero-downtime deployment.
|
||||
|
||||
This talk will cover some introduction to Fabric and how to write your own fabfiles, to then covering some examples and demos of different use case deployments for your application.
|
BIN
drupal-dev-days-recap/images/IMG_5278.jpg
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
drupal-dev-days-recap/images/autowiring-tweet.png
Normal file
After Width: | Height: | Size: 135 KiB |
BIN
drupal-dev-days-recap/images/block-aria-roles-2.png
Normal file
After Width: | Height: | Size: 118 KiB |
BIN
drupal-dev-days-recap/images/block-aria-roles.png
Normal file
After Width: | Height: | Size: 180 KiB |
BIN
drupal-dev-days-recap/images/dev-days-website.png
Normal file
After Width: | Height: | Size: 3.4 MiB |
BIN
drupal-dev-days-recap/images/dev-days-youtube.png
Normal file
After Width: | Height: | Size: 2 MiB |
BIN
drupal-dev-days-recap/images/gabor-keynote.png
Normal file
After Width: | Height: | Size: 1.2 MiB |
BIN
drupal-dev-days-recap/images/lisbon-map.png
Normal file
After Width: | Height: | Size: 1.7 MiB |
BIN
drupal-dev-days-recap/images/membership-renewal.png
Normal file
After Width: | Height: | Size: 360 KiB |
BIN
drupal-dev-days-recap/images/membership-tweet.png
Normal file
After Width: | Height: | Size: 297 KiB |
BIN
drupal-dev-days-recap/images/rachel-keynote-2.png
Normal file
After Width: | Height: | Size: 1.4 MiB |
BIN
drupal-dev-days-recap/images/rachel-keynote.png
Normal file
After Width: | Height: | Size: 1.1 MiB |
BIN
drupal-dev-days-recap/images/rslootjes-slide.png
Normal file
After Width: | Height: | Size: 741 KiB |
BIN
drupal-dev-days-recap/images/security-slide.png
Normal file
After Width: | Height: | Size: 614 KiB |
BIN
drupal-dev-days-recap/images/talk-feedback.png
Normal file
After Width: | Height: | Size: 382 KiB |
101
drupal-dev-days-recap/slides.md
Normal file
|
@ -0,0 +1,101 @@
|
|||
theme: plain jane
|
||||
|
||||
# **Drupal Developer Days <br>2018 Recap**
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ 400 people
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ sprints
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Yay, commit credits!
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Composer, JS in core, admin UI, API first
|
||||
Signs on tables, online meetings and Slack channels
|
||||
Find the right people
|
||||
Get involved with something that interests you rather than searching for random issues
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Symfony Framework style API building in Drupal
|
||||
symfony guy
|
||||
things i've done in symfony that I didn't know you could do in D8
|
||||
great to see cross-community knowledge sharing
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Jess (xjm) - D8 release manager
|
||||
Responsible disclosure, cross-project collaboration, and Drupal 8 security
|
||||
Don't include dev dependencies in prod code!
|
||||
ODL was doing this!
|
||||
immediate ROI
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Great to chat about the DA with Rachel
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Membership drive
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
^ Videos are now online
|
|
@ -1,5 +0,0 @@
|
|||
# Drupal: Re-joining the PHP Herd
|
||||
|
||||
Drupal 8 was (finally) released on November 19th 2015, after almost 4 years of work and code commits by over 3,200 different contributors. Whilst it’s pretty much the same as the Drupal that we know and, hopefully, love, a lot has changed behind the scenes and under the hood!
|
||||
|
||||
In this talk, I'll highlight some of the new features and improvements in Drupal 8, and discuss some of the benefits to Drupal site builders, themers, and module developers. I'll also talk about some of the non-technical changes and the cultural shift from "not invented here" to "proudly found elsewhere", and how we are rejoining the PHP herd.
|
1844
drupal-testing-workshop/2018-06-28-drupal-bristol/slides.md
Normal file
BIN
drupal-testing-workshop/2018-06-28-drupal-bristol/slides.pdf
Normal file
After Width: | Height: | Size: 413 KiB |
After Width: | Height: | Size: 523 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 68 KiB |
After Width: | Height: | Size: 75 KiB |
1368
drupal-testing-workshop/2018-09-19-microserve/slides.md
Normal file
BIN
drupal-testing-workshop/images/2c6qi8.jpg
Normal file
After Width: | Height: | Size: 67 KiB |
BIN
drupal-testing-workshop/images/appnovation.png
Normal file
After Width: | Height: | Size: 7.9 KiB |
BIN
drupal-testing-workshop/images/broadbean.png
Normal file
After Width: | Height: | Size: 93 KiB |
BIN
drupal-testing-workshop/images/collection-class-1.png
Normal file
After Width: | Height: | Size: 142 KiB |
BIN
drupal-testing-workshop/images/collection-class-2.png
Normal file
After Width: | Height: | Size: 382 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-1.png
Normal file
After Width: | Height: | Size: 381 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-2.png
Normal file
After Width: | Height: | Size: 398 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-3.png
Normal file
After Width: | Height: | Size: 338 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-4.png
Normal file
After Width: | Height: | Size: 370 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-5.png
Normal file
After Width: | Height: | Size: 430 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-6.png
Normal file
After Width: | Height: | Size: 433 KiB |
BIN
drupal-testing-workshop/images/d8-simpletest-7.png
Normal file
After Width: | Height: | Size: 663 KiB |
BIN
drupal-testing-workshop/images/dcbristol.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
drupal-testing-workshop/images/deploy-all-the-things.jpg
Normal file
After Width: | Height: | Size: 42 KiB |
BIN
drupal-testing-workshop/images/files.png
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
drupal-testing-workshop/images/homer-smart.png
Normal file
After Width: | Height: | Size: 554 KiB |
BIN
drupal-testing-workshop/images/kernel-tests.png
Normal file
After Width: | Height: | Size: 211 KiB |
BIN
drupal-testing-workshop/images/matt-stauffer-tweet.png
Normal file
After Width: | Height: | Size: 48 KiB |
BIN
drupal-testing-workshop/images/me.jpg
Normal file
After Width: | Height: | Size: 25 KiB |
BIN
drupal-testing-workshop/images/phpstorm-integration.png
Normal file
After Width: | Height: | Size: 660 KiB |
BIN
drupal-testing-workshop/images/phpunit.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
drupal-testing-workshop/images/simpletest-1.png
Normal file
After Width: | Height: | Size: 174 KiB |
BIN
drupal-testing-workshop/images/simpletest-2.png
Normal file
After Width: | Height: | Size: 195 KiB |
BIN
drupal-testing-workshop/images/simpletest-3.png
Normal file
After Width: | Height: | Size: 197 KiB |
BIN
drupal-testing-workshop/images/simpletest-4.png
Normal file
After Width: | Height: | Size: 459 KiB |
BIN
drupal-testing-workshop/images/simpletest.png
Normal file
After Width: | Height: | Size: 6.7 KiB |
BIN
drupal-testing-workshop/images/tdd-circle-of-life.png
Normal file
After Width: | Height: | Size: 19 KiB |
BIN
drupal-testing-workshop/images/tdd-loop.png
Normal file
After Width: | Height: | Size: 41 KiB |
BIN
drupal-testing-workshop/images/timmillwood-ono.png
Normal file
After Width: | Height: | Size: 102 KiB |
BIN
drupal-testing-workshop/images/title.png
Normal file
After Width: | Height: | Size: 129 KiB |
BIN
drupal-testing-workshop/images/toggle-optional-fields-1.png
Normal file
After Width: | Height: | Size: 232 KiB |
BIN
drupal-testing-workshop/images/toggle-optional-fields-2.png
Normal file
After Width: | Height: | Size: 332 KiB |
BIN
drupal-testing-workshop/images/toggle-optional-fields-3.png
Normal file
After Width: | Height: | Size: 417 KiB |
BIN
drupal-testing-workshop/images/toggle-optional-fields-button.png
Normal file
After Width: | Height: | Size: 28 KiB |
BIN
drupal-testing-workshop/images/when-you-do-things-right.jpg
Normal file
After Width: | Height: | Size: 47 KiB |
|
@ -1,13 +0,0 @@
|
|||
# Drupal VM, meet Symfony Console
|
||||
|
||||
The [Drupal VM CLI][0] is a command line application, built on Symfony Console and other components, that generates configuration files for Drupal VM based on personal settings and user interaction.
|
||||
|
||||
After an introduction to Drupal VM itself and the Drupal VM CLI, we’ll jump into the code and see how Symfony Console applications are structured, how to write new commands, and how to integrate additional libraries like Guzzle, Twig and other Symfony components - whilst referencing code from the Drupal VM CLI project.
|
||||
|
||||
_TL;DR - Come and learn about Symfony Console, with examples from a real project._
|
||||
|
||||
**Notes:**
|
||||
|
||||
The Drupal VM CLI project is on GitHub at <https://github.com/opdavies/drupal-vm-cli>. I’ve given a couple of short talks about the project at user groups, though this will be more technical and more focussed on Console than previous versions of the talk.
|
||||
|
||||
[0]: https://github.com/opdavies/drupal-vm-cli
|
|
@ -1,7 +0,0 @@
|
|||
# Getting (Your Data) into Drupal 8
|
||||
|
||||
If you’ve moved a site from Drupal 6 to 7, the chances are that you’ve either used the upgrade path to update your old site in-place, or you built a new site from scratch and used the Migrate module from contrib to migrate your data from the old database.
|
||||
|
||||
In Drupal 8, things have changed as there’s no upgrade path from Drupal 7 and the Migrate module has been moved into core, though there are still migration related modules available in contrib.
|
||||
|
||||
This talk will look at the core Migrate module and how it implements Drupal 8 features such as YAML and the plugin and configuration systems, and how to write your own migrations to get your data into Drupal 8.
|
|
@ -1,3 +0,0 @@
|
|||
# Git Tips and Tricks to Make Your Life Easier
|
||||
|
||||
I've been using Git since 2010, for business, personal and open source projects, and in this talk, I'll share some my experiences working with Git and some of the tips and tricks that I use every day to make my life easier.
|
|
@ -1,11 +0,0 @@
|
|||
# Goodbye Drush Make. Hello Composer!
|
||||
|
||||
_Alternative title: Building Drupal websites with Composer_
|
||||
|
||||
One of the main outcomes of Drupal 8 was “getting off the island” with third-party code included in core and adopting modern best practices from the wider PHP ecosystem - including [Composer][0], PHP’s dependency manager.
|
||||
|
||||
Included to manage core’s dependencies, it has also gained traction in the contrib space with the creation of the Drupal Composer project, and the Drupal Packagist and now native endpoints on Drupal.org exposing contrib project metadata.
|
||||
|
||||
In this session, we’ll learn how to fully manage a Drupal 7 or Drupal 8 website including contributed modules and themes and external libraries with Composer.
|
||||
|
||||
[0]: https://getcomposer.org
|
160
history.yml
|
@ -1,160 +0,0 @@
|
|||
---
|
||||
- date: 05-09-2013
|
||||
event: Unified Diff
|
||||
location: Cardiff, UK
|
||||
talk: So, what is this Drupal thing?
|
||||
|
||||
- date: 01-03-2014
|
||||
event: DrupalCamp London
|
||||
location: London, UK
|
||||
talk: An introduction to Git Flow
|
||||
|
||||
- date: 19-08-2014
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: drush make drupalbristol
|
||||
|
||||
- date: 18-01-2015
|
||||
event: DrupalCamp Brighton
|
||||
location: Brighton, UK
|
||||
talk: "Drupal.org in 2015: What's Coming Next"
|
||||
|
||||
- date: 28-02-2015
|
||||
event: DrupalCamp London
|
||||
location: London, UK
|
||||
talk: "Drupal.org in 2015: What's Coming Next"
|
||||
|
||||
- date: 08-04-2015
|
||||
event: PHPSW
|
||||
location: Bristol, UK
|
||||
talk: Drupal 8 (lightning talk)
|
||||
|
||||
- date: 25-07-2015
|
||||
event: DrupalCamp North
|
||||
location: Sunderland, UK
|
||||
talk: Test Drive Twig with Sculpin
|
||||
|
||||
- date: 25-08-2015
|
||||
event: umBristol
|
||||
location: Bristol, UK
|
||||
talk: Dancing for Drupal
|
||||
|
||||
- date: 14-10-2015
|
||||
event: PHPSW
|
||||
location: Bristol, UK
|
||||
talk: Building static websites with Sculpin
|
||||
|
||||
- date: 05-03-2016
|
||||
event: DrupalCamp London
|
||||
location: London, UK
|
||||
talk: Getting Started with Drupal 8 Module Development
|
||||
|
||||
- date: 08-03-2016
|
||||
event: NWDUG
|
||||
location: Manchester, UK
|
||||
talk: Drupal VM Generator (lightning talk)
|
||||
|
||||
- date: 02-04-2016
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: Drupal VM Generator
|
||||
|
||||
- date: 11-06-2016
|
||||
event: PHP South Coast
|
||||
location: Portsmouth, UK
|
||||
talk: 'Drupal 8: Rejoining the Herd'
|
||||
|
||||
- date: 23-07-2016
|
||||
event: DrupalCamp Bristol
|
||||
location: Bristol, UK
|
||||
talk: Drupal VM, Meet Symfony Console
|
||||
|
||||
- date: 09-11-2016
|
||||
event: PHPSW
|
||||
location: Bristol, UK
|
||||
talk: Modern Drupal Development with Composer (lightning talk)
|
||||
|
||||
- date: 17-11-2016
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: Goodbye Drush Make. Hello Composer!
|
||||
|
||||
- date: 18-01-2017
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: Getting (Your Data) Into Drupal 8
|
||||
|
||||
- date: 08-02-2017
|
||||
event: PHPSW
|
||||
location: Bristol, UK
|
||||
talk: It All Started With A Patch
|
||||
|
||||
- date: 04-03-2017
|
||||
event: DrupalCamp London
|
||||
location: London, UK
|
||||
talk: TDD - Test Driven Drupal
|
||||
|
||||
- date: 04-03-2017
|
||||
event: DrupalCamp London
|
||||
location: London, UK
|
||||
talk: Getting (Your Data) Into Drupal 8
|
||||
|
||||
- date: 20-04-2017
|
||||
event: Nomad PHP
|
||||
location: Online
|
||||
talk: Deploying PHP Applications with Fabric (lightning talk)
|
||||
|
||||
- date: 13-09-2017
|
||||
event: PHPSW
|
||||
location: Bristol, UK
|
||||
talk: Deploying PHP Applications with Fabric
|
||||
|
||||
- date: 01-10-2017
|
||||
event: PHP North West
|
||||
location: Manchester, UK
|
||||
talk: Deploying PHP Applications with Fabric
|
||||
|
||||
- date: 20-10-2017
|
||||
event: DrupalCamp Dublin
|
||||
location: Dublin, Ireland
|
||||
talk: Deploying Drupal with Fabric
|
||||
|
||||
- date: 21-10-2017
|
||||
event: DrupalCamp Dublin
|
||||
location: Dublin, Ireland
|
||||
talk: TDD - Test Driven Drupal
|
||||
|
||||
- date: 26-10-2017
|
||||
event: Drupal Somerset
|
||||
location: Glastonbury, UK
|
||||
talk: Deploying Drupal with Fabric
|
||||
|
||||
- date: 22-11-2017
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: TDD - Test Driven Drupal
|
||||
|
||||
- date: 21-12-2017
|
||||
event: Nomad PHP
|
||||
location: Online
|
||||
talk: Using Laravel Collections, outside Laravel (lightning talk)
|
||||
|
||||
- date: 17-01-2018
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: Taking Flight with Tailwind CSS
|
||||
|
||||
- date: 16-02-2018
|
||||
event: PHP UK conference
|
||||
location: London, UK
|
||||
talk: Goodbye Drush Make. Hello Composer!
|
||||
|
||||
- date: 18-04-2018
|
||||
event: Drupal Bristol
|
||||
location: Bristol, UK
|
||||
talk: Having Fun with Drupal 8, PHP libraries and the Drupal.org API
|
||||
|
||||
- date: 14-06-2018
|
||||
event: Drupal Somerset
|
||||
location: Glastonbury, UK
|
||||
talk: TDD - Test Driven Drupal
|
5
ideas.md
|
@ -1,5 +0,0 @@
|
|||
# Talk Ideas
|
||||
|
||||
- Webpack Encore - _using Webpack Encore to generate assets in your PHP/Symfony app or Drupal website._
|
||||
- Drupal 8 for PHP Developers - _a comparison of Drupal 8 to Symfony and Laravel._
|
||||
- Architecting and writing Drupal modules for sanity and reusability.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
Before Width: | Height: | Size: 177 KiB After Width: | Height: | Size: 177 KiB |
BIN
images/me-precedent.jpg
Normal file
After Width: | Height: | Size: 25 KiB |
BIN
images/microserve-light.png
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
me-precedent.jpg
Before Width: | Height: | Size: 34 KiB |
|
@ -1,28 +0,0 @@
|
|||
# Speaker Info
|
||||
|
||||
## Bio
|
||||
|
||||
[Oliver Davies][1] ([@opdavies][2]) has been building websites and web applications since 2007 - primarily with Drupal, though also uses Symfony, Silex, Laravel and Sculpin. He is a Senior Developer at [Microserve][3], a Drupal core contributor and mentor, and an open source and contribution advocate.
|
||||
|
||||
He regularly blogs and gives talks about web development and systems administration, maintains and contributes to various open source projects, and co-organises DrupalCamp Bristol as well as the Drupal Bristol and PHPSW user groups.
|
||||
|
||||
## Photos
|
||||
|
||||
- <https://www.dropbox.com/s/7ytm2buoezwtbdp/phpnw17-1%20copy%202.jpg>
|
||||
- <https://www.dropbox.com/s/say1muiqedik0l4/0188395_thumb.jpg>
|
||||
|
||||
## Events I’ve Spoken At
|
||||
|
||||
- DrupalCamp Brighton 2015
|
||||
- DrupalCamp Bristol 2016
|
||||
- DrupalCamp Dublin 2017
|
||||
- DrupalCamp London (2014, 2015, 2016, 2017)
|
||||
- DrupalCamp North 2015
|
||||
- Nomad PHP
|
||||
- PHP North West 2017 (10 year anniversary)
|
||||
- PHP South Coast 2016
|
||||
- PHP UK 2018
|
||||
|
||||
[1]: https://www.oliverdavies.uk
|
||||
[2]: https://twitter.com/opdavies
|
||||
[3]: https://microserve.io
|
|
@ -1,7 +0,0 @@
|
|||
# Building Static Websites with Sculpin
|
||||
|
||||
Sculpin (https://sculpin.io) is a static site generator written in PHP, and built on Symfony components.
|
||||
|
||||
In this talk, I'll speak about static site generators and why you may want to use one, the background of the Sculpin project, what it is, and what is does, how it works and how we can extend it with our own custom bundles.
|
||||
|
||||
Once we've done that, we'll open up a IDE and a Terminal and look at how we can build flexible, dynamic, static websites.
|
Before Width: | Height: | Size: 168 KiB |
After Width: | Height: | Size: 57 KiB |
After Width: | Height: | Size: 441 KiB |
After Width: | Height: | Size: 281 KiB |
After Width: | Height: | Size: 432 KiB |
After Width: | Height: | Size: 2 MiB |
|
@ -1,33 +1,85 @@
|
|||
theme: poster, 8
|
||||
autoscale: true
|
||||
build-lists: true
|
||||
theme: Fira, 1
|
||||
header-emphasis: #53B0EB
|
||||
header: alignment(left)
|
||||
text: alignment(left)
|
||||
text-emphasis: #53B0EB
|
||||
code: Monaco, line-height(1.2)
|
||||
|
||||
[.hide-footer]
|
||||
[.header: alignment(center)]
|
||||
|
||||
# [fit] _**Taking Flight with**<br>Tailwind CSS_
|
||||
## _Taking Flight with_<br>Tailwind CSS
|
||||
|
||||
---
|
||||
|
||||
[.background-color: #FFFFFF]
|
||||
[.build-lists: false]
|
||||
[.header: #111111]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||
- Full Stack Web Developer
|
||||
- Acquia certified Drupal specialist
|
||||

|
||||
|
||||
- Full Stack Web Developer & System Administrator
|
||||
- Senior Developer at Microserve
|
||||
- Part-time freelancer
|
||||
- Acquia certified Drupal 8 Grand Master
|
||||
- Drupal 7 & 8 core contributor
|
||||
- Symfony, Laravel, ~~Silex,~~ Sculpin
|
||||
- @opdavies
|
||||
- oliverdavies.uk
|
||||
- www.oliverdavies.uk
|
||||
|
||||
^ Work at Microserve.
|
||||
Maintain Drupal modules, PHP CLI tools and libraries
|
||||
Blog on my website
|
||||
|
||||
---
|
||||
|
||||
> A Utility-First CSS Framework for Rapid UI Development
|
||||
[.background-color: #FFFFFF]
|
||||
[.build-lists: false]
|
||||
[.text: #111111, alignment(left)]
|
||||
|
||||

|
||||
|
||||
- https://microserve.io
|
||||
- https://www.drupal.org/microserve
|
||||
- https://github.com/microserve-io
|
||||
- https://twitter.com/microserveltd
|
||||
- https://www.linkedin.com/company/microserve-ltd
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
## A _Utility-First CSS Framework_ for Rapid UI Development
|
||||
|
||||
^ What is Tailwind?
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
|
||||
## A CSS framework <br>_with no CSS_
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
|
||||
## _A different way_ <br>to write CSS
|
||||
|
||||
---
|
||||
|
||||
[.build-lists: false]
|
||||
|
||||
- Developed by Adam Wathan and others
|
||||
- Utility CSS class generator
|
||||
- PostCSS
|
||||
- Configurable
|
||||
- Configured with JavaScript
|
||||
- Some preprocessor features
|
||||
- Can be used in addition to preprocessors
|
||||
- Open source
|
||||
|
@ -55,8 +107,8 @@ Can use features like variables if using plain CSS.
|
|||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: #3490DC;
|
||||
.bg-red {
|
||||
background-color: #93140B;
|
||||
}
|
||||
|
||||
.text-white {
|
||||
|
@ -67,8 +119,8 @@ Can use features like variables if using plain CSS.
|
|||
---
|
||||
|
||||
```html
|
||||
<div class="text-2xl bg-blue-dark text-white p-8">
|
||||
<p>Hello, Drupal Bristol!</p>
|
||||
<div class="text-2xl bg-red text-white p-8">
|
||||
<p>Hello, PHP South Wales!</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
@ -78,11 +130,15 @@ Can use features like variables if using plain CSS.
|
|||
|
||||
---
|
||||
|
||||
## __Installation__
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Installation
|
||||
|
||||
---
|
||||
|
||||
## Option 1
|
||||
[.header: #53B0EB]
|
||||
|
||||
# Option 1
|
||||
|
||||
```
|
||||
https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
|
||||
|
@ -90,12 +146,16 @@ https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
|
|||
|
||||
---
|
||||
|
||||
## Option 2
|
||||
[.header: #53B0EB]
|
||||
|
||||
# Option 2
|
||||
|
||||
```bash
|
||||
yarn add postcss tailwindcss --save
|
||||
npm install tailwindcss --save-dev
|
||||
|
||||
yarn run tailwind init
|
||||
yarn add tailwindcss --dev
|
||||
|
||||
./node_modules/.bin/tailwind init [filename]
|
||||
```
|
||||
|
||||
^ Install with npm or Yarn
|
||||
|
@ -123,27 +183,27 @@ var colors = {
|
|||
|
||||
---
|
||||
|
||||
```js
|
||||
// postcss.config.js
|
||||
```less
|
||||
// app.css
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss')('./tailwind.js'),
|
||||
require('autoprefixer'),
|
||||
]
|
||||
}
|
||||
@tailwind preflight;
|
||||
|
||||
@tailwind components;
|
||||
|
||||
@tailwind utilities;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```less
|
||||
// main.less
|
||||
```js
|
||||
// webpack.mix.js
|
||||
|
||||
@tailwind preflight;
|
||||
let mix = require('laravel-mix');
|
||||
|
||||
// Any custom styles.
|
||||
require('laravel-mix-tailwind');
|
||||
|
||||
@tailwind utilities;
|
||||
mix.postCss('build', 'assets/css/app.css')
|
||||
.tailwind();
|
||||
```
|
||||
|
||||
---
|
||||
|
@ -152,15 +212,10 @@ module.exports = {
|
|||
// webpack.config.js
|
||||
|
||||
Encore
|
||||
...
|
||||
.enableLessLoader()
|
||||
.addStyleEntry('site', './less/main.less')
|
||||
.enablePostCssLoader(function(options) {
|
||||
options.config = {
|
||||
path: 'postcss.config.js'
|
||||
};
|
||||
})
|
||||
...
|
||||
.setOutputPath('public/build/')
|
||||
.setPublicPath('/build')
|
||||
.addStyleEntry('app', './assets/css/app.css')
|
||||
.enablePostCssLoader()
|
||||
;
|
||||
```
|
||||
|
||||
|
@ -168,16 +223,28 @@ Encore
|
|||
|
||||
---
|
||||
|
||||
```js
|
||||
// postcss.config.js
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss')('./tailwind.js'),
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<head>
|
||||
<title>Hello, World!</title>
|
||||
<link rel="stylesheet" href="/build/site.css">
|
||||
<link rel="stylesheet" href="/build/app.css">
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```
|
||||
```css
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
@ -193,19 +260,27 @@ Encore
|
|||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<div class="text-bold text-red bg-blue">
|
||||
Hello, world!
|
||||
<div class="text-2xl bg-red text-white p-8">
|
||||
<p>Hello, PHP South Wales!</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## __Configuration__
|
||||

|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Configuration
|
||||
|
||||
---
|
||||
|
||||
|
@ -329,9 +404,10 @@ options: {
|
|||
|
||||
---
|
||||
|
||||
## __States__
|
||||
[.header: alignment(center)]
|
||||
|
||||
### Hover, Focus, Active
|
||||
# States
|
||||
### _Hover, Focus, Active, Group hover_
|
||||
|
||||
---
|
||||
|
||||
|
@ -347,9 +423,30 @@ options: {
|
|||
</a>
|
||||
```
|
||||
|
||||
^ Hover, focus
|
||||
|
||||
---
|
||||
|
||||
## __Responsive__
|
||||
```twig
|
||||
<a class="group">
|
||||
<img
|
||||
class="border-white group-hover:border-grey"
|
||||
src="{{ speaker.photoUrl }}"
|
||||
>
|
||||
|
||||
<div class="no-underline group-hover:underline">
|
||||
{{ speaker.name }}
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
|
||||
^ Group hover
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Responsive
|
||||
|
||||
---
|
||||
|
||||
|
@ -360,14 +457,23 @@ options: {
|
|||
---
|
||||
|
||||
```html
|
||||
<div class="block sm:inline-block md:flex lg:block">
|
||||
<div class="w-full md:w-1/2 lg:w-1/4">
|
||||
<p>Hello, World!</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## __Extracting <br>Components__
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Extracting <br>Components
|
||||
|
||||
---
|
||||
|
||||
[.header: alignment(center)]
|
||||
|
||||
|
||||
## _Do you need to_ extract <br>a component?
|
||||
|
||||
---
|
||||
|
||||
|
@ -379,6 +485,29 @@ options: {
|
|||
{% endfor %}
|
||||
```
|
||||
|
||||
^ Use a loop
|
||||
|
||||
---
|
||||
|
||||
```twig
|
||||
<h2>Adults</h2>
|
||||
|
||||
{% include 'class-list' with {
|
||||
classes: page.classes,
|
||||
type: 'adults',
|
||||
} %}
|
||||
|
||||
<h2>Kids</h2>
|
||||
|
||||
{% include 'class-list' with {
|
||||
classes: page.classes,
|
||||
type: 'kids',
|
||||
} %}
|
||||
```
|
||||
|
||||
^ Move the duplicate markup into a partial, so there's only one version
|
||||
Pass data in.
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
|
@ -393,21 +522,6 @@ options: {
|
|||
|
||||
---
|
||||
|
||||
```less
|
||||
// main.less
|
||||
|
||||
.button {
|
||||
.inline-block;
|
||||
.rounded;
|
||||
.text-sm;
|
||||
.py-2;
|
||||
.px-3;
|
||||
.text-white;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```css
|
||||
# main.css
|
||||
|
||||
|
@ -467,13 +581,17 @@ options: {
|
|||
|
||||
---
|
||||
|
||||
## Advantages
|
||||
[.header: #53B0EB]
|
||||
|
||||
# Advantages
|
||||
|
||||
- Quick to prototype and make changes
|
||||
- Write less CSS
|
||||
- More consistency
|
||||
- Easy to customise, promote to components
|
||||
- Mix and match with normal CSS
|
||||
- Easy to write reusable plugins
|
||||
- Use PurgeCSS to remove unused classes
|
||||
|
||||
^ Do more with browser dev tools
|
||||
Only picking from pre-defined colours, widths. No magic numbers.
|
||||
|
@ -482,7 +600,9 @@ Same classes, but no visual similarities like with other frameworks like Bootstr
|
|||
|
||||
---
|
||||
|
||||
## Disadvantages
|
||||
[.header: #53B0EB]
|
||||
|
||||
# Disadvantages
|
||||
|
||||
- Extra build tools and steps
|
||||
- Lots of classes in markup
|
||||
|
@ -490,19 +610,29 @@ Same classes, but no visual similarities like with other frameworks like Bootstr
|
|||
|
||||
^ - Need a build tool (Gulp, Grunt, Webpack) to build CSS
|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
## For Drupal
|
||||
|
||||
- Add a prefix to avoid clashing
|
||||
- Enable `important` setting to override existing styles
|
||||
- Add classes in templates where possible
|
||||
- Use `@apply` to limit the number of templates, to avoid adding classes in PHP code or config (e.g. Views), to style hard-to-reach elements
|
||||

|
||||
|
||||
---
|
||||
|
||||
## Resources
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
[.build-lists: false]
|
||||
[.header: #53B0EB]
|
||||
|
||||
# Resources
|
||||
|
||||
- tailwindcss.com
|
||||
- tailwindcomponents.com
|
||||
|
@ -513,6 +643,9 @@ Same classes, but no visual similarities like with other frameworks like Bootstr
|
|||
|
||||
---
|
||||
|
||||
## __Thank you__
|
||||
[.header: alignment(center)]
|
||||
|
||||
# Thanks!
|
||||
### _@opdavies_
|
||||
### _oliverdavies.uk_
|
||||
|
||||
### @opdavies
|
After Width: | Height: | Size: 123 KiB |
After Width: | Height: | Size: 118 KiB |
After Width: | Height: | Size: 148 KiB |
After Width: | Height: | Size: 102 KiB |