the wordpress developer's toolbag

patrick cox → @pcridesagainhttp://patrick-cox.com

follow along with me:http://patrick-cox.com/wcslcTalk2012

I'm a...

freelance wordpress designer/developer

ui developer at active network

and...

a writer for http://codrops.com

a co-founder of http://payba.cc

everybody's talkin' 'bout my tight pants

)

set the table

quick survey: mac or pc?

mac = m

pc = n

web = ;

free = '

pay = C

my pick = &

do work son

in the beginning

welcome to wordpress

what you'll need...

text editors

& sublime text 2 ~ m n Chttp://www.sublimetext.com/2

coda or coda 2 ~ m Chttp://panic.com/coda/

notepad++ ~ n 'http://notepad-plus-plus.org/

netbeans ~ m n 'http://netbeans.org/

syntax highlighting. speed and ease of use. easy on the eyes.

local php dev environments

& mamp ~ m 'http://www.mamp.info/en/index.html

wampserver ~ n 'http://www.wampserver.com/en/

xampp ~ n m 'http://www.apachefriends.org/en/xampp.html

& GasMask (edit host files) ~ m 'http://www.macupdate.com/app/mac/29949/gas-mask

html/css/js debugger... um, browsers?

& chrome dev tools ~ m n 'https://www.google.com/intl/en/chrome/browser/

firefox dev tools or firebug add on ~ m n 'http://www.mozilla.org/en-US/firefox/new/

internet explorer dev tools ~ n 'http://windows.microsoft.com/en-us/internet-explorer/products/ie/home

safari dev developer extension ~ m 'https://developer.apple.com/technologies/safari/developer-tools.html

ftp clients

filezilla ~ m n 'http://filezilla-project.org/

cyberduck ~ m n 'http://cyberduck.ch/

& transmit ~ m Chttp://panic.com/transmit/

file editor preference. two pane drag 'n drop. cloud distribution.

version control systems

cvstortoiseCVS ~ n 'http://www.tortoisecvs.org/

git& github for mac ~ m n 'http://git-scm.com/downloads

svnversions ~ m Chttp://versionsapp.com/

)

testing your stuff

ugh, testing sucks

you need a little quality assurance too

testing your themes

wp theme check plugin ~ ; 'http://wordpress.org/extend/plugins/theme-check/

• run same automated tests as WordPress.org submission
• check if theme is supported by current version of WP

test data creator plugin ~ ; 'http://wordpress.org/extend/plugins/test-data-creator/

• add data/content to test and style your theme
• doesn't support all content types as of yet

debogger plugin ~ ; 'http://wordpress.org/extend/plugins/debogger/

testing your plugins

plugin test drive... plugin ~ ; 'http://wordpress.org/extend/plugins/plugin-test-drive/

• test plugin functionality in both admin & front end
• change options and style of plugins to blend in site
• compare plugins to find out which one best suits your needs
• once you are done testing and the plugin is ready, you can activate it

test browser compatibility

browser stack ~ ; Chttp://www.browserstack.com/

& browser shots ~ ; 'http://browsershots.org/

adobe browser labs ~ ; 'https://browserlab.adobe.com/en-us/index.html

hmmm... why not just test the browsers?cause it's just not practical...

virtual machines

vm ware ~ m n Chttp://www.vmware.com/virtualization/virtual-machine.html

& oracle virtual box ~ m n 'https://www.virtualbox.org/

)

building responsively

welcome to the device jungle

phones, readers, tablets, laptops, desktops, tv's?

testing your rwd-ness

adobe shadow ~ m n 'http://labs.adobe.com/downloads/shadow.html

& responsive web tester ~ ; 'http://mattkersley.com/responsive/

xcode simulator ~ m 'https://developer.apple.com/xcode/

android emulator ~ m n 'http://developer.android.com/tools/help/emulator.html

text & icons & images

icomoon ~ ; 'http://icomoon.io/

fittext.js ~ ; 'http://fittextjs.com/

slabtext ~ ; 'http://www.frequency-decoder.com/demo/slabText/

adaptive images ~ ; 'http://adaptive-images.com/

juicebox (image gallery) ~ ; 'Chttp://www.juicebox.net/

grid systems

semantic.gs ~ ; 'http://semantic.gs/

simplegrid ~ ; 'http://simplegrid.info/

cssgrid ~ ; 'http://cssgrid.net/

tiny fluid grid ~ ; 'http://www.tinyfluidgrid.com/

)

getting advanced

grow your neckbeard

become a pro developer

preprocessors/compilers

& codekit! yay codekit!! ~ m Chttp://incident57.com/codekit/

livereload ~ m n Chttp://livereload.com/

compass (sass) ~ m Chttp://compass.handlino.com/

scout (sass) ~ m n 'http://mhs.github.com/scout-app/

less.app (less) ~ m 'http://incident57.com/less/

playgrounds

codepen ~ ; 'http://codepen.io

jsfiddle ~ ; 'http://jsfiddle.net/

codepad ~ ; 'http://codepad.org/

write code online (php) ~ ; 'http://writecodeonline.com/php/

image deflation & optimization

& codekit! yay codekit!! ~ m Chttp://incident57.com/codekit/

jpegmini ~ m 'http://www.jpegmini.com/

pnggauntlet ~ n 'http://pnggauntlet.com/

imageoptim ~ m 'http://imageoptim.com/

spriteright ~ m Chttp://spriterightapp.com/

html5 right now

html5 please ~ ; 'http://html5please.com/

• stay on top of new html5 and css3 elements and properties
• provides ratings and advice if element should/can be used or not
• suggests backups and polyfills

json

visual json ~ m 'http://itunes.apple.com/us/app/visual-json/id488709442?mt=12

json viewer ~ n 'http://jsonviewer.codeplex.com/

json parser online ~ ; 'http://json.parser.online.fr/

)

finding wordpress stuff

um, the wp community is kind of big

there is so much info out there

references

wordpress codexhttp://codex.wordpress.org/

wordpress plugin directoryhttp://wordpress.org/extend/plugins/

wordpress help sheethttp://wpcandy.com/teaches/the-wordpress-help-sheet

the advanced wordpress help sheethttp://wpcandy.com/teaches/the-advanced-wordpress-help-sheet

blogs

digging into wordpresshttp://digwp.com/

wordpress for beginnershttp://www.wpbeginner.com/

wp recipeshttp://www.wprecipes.com/

tutorials

wp tutsplushttp://wp.tutsplus.com/

wp hackshttp://wphacks.com/

wp engineerhttp://wpengineer.com/

)

almost lunch time

mmmmmmmmm, bbq

questions?