B u i l d i n g a D r u p a l 8 T h e m ew i t h n e w - f a n g l e d a w e s o m e n e s s

M a r c D r u m m o n d ( & I z z y )@ M a r c D r u m m o n d m d r u m m o n d

I R C & d r u p a l . o r gm a r c d r u m m o n d . c o m

P a c k t P u b l i s h i n g

I’m writing a book!Drupal 8 Responsive Web Design

P h o t o b y J a l a l H a m e e d B h a t t i , F l i c k r

S u r p r i s e !T h e r e a r e n e w t h i n g s i n D r u p a l 8 ( a n d f r o n t - e n d i n g e n e r a l )

P h o t o b y M i c h e l l e Tr i b e , F l i c k r

– M e . ( A n d e v e r y o n e e l s e )

“I get totally overwhelmed by all the new things. I feel like I know nothing.”

P h o t o b y A n d r é s Þó r, F l i c k r

A r e a n y o f t h e s e t h i n g s u n f a m i l i a r ?• i n f o . y m l • G i t • C o m p o s e r • D r u s h • Tw i g • H a n d l e b a r s • M u s t a c h e • W e b

c o m p o n e n t s • H A M L • l i b r a r i e s . y m l • A s s e t i c • c o n f i g . r b • B o o t s t r a p • F o u n d a t i o n • W e b S t a r t e r

K i t • Z e n G r i d s • S i n g u l a r i t y • S u s y • r e q u i r e . j s • C o f f e e S c r i p t

• A M D • C o m m o n J S • B a c k b o n e • U n d e r s c o r e . j s • E m b e r • A n g u l a r • R u b y • R V M • B u n d l e r • G e m f i l e • G e m f i l e . l o c k • B o w e r • b o w e r. j s o n • N o d e • n p m • p a c k a g e . j s o n • C o m p o s e r • c o m p o s e r. j s o n • A c q u i a D e v

D e s k t o p • M A M P • H o m e b r e w

• Va g r a n t • D o c k e r • C h e f • P u p p e t • Ye o m a n • G r u n t • G r u n t f i l e . j s • G u l p • G u l p f i l e . j s • L i n t • c s s l i n t • j s h i n t • e s l i n t • u g l i f y j s • A u t o p r e f i x e r • i m a g e o p t i m • G r u n t i c o n • S t y l e

P r o t o t y p e s • P a t t e r n L a b • K S S • T D D

• B D D • B e h a t • C a s p e r. j s • B r o w s e r S t a c k • W r a i t h • P a g e r e s • S e l e n i u m • P h a n t o m J S • S l i m e r J S • J e n k i n s • Tr a v i s C I

I t ’s o k .

L e t ’s s t a r t w i t h t h e m e s .S o w h a t i s a t h e m e ?

P h o t o b y B o a - F r a n c , F l i c k r

I s t h a t y o u r f i n a l a n s w e r ?

Yo u r t h e m e

• H T M L • C S S • J S • M e d i a ( i m a g e s )

P h o t o b y D a v e M a l k o f f , F l i c k r

– D r u p a l t h e m e f i l e s

“All your YML and PHP belongs to us.”

T h e m e f i l e sT h e m e I ’ m w o r k i n g o n : A t o m i c

a t o m i c . i n f o . y m l a t o m i c . l i b r a r i e s . y m l a t o m i c . t h e m e b o w e r. j s o n c o n f i g i n s t a l l a t o m i c . s e t t i n g s . y m l s c h e m a a t o m i c . s c h e m a . y m l c o n f i g . r b c s s g r u n t f i l e . j s i m a g e s j s p a c k a g e . j s o n s a s s t e m p l a t e s h t m l . h t m l . t w i g t h e m e - s e t t i n g s . p h p !!

T H E M E . i n f o . y m lT h e m e i n f o r m a t i o n a n d s e t t i n g s

P h o t o b y C h r i s t i a n O s t ro s k y, F l i c k r

T H E M E . i n f o . y m lT h e m e i n f o r m a t i o n a n d s e t t i n g s

n a m e : ' A t o m i c ' t y p e : t h e m e e n g i n e : t w i g d e s c r i p t i o n : ' B a s e t h e m e b a s e d o n a t o m i c d e s i g n p r i n c i p l e s . ' c o r e : 8 . x s t y l e s h e e t s : a l l : - c s s / s t y l e s . c s s r e g i o n s : c o n t e n t : C o n t e n t h e l p : H e l p p a g e _ t o p : ' P a g e t o p ' p a g e _ b o t t o m : ' P a g e b o t t o m ' s i d e b a r _ f i r s t : ' F i r s t s i d e b a r ' s i d e b a r _ s e c o n d : ' S e c o n d s i d e b a r ’ f o o t e r : ‘ f o o t e r ’ s e t t i n g s : a t o m i c _ t y p e k i t _ i d : ' 0 ' a t o m i c _ t y p e k i t _ a d v a n c e d : f a l s e

T H E M E . i n f o . y m lT h e m e i n f o r m a t i o n a n d s e t t i n g s

n a m e : ' A t o m i c ' t y p e : t h e m e e n g i n e : t w i g d e s c r i p t i o n : ' B a s e t h e m e b a s e d o n a t o m i c d e s i g n p r i n c i p l e s . ' c o r e : 8 . x r e g i o n s : c o n t e n t : C o n t e n t h e l p : H e l p p a g e _ t o p : ' P a g e t o p ' p a g e _ b o t t o m : ' P a g e b o t t o m ' s i d e b a r _ f i r s t : ' F i r s t s i d e b a r ' s i d e b a r _ s e c o n d : ' S e c o n d s i d e b a r ’ f o o t e r : ‘ f o o t e r ’ b r e a k p o i n t s : n a r r o w : n a m e : n a r r o w l a b e l : n a r r o w m e d i a Q u e r y : ' ( m i n - w i d t h : 5 6 0 p x ) ' w e i g h t : 1 m u l t i p l i e r s : 1 x : 1 x 2 x : 2 x w i d e : n a m e : w i d e l a b e l : w i d e m e d i a Q u e r y : ' ( m i n - w i d t h : 8 5 1 p x ) ' w e i g h t : 2 m u l t i p l i e r s : 1 x : 1 x 2 x : 2 x

t h e m e - s e t t i n g s . p h pT h e m e s e t t i n g s

P h o t o b y C h a r l e s R o f f e y, F l i c k r

t h e m e - s e t t i n g s . p h pT h e m e s e t t i n g s

< ? p h p / * * * I m p l e m e n t s h o o k _ f o r m _ s y s t e m _ t h e m e _ s e t t i n g s _ a l t e r ( ) f u n c t i o n . * * @ p a r a m $ f o r m * N e s t e d a r r a y o f f o r m e l e m e n t s t h a t c o m p r i s e t h e f o r m . * @ p a r a m $ f o r m _ s t a t e * A k e y e d a r r a y c o n t a i n i n g t h e c u r r e n t s t a t e o f t h e f o r m . * / f u n c t i o n a t o m i c _ f o r m _ s y s t e m _ t h e m e _ s e t t i n g s _ a l t e r ( & $ f o r m , $ f o r m _ s t a t e ) { ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / M i s c e l a n e o u s / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / ! $ f o r m [ ' t y p o g r a p h y ' ] = a r r a y ( ' # t y p e ' = > ' f i e l d s e t ' , ' # t i t l e ' = > t ( ' Ty p o g r a p h y ' ) , ' # d e s c r i p t i o n ' = > t ( ' Ty p o g r a p h y s e t t i n g s f o r y o u r t h e m e . ' ) , ' # c o l l a p s i b l e ' = > FA L S E , ' # c o l l a p s e d ' = > FA L S E ) ; !

t h e m e - s e t t i n g s . p h pT h e m e s e t t i n g s

! $ f o r m [ ' t y p o g r a p h y ' ] [ ' a t o m i c _ t y p e k i t _ i d ' ] = a r r a y ( ' # t y p e ' = > ' t e x t f i e l d ' , ' # t i t l e ' = > t ( ' Ty p e k i t K i t I D ' ) , ' # d e f a u l t _ v a l u e ' = > t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ i d ' ) , ' # s i z e ' = > 7 , ' # m a x l e n g t h ' = > 7 , ' # d e s c r i p t i o n ' = > t ( ' I f y o u a r e u s i n g < a h r e f = " ! l i n k " t a r g e t = " _ b l a n k " > Ty p e k i t < /a > t o s e r v e w e b f o n t s , p u t y o u r Ty p e k i t K i t I D h e r e . ' , a r r a y ( ' ! l i n k ' = > ' h t t p s : / /t y p e k i t . c o m / ' ) ) , ) ; ! $ f o r m [ ' t y p o g r a p h y ' ] [ ' a t o m i c _ t y p e k i t _ a d v a n c e d ' ] = a r r a y ( ' # t y p e ' = > ' b o o l e a n ' , ' # t i t l e ' = > t ( ' A d v a n c e d Ty p e k i t E m b e d ' ) , ' # d e f a u l t _ v a l u e ' = > t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ a d v a n c e d ' ) , ' # d e s c r i p t i o n ' = > t ( ' T h i s t u r n s o n t h e < a h r e f = " ! l i n k " t a r g e t = " _ b l a n k " > a d v a n c e d Ty p e k i t e m b e d < / a > . ' , a r r a y ( ' ! l i n k ' = > ' h t t p : / /h e l p . t y p e k i t . c o m / c u s t o m e r / p o r t a l / a r t i c l e s / 6 4 9 3 3 6 - e m b e d - c o d e ' ) ) , ) ; !}

T H E M E . s e t t i n g s . y m lS e t t i n g s f i l e s

P h o t o b y C h r i s t i a n O s t r o s k y, F l i c k r

T H E M E . s e t t i n g s . y m lS e t t i n g s f i l e s

a t o m i c _ t y p e k i t _ i d : ' 0 ' a t o m i c _ t y p e k i t _ a d v a n c e d : f a l s e

T H E M E . s c h e m a . y m lS e t t i n g s c h e m a f i l e s

P h o t o b y P e t e r L e e , F l i c k r

T H E M E . s c h e m a . y m lS e t t i n g s c h e m a f i l e s

# S c h e m a f o r t h e c o n f i g u r a t i o n f i l e s o f t h e A t o m i c t h e m e . !a t o m i c . s e t t i n g s : t y p e : t h e m e _ s e t t i n g s l a b e l : ' A t o m i c s e t t i n g s ' m a p p i n g : a t o m i c _ t y p e k i t _ i d : t y p e : s t r i n g l a b e l : ' Ty p e k i t I D ' a t o m i c _ t y p e k i t _ a d v a n c e d : t y p e : b o o l e a n l a b e l : ' U s e Ty p e k i t a d v a n c e d e m b e d '

o t h e r. s t u f f . y m lT h e m e c o n f i g d e f a u l t s

P h o t o b y J u s t i n d e l a O r n e l l a s , F l i c k r

o t h e r. s t u f f . y m lT h e m e c o n f i g d e f a u l t s

i d : t h e m e . b a r t i k . b a r t i k n a m e : b a r t i k l a b e l : B a r t i k b r e a k p o i n t _ i d s : - t h e m e . b a r t i k . m o b i l e - t h e m e . b a r t i k . n a r r o w - t h e m e . b a r t i k . w i d e s o u r c e : b a r t i k s o u r c e Ty p e : t h e m e s t a t u s : t r u e l a n g c o d e : e n

H o w d o D r u p a l 8 t h e m e s w o r k w i t h … ?

• H T M L • C S S • J a v a S c r i p t

L e t ’ s l o o k a t …

H T M L Tu r n i n g d a t a i n t o m a r k u p

P h o t o b y A d r i a n , F l i c k r

T H E M E . t h e m eT h e m e f u n c t i o n s & p r e p r o c e s s

P h o t o b y S u n o v a S u r f b o a rd s , F l i c k r

T H E M E . t h e m eT h e m e f u n c t i o n s & p r e p r o c e s s

< ? p h p !/ * * * I m p l e m e n t s h o o k _ p r e p r o c e s s _ h t m l ( ) * / !!f u n c t i o n a t o m i c _ p r e p r o c e s s _ h t m l ( & $ v a r s ) { ! / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / A d d i n Ty p e K i t C o d e . / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / i f ( t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ i d ' ) ) { $ v a r s [ ' k i t _ i d ' ] = t h e m e _ g e t _ s e t t i n g ( ' a t o m i c _ t y p e k i t _ i d ' ) ; } }

T E M P L AT E . h t m l . t w i gTw i g : Te m p l a t e s t h a t m a k e s e n s e

P h o t o b y S c o t t M o o re , F l i c k r

Tw i g : Te m p l a t e s t h a t m a k e s e n s e

< ! D O C T Y P E h t m l > < h t m l { { h t m l _ a t t r i b u t e s } } > < h e a d > { { p a g e . h e a d } } < t i t l e > { { h e a d _ t i t l e } } < / t i t l e > { { p a g e . s t y l e s } } { { p a g e . s c r i p t s } } < / h e a d > < b o d y { { a t t r i b u t e s } } > < a h r e f = " # m a i n - c o n t e n t " c l a s s = " v i s u a l l y - h i d d e n f o c u s a b l e s k i p - l i n k " > { { ' S k i p t o m a i n c o n t e n t ' | t } } < / a > { { p a g e _ t o p } } { { p a g e . c o n t e n t } } { { p a g e _ b o t t o m } } { { p a g e . s c r i p t s ( ' f o o t e r ' ) } } < / b o d y > < / h t m l >

h t m l . h t m l . t w i g

Tw i g : Te m p l a t e s t h a t m a k e s e n s e< ! D O C T Y P E h t m l > < h t m l { { h t m l _ a t t r i b u t e s } } > < h e a d > { % i f k i t _ i d % } { % i f k i t _ a d v a n c e d % } < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > ( f u n c t i o n ( d ) { v a r c o n f i g = { k i t I d : ' { { k i t _ i d } } ' , s c r i p t T i m e o u t : 3 0 0 0 } , h = d . d o c u m e n t E l e m e n t , t = s e t T i m e o u t ( f u n c t i o n ( ){ h . c l a s s N a m e = h . c l a s s N a m e . r e p l a c e ( / \ b w f - l o a d i n g \ b / g , " " ) + " w f -i n a c t i v e " ; } , c o n f i g . s c r i p t T i m e o u t ) , t k = d . c r e a t e E l e m e n t ( " s c r i p t " ) , f = f a l s e , s = d . g e t E l em e n t s B y Ta g N a m e ( " s c r i p t " ) [ 0 ] , a ; h . c l a s s N a m e + = " w f - l o a d i n g " ; t k . s r c = ' / /u s e . t y p e k i t . n e t / ' + c o n f i g . k i t I d+ ' . j s ' ; t k . a s y n c = t r u e ; t k . o n l o a d = t k . o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ){ a = t h i s . r e a d y S t a t e ; i f ( f | | a & & a ! = " c o m p l e t e " & & a != " l o a d e d " ) r e t u r n ; f = t r u e ; c l e a r T i m e o u t ( t ) ; t r y { Ty p e k i t . l o a d ( c o n f i g ) } c a t c h ( e ){ } } ; s . p a r e n t N o d e . i n s e r t B e f o r e ( t k , s ) } ) ( d o c u m e n t ) ; < / s c r i p t > { % e l s e % } < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " / / u s e . t y p e k i t . n e t / { { k i t _ i d } } . j s " > < /s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " > t r y { Ty p e k i t . l o a d ( ) ; } c a t c h ( e ) { } < / s c r i p t > { % e n d i f % } { % e n d i f % } { { p a g e . h e a d } }

Tw i g : Te m p l a t e s t h a t m a k e s e n s e

n o d e . h t m l . t w i g< a r t i c l e { { a t t r i b u t e s } } > ! { { t i t l e _ p r e f i x } } { % i f n o t p a g e % } < h 2 { { t i t l e _ a t t r i b u t e s } } > < a h r e f = " { { u r l } } " r e l = " b o o k m a r k " > { { l a b e l } } < / a > < / h 2 > { % e n d i f % } { { t i t l e _ s u f f i x } } !< / a r t i c l e >

Tw i g : Te m p l a t e s t h a t m a k e s e n s e

n o d e . h t m l . t w i g{ % s e t a d d _ c l a s s e s = [ ' n o d e ' , ' n o d e - - t y p e - ' ~ n o d e . b u n d l e , n o d e . p r o m o t e d ? ' n o d e - - p r o m o t e d ' , n o d e . s t i c k y ? ' n o d e - - s t i c k y ' , n o t n o d e . p u b l i s h e d ? ' n o d e - - u n p u b l i s h e d ' , ' n o d e - - v i e w - m o d e - ' ~ v i e w _ m o d e , p r e v i e w ? ' n o d e — p r e v i e w ' ] % } !< a r t i c l e { { a t t r i b u t e s . a d d C l a s s ( a d d _ c l a s s e s ) } } > { { t i t l e _ p r e f i x } } { % i f n o t p a g e % } < h 2 { { t i t l e _ a t t r i b u t e s } } > < a h r e f = " { { u r l } } " r e l = " b o o k m a r k " > { { l a b e l } } < / a > < / h 2 > { % e n d i f % } { { t i t l e _ s u f f i x } } !< / a r t i c l e >

O t h e r t e m p l a t i n g t o o l s• H a n d l e b a r s • M u s t a c h e • W e b c o m p o n e n t s • H A M L

P s s t …

C S S / J S a s s e t sM a n a g i n g s t y l e s h e e t s a n d s c r i p t s

P h o t o b y R i c y m a r P h o t o g r a p h y, F l i c k r

T H E M E . l i b r a r i e s . y m lM a n a g i n g d e p e n d e n c i e s f o r C S S a n d J S

P h o t o b y S a m a n t h a M a r x , F l i c k r

a t o m i c . l i b r a r i e s . y m lM a n a g i n g d e p e n d e n c i e s f o r C S S a n d J S

b a s e : v e r s i o n : V E R S I O N c s s : t h e m e : c s s / s t y l e s . c s s : { } c s s / p r i n t . c s s : { m e d i a : p r i n t } m a i n t e n a n c e _ p a g e : v e r s i o n : V E R S I O N c s s : t h e m e : c s s / m a i n t e n a n c e - p a g e . c s s : { } d e p e n d e n c i e s : - s y s t e m / m a i n t e n a n c e

A s s e t i cTo o l f o r m a n a g i n g C S S a n d J S

P h o t o b y M o r k i R o , F l i c k r

J a v a S c r i p t a l l t h e t h i n g sN o t j u s t j Q u e r y a n y m o r e

J S t o o l s• M o d e r n i z r • U n d e r s c o r e • C o f f e e S c r i p t

F u n w i t h J S f r a m e w o r k s• B a c k b o n e • E m b e r • A n g u l a r

( M V C f o r J a v a s c r i p t )

J S m o d u l e l o a d e r s• A M D • C o m m o n J S

J S s c r i p t l o a d e r s• r e q u i r e . j s • c u r l . j s

C S S f o r f u n a n d p r o f i tS a s s , C o m p a s s a n d m o r e

P h o t o b y I s m a e l C e l i s , F l i c k r

c o n f i g . r bC o m p a s s c o n f i g u r a t i o n

P h o t o b y S u n o v a S u r f b o a rd s , F l i c k r

c o n f i g . r bC o m p a s s c o n f i g u r a t i o n

# R e q u i r e a n y a d d i t i o n a l c o m p a s s p l u g i n s h e r e . r e q u i r e ' c o m p a s s / i m p o r t - o n c e / a c t i v a t e ' r e q u i r e ' c o m p a s s - n o r m a l i z e ' r e q u i r e ' t o o l k i t ' r e q u i r e ' b r e a k p o i n t ' r e q u i r e ' s u s y ' r e q u i r e ' m o d u l a r- s c a l e ' r e q u i r e ' c o l o r- s c h e m e r ' r e q u i r e ' s a s s y - b u t t o n s ' !# D e f a u l t t o d e v e l o p m e n t i f e n v i r o n m e n t i s n o t s e t . s a v e d = e n v i r o n m e n t i f ( e n v i r o n m e n t . n i l ? ) e n v i r o n m e n t = : d e v e l o p m e n t e l s e e n v i r o n m e n t = s a v e d e n d !# I n d e v e l o p m e n t , t u r n o n t h e F i r e S a s s - c o m p a t i b l e d e b u g _ i n f o b y d e f a u l t . f i r e s a s s = ( e n v i r o n m e n t = = : d e v e l o p m e n t ) ? t r u e : f a l s e !# L o c a t i o n o f t h e t h e m e ' s r e s o u r c e s .

c o n f i g . r bC o m p a s s c o n f i g u r a t i o n

# L o c a t i o n o f t h e t h e m e ' s r e s o u r c e s . c s s _ d i r = " c s s " s a s s _ d i r = " s a s s " i m a g e s _ d i r = " i m a g e s " j a v a s c r i p t s _ d i r = " j s " !o u t p u t _ s t y l e = ( e n v i r o n m e n t = = : d e v e l o p m e n t ) ? : e x p a n d e d : : c o m p r e s s e d r e l a t i v e _ a s s e t s = t r u e !# C o n d i t i o n a l l y e n a b l e l i n e c o m m e n t s w h e n i n d e v e l o p m e n t m o d e . l i n e _ c o m m e n t s = ( e n v i r o n m e n t = = : d e v e l o p m e n t ) ? t r u e : f a l s e s a s s _ o p t i o n s = ( e n v i r o n m e n t = = : d e v e l o p m e n t & & f i r e s a s s = = t r u e ) ? { : d e b u g _ i n f o = > t r u e } : { }

C S S A r c h i t e c t u r e• O O C S S • B E M • S M A C S S

C S S A r c h i t e c t u r e/ * * * P r o g r e s s B a r c o m p o n e n t * / . p r o g r e s s { } . p r o g r e s s _ _ t r a c k { } . p r o g r e s s _ _ b a r { } . p r o g r e s s _ _ d e s c r i p t i o n { } . p r o g r e s s _ _ c a n c e l { } . p r o g r e s s _ _ c a n c e l : f o c u s , . p r o g r e s s _ _ c a n c e l : h o v e r { } / * * * P r o g r e s s B a r s m a l l v a r i a n t * / . p r o g r e s s - - s m a l l . p r o g r e s s _ _ t r a c k { } . p r o g r e s s - - s m a l l . p r o g r e s s _ _ b a r { } . p r o g r e s s - - s m a l l . p r o g r e s s _ _ c a n c e l { }

C S S F r a m e w o r k s• B o o t s t r a p • F o u n d a t i o n • G u m b y • W e b S t a r t e r K i t

G r i d F r a m e w o r k s• Z e n G r i d s • S u s y • S i n g u l a r i t y

N e w C S S l a y o u t t o o l s• F l e x b o x • R e g i o n s • G r i d s

S a s s y G e m s• B r e a k p o i n t • To o l k i t • M o d u l a r S c a l e • C o l o r S c h e m e r • S a s s y b u t t o n s

L e t ’s t a l k t o o l sB u t w a i t , t h e r e ’s m o r e !

P h o t o b y O Z i n O H , F l i c k r

To o l s y o u p r o b a b l y w a n t t o u s e

• C o m m a n d l i n e • G i t • C o m p o s e r • D r u s h

( I t ’ s n o t a l l t h a t s c a r y. R e a l l y. )

L e a n o n m e …M a n a g i n g d e p e n d e n c i e s a n d p a c k a g e s

P h o t o b y M a r i n , F l i c k r

C o m p o s e r• c o m p o s e r. j s o n

P H P

{ " n a m e " : " d r u p a l / d r u p a l " , " d e s c r i p t i o n " : " D r u p a l i s a n o p e n s o u r c e c o n t e n t m a n a g e m e n t p l a t f o r m p o w e r i n g m i l l i o n s o f w e b s i t e s a n d a p p l i c a t i o n s . " , " t y p e " : " d r u p a l - c o r e " , " l i c e n s e " : " G P L - 2 . 0 + " , " r e q u i r e " : { " p h p " : " > = 5 . 4 . 2 " , " s d b o y e r / g l i p h " : " 0 . 1 . * " , " s y m f o n y / c l a s s - l o a d e r " : " 2 . 4 . * " , " s y m f o n y / c s s - s e l e c t o r " : " 2 . 4 . * " , " s y m f o n y / d e p e n d e n c y - i n j e c t i o n " : " 2 . 4 . * " , " s y m f o n y / e v e n t - d i s p a t c h e r " : " 2 . 4 . * " , " s y m f o n y / h t t p - f o u n d a t i o n " : " 2 . 4 . * " , " s y m f o n y / h t t p - k e r n e l " : " 2 . 4 . * " , " s y m f o n y / r o u t i n g " : " 2 . 4 . * " , " s y m f o n y / s e r i a l i z e r " : " 2 . 4 . * " , " s y m f o n y / v a l i d a t o r " : " 2 . 4 . * " , " s y m f o n y / y a m l " : " d e v -m a s t e r # e 4 9 a 4 7 d 6 0 3 4 8 6 6 5 2 6 1 f 6 e 2 7 9 b a 3 8 3 2 4 1 d e b 7 3 c a b " , " t w i g / t w i g " : " 1 . 1 5 . * " , " d o c t r i n e / c o m m o n " : " d e v -

c o m p o s e r. j s o n

m a s t e r # a 4 5 d 1 1 0 f 7 1 c 3 2 3 e 2 9 f 4 1 e b 0 6 9 6 f a 2 3 0 e 3 f a 1 b 1 b 5 " , " d o c t r i n e / a n n o t a t i o n s " : " d e v -m a s t e r # 4 6 3 d 9 2 6 a 8 d c c 4 9 2 7 1 c b 7 d b 5 a 0 8 3 6 4 a 7 0 e d 6 e 3 c d 3 " , " g u z z l e h t t p / g u z z l e " : " 4 . 1 . * " , " k r i s w a l l s m i t h / a s s e t i c " : " 1 . 1 . * @ a l p h a " , " s y m f o n y - c m f / r o u t i n g " : " 1 . 1 . * @ a l p h a " , " e a s y r d f / e a s y r d f " : " 0 . 8 . * " , " p h p u n i t / p h p u n i t " : " 4 . 1 . * " , " p h p u n i t / p h p u n i t - m o c k - o b j e c t s " : " d e v -m a s t e r # e 6 0 b b 9 2 9 c 5 0 a e 4 2 3 7 a a f 6 8 0 a 4 f 6 7 7 3 f 4 e e 1 7 f 0 a 2 " , " z e n d f r a m e w o r k / z e n d - f e e d " : " 2 . 2 . * " } , " a u t o l o a d " : { " p s r- 4 " : { " D r u p a l \ \ C o r e \ \ " : " c o r e / l i b / D r u p a l / C o r e " , " D r u p a l \ \ C o m p o n e n t \ \ " : " c o r e / l i b / D r u p a l / C o m p o n e n t " , " D r u p a l \ \ D r i v e r \ \ " : " d r i v e r s / l i b / D r u p a l / D r i v e r " } , " f i l e s " : [ " c o r e / l i b / D r u p a l . p h p " ] } ,

c o m p o s e r. j s o n

B o w e r• b o w e r. j s o n

F r o n t - e n d

{ " n a m e " : " a t o m i c " , " v e r s i o n " : " 0 . 0 . 0 " , " i g n o r e " : [ " * * / . * " , " n o d e _ m o d u l e s " , " b o w e r _ c o m p o n e n t s " ] , " d e p e n d e n c i e s " : { " e q . j s " : " ~ 1 . 4 . 1 " , " f o r m a l i z e " : " g i t : / / g i t h u b . c o m / n a t h a n s m i t h / f o r m a l i z e " } }

b o w e r. j s o n

n p m• p a c k a g e . j s o n

N o d e

{ " n a m e " : " d e p o t " , " v e r s i o n " : " 0 . 0 . 0 " , " d e p e n d e n c i e s " : { } , " d e v D e p e n d e n c i e s " : { " c o m p a s s - o p t i o n s " : " ^ 0 . 1 . 1 " , " g r u n t " : " ~ 0 . 4 . 0 " , " g r u n t - c o n t r i b - w a t c h " : " ~ 0 . 4 . 3 " , " g r u n t - c o n t r i b - c o m p a s s " : " ~ 0 . 2 . 0 " , " g r u n t - c o n t r i b - j s h i n t " : " ^ 0 . 1 0 . 0 " , " g r u n t - c o n t r i b - u g l i f y " : " ~ 0 . 2 . 0 " , " g r u n t - c o n t r i b - i m a g e m i n " : " ~ 0 . 1 . 4 " , " g r u n t - p a r a l l e l " : " ~ 0 . 1 . 0 " , " g r u n t - s v g m i n " : " ~ 0 . 1 . 0 " , " g r u n t - c o n t r i b - c o p y " : " ~ 0 . 4 . 1 " , " g r u n t - s h e l l " : " ^ 0 . 7 . 0 " }

p a c k a g e . j s o n

R u b y e n v i r o n m e n t• R V M • r b e n v

B u n d l e r : R u b y g e m s• G e m f i l e • G e m f i l e . l o c k

R u b y

s o u r c e ' h t t p : / / r u b y g e m s . o r g ' !g e m ' s a s s ' , ' ~ > 3 . 3 . 0 ' g e m ' b r e a k p o i n t ' , ' ~ > 2 . 4 . 0 ' g e m ' s u s y ' , ' ~ > 2 . 1 . 2 ' g e m ' t o o l k i t ' , ' ~ > 2 . 5 . 0 ' g e m ' m o d u l a r- s c a l e ' , ' ~ > 2 . 0 . 4 ' g e m ' c o l o r- s c h e m e r ' , ' ~ > 0 . 2 . 8 ' g e m ' c o m p a s s ' , ' ~ > 1 . 0 . 0 . a l p h a . 1 7 ' g e m ' c o m p a s s - n o r m a l i z e ' , ' ~ > 1 . 5 ' g e m ' s a s s y - b u t t o n s ' , ' ~ > 0 . 2 . 6 '

G e m f i l e

D e v e n v i r o n m e n t t o o l sS e t t i n g u p a l o c a l s e r v e r, m a n a g e l a n g u a g e s , e t c .

P h o t o b y G re y l o c h , F l i c k r

D e v e n v i r o n m e n t t o o l s• M A M P / W A M P / L A M P / X A M P P • A c q u i a D e v D e s k t o p • H o m e b r e w • Va g r a n t a n d D o c k e r • C h e f a n d P u p p e t

Ye o m a nS c a f f o l d i n g t o o l t o b u i l d f i l e s f o r t h e m e s o r m o d u l e s

P h o t o b y To m F r a n c i s , F l i c k r

Ta s k r u n n e r sM u l t i p l e c o m m a n d l i n e t a s k s w i t h o n e c o m m a n d

P h o t o b y K y l e S t e e d , F l i c k r

G r u n t• g r u n t f i l e . j s

G u l p• g u l p f i l e . j s

Ta s k r u n n e r s

N o d e - b a s e d : n p m i n s t a l l

F u n w i t h t a s k sW h a t ’s a t a s k r u n n e r w i t h o u t t a s k s ?

P h o t o b y D a n C o u l t e r, F l i c k r

L i n t s• c s s l i n t • j s l i n t • e s l i n t

M i n i f i e r s• u g l i f y j s

A u t o p r e f i x e r

I m a g e t o o l s• i m a g e o p t i m • g r u n t i c o n

O t h e r t a s k s• s h e l l • c o n t r i b - c o p y

' u s e s t r i c t ' ; !v a r g u l p = r e q u i r e ( ' g u l p ' ) ; v a r j s h i n t = r e q u i r e ( ' g u l p - j s h i n t ' ) ; v a r s t y l i s h = r e q u i r e ( ' j s h i n t - s t y l i s h ' ) ; v a r p a t h s = r e q u i r e ( ' c o m p a s s - o p t i o n s ' ) . p a t h s ( ) ; v a r b r o w s e r S y n c = r e q u i r e ( ' b r o w s e r- s y n c ' ) ; v a r s h e l l = r e q u i r e ( ' g u l p - s h e l l ' ) ; !/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / B e g i n G u l p Ta s k s / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' l i n t ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( [ p a t h s . j s + ' / * * / * . j s ' , ' ! ' + p a t h s . j s + ' / * * / * . j s ' ] ) . p i p e ( j s h i n t ( ) ) . p i p e ( j s h i n t . r e p o r t e r ( s t y l i s h ) ) } ) ; !

g u l p f i l e . j s

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / C o m p a s s Ta s k / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' c o m p a s s ' , f u n c t i o n ( ) { r e t u r n g u l p . s r c ( p a t h s . s a s s + ' / * * / * ' ) . p i p e ( s h e l l ( [ ' b u n d l e e x e c c o m p a s s w a t c h - - t i m e ' ] ) ) ; } ) ; !/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / Wa t c h / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' w a t c h ' , f u n c t i o n ( ) { g u l p . w a t c h ( p a t h s . j s + ' / * * / * . j s ' , [ ' l i n t ' ] ) ; } ) ; !

g u l p f i l e . j s

/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / B r o w s e r S y n c Ta s k / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' b r o w s e r S y n c ' , f u n c t i o n ( ) { b r o w s e r S y n c . i n i t ( [ p a t h s . c s s + ' / * * / * . c s s ' , p a t h s . j s + ' / * * / * . j s ' , p a t h s . i m g + ' / * * / * ' , p a t h s . f o n t s + ' / * * / * ' , p a t h s . h t m l + ' / * * / * . h t m l ' , ] ) ; } ) ; !/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / S e r v e r Ta s k s / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' s e r v e r ' , [ ' w a t c h ' , ' c o m p a s s ' , ' b r o w s e r S y n c ' ] ) ; g u l p . t a s k ( ' s e r v e ' , [ ' s e r v e r ' ] ) ;

g u l p f i l e . j s

P r o t o t y p i n g t o o l sB u i l d i n g i n t h e b r o w s e r w i t h c o m p o n e n t - b a s e d d e s i g n

P i x e l p e r f e c t i o n i s t h e e n e m y o f t h e g o o d .

P h o t o b y E n i g m a B a d g e r, F l i c k r

S t y l e g u i d e g e n e r a t o r s• S t y l e P r o t o t y p e s • P a t t e r n L a b • K S S

S t a t i c p r o t o t y p e s• S t y l e t i l e s • E l e m e n t c o l l a g e s • V i s u a l i n v e n t o r i e s

Te s t i n g & D e p l o y m e n tTo o l s f o r m a k i n g s u r e y o u r s i t e w o r k s b e f o r e d e p l o y i n g c h a n g e s

P h o t o b y P a s c a l , F l i c k r

C r o s s - b r o w s e r t e s t i n g• B r o w s e r S t a c k

S c r e e n s h o t t o o l s• W r a i t h • P a g e r e s

H e a d l e s s b r o w s e r s• P h a n t o m J S • S l i m e r J S

B D D• B e h a t • C a s p e r J S

A u t o m a t e d r e g r e s s i o n t e s t i n g

• S e l e n i u m

C o n t i n u o u s i n t e g r a t i o n• J e n k i n s • Tr a v i s C I

W h y d o y o u v e x m e s o ?A r e y o u i n s a n e ? A m I i n s a n e ? A r e w e i n s a n e ?

P h o t o b y R o b e r t M c G o l d r i c k , F l i c k r

W h y s o c o m p l i c a t e d ?• C o l l a b o r a t i o n • C o n s i s t e n c y • C a p a b i l i t i e s • A u t o m a t e m u n d a n e t a s k s • F i n d e r r o r s , i m p r o v e p e r f o r m a n c e

p r i o r t o d e p l o y m e n t

C o p i n g w i t h m a d n e s sI ’ m s c a r e d . H o l d m e .

Yo u d o n ’ t h a v e t o d o a l l o f t h i s .

• O k t o j u s t u s e H T M L , C S S a n d J S . • Tr y o n e n e w t h i n g w i t h a p r o j e c t . • N e x t p r o j e c t ? Tr y a n o t h e r n e w t h i n g . • O r d o n ’ t .

P h o t o b y E r i k M e l d r u m , F l i c k r

P h o t o b y L a u r a , F l i c k r

P h o t o b y A m b u r n E v e re t t , F l i c k r

M a r c D r u m m o n d ( & I z z y )@ M a r c D r u m m o n d m d r u m m o n d

I R C & d r u p a l . o r gm a r c d r u m m o n d . c o m