Word Camp 2013

Mikkel W. Breum

wpKitchen.com

Versionering (git)hvad får man ud af det

Kan det betale sig

Deploymenthvorfor ikke bare (manuel) FTP

SASS/SCSS/LESS <-> CSShvad og hvorfor

men hvad så med HeadWay

Boilerplatesstandardiserede arbejdsgange

kvalitetleverage

PaaShvad er PaaS og hvilke fordele

for hjemmesiderpris / kompliceringsgrad

Lokale filerLokale filer

WebhostWebhost

sFTP

Udgangspunkt

Forbedret udgangspunkt

WebhostWebhost

sFTP

Lokale filerLokale filer under git kontrol

‘Nye’ mulighederHistorik / Versionering

Oprettet indkøbsliste

Tilføjet salat

Rettet tastefejl

Tilføjet tun

TomaterAgurkSalatTun

TomaterAgurkSalat

TimaterAgurkSalat

TimaterAgurk

‘Nye’ mulighederForgrening

TomaterAgurkSalat

TomaterAgurkSalatKylling

Oprettet indkøbsliste

Tilføjet salat

Rettet tastefejl

Tilføjet tun

TomaterAgurkSalatTun

TomaterAgurkSalat

TimaterAgurkSalat

TimaterAgurk

FORK

ORIG

‘Nye’ mulighederFlere udviklere

online repoonline repopublic forkpublic fork

online repoonline repopublic forkpublic fork

online repoonline repopublic forkpublic fork

online repoonline repopublic origpublic orig

lokal repolokal repoprivatprivat

lokal repolokal repoprivatprivat

lokal repolokal repoprivatprivat

lokal repolokal repoprivatprivat

Koordinator udvikler 1 udvikler 2 udvikler 3

WordPress 2003 - 2010

http://vimeo.com/8933205

Værktøjer

redigering scss localhostimportexportkloning

databaseimportexport

gittracking

deployment

git repogit repoonline / lokalonline / lokal

WebhostWebhost auto deploy(sFTP) PaaS

git-aaS

‘Nye’ mulighedergit Deployment

Lokale filerLokale filerunder git kontrolunder git kontrol

WebhostWebhost

sFTP

MaskinenMaskinen

WP CoreWP CoreThemeThemePluginsPlugins

WordPress Anatomy

Run time DATARun time DATA

DatabasenDatabasenwp-uploadswp-uploads

to git or not to git

SASS/SCSS/LESS <-> CSSCSS Preprocessing

Variableropdater et sted

BeregnigerGør ting relative

Nestingundgå gentagelser selectors og

properties

Mixinsgenbrug variable css blokke

Nedarv fra selector

SCSS Eksempel

$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

scss css

HeadWaymy way

nulstillet designog bruger det ikke

prototypejump start støbeform

SCSS templatebaseret på WP + HeadWay markup

med grid size variabler

[Kombineret med Views]for kontrol over content

markup

deploy til traditionel hostvia Beanstalk hands-on

opsæt lokalt sitetilføj git lokaltforetag ændringer

opsæt repositoryopsæt depl. environment

opsæt domæne

unoeuro

beanstalk

localhostDesktopServer

0. Hav en tjekliste (og hold den opdateret)1. staging site opsæt nyt subdomæne2. Opsæt bs repo med deployment environment3. Klon proto via DesktopServer (fixer serialiseret data)4. ‘Localize’ / klargør klon (næste tjeckliste)5. Tower: add repo, add remote - initial commit - initial push6. DesktopServer: eksporter og importer på livesite7. SCSS via codekit - commit - edit - commit8. Push til Beanstalk

a:1:{s:7:"siteurl";s:16:"http://proto.dev";}

Change Table Prefixchange in wp-configchange in database (use Seequel Pro) - Rename all tables - Rename key names in

user_meta - Rename key name in optionsLocalize Child ThemeRename child theme folderChange theme name in style.css and in scss/style.scssRename plugin templates filesChange names

and descriptions of plugin templatesLocalize Child Theme SettingsSet the Site name, date format and timezone in General SettingsActivate the renamed child themeSetup the Menu Position

deploy til cloud hands-on

opsæt lokalt sitetilføj git lokaltforetag ændringer

opsæt repositoryopsæt depl. environment

opsæt domæne

unoeuro

beanstalk

localhostDesktopServer

Hvad er PaaSFordele

Er det for hjemmesiderUdbydere

PrisEr det kompliceret

Hands-on

PaaS

Software aaSSoftware aaSpodio - runtastic - podio - runtastic - dit WordPress sitedit WordPress site

Platform aaSPlatform aaSheruko - pagodabox - AppFog - fortrabbitheruko - pagodabox - AppFog - fortrabbit

Infrastructure aaSInfrastructure aaSAmazon Web Services - SoftlayerAmazon Web Services - Softlayer

Hvad er PaaS

fordeleDynamisk skalerbarhedIndsigtØjeblikkelig setupKontrol over environmentGit deploymentResistent hostingPrisJeres erfaringer?

PaaS fremfor webhost

ulemperSetup omkring uploadsMan skal lære noget nytPrisJeres erfaringer?

udbydere

fortrabbit AWS

pagodabox softlayer

AppFog optional

atlassian.com/git/atlassian.com/git/

My HeadWay plugins

BG Covers

Full Width Header