24ways-2014

8/9/2019 24ways-2014

1/325

8/9/2019 24ways-2014

2/325

C

24 ways is the advent calendar for webgeeks. For twenty-four days each Decemberwe publish a daily dose of web design and

development goodness to bring you all alittle Christmas cheer.

24 > J IFL>K KF PFL P *

8/9/2019 24ways-2014

3/325

2014

The web turned twenty-five and showed nosign of settling down in semi-detachedsuburbia. In October, HTML5 was released asa W3C Recommendation. Back in May, 24ways was very excited and grateful to winthe net award for best collaborative project a huge thank you to all our authors,readers and supporters!

K K

8/9/2019 24ways-2014

4/325

'> K< "I CFKIJK C

8/9/2019 24ways-2014

5/325

DI

8/9/2019 24ways-2014

6/325

KYJ 2015 V PFLI F MFM

8/9/2019 24ways-2014

7/325

Dont work on a live server this feels like one

of those gear-changing moments for adevelopers growth. Build something that

works just as well locally on your own machine

as it does on a live server, and capture the

differences in the code between the local and

live version in a single config file. Ultimately, if

you can get all the differences betweenenvironments down to a config level then

youll be in a really good position to automate

the deployment process at some point in the

future.

APK> KK I

8/9/2019 24ways-2014

8/325

B

8/9/2019 24ways-2014

9/325

Graduating from being the sole architect of

your codebase to contributing to a sharedcodebase is a huge leap for a developer.

Perhaps a practical way for people who tend to

work on their own to do that would be to

submit a pull request or a patch to an open

source project or plugin.

F= C

8/9/2019 24ways-2014

10/325

Ive been hammering that home to every client

Ive had this year. Its amazing how manycompanies dont really have a formal build/

deployment process in place. So many issues

on the web (performance, accessibility, etc.)

can be greatly improved just by having a layer

of automation involved.

For example, graphic editing software spits out

ridiculously bloated images. Very frequently,

thats what ends up getting put on a site. If you

have a build process, you can have the

compression automated and start seeing

immediate gains for no effort. On a recent

project, they were able to shave around 1.5MB

from their site weight simply by automating

compression.

< PFL M< PFLI F< JFLI< FKIF, JF< F= KK

LKFKF < <

8/9/2019 24ways-2014

11/325

< >I

8/9/2019 24ways-2014

12/325

BI"D *E#, $%* I*E

< > K KJ P

N

8/9/2019 24ways-2014

13/325

Consider adding on a style guide/UI library to

your project as a deliverable for maintainabilityand thinking through all UI elements and

components.

< H >I

8/9/2019 24ways-2014

14/325

< ML< F= K NK I

8/9/2019 24ways-2014

15/325

FP I

8/9/2019 24ways-2014

16/325

Weve recently opened up our lines of

communication by using Slack. It hastransformed the way we work. Were easily

more productive and collaborative on projects,

as well as making it a lot easier for us all to

work remotely (including freelancers).

< >F GGIF F= ZJ

K

8/9/2019 24ways-2014

17/325

Always reflect on what went well and what

went badly, and how you can learn from that,even if not Doing Agile. Ultimately best

practices should come from learning lessons

(both good and bad).

JK NFI>

JFKF =IF K< :

Avoid big reveals. Your engagement with the

client should be participatory. In business no

one likes surprises.

J

8/9/2019 24ways-2014

18/325

BLK F

8/9/2019 24ways-2014

19/325

If something doesnt work out, be professional

and dont burn bridges. It will always comeback to you.

<

8/9/2019 24ways-2014

20/325

"M> FKIK J F< K>, LK F

8/9/2019 24ways-2014

21/325

*I#E *% EIE

KYJ FK KF K< . F< F= K

8/9/2019 24ways-2014

22/325

AB%* *HE A*H%

DI

8/9/2019 24ways-2014

23/325

E $< /201402

2. D E> > G

The stockings were hung by the chimneywith care,In hopes that version control soon would bethere.

J JL

8/9/2019 24ways-2014

24/325

FJ KF F< FN K<

8/9/2019 24ways-2014

25/325

= PFLYM< >FK

8/9/2019 24ways-2014

26/325

$ git stash

A=K KJ F, LFKK

8/9/2019 24ways-2014

27/325

FL J> LP JP, XP.

8/9/2019 24ways-2014

28/325

J> K< log F, FK< K< LHL<

8/9/2019 24ways-2014

29/325

NFIJ, PFLYI< LII K K< < F= JKFIP (FI

I) FLK NK GG

8/9/2019 24ways-2014

30/325

$ git branch saved-headless-commits 7a85788

K KJ KI L

8/9/2019 24ways-2014

31/325

AI$G * %$E C%##I*

AFLK KK FN F= LKJ. = PFLYI< <

8/9/2019 24ways-2014

32/325

AK KJ GFK PFL >K

8/9/2019 24ways-2014

33/325

$ git checkout waiting-for-st-nicholas

$ git stash pop

FLI NFI> I

8/9/2019 24ways-2014

34/325

AB%* *HE A*H%

E $<

8/9/2019 24ways-2014

35/325

$ I 24NPJ.FI>/201403

3. @ #

8/9/2019 24ways-2014

36/325

=LP, K< F= FL< JPJK >L>< KK J JKIJ

8/9/2019 24ways-2014

37/325

*HE E6 #%D"E &EC

< E6 FL< JG

8/9/2019 24ways-2014

38/325

AFK KF FK< J KK N

8/9/2019 24ways-2014

39/325

A>, LIP I

8/9/2019 24ways-2014

40/325

K KJ GGIF PFL YK

8/9/2019 24ways-2014

41/325

< FM< J

8/9/2019 24ways-2014

42/325

8/9/2019 24ways-2014

43/325

E6 @

8/9/2019 24ways-2014

44/325

AFK

8/9/2019 24ways-2014

45/325

A PFL

8/9/2019 24ways-2014

46/325

C%$C"I%$

E6 FL

8/9/2019 24ways-2014

47/325

EC'AIGK 6 FL

8/9/2019 24ways-2014

48/325

AB%* *HE A*H%

$ I J

8/9/2019 24ways-2014

49/325

8/9/2019 24ways-2014

50/325

FMFLJ KF PFL PFL IJ FLKK< GIF

8/9/2019 24ways-2014

51/325

B>

8/9/2019 24ways-2014

52/325

*HE *%%" CHAI$

K< I

8/9/2019 24ways-2014

53/325

A @

< PFL M< PFLI ^

8/9/2019 24ways-2014

54/325

YM< JK

8/9/2019 24ways-2014

55/325

> git config --global user.email "YOUR EMAIL ADDRESS"

KP> K< F < KF K< I

8/9/2019 24ways-2014

56/325

K KF FN FI< FLK K?

8/9/2019 24ways-2014

57/325

8/9/2019 24ways-2014

58/325

> git clone https://[email protected]/myname/

24ways-tutorial.git

FL K

8/9/2019 24ways-2014

59/325

M< K< J

8/9/2019 24ways-2014

60/325

% $E &%CEDE *E& B *E&

1. EK PFLI ^

8/9/2019 24ways-2014

61/325

JLF V

8/9/2019 24ways-2014

62/325

EM>

.

F >

< KLKFIJ =IF K C

8/9/2019 24ways-2014

63/325

AB%* *HE A*H%

< A> J DI

8/9/2019 24ways-2014

64/325

DII >

8/9/2019 24ways-2014

65/325

8/9/2019 24ways-2014

66/325

If youre a designerdesigner, Vagrant will automatically

set everything up that is required for that webapp in order for you to focus on doing what you

do best: design. Once a developer configures

Vagrant, you dont need to worry about how to

get that app running ever again. No more

bothering other developers to help you fix your

environment so you can test designs. Justcheck out the code, vagrant up, and start

designing.

< Y FK JLI< >II

8/9/2019 24ways-2014

67/325

= PFLYI< K N

8/9/2019 24ways-2014

68/325

< LJ

8/9/2019 24ways-2014

69/325

K< JPJK, N

8/9/2019 24ways-2014

70/325

%, G%* I*. H% #E A"EAD

= PFL NK KF KIP KJ FLK PFLY FNJ < JLI< KF IL K< F

GIFGK J AJKIKFI FI KY = FM

8/9/2019 24ways-2014

71/325

J KK PFL IK:

1. >IK GJK> YM< JLGG

8/9/2019 24ways-2014

72/325

< >IK ^< KIK FN KF F^>LI< K< MIKL

INI< F= PFLI

8/9/2019 24ways-2014

73/325

J JG

8/9/2019 24ways-2014

74/325

$ vagrant up

FL JFL FN >

8/9/2019 24ways-2014

75/325

= PFL K< FF K PFLI F ^

8/9/2019 24ways-2014

76/325

-rw-r--r--@ 1 bealers staff 1661 9 Nov 09:41

Vagrantfile

-rwxr-xr-x@ 1 bealers staff 3836 9 Nov 10:06

provision.sh

< =F

8/9/2019 24ways-2014

77/325

0 updates are security updates.

vagrant@bealers-24ways:~$

FLYI< FN F>>IK LJ

8/9/2019 24ways-2014

78/325

drwxr-xr-x 1 www-data www-data 170 Nov 9 10:03

vagrant

-rwxr-xr-x 1 www-data www-data 1315849 Nov 9 10:06

wp-cli

< JF J /var/www/24ways/etc/

bealers-24ways.dev.conf

= PFL NK KF

8/9/2019 24ways-2014

79/325

$ vagrant halt

==> www: Attempting graceful shutdown of VM...

==> www: Removing hosts

B%$ "EE"

< KF JLGGP GJJNFI JF K< FJKJ ^< KJ:

$ sudo visudo

What Is Vagrant and Why Should I Care?

24 ways 2014 edition 79
http://www.ansible.com/homehttp://puppetlabs.com/https://www.getchef.com/chef/http://www.yaml.org/http://www.yaml.org/https://www.getchef.com/chef/http://puppetlabs.com/http://www.ansible.com/home

8/9/2019 24ways-2014

80/325

A K

8/9/2019 24ways-2014

81/325

P, K< FLK F= I

8/9/2019 24ways-2014

82/325

AB%* *HE A*H%

DII

8/9/2019 24ways-2014

83/325

CIFP FF 24NPJ.FI>/201406

6. D>L & * &>

In 2004, I lost my web career. In a singleday, it was gone. I was in too much pain touse a keyboard, a Wacom tablet (I couldnteven click the pen), or a trackball. Switchingmy mouse to use my left (non-dominant)hand only helped a bit; then that hand went,too. I tried all the easy-to-find equipmentout there, except for expensive gizmos withfoot pedals. I had tingling in myfingerswhich, when I was away from thecomputer, would rhythmically move as ifsome other being controlled them. I worriedabout Parkinsons because the movementswere so dramatic. Pen on paper was painful.Finally, I discovered one day that I couldnteven turn a doorknob.

Dont Push Through the Pain

http://24ways.org/201406http://24ways.org/201406

8/9/2019 24ways-2014

84/325

< FP >>K NJ KK FLYK LJK, JIL, FI

MLL. < N

8/9/2019 24ways-2014

85/325

LK K< FGP J>J FI K< F< J LK>

8/9/2019 24ways-2014

86/325

BLK N P NFI? $N LKK>

=FINI KF J

8/9/2019 24ways-2014

87/325

JKPJ K

8/9/2019 24ways-2014

88/325

H% *% CA" BAC

B

8/9/2019 24ways-2014

89/325

2. C> @>

FL P

8/9/2019 24ways-2014

90/325

J< GFJKF. FLI =FI

8/9/2019 24ways-2014

91/325

M< I

K NJ P JMKF. KYJ

8/9/2019 24ways-2014

92/325

LJK LJ< KJ =FI IFNJ> KJ FI IP P

8/9/2019 24ways-2014

93/325

KF LJ< FI FKI: A %-C

# P IF $. BLK

8/9/2019 24ways-2014

94/325

LI

8/9/2019 24ways-2014

95/325

LKK, GIFP F>

8/9/2019 24ways-2014

96/325

KPG< F= JF=KNI< J GIFM

8/9/2019 24ways-2014

97/325

JNK> =FIK

8/9/2019 24ways-2014

98/325

< FF>IJ -I, LK LK ^>

8/9/2019 24ways-2014

99/325

AB%* *HE A*H%

CIFP FF J NIK

8/9/2019 24ways-2014

100/325

P<

8/9/2019 24ways-2014

101/325

C>> K< NP N< F JF KK J

8/9/2019 24ways-2014

102/325

FK

8/9/2019 24ways-2014

103/325

F JKK KFF FNJ PFL KF F KJ, M>

JF

8/9/2019 24ways-2014

104/325

D

8/9/2019 24ways-2014

105/325

JJ

8/9/2019 24ways-2014

106/325

IJK PFL

8/9/2019 24ways-2014

107/325

FN K

< IFJJ ==

8/9/2019 24ways-2014

108/325

AB%* *HE A*H%

P<

8/9/2019 24ways-2014

109/325

$FJ E/201408

8. C&, &> > F

*HEEBI*E %F CHI*#A &A*

The first website was created at CERN. It waslaunched on 20 December 1990 (just in time

for Christmas!), and it still works today,after twenty-four years. Isnt thatincredible?!

P F

8/9/2019 24ways-2014

110/325

D

8/9/2019 24ways-2014

111/325

D>

2003, K< ^IJK J>< G>< K #@>, @>

8/9/2019 24ways-2014

135/325

FI K< N KF

LJ< GGIF KK N< =M<

8/9/2019 24ways-2014

136/325

8/9/2019 24ways-2014

137/325

A responsible responsive design equally

considers the following throughout a project:

JKP: < NP N

8/9/2019 24ways-2014

138/325

*HE &%E %F *HE EB

< FN KK L

8/9/2019 24ways-2014

139/325

< M

8/9/2019 24ways-2014

140/325

KJ K IL, JF< JJ

8/9/2019 24ways-2014

141/325

KI F

8/9/2019 24ways-2014

142/325

I$&*

AK

8/9/2019 24ways-2014

143/325

M<

8/9/2019 24ways-2014

144/325

If you are blind, Light Detector helps you to be

more independent in many daily activities. Athome, point your iPhone towards the ceiling to

understand where the light fixtures are and

whether they are switched on. In a room, move

the device along the wall to check if there is a

window and where it is. You can find out

whether the shades are drawn by moving thedevice up and down.

?>./;;>/???

GLK < FLK JF L FI< K NK N<

8/9/2019 24ways-2014

145/325

8/9/2019 24ways-2014

146/325

GFIKK K> KF I

8/9/2019 24ways-2014

147/325

AB%* *HE A*H%

P $

8/9/2019 24ways-2014

148/325

FL ^ FLK FI< FLK PYJ NFI K

JP

8/9/2019 24ways-2014

149/325

< "LJF 24NPJ.FI>/201411

11. &> D> > #@

The web can leave us feeling quite detachedfrom the real world. Every site we make isreally just a set of abstract conceptsmanifested as tools for communication andexpression. At any minute, websites candisappear, overwritten by a newfangledversion or simply gone. I think this is whyso many of us have desires to create aproduct, write a book, or play with theinternet of things. We need to keep in touchwith the physical world and to prove (if onlyto ourselves) that we do make real things.

FL >F F F FLK GI

8/9/2019 24ways-2014

150/325

A map does not just chart, it unlocks and

formulates meaning; it forms bridges betweenhere and there, between disparate ideas that

we did not know were previously connected.

$ >, & %? > &.%. %;?

< JG

8/9/2019 24ways-2014

151/325

K

K

8/9/2019 24ways-2014

152/325

CFGIJF F= FF>< 'GJ (KFG) K< I< LIM

8/9/2019 24ways-2014

153/325

YM< FK F< P I

8/9/2019 24ways-2014

154/325

AJ YM< I

8/9/2019 24ways-2014

155/325

K< >

8/9/2019 24ways-2014

156/325

CFIFG I $>, ?; (18931968)

8/9/2019 24ways-2014

157/325

>

8/9/2019 24ways-2014

158/325

< FK

8/9/2019 24ways-2014

159/325

G. AJ N ', K F< (K<

8/9/2019 24ways-2014

160/325

#A&B%

AJ =I

8/9/2019 24ways-2014

161/325

G

8/9/2019 24ways-2014

162/325

KF MJLJ< (JL J I IKJ F K< KL G JK

8/9/2019 24ways-2014

163/325

AB%* *HE A*H%

D

8/9/2019 24ways-2014

164/325

CI< */201412

12. I A?

I once sat in a pitch meeting and watched anew business exec tell a potential client thathis agency followed an agile workflowprocess at all times. The potential clientnodded wisely, and they both agreed thatagile was indeed the way to go.

< I

8/9/2019 24ways-2014

165/325

AJ

8/9/2019 24ways-2014

166/325

F >P K

8/9/2019 24ways-2014

167/325

N K< JKFI

8/9/2019 24ways-2014

168/325

GI

8/9/2019 24ways-2014

169/325

For me, the Agile approach is really about

acknowledging that disturbing truth that everyproject manager knows, but has trouble

admitting. The truth that the project plan is

wrong. Scope creep. Change orders. Shifting

priorities. New directions. We act shocked and

appalled when those things happen during our

carefully planned project, even though theyhappen on every project ever.

L

8/9/2019 24ways-2014

170/325

3. FEA %F $C%$*%""ED C%*

< FN KK F> J =FI =

8/9/2019 24ways-2014

171/325

KYJ I FK KF =

8/9/2019 24ways-2014

172/325

FF GK=J.

8/9/2019 24ways-2014

173/325

C%$C"I%$

F NF =IF

8/9/2019 24ways-2014

174/325

AB%* *HE A*H%

CI< *

8/9/2019 24ways-2014

175/325

P < %>L#>

ZK

8/9/2019 24ways-2014

176/325

> JF< J>K KF NK >F

8/9/2019 24ways-2014

177/325

J J FK K< J< K> J JP FI FF

K< K

8/9/2019 24ways-2014

178/325

>P ML

8/9/2019 24ways-2014

179/325

8/9/2019 24ways-2014

180/325

8/9/2019 24ways-2014

181/325

JJIFFJ, F

8/9/2019 24ways-2014

182/325

8/9/2019 24ways-2014

183/325

8/9/2019 24ways-2014

184/325

FM< NJ NK K KK M< F G< F J

8/9/2019 24ways-2014

185/325

8/9/2019 24ways-2014

186/325

JG F= K< KN

8/9/2019 24ways-2014

187/325

K=L, K<

8/9/2019 24ways-2014

188/325

= KF F

8/9/2019 24ways-2014

189/325

AJJL> N< M< KNF >FF I

8/9/2019 24ways-2014

190/325

FIKLK

8/9/2019 24ways-2014

191/325

AB%* *HE A*H%

< $ J K

8/9/2019 24ways-2014

192/325

DM< CFJ 24NPJ.FI>/201415

15. E% > 2015 (>

8/9/2019 24ways-2014

193/325

F NP JFL PFL I< FLK E KF F K

PNP?

< I

8/9/2019 24ways-2014

194/325

FG

8/9/2019 24ways-2014

195/325

8/9/2019 24ways-2014

196/325

6. C K< KK< FNNIJ IIFN KF K< I>K F= K< A I< FFJ< , JF KK N K K< FI> KI=^ F KJ FN.

7. C F IG J

8/9/2019 24ways-2014

197/325

MJ< PFL KF FF KF K< H*#" I@>, C H*#"

JK K< < K< FL

8/9/2019 24ways-2014

214/325

8/9/2019 24ways-2014

215/325

GG, JK. BFK KFFJ >

8/9/2019 24ways-2014

216/325

ILGF >

8/9/2019 24ways-2014

217/325

8/9/2019 24ways-2014

218/325

J K

8/9/2019 24ways-2014

219/325

F KF JG

8/9/2019 24ways-2014

220/325

I FLI FJ.

FN, JLGGFJ< PFL NK KF JGP FP K< JK>I

F. J> K< viewBox KKILKI F J GFJKF K< GFJKM< O-OJ, Q

8/9/2019 24ways-2014

221/325

I

8/9/2019 24ways-2014

222/325

F > >N. I>

8/9/2019 24ways-2014

223/325

<

8/9/2019 24ways-2014

224/325

< KI K YJ LK- viewBox =

8/9/2019 24ways-2014

225/325

AB%* *HE A*H%

I J =I

8/9/2019 24ways-2014

226/325

FG< D/201417

17. C>> &>&>>

While everyone agrees that getting thecontent of a website right is vital to itssuccess, unless youre lucky enough to havean experienced editor or content strategiston board, planning content production oftenseems to fall through the cracks. One reason

is that, for most of the team, it feels likesomeone elses problem. Not necessarily aspecific persons problem. Just someoneelses. Its only when everyone startsurgently asking when the content is going tobe ready, that it becomes clear the answer

is, Not as soon as wed like it.

< >FF

8/9/2019 24ways-2014

227/325

1. K FK

8/9/2019 24ways-2014

228/325

8/9/2019 24ways-2014

229/325

P N< M@;;? @?> = 63

>@;;? @?>

Content Production Planning


8/9/2019 24ways-2014

230/325

93 ;>

L

8/9/2019 24ways-2014

231/325

*HE G%A" I *HE C%$EA*I%$

BP I FN K< JK< KF KJ FK

8/9/2019 24ways-2014

232/325

F< LI< K< FM

8/9/2019 24ways-2014

233/325

< 24 NPJ J

8/9/2019 24ways-2014

234/325

GLJ>. FL

8/9/2019 24ways-2014

235/325

#

(;>

)

(

@)

E

(

)

C KF NFI_FN > K< NF>IG< NJ NK K< KK>

8/9/2019 24ways-2014

245/325

N

8/9/2019 24ways-2014

246/325

NJ NIF>. A >ILP < KF FN NJ NIF>.

A

8/9/2019 24ways-2014

247/325

< >, J K< L FK-F GJK, N< J

8/9/2019 24ways-2014

248/325

J K< =FL

8/9/2019 24ways-2014

249/325

$ BFKF 24NPJ.FI>/201419

19. %@>

Lets be honest. Most designers dont likeworking for nothing. We rally against specworkand make a stand for contracts andgetting paid. Thats totally what you shoulddo as a professional designer in theindustry. Its your job. Its your hard-working skill. Its your bread and butter. Getpaid.

"FN KF < J< =FI NP PFL FL JF

FJ =FI FG

8/9/2019 24ways-2014

250/325

>> F> KJ KPG< F= NFI, FI PFLYM<

8/9/2019 24ways-2014

251/325

II

8/9/2019 24ways-2014

252/325

K

8/9/2019 24ways-2014

253/325

H% *% GE* *A*ED

F I< PFL JKF KF K< FGIK >

8/9/2019 24ways-2014

254/325

KF FG

8/9/2019 24ways-2014

255/325

AB%* *HE A*H%

$ BFKF J

8/9/2019 24ways-2014

256/325

8/9/2019 24ways-2014

257/325

< JLJJ

8/9/2019 24ways-2014

258/325

< L>< NP N< L KK KILJK GIFM

8/9/2019 24ways-2014

260/325

*I> FKJ N

8/9/2019 24ways-2014

261/325

I$E*I$G I$ EG"A" CHED"ED

"EA$I$G-CE$*EED #EE*I$GAK C

8/9/2019 24ways-2014

262/325

5. K J K< FJK GFIKK K>

8/9/2019 24ways-2014

263/325

BP JI> FLI ML JN

8/9/2019 24ways-2014

264/325

F L K

8/9/2019 24ways-2014

265/325

'P I

8/9/2019 24ways-2014

266/325

= I

8/9/2019 24ways-2014

267/325

I didnt know how to make a school before we

started to make Center Centre.

I didnt know how to manage an entire team of

peopleday in and day outuntil I started

managing a team of people every day.

When I realized that I was the bossand that

the success of the school would hinge, at leastin part, on my skills as a managerI was a bit

terrified. I was missing an important skill set

that I needed to know (and I needed to know

well).

When I first understood this, I felt badlike I

should have already known how to be a great

manager. But then I realized, Id never faced

this situation. Id never needed to know how to

use this skill set in this way.

I worked through my anxiety about feeling

inadequate. I decided Id better learn how to bean effective manager because the school

needed me to be one. You needed me to be one.

Every day, I work to improve my management

skills. Youve probably noticed that some days

Im better at it than others. I try not to beat

myself up about this, although its hardId

like to be perfect at it. But Im not.

Meet for Learning


8/9/2019 24ways-2014

268/325

I know that if I make a conscious, daily effort to

learn how to be a better manager, Ill continueto improve. So thats what I do.

Every day I learn. I learn by doing. I learn how

to be better than I was the day before. Thats

what I ask of you.

< N<

8/9/2019 24ways-2014

269/325

8/9/2019 24ways-2014

270/325

FI

8/9/2019 24ways-2014

271/325

P . KYJ FG P NIK> . KYJ FN> P

NFIJ KF _FN FI< =I

8/9/2019 24ways-2014

272/325

*FKFJ P L

8/9/2019 24ways-2014

273/325

8/9/2019 24ways-2014

274/325

*L FP 24NPJ.FI>/201421

21. $> *>

There are only two hard things in

computer science: cache invalidation andnaming things.# K?

B GIF=

8/9/2019 24ways-2014

275/325

EM

8/9/2019 24ways-2014

276/325

8/9/2019 24ways-2014

277/325

The debate surrounding semantics has raged

for years, but it is important that we adopt amore pragmatic, sensible approach to naming

things in order to work more efficiently and

effectively. Instead of focussing on

semantics, look more closely at sensibility

and longevity choose names based on ease of

maintenance, not for their perceived meaning.

$A#I$G #E*H%D%"%GIE

IFK-

8/9/2019 24ways-2014

278/325

By separating rules into the five categories,

naming convention is beneficial forimmediately understanding which category a

particular style belongs to and its role within

the overall scope of the page. On large projects,

it is more likely to have styles broken up across

multiple files. In these cases, naming

convention also makes it easier to find whichfile a style belongs to.

I like to use a prefix to differentiate between

layout, state and module rules. For layout, I use

l- but layout- would work just as well. Using

prefixes like grid- also provide enough clarity

to separate layout styles from other styles. For

state rules, I like is- as in is-hidden or is-

collapsed. This helps describe things in a very

readable way.

'AC J FI< J>

=I

8/9/2019 24ways-2014

279/325

SUIT CSS relies on structured class namesand

meaningful hyphens(i.e., not using hyphensmerely to separate words). This helps to work

around the current limits of applying CSS to

the DOM (i.e., the lack of style encapsulation),

and to better communicate the relationships

between classes.

M

8/9/2019 24ways-2014

280/325

.sleigh__reindeerfamous J LJ J

8/9/2019 24ways-2014

281/325

>>

8/9/2019 24ways-2014

282/325

K

8/9/2019 24ways-2014

283/325

%

LK< F=K

8/9/2019 24ways-2014

284/325

I GFJKF F N< (FI JIKGF< GG, FI

K

8/9/2019 24ways-2014

285/325

= =FFN> K< BE' P, PFL >K LJ< K JJ

8/9/2019 24ways-2014

286/325

>K < GIF u-* =FI PFLI LKKP

JJ N I JPJKP.

(FK

8/9/2019 24ways-2014

287/325

< FGPI>K JKK

8/9/2019 24ways-2014

288/325

< J< J KIL< =FI I

8/9/2019 24ways-2014

289/325

AB%* *HE A*H%

&< "

8/9/2019 24ways-2014

290/325

/201422

22. I>> C>C; > ;O

Its nearly Christmas, which means youll besure to find an overload of festive red andgreen decorating everything in sightoftenin the ugliest ways possible.

< Y FK

8/9/2019 24ways-2014

291/325

J JLK

8/9/2019 24ways-2014

292/325

8/9/2019 24ways-2014

293/325

CH%%E EFFEC*IE C%"%

8/9/2019 24ways-2014

294/325

< II

8/9/2019 24ways-2014

295/325

C< > >

CFKIJK JF

8/9/2019 24ways-2014

296/325

DEE"%& C%"% C%$CE&*

A=K

8/9/2019 24ways-2014

297/325

KYJ GFIKK KF < FG

8/9/2019 24ways-2014

298/325

KK FYK FM

8/9/2019 24ways-2014

299/325

8/9/2019 24ways-2014

300/325

AJ PFL J

8/9/2019 24ways-2014

301/325

< JF

8/9/2019 24ways-2014

302/325

*LKK> FI< NFI KF > FGK FKIJK IKFJ

K KJ JK>< N < K< I

8/9/2019 24ways-2014

303/325

Integrating Contrast Checks in Your Web Workflow


8/9/2019 24ways-2014

304/325

$ A FI$A" C%$*A* CHEC

DLI> K< ^ JK>

8/9/2019 24ways-2014

305/325

*HE H#A$ *%CH

P, FK> FF IFL F= LJ

8/9/2019 24ways-2014

306/325

A

8/9/2019 24ways-2014

307/325

AB%* *HE A*H%

G C J FFLI-FJ

8/9/2019 24ways-2014

308/325

AI/201423

23. * > *

To bring her good luck, white rabbits was

the first thing that my grandmother said outloud on the first day of every month. We allneed a little luck, but we shouldnt rely on it,especially when it comes to attracting newclients.

< ^IJK K> N< JP KF GIFJG

8/9/2019 24ways-2014

309/325

KYJ

8/9/2019 24ways-2014

310/325

Y JLI< KK

8/9/2019 24ways-2014

311/325

'JKJ N I

8/9/2019 24ways-2014

312/325

N

8/9/2019 24ways-2014

313/325

KIK P NIK> JK F= KILJJ FLK PFLI FGP.

IK< J P J PFL , LK K

8/9/2019 24ways-2014

314/325

AB%* *HE A*H%

A> C

8/9/2019 24ways-2014

315/325

C[ GI

8/9/2019 24ways-2014

316/325

AGG< GIFFKF >< JFN> GF< I>>

JLK

8/9/2019 24ways-2014

317/325

<

8/9/2019 24ways-2014

318/325

< =FL D KF < F=LJ> K

8/9/2019 24ways-2014

319/325

I

8/9/2019 24ways-2014

320/325

8/9/2019 24ways-2014

321/325

AQFYJ

8/9/2019 24ways-2014

322/325

FYJ I

8/9/2019 24ways-2014

323/325

'

8/9/2019 24ways-2014

324/325

GI

8/9/2019 24ways-2014

325/325

$A*E I CA""I$G

KF K<

24ways-2014

Documents