SlideShare a Scribd company logo
B u i l d i n g a D r u p a l 8 T h e m e
w i t h n e w - fa n gl e d a w e s o m e n e s s
M a rc D r u m m o n d ( & I z z y )
@ M a rc 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 rgm a rc 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 re a re n e w t h i n g s i n D r u p a l 8 ( a n d f ro 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 re 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
• We 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
• We 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
• re q u i re . j s
• C o ff 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 re . 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 re 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 re 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 ro 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 ro w s e r S t a c k
• Wr a i t h
• P a g e re 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 yo 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 ff , 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 s
T 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 l
T 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 l
T 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 re : 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
re 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 l
T 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 re : 8 . x
re 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 re a k p o i n t s :
n a r ro w :
n a m e : n a r ro w
l a b e l : n a r ro 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 p
T 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 ff e y, F l i c k r
t h e m e - s e t t i n g s . p h p
T 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 re 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 p
T 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 re u s i n g < a h re f = " ! l i n k " t a rg 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 re . ' , 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 re f = " ! l i n k "
t a rg 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 l
S 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 ro s k y, F l i c k r
T H E M E . s e t t i n g s . y m l
S 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 l
S 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 l
S 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 ff . y m l
T 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 ff . y m l
T 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 re 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 ro w
- t h e m e . b a r t i k . w i d e
s o u rc e : b a r t i k
s o u rc 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 e
T h e m e f u n c t i o n s & p re p ro 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 e
T h e m e f u n c t i o n s & p re p ro c e s s
< ? p h p
!
/ * *
* I m p l e m e n t s h o o k _ p re p ro c e s s _ h t m l ( )
* /
!
!
f u n c t i o n a t o m i c _ p re p ro 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 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
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 re 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 . 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 . re 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 re 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 e
m 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 rc = ' / /
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 re 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 . re 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 " ) re 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 re n t N o d e . i n s e r t B e f o re ( 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 rc = " / / 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 % }
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 re 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 re f = " { { u r l } } " re 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 ff 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 ro m o t e d ? ' n o d e - - p ro 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 re v i e w ? ' n o d e — p re 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 re 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 re f = " { { u r l } } " re 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 ff 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
• We 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 s
M 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 l
M 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 l
M 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 c
To 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 s
N o t j u s t j Q u e r y a n y m o re
J S t o o l s
• M o d e r n i z r
• U n d e r s c o re
• C o ff 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 VC f o r Ja 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
• re q u i re . j s
• c u r l . j s
C S S f o r f u n a n d p ro f i t
S a s s , C o m p a s s a n d m o re
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 b
C 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 b
C o m p a s s c o n f i g u r a t i o n
# R e q u i re 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 re .
re q u i re ' 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 '
re q u i re ' c o m p a s s - n o r m a l i z e '
re q u i re ' t o o l k i t '
re q u i re ' b re a k p o i n t '
re q u i re ' s u s y '
re q u i re ' m o d u l a r- s c a l e '
re q u i re ' c o l o r- s c h e m e r '
re q u i re ' 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 ro n m e n t i s n o t s e t .
s a v e d = e n v i ro n m e n t
i f ( e n v i ro n m e n t . n i l ? )
e n v i ro n m e n t = : d e v e l o p m e n t
e l s e
e n v i ro 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 re 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 re s a s s = ( e n v i ro 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
!
c o n f i g . r b
C 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 re s o u rc 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 ro 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 re s s e d
re 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 ro 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 ro n m e n t = = : d e v e l o p m e n t & & f i re 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 rc h i t e c t u re
• O O C S S
• B E M
• S M A C S S
C S S A rc h i t e c t u re
/ * *
* P ro g re s s B a r c o m p o n e n t
* /
. p ro g re s s { }
. p ro g re s s _ _ t r a c k { }
. p ro g re s s _ _ b a r { }
. p ro g re s s _ _ d e s c r i p t i o n { }
. p ro g re s s _ _ c a n c e l { }
. p ro g re s s _ _ c a n c e l : f o c u s ,
. p ro g re s s _ _ c a n c e l : h o v e r { }
/ * *
* P ro g re s s B a r s m a l l v a r i a n t
* /
. p ro g re s s - - s m a l l . p ro g re s s _ _ t r a c k { }
. p ro g re s s - - s m a l l . p ro g re s s _ _ b a r { }
. p ro g re s s - - s m a l l . p ro g re 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
• We 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 re 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 s
B u t w a i t , t h e re ’s m o re !
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 ro 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 rc 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 re " ,
" l i c e n s e " : " G P L - 2 . 0 + " ,
" re q u i re " : {
" 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 / ro 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 / ro u t i n g " : " 1 . 1 . * @ a l p h a " ,
" e a s y rd f / e a s y rd 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 re   " : " c o re / l i b / D r u p a l / C o re " ,
" D r u p a l   C o m p o n e n t   " : " c o re / 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 re / 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 ro 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 re " : [
" * * / . * " ,
" 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 ro 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 rc e ' h t t p : / / r u b y g e m s . o rg '
!
g e m ' s a s s ' , ' ~ > 3 . 3 . 0 '
g e m ' b re 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 ro n m e n t t o o l s
S 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 ro n m e n t t o o l s
• M A M P / WA 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 re 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 n
S c a ff 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 s
M 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 s
W 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 re 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 = re q u i re ( ' g u l p ' ) ;
v a r j s h i n t = re q u i re ( ' g u l p - j s h i n t ' ) ;
v a r s t y l i s h = re q u i re ( ' j s h i n t - s t y l i s h ' ) ;
v a r p a t h s = re q u i re ( ' c o m p a s s - o p t i o n s ' ) . p a t h s ( ) ;
v a r b ro w s e r S y n c = re q u i re ( ' b ro w s e r- s y n c ' ) ;
v a r s h e l l = re q u i re ( ' 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 ( ) {
re t u r n g u l p . s rc ( [
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 . re 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 ( ) {
re t u r n g u l p . s rc ( 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 ro w s e r S y n c Ta s k
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
g u l p . t a s k ( ' b ro w s e r S y n c ' , f u n c t i o n ( ) {
b ro 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 ro 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 ro t o t y p i n g t o o l s
B u i l d i n g i n t h e b ro 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 ro 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 ro 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 t
To o l s f o r m a k i n g s u re y o u r s i t e w o r k s b e f o re 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 ro s s - b ro w s e r t e s t i n g
• B ro w s e r S t a c k
S c re e n s h o t t o o l s
• Wr a i t h
• P a g e re s
H e a d l e s s b ro 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 re g re 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 re y o u i n s a n e ? A m I i n s a n e ? A re 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 ro r s , i m p ro 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 s
I ’ m s c a re 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 ro j e c t .
• N e x t p ro 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 rc D r u m m o n d ( & I z z y )
@ M a rc 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 rgm a rc d r u m m o n d . c o m

More Related Content

What's hot

Textile Testing & Quality Control -I (notes)
Textile Testing & Quality Control -I (notes)Textile Testing & Quality Control -I (notes)
Textile Testing & Quality Control -I (notes)
Ahmad Sakib
 
How to-subnet-a-network
How to-subnet-a-networkHow to-subnet-a-network
How to-subnet-a-network
umesh pillai
 
in the harvard news paper.
in the harvard news paper.in the harvard news paper.
in the harvard news paper.Kelvin Xuna
 
Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12
Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12
Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12
Mfuse Limited
 
Peluang suatu kejadian kelompok 7
Peluang suatu kejadian kelompok 7Peluang suatu kejadian kelompok 7
Peluang suatu kejadian kelompok 7
Anha Anha
 
Blog y almacenamiento_en_la_nube (1)
Blog y almacenamiento_en_la_nube (1)Blog y almacenamiento_en_la_nube (1)
Blog y almacenamiento_en_la_nube (1)
jennypaolaayure
 
UFO Spotting Handboek
UFO Spotting HandboekUFO Spotting Handboek
UFO Spotting Handboek
Parashade
 
A basic introduction to iso 27001
A basic introduction to iso 27001A basic introduction to iso 27001
A basic introduction to iso 27001
ShivamSharma909
 
cisco systems Investment, Finance and Acquisition Committee Charter
cisco systems Investment, Finance and Acquisition Committee Charter cisco systems Investment, Finance and Acquisition Committee Charter
cisco systems Investment, Finance and Acquisition Committee Charter finance8
 
Cognitive perspective
Cognitive perspectiveCognitive perspective
Cognitive perspective
Lorelen Gutierrez
 
donation appreciation credentials
donation appreciation credentialsdonation appreciation credentials
donation appreciation credentialsKelvin Xuna
 
All about the azure internet of things (io t)
All about the azure internet of things (io t)All about the azure internet of things (io t)
All about the azure internet of things (io t)
ShivamSharma909
 
Operational
OperationalOperational
Operational
Joan Pescador
 
Theenlightenment 100608081048-phpapp02 (Mr. Macale)
Theenlightenment 100608081048-phpapp02 (Mr. Macale)Theenlightenment 100608081048-phpapp02 (Mr. Macale)
Theenlightenment 100608081048-phpapp02 (Mr. Macale)Jerome John Gutierrez
 
Cuestionarioautoestimadecoopersmith.doc
Cuestionarioautoestimadecoopersmith.docCuestionarioautoestimadecoopersmith.doc
Cuestionarioautoestimadecoopersmith.docsin empresa
 
HERRAMIENTAS GERENCIALES
HERRAMIENTAS GERENCIALESHERRAMIENTAS GERENCIALES
HERRAMIENTAS GERENCIALES
swatwlly
 

What's hot (20)

Textile Testing & Quality Control -I (notes)
Textile Testing & Quality Control -I (notes)Textile Testing & Quality Control -I (notes)
Textile Testing & Quality Control -I (notes)
 
How to-subnet-a-network
How to-subnet-a-networkHow to-subnet-a-network
How to-subnet-a-network
 
Evaluation 2
Evaluation 2Evaluation 2
Evaluation 2
 
Practical dreaming
Practical dreamingPractical dreaming
Practical dreaming
 
Resume-10
Resume-10Resume-10
Resume-10
 
in the harvard news paper.
in the harvard news paper.in the harvard news paper.
in the harvard news paper.
 
Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12
Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12
Mfuse - The Native vs HTML5 Debate - Whitepaper - Nov 12
 
Babi ngesot ac zzz.blogspot.com
Babi ngesot ac zzz.blogspot.comBabi ngesot ac zzz.blogspot.com
Babi ngesot ac zzz.blogspot.com
 
Peluang suatu kejadian kelompok 7
Peluang suatu kejadian kelompok 7Peluang suatu kejadian kelompok 7
Peluang suatu kejadian kelompok 7
 
Blog y almacenamiento_en_la_nube (1)
Blog y almacenamiento_en_la_nube (1)Blog y almacenamiento_en_la_nube (1)
Blog y almacenamiento_en_la_nube (1)
 
UFO Spotting Handboek
UFO Spotting HandboekUFO Spotting Handboek
UFO Spotting Handboek
 
A basic introduction to iso 27001
A basic introduction to iso 27001A basic introduction to iso 27001
A basic introduction to iso 27001
 
cisco systems Investment, Finance and Acquisition Committee Charter
cisco systems Investment, Finance and Acquisition Committee Charter cisco systems Investment, Finance and Acquisition Committee Charter
cisco systems Investment, Finance and Acquisition Committee Charter
 
Cognitive perspective
Cognitive perspectiveCognitive perspective
Cognitive perspective
 
donation appreciation credentials
donation appreciation credentialsdonation appreciation credentials
donation appreciation credentials
 
All about the azure internet of things (io t)
All about the azure internet of things (io t)All about the azure internet of things (io t)
All about the azure internet of things (io t)
 
Operational
OperationalOperational
Operational
 
Theenlightenment 100608081048-phpapp02 (Mr. Macale)
Theenlightenment 100608081048-phpapp02 (Mr. Macale)Theenlightenment 100608081048-phpapp02 (Mr. Macale)
Theenlightenment 100608081048-phpapp02 (Mr. Macale)
 
Cuestionarioautoestimadecoopersmith.doc
Cuestionarioautoestimadecoopersmith.docCuestionarioautoestimadecoopersmith.doc
Cuestionarioautoestimadecoopersmith.doc
 
HERRAMIENTAS GERENCIALES
HERRAMIENTAS GERENCIALESHERRAMIENTAS GERENCIALES
HERRAMIENTAS GERENCIALES
 

Viewers also liked

Avedas orcid outreach_meeting_20130523
Avedas orcid outreach_meeting_20130523Avedas orcid outreach_meeting_20130523
Avedas orcid outreach_meeting_20130523
ORCID, Inc
 
30 receitas com_creme_de_leite
30 receitas com_creme_de_leite30 receitas com_creme_de_leite
30 receitas com_creme_de_leite
edson soares
 
Trabajo de que es un administrador de red
Trabajo de que es un administrador de redTrabajo de que es un administrador de red
Trabajo de que es un administrador de red
Carina Manzano
 
Allplan Engineering 2016
Allplan Engineering 2016Allplan Engineering 2016
Allplan Engineering 2016
Allplan
 
S.t.a.r. interveiwing 5 7-12 email copy
S.t.a.r. interveiwing 5 7-12 email copyS.t.a.r. interveiwing 5 7-12 email copy
S.t.a.r. interveiwing 5 7-12 email copy
Regina Seeley
 
Code lyoko
Code lyokoCode lyoko
Code lyoko
pabloelmejor99
 
Carrington
CarringtonCarrington
Carrington
Renan Delalande
 
Cv Jo Devisch 2010 Event Coordinator
Cv Jo Devisch 2010 Event CoordinatorCv Jo Devisch 2010 Event Coordinator
Cv Jo Devisch 2010 Event Coordinator
jodevisch
 
CURRICULLUM VITAE ernest
CURRICULLUM VITAE ernestCURRICULLUM VITAE ernest
CURRICULLUM VITAE ernest
Makia Elad
 
Niveles de servicio y el soporte que ofrece el CENAM
Niveles de servicio y el soporte que ofrece el CENAMNiveles de servicio y el soporte que ofrece el CENAM
Niveles de servicio y el soporte que ofrece el CENAM
Jazmin Glez.
 
02 folleto seibag 2012
02 folleto seibag 201202 folleto seibag 2012
02 folleto seibag 2012
Seinec s.a.
 
Sistema financiero
Sistema financieroSistema financiero
Sistema financiero
legendariogls
 
Presentación merkint
Presentación merkintPresentación merkint
Presentación merkint
E Leon
 
Catalohue Montre Maserati 2014
Catalohue Montre Maserati 2014Catalohue Montre Maserati 2014
Catalohue Montre Maserati 2014
bijouterie_monaco
 
Symfony2 revealed
Symfony2 revealedSymfony2 revealed
Symfony2 revealed
Fabien Potencier
 
En manipulación y sociopatía
En manipulación y sociopatíaEn manipulación y sociopatía
En manipulación y sociopatía
Javier Genero
 
mapping wilderness in Europe
mapping wilderness in Europemapping wilderness in Europe
mapping wilderness in Europe
Zoltan Kun
 
I - CIEF 2015
I - CIEF 2015I - CIEF 2015
I - CIEF 2015
juliaca
 
Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...
Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...
Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...MaharashtraANiS
 
Lesiones musculares
Lesiones muscularesLesiones musculares
Lesiones musculares
yesesv
 

Viewers also liked (20)

Avedas orcid outreach_meeting_20130523
Avedas orcid outreach_meeting_20130523Avedas orcid outreach_meeting_20130523
Avedas orcid outreach_meeting_20130523
 
30 receitas com_creme_de_leite
30 receitas com_creme_de_leite30 receitas com_creme_de_leite
30 receitas com_creme_de_leite
 
Trabajo de que es un administrador de red
Trabajo de que es un administrador de redTrabajo de que es un administrador de red
Trabajo de que es un administrador de red
 
Allplan Engineering 2016
Allplan Engineering 2016Allplan Engineering 2016
Allplan Engineering 2016
 
S.t.a.r. interveiwing 5 7-12 email copy
S.t.a.r. interveiwing 5 7-12 email copyS.t.a.r. interveiwing 5 7-12 email copy
S.t.a.r. interveiwing 5 7-12 email copy
 
Code lyoko
Code lyokoCode lyoko
Code lyoko
 
Carrington
CarringtonCarrington
Carrington
 
Cv Jo Devisch 2010 Event Coordinator
Cv Jo Devisch 2010 Event CoordinatorCv Jo Devisch 2010 Event Coordinator
Cv Jo Devisch 2010 Event Coordinator
 
CURRICULLUM VITAE ernest
CURRICULLUM VITAE ernestCURRICULLUM VITAE ernest
CURRICULLUM VITAE ernest
 
Niveles de servicio y el soporte que ofrece el CENAM
Niveles de servicio y el soporte que ofrece el CENAMNiveles de servicio y el soporte que ofrece el CENAM
Niveles de servicio y el soporte que ofrece el CENAM
 
02 folleto seibag 2012
02 folleto seibag 201202 folleto seibag 2012
02 folleto seibag 2012
 
Sistema financiero
Sistema financieroSistema financiero
Sistema financiero
 
Presentación merkint
Presentación merkintPresentación merkint
Presentación merkint
 
Catalohue Montre Maserati 2014
Catalohue Montre Maserati 2014Catalohue Montre Maserati 2014
Catalohue Montre Maserati 2014
 
Symfony2 revealed
Symfony2 revealedSymfony2 revealed
Symfony2 revealed
 
En manipulación y sociopatía
En manipulación y sociopatíaEn manipulación y sociopatía
En manipulación y sociopatía
 
mapping wilderness in Europe
mapping wilderness in Europemapping wilderness in Europe
mapping wilderness in Europe
 
I - CIEF 2015
I - CIEF 2015I - CIEF 2015
I - CIEF 2015
 
Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...
Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...
Andhashraddha Nirmoolan Samiti Newsletter for September 2011 (VastuShastra Sp...
 
Lesiones musculares
Lesiones muscularesLesiones musculares
Lesiones musculares
 

Building a Drupal 8 theme with new-fangled awesomeness

  • 1. B u i l d i n g a D r u p a l 8 T h e m e w i t h n e w - fa n gl e d a w e s o m e n e s s
  • 2. M a rc D r u m m o n d ( & I z z y ) @ M a rc 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 rgm a rc d r u m m o n d . c o m
  • 3. 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
  • 4. S u r p r i s e ! T h e re a re n e w t h i n g s i n D r u p a l 8 ( a n d f ro 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
  • 5. – 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
  • 6. A re 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 • We 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 • We 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 • re q u i re . j s • C o ff 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 re . 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 re 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 re 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 ro 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 ro w s e r S t a c k • Wr a i t h • P a g e re 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 .
  • 7. 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
  • 8. I s t h a t yo 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 ff , F l i c k r
  • 9. – D r u p a l t h e m e f i l e s “All your YML and PHP belongs to us.”
  • 10. T h e m e f i l e s T 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 !
  • 11. T H E M E . i n f o . y m l T 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
  • 12. T H E M E . i n f o . y m l T 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 re : 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 re 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
  • 13. T H E M E . i n f o . y m l T 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 re : 8 . x re 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 re a k p o i n t s : n a r ro w : n a m e : n a r ro w l a b e l : n a r ro 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
  • 14. t h e m e - s e t t i n g s . p h p T 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 ff e y, F l i c k r
  • 15. t h e m e - s e t t i n g s . p h p T 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 re 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 ) ;
  • 16. t h e m e - s e t t i n g s . p h p T 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 re u s i n g < a h re f = " ! l i n k " t a rg 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 re . ' , 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 re f = " ! l i n k " t a rg 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 ' ) ) , ) ; ! }
  • 17. T H E M E . s e t t i n g s . y m l S 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 ro s k y, F l i c k r
  • 18. T H E M E . s e t t i n g s . y m l S 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
  • 19. T H E M E . s c h e m a . y m l S 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
  • 20. T H E M E . s c h e m a . y m l S 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 '
  • 21. o t h e r. s t u ff . y m l T 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
  • 22. o t h e r. s t u ff . y m l T 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 re 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 ro w - t h e m e . b a r t i k . w i d e s o u rc e : b a r t i k s o u rc 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
  • 23. 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 …
  • 24. 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
  • 25. T H E M E . t h e m e T h e m e f u n c t i o n s & p re p ro 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
  • 26. T H E M E . t h e m e T h e m e f u n c t i o n s & p re p ro c e s s < ? p h p ! / * * * I m p l e m e n t s h o o k _ p re p ro c e s s _ h t m l ( ) * / ! ! f u n c t i o n a t o m i c _ p re p ro 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 ' ) ; } }
  • 27. T E M P L AT E . 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 P h o t o b y S c o t t M o o re , F l i c k r
  • 28. 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 re 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 . t w i g
  • 29. 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 . re 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 re 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 e m 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 rc = ' / / 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 re 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 . re 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 " ) re 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 re n t N o d e . i n s e r t B e f o re ( 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 rc = " / / 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 % }
  • 30. 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 re 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 re f = " { { u r l } } " re 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 ff i x } } ! < / a r t i c l e >
  • 31. 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 ro m o t e d ? ' n o d e - - p ro 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 re v i e w ? ' n o d e — p re 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 re 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 re f = " { { u r l } } " re 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 ff i x } } ! < / a r t i c l e >
  • 32. 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 • We b c o m p o n e n t s • H A M L P s s t …
  • 33. C S S / J S a s s e t s M 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
  • 34. T H E M E . l i b r a r i e s . y m l M 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
  • 35. a t o m i c . l i b r a r i e s . y m l M 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
  • 36. A s s e t i c To 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
  • 37. J a v a S c r i p t a l l t h e t h i n g s N o t j u s t j Q u e r y a n y m o re
  • 38. J S t o o l s • M o d e r n i z r • U n d e r s c o re • C o ff e e S c r i p t
  • 39. 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 VC f o r Ja v a s c r i p t )
  • 40. 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 • re q u i re . j s • c u r l . j s
  • 41. C S S f o r f u n a n d p ro f i t S a s s , C o m p a s s a n d m o re P h o t o b y I s m a e l C e l i s , F l i c k r
  • 42. c o n f i g . r b C 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
  • 43. c o n f i g . r b C o m p a s s c o n f i g u r a t i o n # R e q u i re 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 re . re q u i re ' 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 ' re q u i re ' c o m p a s s - n o r m a l i z e ' re q u i re ' t o o l k i t ' re q u i re ' b re a k p o i n t ' re q u i re ' s u s y ' re q u i re ' m o d u l a r- s c a l e ' re q u i re ' c o l o r- s c h e m e r ' re q u i re ' 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 ro n m e n t i s n o t s e t . s a v e d = e n v i ro n m e n t i f ( e n v i ro n m e n t . n i l ? ) e n v i ro n m e n t = : d e v e l o p m e n t e l s e e n v i ro 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 re 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 re s a s s = ( e n v i ro 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 !
  • 44. c o n f i g . r b C 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 re s o u rc 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 ro 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 re s s e d re 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 ro 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 ro n m e n t = = : d e v e l o p m e n t & & f i re s a s s = = t r u e ) ? { : d e b u g _ i n f o = > t r u e } : { }
  • 45. C S S A rc h i t e c t u re • O O C S S • B E M • S M A C S S
  • 46. C S S A rc h i t e c t u re / * * * P ro g re s s B a r c o m p o n e n t * / . p ro g re s s { } . p ro g re s s _ _ t r a c k { } . p ro g re s s _ _ b a r { } . p ro g re s s _ _ d e s c r i p t i o n { } . p ro g re s s _ _ c a n c e l { } . p ro g re s s _ _ c a n c e l : f o c u s , . p ro g re s s _ _ c a n c e l : h o v e r { } / * * * P ro g re s s B a r s m a l l v a r i a n t * / . p ro g re s s - - s m a l l . p ro g re s s _ _ t r a c k { } . p ro g re s s - - s m a l l . p ro g re s s _ _ b a r { } . p ro g re s s - - s m a l l . p ro g re s s _ _ c a n c e l { }
  • 47. 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 • We b S t a r t e r K i t
  • 48. 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
  • 49. S a s s y G e m s • B re 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
  • 50. L e t ’s t a l k t o o l s B u t w a i t , t h e re ’s m o re ! P h o t o b y O Z i n O H , F l i c k r
  • 51. To o l s y o u p ro 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. )
  • 52. 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
  • 53. C o m p o s e r • c o m p o s e r. j s o n P H P
  • 54. { " 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 rc 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 re " , " l i c e n s e " : " G P L - 2 . 0 + " , " re q u i re " : { " 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 / ro 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
  • 55. 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 / ro u t i n g " : " 1 . 1 . * @ a l p h a " , " e a s y rd f / e a s y rd 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 re " : " c o re / l i b / D r u p a l / C o re " , " D r u p a l C o m p o n e n t " : " c o re / 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 re / l i b / D r u p a l . p h p " ] } , c o m p o s e r. j s o n
  • 56. B o w e r • b o w e r. j s o n F ro n t - e n d
  • 57. { " n a m e " : " a t o m i c " , " v e r s i o n " : " 0 . 0 . 0 " , " i g n o re " : [ " * * / . * " , " 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
  • 58. n p m • p a c k a g e . j s o n N o d e
  • 59. { " 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
  • 60. R u b y e n v i ro 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
  • 61. s o u rc e ' h t t p : / / r u b y g e m s . o rg ' ! g e m ' s a s s ' , ' ~ > 3 . 3 . 0 ' g e m ' b re 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
  • 62. D e v e n v i ro n m e n t t o o l s S 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
  • 63. D e v e n v i ro n m e n t t o o l s • M A M P / WA 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 re 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
  • 64. Ye o m a n S c a ff 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
  • 65. Ta s k r u n n e r s M 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
  • 66. 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
  • 67. F u n w i t h t a s k s W 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
  • 68. 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 re f i x e r
  • 69. 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
  • 70. ' u s e s t r i c t ' ; ! v a r g u l p = re q u i re ( ' g u l p ' ) ; v a r j s h i n t = re q u i re ( ' g u l p - j s h i n t ' ) ; v a r s t y l i s h = re q u i re ( ' j s h i n t - s t y l i s h ' ) ; v a r p a t h s = re q u i re ( ' c o m p a s s - o p t i o n s ' ) . p a t h s ( ) ; v a r b ro w s e r S y n c = re q u i re ( ' b ro w s e r- s y n c ' ) ; v a r s h e l l = re q u i re ( ' 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 ( ) { re t u r n g u l p . s rc ( [ 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 . re p o r t e r ( s t y l i s h ) ) } ) ; ! g u l p f i l e . j s
  • 71. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / 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 ( ) { re t u r n g u l p . s rc ( 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
  • 72. / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / B ro w s e r S y n c Ta s k / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / g u l p . t a s k ( ' b ro w s e r S y n c ' , f u n c t i o n ( ) { b ro 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 ro 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
  • 73. P ro t o t y p i n g t o o l s B u i l d i n g i n t h e b ro 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
  • 74. 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 ro 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 ro 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
  • 75. Te s t i n g & D e p l o y m e n t To o l s f o r m a k i n g s u re y o u r s i t e w o r k s b e f o re 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
  • 76. C ro s s - b ro w s e r t e s t i n g • B ro w s e r S t a c k S c re e n s h o t t o o l s • Wr a i t h • P a g e re s H e a d l e s s b ro w s e r s • P h a n t o m J S • S l i m e r J S
  • 77. 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 re g re 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
  • 78. W h y d o y o u v e x m e s o ? A re y o u i n s a n e ? A m I i n s a n e ? A re 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
  • 79. 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 ro r s , i m p ro 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
  • 80. C o p i n g w i t h m a d n e s s I ’ m s c a re d . H o l d m e .
  • 81. 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 ro j e c t . • N e x t p ro 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 .
  • 82. P h o t o b y E r i k M e l d r u m , F l i c k r
  • 83. P h o t o b y L a u r a , F l i c k r
  • 84. 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
  • 85. M a rc D r u m m o n d ( & I z z y ) @ M a rc 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 rgm a rc d r u m m o n d . c o m