hackermonthly-issue11
TRANSCRIPT
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 142
Issue 11 April 2011
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 242
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 342 3
ContentsFEATURES
04 The Git ParableBy TOM PRESTOn-WERnER
12 ($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+($$=($_=+$)[__]+$_[+$])])()[__[__]+__[_+~$]+$_[_]+$$](__)
By ADAM CECCHETTi
STARTUP
16 The Designer Who Learned Django and Launched Her First Web App in 6 WeeksBy TRACY OSBORn
20 What I Wish Someone Had Told Me About Startups 4 Years AgoBy AMiR KHELLA
SPECIAL
24 How to Train Your Brain to Flip to a New LanguageBy RuBEn BEREnGuEL
DESIGN
26 Rock Solid Website Layout ExamplesBy JOSHuA JOHnSOn
PROGRAMMING
34 Using Git to Manage a WebsiteBy ABHiJiT MEnOn-SEn
36 Combinatorial Applications o Spaceflling CurvesBy JOHn BARTHOLDi
39 DP Zoo TourBy EDWARD Z YAnG
41 HACKER JOBS
For links to the posts on Hacker News visit hackermonthlycomissue-11 All articles and comments are reprinted with permission o their original author
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4424 FEATURES
The Git Parable
Git is a smple
bt extremely
powerlsystem Most
people try to teach Gt by demo-
stratg a ew doze commads ad
the yellg ldquotadaaaaardquo i beleve ths
method s fawed Sch a treatmet
may leave yo wth the ablty to
se Gt to perorm smple tasks bt
the Gt commads wll stll eel lke
magcal catatos Dog aythg
ot o the ordary wll be terryg
utl yo derstad the coceptspo whch Gt s blt yorsquoll eel
lke a strager a oreg lad
The ollowg parable wll take
yo o a jorey throgh the
creato o a Gt-lke system rom
the grod p uderstadg the
cocepts preseted here wll be the
most valable thg yo ca do to
prepare yorsel t haress the ll
power o Gt The cocepts them-
selves are qte smple bt allow ora amazg wealth o ctoalty
to sprg to exstece Read ths
parable all the way throgh ad
yo shold have very lttle troble
masterg the varos Gt commads
ad weldg the awesome power
that Gt makes avalable to yo
By TOM PRESTOn-WERnER
FEATURES
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 542 5
The Parable
image that yo have a compter
that has othg o t bt a text
edtor ad a ew le system com-
mads now mage that yo have
decded to wrte a large sotware
program o ths system Becase
yorsquore a resposble sotware devel-
oper yo decde that yo eed to
vet some sort o method or keep-
g track o versos o yor sotware
so that yo ca retreve code that
yo prevosly chaged or deleted
What ollows s a story abot how
yo mght desg oe sch verso
cotrol system (VCS) ad the rea-
sog behd those desg choces
Snapshots
Alred s a red o yors that works
dow at the mall as a photographer
oe o those ldquoSpecal Mometsrdquo
photo botqes All day log he
takes photos o lttle kds posg
awkwardly rot o jgle or
ocea backdrops Drg oe o
yor reqet lches at the pretzel
stad Alred tells yo a story abot
a woma amed Hazel who brgs
her daghter or a portrat every
year o the same day ldquoShe brgs the
photos rom all the past years wth
herrdquo Alred tells yo ldquoShe lkes to
remember what her daghter was
lke at each deret stage as the
sapshots really let her move back
ad orth tme to those saved
memoresrdquo
Lke some sort o ormlac plot
devce Alredrsquos ocet statemet
acts as a catalyst or yo to see the
deal solto to yor verso cotrol
dlemma Sapshots lke save pots
a vdeo game are really what yo
care abot whe yo eed to teract
wth a VCS What yo cold take
sapshots o yor codebase at ay
tme ad resrrect that code o
demad Alred reads the dawg
realzato spreadg across yor ace
ad kows yorsquore abot to leave hm
wthot aother word to go back ad
mplemet whatever ges dea he
jst cased yo to have Yo do ot
dsappot hm
Yo start yor project a drec-
tory amed working As yo code
yo try to wrte oe eatre at a
tme Whe yo complete a sel-
cotaed porto o a eatre yo
make sre that all yor les are saved
ad the make a copy o the etre
workg drectory gvg t the ame
snapshot-0 Ater yo perorm ths
copy operato yo make sre to
ever aga chage the code les
the ew drectory Ater the ext
chk o work yo perorm aother
copy oly ths tme the ew drec-
tory gets the ame snapshot-1 ad
so o
To make t easy to remember what
chages yo made each sapshot
yo add a specal le amed
message to each sapshot drectorythat cotas a smmary o the work
that yo dd ad the date o comple-
to By prtg the cotets o each
message t becomes easy to d a
specc chage that yo made the
past case yo eed to resrrect
some old code
Branches
Ater a bt o tme o the project
a caddate or release begs to
emerge Late ghts at the keyboard
ally yeld snapshot-99 the ascet
orm o what wll become Release
Verso 10 it comes to pass that
ths sapshot s packaged ad
dstrbted to the eagerly awatg
masses Stoked by excellet respose
to yor sotware yo psh orward
determed to make the ext verso
a eve bgger sccess
Yor VCS has so ar bee a
athl compao Old versos o
yor code are there whe yo eed
them ad ca be accessed wth ease
Bt ot log ater the release bg
reports start to come nobodyrsquos
perect yo reassre yorsel ad
snapshot-99 s readly retrevable
glad to be broght back to le or
the prposes o applyg bg xes
Sce the release yorsquove cre-
ated 10 ew sapshots Ths ew
work mst ot be clded the
101 bg x verso yo ow eed
to create To solve ths yo copy
snapshot-99 to working so that
yor workg drectory s at exactly
the pot where Verso 10 was
released A ew swt les o code
ad the bg s xed the workg
drectoryit s here that a problem becomes
apparet The VCS deals very well
wth lear developmet bt or the
rst tme ever yo eed to create
a ew sapshot that s ot a drect
descedet o the precedg sap-
shot i yo create a snapshot-110
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 6426 FEATURES
(remember that yo created 10
sapshots sce the release) the
yorsquoll be terrptg the lear fow
ad wll have o way o determg
the acestry o ay gve sapshot
Clearly yo eed somethg more
powerl tha a lear system
Stdes show that eve short
exposres to atre ca help
recharge the mdrsquos creatve pote-
tal Yorsquove bee sttg behd
the artcally polarzed lght o
yor motor or days o ed A
walk throgh the woods the
brsk atm ar wll do yo some
goodad wth ay lck wll help
yo arrve at a deal solto to
yor problem
The great oaks that le the tral
have always appealed to yo They
seem to stad stark ad prod
agast the perectly ble sky Hal
the rddy leaves have departed rom
ther braches leavg a trcate
patter o braches ther wake
Fxatg o oe o the thosads o
brach tps yo dly try to ollow
t back to the soltary trk Ths
orgacally prodced strctre
allows or sch great complexty
bt the rles or dg yor way
back to the trk are so smple ad
perect or keepg track o mltple
les o developmet it trs ot that what they say abot atre ad
creatvty are tre
By lookg at yor code hstory as
a tree solvg the problem o aces-
try becomes trval All yo eed to
do s clde the ame o the paret
sapshot the message le yo
wrte or each sapshot Addg jst
a sgle pstream poter wll eable
yo to easly ad accrately trace the
hstory o ay gve sapshot all the
way back to the root
Branch Names
Yor code hstory s ow a tree
istead o havg a sgle latest
sapshot yo have two oe or each
brach Wth a lear system yor
seqetal mberg system let yo
easly dety the latest sapshot
now that ablty s lost
Creatg ew developmet
braches has become so smple that
yorsquoll wat to take advatage o t all
the tme Yorsquoll be creatg braches
or xes to old releases or exper-
mets that may ot pa ot deed
t becomes possble to create a ew
brach or every eatre yo beg
Bt lke everythg good le
there s a prce to be pad Each tme
yo create a ew sapshot yo mst
remember that the ew sapshot
becomes the latest o ts brach
Wthot ths ormato swtchg
to a ew brach wold become a
laboros process deed
Every tme yo create a ew
brach yo probably gve t a ame
yor head ldquoThs wll be the Verso
10 Mateace Brachrdquo yo mght
say Perhaps yo reer to the ormer
lear brach as the master brach
Thk abot ths a lttle rther
thogh From the perspectve o a
tree what does t mea to ame a
brach namg every sapshot that
appears the hstory o a brach
wold do the trck bt reqres the
storage o a potetally large amot
o data Addtoally t stll woldrsquot
help yo ecetly locate the latest
sapshot o a brach
The least amot o ormato
ecessary to dety a brach s the
locato o the latest sapshot o that
brach i yo eed to kow the lst o
sapshots that are part o the brach
yo ca easly trace the paretage
Storg the brach ames s trval
i a le amed branches stored
otsde o ay specc sapshot yo
smply lst the amesapshot pars
that represet the tps o braches To
swtch to a amed brach yo eed
oly look p the sapshot or the
correspodg ame rom ths le
Becase yorsquore oly storg the
latest sapshot o each brach
creatg a ew sapshot ow co-
tas a addtoal step i the ew
sapshot s beg created as part o
a brach the branches le mst be
pdated so that the ame o the
brach becomes assocated wth the
ew sapshot A small prce to pay
or the beet
Tags
Ater sg braches or a whle
yo otce that they ca serve two
prposes Frst they ca act as mov-
able poters to sapshots so that
yo ca keep track o the brach
tps Secod they ca be poted at a
sgle sapshot ad ever move
The rst case allows yo to keep
track o ogog developmet thgs
lke ldquoRelease Mateacerdquo The
secod case s sel or labelg
pots o terest lke ldquoVerso 10rdquo
ad ldquoVerso 101rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 242
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 342 3
ContentsFEATURES
04 The Git ParableBy TOM PRESTOn-WERnER
12 ($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+($$=($_=+$)[__]+$_[+$])])()[__[__]+__[_+~$]+$_[_]+$$](__)
By ADAM CECCHETTi
STARTUP
16 The Designer Who Learned Django and Launched Her First Web App in 6 WeeksBy TRACY OSBORn
20 What I Wish Someone Had Told Me About Startups 4 Years AgoBy AMiR KHELLA
SPECIAL
24 How to Train Your Brain to Flip to a New LanguageBy RuBEn BEREnGuEL
DESIGN
26 Rock Solid Website Layout ExamplesBy JOSHuA JOHnSOn
PROGRAMMING
34 Using Git to Manage a WebsiteBy ABHiJiT MEnOn-SEn
36 Combinatorial Applications o Spaceflling CurvesBy JOHn BARTHOLDi
39 DP Zoo TourBy EDWARD Z YAnG
41 HACKER JOBS
For links to the posts on Hacker News visit hackermonthlycomissue-11 All articles and comments are reprinted with permission o their original author
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4424 FEATURES
The Git Parable
Git is a smple
bt extremely
powerlsystem Most
people try to teach Gt by demo-
stratg a ew doze commads ad
the yellg ldquotadaaaaardquo i beleve ths
method s fawed Sch a treatmet
may leave yo wth the ablty to
se Gt to perorm smple tasks bt
the Gt commads wll stll eel lke
magcal catatos Dog aythg
ot o the ordary wll be terryg
utl yo derstad the coceptspo whch Gt s blt yorsquoll eel
lke a strager a oreg lad
The ollowg parable wll take
yo o a jorey throgh the
creato o a Gt-lke system rom
the grod p uderstadg the
cocepts preseted here wll be the
most valable thg yo ca do to
prepare yorsel t haress the ll
power o Gt The cocepts them-
selves are qte smple bt allow ora amazg wealth o ctoalty
to sprg to exstece Read ths
parable all the way throgh ad
yo shold have very lttle troble
masterg the varos Gt commads
ad weldg the awesome power
that Gt makes avalable to yo
By TOM PRESTOn-WERnER
FEATURES
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 542 5
The Parable
image that yo have a compter
that has othg o t bt a text
edtor ad a ew le system com-
mads now mage that yo have
decded to wrte a large sotware
program o ths system Becase
yorsquore a resposble sotware devel-
oper yo decde that yo eed to
vet some sort o method or keep-
g track o versos o yor sotware
so that yo ca retreve code that
yo prevosly chaged or deleted
What ollows s a story abot how
yo mght desg oe sch verso
cotrol system (VCS) ad the rea-
sog behd those desg choces
Snapshots
Alred s a red o yors that works
dow at the mall as a photographer
oe o those ldquoSpecal Mometsrdquo
photo botqes All day log he
takes photos o lttle kds posg
awkwardly rot o jgle or
ocea backdrops Drg oe o
yor reqet lches at the pretzel
stad Alred tells yo a story abot
a woma amed Hazel who brgs
her daghter or a portrat every
year o the same day ldquoShe brgs the
photos rom all the past years wth
herrdquo Alred tells yo ldquoShe lkes to
remember what her daghter was
lke at each deret stage as the
sapshots really let her move back
ad orth tme to those saved
memoresrdquo
Lke some sort o ormlac plot
devce Alredrsquos ocet statemet
acts as a catalyst or yo to see the
deal solto to yor verso cotrol
dlemma Sapshots lke save pots
a vdeo game are really what yo
care abot whe yo eed to teract
wth a VCS What yo cold take
sapshots o yor codebase at ay
tme ad resrrect that code o
demad Alred reads the dawg
realzato spreadg across yor ace
ad kows yorsquore abot to leave hm
wthot aother word to go back ad
mplemet whatever ges dea he
jst cased yo to have Yo do ot
dsappot hm
Yo start yor project a drec-
tory amed working As yo code
yo try to wrte oe eatre at a
tme Whe yo complete a sel-
cotaed porto o a eatre yo
make sre that all yor les are saved
ad the make a copy o the etre
workg drectory gvg t the ame
snapshot-0 Ater yo perorm ths
copy operato yo make sre to
ever aga chage the code les
the ew drectory Ater the ext
chk o work yo perorm aother
copy oly ths tme the ew drec-
tory gets the ame snapshot-1 ad
so o
To make t easy to remember what
chages yo made each sapshot
yo add a specal le amed
message to each sapshot drectorythat cotas a smmary o the work
that yo dd ad the date o comple-
to By prtg the cotets o each
message t becomes easy to d a
specc chage that yo made the
past case yo eed to resrrect
some old code
Branches
Ater a bt o tme o the project
a caddate or release begs to
emerge Late ghts at the keyboard
ally yeld snapshot-99 the ascet
orm o what wll become Release
Verso 10 it comes to pass that
ths sapshot s packaged ad
dstrbted to the eagerly awatg
masses Stoked by excellet respose
to yor sotware yo psh orward
determed to make the ext verso
a eve bgger sccess
Yor VCS has so ar bee a
athl compao Old versos o
yor code are there whe yo eed
them ad ca be accessed wth ease
Bt ot log ater the release bg
reports start to come nobodyrsquos
perect yo reassre yorsel ad
snapshot-99 s readly retrevable
glad to be broght back to le or
the prposes o applyg bg xes
Sce the release yorsquove cre-
ated 10 ew sapshots Ths ew
work mst ot be clded the
101 bg x verso yo ow eed
to create To solve ths yo copy
snapshot-99 to working so that
yor workg drectory s at exactly
the pot where Verso 10 was
released A ew swt les o code
ad the bg s xed the workg
drectoryit s here that a problem becomes
apparet The VCS deals very well
wth lear developmet bt or the
rst tme ever yo eed to create
a ew sapshot that s ot a drect
descedet o the precedg sap-
shot i yo create a snapshot-110
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 6426 FEATURES
(remember that yo created 10
sapshots sce the release) the
yorsquoll be terrptg the lear fow
ad wll have o way o determg
the acestry o ay gve sapshot
Clearly yo eed somethg more
powerl tha a lear system
Stdes show that eve short
exposres to atre ca help
recharge the mdrsquos creatve pote-
tal Yorsquove bee sttg behd
the artcally polarzed lght o
yor motor or days o ed A
walk throgh the woods the
brsk atm ar wll do yo some
goodad wth ay lck wll help
yo arrve at a deal solto to
yor problem
The great oaks that le the tral
have always appealed to yo They
seem to stad stark ad prod
agast the perectly ble sky Hal
the rddy leaves have departed rom
ther braches leavg a trcate
patter o braches ther wake
Fxatg o oe o the thosads o
brach tps yo dly try to ollow
t back to the soltary trk Ths
orgacally prodced strctre
allows or sch great complexty
bt the rles or dg yor way
back to the trk are so smple ad
perect or keepg track o mltple
les o developmet it trs ot that what they say abot atre ad
creatvty are tre
By lookg at yor code hstory as
a tree solvg the problem o aces-
try becomes trval All yo eed to
do s clde the ame o the paret
sapshot the message le yo
wrte or each sapshot Addg jst
a sgle pstream poter wll eable
yo to easly ad accrately trace the
hstory o ay gve sapshot all the
way back to the root
Branch Names
Yor code hstory s ow a tree
istead o havg a sgle latest
sapshot yo have two oe or each
brach Wth a lear system yor
seqetal mberg system let yo
easly dety the latest sapshot
now that ablty s lost
Creatg ew developmet
braches has become so smple that
yorsquoll wat to take advatage o t all
the tme Yorsquoll be creatg braches
or xes to old releases or exper-
mets that may ot pa ot deed
t becomes possble to create a ew
brach or every eatre yo beg
Bt lke everythg good le
there s a prce to be pad Each tme
yo create a ew sapshot yo mst
remember that the ew sapshot
becomes the latest o ts brach
Wthot ths ormato swtchg
to a ew brach wold become a
laboros process deed
Every tme yo create a ew
brach yo probably gve t a ame
yor head ldquoThs wll be the Verso
10 Mateace Brachrdquo yo mght
say Perhaps yo reer to the ormer
lear brach as the master brach
Thk abot ths a lttle rther
thogh From the perspectve o a
tree what does t mea to ame a
brach namg every sapshot that
appears the hstory o a brach
wold do the trck bt reqres the
storage o a potetally large amot
o data Addtoally t stll woldrsquot
help yo ecetly locate the latest
sapshot o a brach
The least amot o ormato
ecessary to dety a brach s the
locato o the latest sapshot o that
brach i yo eed to kow the lst o
sapshots that are part o the brach
yo ca easly trace the paretage
Storg the brach ames s trval
i a le amed branches stored
otsde o ay specc sapshot yo
smply lst the amesapshot pars
that represet the tps o braches To
swtch to a amed brach yo eed
oly look p the sapshot or the
correspodg ame rom ths le
Becase yorsquore oly storg the
latest sapshot o each brach
creatg a ew sapshot ow co-
tas a addtoal step i the ew
sapshot s beg created as part o
a brach the branches le mst be
pdated so that the ame o the
brach becomes assocated wth the
ew sapshot A small prce to pay
or the beet
Tags
Ater sg braches or a whle
yo otce that they ca serve two
prposes Frst they ca act as mov-
able poters to sapshots so that
yo ca keep track o the brach
tps Secod they ca be poted at a
sgle sapshot ad ever move
The rst case allows yo to keep
track o ogog developmet thgs
lke ldquoRelease Mateacerdquo The
secod case s sel or labelg
pots o terest lke ldquoVerso 10rdquo
ad ldquoVerso 101rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 342 3
ContentsFEATURES
04 The Git ParableBy TOM PRESTOn-WERnER
12 ($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+($$=($_=+$)[__]+$_[+$])])()[__[__]+__[_+~$]+$_[_]+$$](__)
By ADAM CECCHETTi
STARTUP
16 The Designer Who Learned Django and Launched Her First Web App in 6 WeeksBy TRACY OSBORn
20 What I Wish Someone Had Told Me About Startups 4 Years AgoBy AMiR KHELLA
SPECIAL
24 How to Train Your Brain to Flip to a New LanguageBy RuBEn BEREnGuEL
DESIGN
26 Rock Solid Website Layout ExamplesBy JOSHuA JOHnSOn
PROGRAMMING
34 Using Git to Manage a WebsiteBy ABHiJiT MEnOn-SEn
36 Combinatorial Applications o Spaceflling CurvesBy JOHn BARTHOLDi
39 DP Zoo TourBy EDWARD Z YAnG
41 HACKER JOBS
For links to the posts on Hacker News visit hackermonthlycomissue-11 All articles and comments are reprinted with permission o their original author
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4424 FEATURES
The Git Parable
Git is a smple
bt extremely
powerlsystem Most
people try to teach Gt by demo-
stratg a ew doze commads ad
the yellg ldquotadaaaaardquo i beleve ths
method s fawed Sch a treatmet
may leave yo wth the ablty to
se Gt to perorm smple tasks bt
the Gt commads wll stll eel lke
magcal catatos Dog aythg
ot o the ordary wll be terryg
utl yo derstad the coceptspo whch Gt s blt yorsquoll eel
lke a strager a oreg lad
The ollowg parable wll take
yo o a jorey throgh the
creato o a Gt-lke system rom
the grod p uderstadg the
cocepts preseted here wll be the
most valable thg yo ca do to
prepare yorsel t haress the ll
power o Gt The cocepts them-
selves are qte smple bt allow ora amazg wealth o ctoalty
to sprg to exstece Read ths
parable all the way throgh ad
yo shold have very lttle troble
masterg the varos Gt commads
ad weldg the awesome power
that Gt makes avalable to yo
By TOM PRESTOn-WERnER
FEATURES
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 542 5
The Parable
image that yo have a compter
that has othg o t bt a text
edtor ad a ew le system com-
mads now mage that yo have
decded to wrte a large sotware
program o ths system Becase
yorsquore a resposble sotware devel-
oper yo decde that yo eed to
vet some sort o method or keep-
g track o versos o yor sotware
so that yo ca retreve code that
yo prevosly chaged or deleted
What ollows s a story abot how
yo mght desg oe sch verso
cotrol system (VCS) ad the rea-
sog behd those desg choces
Snapshots
Alred s a red o yors that works
dow at the mall as a photographer
oe o those ldquoSpecal Mometsrdquo
photo botqes All day log he
takes photos o lttle kds posg
awkwardly rot o jgle or
ocea backdrops Drg oe o
yor reqet lches at the pretzel
stad Alred tells yo a story abot
a woma amed Hazel who brgs
her daghter or a portrat every
year o the same day ldquoShe brgs the
photos rom all the past years wth
herrdquo Alred tells yo ldquoShe lkes to
remember what her daghter was
lke at each deret stage as the
sapshots really let her move back
ad orth tme to those saved
memoresrdquo
Lke some sort o ormlac plot
devce Alredrsquos ocet statemet
acts as a catalyst or yo to see the
deal solto to yor verso cotrol
dlemma Sapshots lke save pots
a vdeo game are really what yo
care abot whe yo eed to teract
wth a VCS What yo cold take
sapshots o yor codebase at ay
tme ad resrrect that code o
demad Alred reads the dawg
realzato spreadg across yor ace
ad kows yorsquore abot to leave hm
wthot aother word to go back ad
mplemet whatever ges dea he
jst cased yo to have Yo do ot
dsappot hm
Yo start yor project a drec-
tory amed working As yo code
yo try to wrte oe eatre at a
tme Whe yo complete a sel-
cotaed porto o a eatre yo
make sre that all yor les are saved
ad the make a copy o the etre
workg drectory gvg t the ame
snapshot-0 Ater yo perorm ths
copy operato yo make sre to
ever aga chage the code les
the ew drectory Ater the ext
chk o work yo perorm aother
copy oly ths tme the ew drec-
tory gets the ame snapshot-1 ad
so o
To make t easy to remember what
chages yo made each sapshot
yo add a specal le amed
message to each sapshot drectorythat cotas a smmary o the work
that yo dd ad the date o comple-
to By prtg the cotets o each
message t becomes easy to d a
specc chage that yo made the
past case yo eed to resrrect
some old code
Branches
Ater a bt o tme o the project
a caddate or release begs to
emerge Late ghts at the keyboard
ally yeld snapshot-99 the ascet
orm o what wll become Release
Verso 10 it comes to pass that
ths sapshot s packaged ad
dstrbted to the eagerly awatg
masses Stoked by excellet respose
to yor sotware yo psh orward
determed to make the ext verso
a eve bgger sccess
Yor VCS has so ar bee a
athl compao Old versos o
yor code are there whe yo eed
them ad ca be accessed wth ease
Bt ot log ater the release bg
reports start to come nobodyrsquos
perect yo reassre yorsel ad
snapshot-99 s readly retrevable
glad to be broght back to le or
the prposes o applyg bg xes
Sce the release yorsquove cre-
ated 10 ew sapshots Ths ew
work mst ot be clded the
101 bg x verso yo ow eed
to create To solve ths yo copy
snapshot-99 to working so that
yor workg drectory s at exactly
the pot where Verso 10 was
released A ew swt les o code
ad the bg s xed the workg
drectoryit s here that a problem becomes
apparet The VCS deals very well
wth lear developmet bt or the
rst tme ever yo eed to create
a ew sapshot that s ot a drect
descedet o the precedg sap-
shot i yo create a snapshot-110
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 6426 FEATURES
(remember that yo created 10
sapshots sce the release) the
yorsquoll be terrptg the lear fow
ad wll have o way o determg
the acestry o ay gve sapshot
Clearly yo eed somethg more
powerl tha a lear system
Stdes show that eve short
exposres to atre ca help
recharge the mdrsquos creatve pote-
tal Yorsquove bee sttg behd
the artcally polarzed lght o
yor motor or days o ed A
walk throgh the woods the
brsk atm ar wll do yo some
goodad wth ay lck wll help
yo arrve at a deal solto to
yor problem
The great oaks that le the tral
have always appealed to yo They
seem to stad stark ad prod
agast the perectly ble sky Hal
the rddy leaves have departed rom
ther braches leavg a trcate
patter o braches ther wake
Fxatg o oe o the thosads o
brach tps yo dly try to ollow
t back to the soltary trk Ths
orgacally prodced strctre
allows or sch great complexty
bt the rles or dg yor way
back to the trk are so smple ad
perect or keepg track o mltple
les o developmet it trs ot that what they say abot atre ad
creatvty are tre
By lookg at yor code hstory as
a tree solvg the problem o aces-
try becomes trval All yo eed to
do s clde the ame o the paret
sapshot the message le yo
wrte or each sapshot Addg jst
a sgle pstream poter wll eable
yo to easly ad accrately trace the
hstory o ay gve sapshot all the
way back to the root
Branch Names
Yor code hstory s ow a tree
istead o havg a sgle latest
sapshot yo have two oe or each
brach Wth a lear system yor
seqetal mberg system let yo
easly dety the latest sapshot
now that ablty s lost
Creatg ew developmet
braches has become so smple that
yorsquoll wat to take advatage o t all
the tme Yorsquoll be creatg braches
or xes to old releases or exper-
mets that may ot pa ot deed
t becomes possble to create a ew
brach or every eatre yo beg
Bt lke everythg good le
there s a prce to be pad Each tme
yo create a ew sapshot yo mst
remember that the ew sapshot
becomes the latest o ts brach
Wthot ths ormato swtchg
to a ew brach wold become a
laboros process deed
Every tme yo create a ew
brach yo probably gve t a ame
yor head ldquoThs wll be the Verso
10 Mateace Brachrdquo yo mght
say Perhaps yo reer to the ormer
lear brach as the master brach
Thk abot ths a lttle rther
thogh From the perspectve o a
tree what does t mea to ame a
brach namg every sapshot that
appears the hstory o a brach
wold do the trck bt reqres the
storage o a potetally large amot
o data Addtoally t stll woldrsquot
help yo ecetly locate the latest
sapshot o a brach
The least amot o ormato
ecessary to dety a brach s the
locato o the latest sapshot o that
brach i yo eed to kow the lst o
sapshots that are part o the brach
yo ca easly trace the paretage
Storg the brach ames s trval
i a le amed branches stored
otsde o ay specc sapshot yo
smply lst the amesapshot pars
that represet the tps o braches To
swtch to a amed brach yo eed
oly look p the sapshot or the
correspodg ame rom ths le
Becase yorsquore oly storg the
latest sapshot o each brach
creatg a ew sapshot ow co-
tas a addtoal step i the ew
sapshot s beg created as part o
a brach the branches le mst be
pdated so that the ame o the
brach becomes assocated wth the
ew sapshot A small prce to pay
or the beet
Tags
Ater sg braches or a whle
yo otce that they ca serve two
prposes Frst they ca act as mov-
able poters to sapshots so that
yo ca keep track o the brach
tps Secod they ca be poted at a
sgle sapshot ad ever move
The rst case allows yo to keep
track o ogog developmet thgs
lke ldquoRelease Mateacerdquo The
secod case s sel or labelg
pots o terest lke ldquoVerso 10rdquo
ad ldquoVerso 101rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4424 FEATURES
The Git Parable
Git is a smple
bt extremely
powerlsystem Most
people try to teach Gt by demo-
stratg a ew doze commads ad
the yellg ldquotadaaaaardquo i beleve ths
method s fawed Sch a treatmet
may leave yo wth the ablty to
se Gt to perorm smple tasks bt
the Gt commads wll stll eel lke
magcal catatos Dog aythg
ot o the ordary wll be terryg
utl yo derstad the coceptspo whch Gt s blt yorsquoll eel
lke a strager a oreg lad
The ollowg parable wll take
yo o a jorey throgh the
creato o a Gt-lke system rom
the grod p uderstadg the
cocepts preseted here wll be the
most valable thg yo ca do to
prepare yorsel t haress the ll
power o Gt The cocepts them-
selves are qte smple bt allow ora amazg wealth o ctoalty
to sprg to exstece Read ths
parable all the way throgh ad
yo shold have very lttle troble
masterg the varos Gt commads
ad weldg the awesome power
that Gt makes avalable to yo
By TOM PRESTOn-WERnER
FEATURES
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 542 5
The Parable
image that yo have a compter
that has othg o t bt a text
edtor ad a ew le system com-
mads now mage that yo have
decded to wrte a large sotware
program o ths system Becase
yorsquore a resposble sotware devel-
oper yo decde that yo eed to
vet some sort o method or keep-
g track o versos o yor sotware
so that yo ca retreve code that
yo prevosly chaged or deleted
What ollows s a story abot how
yo mght desg oe sch verso
cotrol system (VCS) ad the rea-
sog behd those desg choces
Snapshots
Alred s a red o yors that works
dow at the mall as a photographer
oe o those ldquoSpecal Mometsrdquo
photo botqes All day log he
takes photos o lttle kds posg
awkwardly rot o jgle or
ocea backdrops Drg oe o
yor reqet lches at the pretzel
stad Alred tells yo a story abot
a woma amed Hazel who brgs
her daghter or a portrat every
year o the same day ldquoShe brgs the
photos rom all the past years wth
herrdquo Alred tells yo ldquoShe lkes to
remember what her daghter was
lke at each deret stage as the
sapshots really let her move back
ad orth tme to those saved
memoresrdquo
Lke some sort o ormlac plot
devce Alredrsquos ocet statemet
acts as a catalyst or yo to see the
deal solto to yor verso cotrol
dlemma Sapshots lke save pots
a vdeo game are really what yo
care abot whe yo eed to teract
wth a VCS What yo cold take
sapshots o yor codebase at ay
tme ad resrrect that code o
demad Alred reads the dawg
realzato spreadg across yor ace
ad kows yorsquore abot to leave hm
wthot aother word to go back ad
mplemet whatever ges dea he
jst cased yo to have Yo do ot
dsappot hm
Yo start yor project a drec-
tory amed working As yo code
yo try to wrte oe eatre at a
tme Whe yo complete a sel-
cotaed porto o a eatre yo
make sre that all yor les are saved
ad the make a copy o the etre
workg drectory gvg t the ame
snapshot-0 Ater yo perorm ths
copy operato yo make sre to
ever aga chage the code les
the ew drectory Ater the ext
chk o work yo perorm aother
copy oly ths tme the ew drec-
tory gets the ame snapshot-1 ad
so o
To make t easy to remember what
chages yo made each sapshot
yo add a specal le amed
message to each sapshot drectorythat cotas a smmary o the work
that yo dd ad the date o comple-
to By prtg the cotets o each
message t becomes easy to d a
specc chage that yo made the
past case yo eed to resrrect
some old code
Branches
Ater a bt o tme o the project
a caddate or release begs to
emerge Late ghts at the keyboard
ally yeld snapshot-99 the ascet
orm o what wll become Release
Verso 10 it comes to pass that
ths sapshot s packaged ad
dstrbted to the eagerly awatg
masses Stoked by excellet respose
to yor sotware yo psh orward
determed to make the ext verso
a eve bgger sccess
Yor VCS has so ar bee a
athl compao Old versos o
yor code are there whe yo eed
them ad ca be accessed wth ease
Bt ot log ater the release bg
reports start to come nobodyrsquos
perect yo reassre yorsel ad
snapshot-99 s readly retrevable
glad to be broght back to le or
the prposes o applyg bg xes
Sce the release yorsquove cre-
ated 10 ew sapshots Ths ew
work mst ot be clded the
101 bg x verso yo ow eed
to create To solve ths yo copy
snapshot-99 to working so that
yor workg drectory s at exactly
the pot where Verso 10 was
released A ew swt les o code
ad the bg s xed the workg
drectoryit s here that a problem becomes
apparet The VCS deals very well
wth lear developmet bt or the
rst tme ever yo eed to create
a ew sapshot that s ot a drect
descedet o the precedg sap-
shot i yo create a snapshot-110
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 6426 FEATURES
(remember that yo created 10
sapshots sce the release) the
yorsquoll be terrptg the lear fow
ad wll have o way o determg
the acestry o ay gve sapshot
Clearly yo eed somethg more
powerl tha a lear system
Stdes show that eve short
exposres to atre ca help
recharge the mdrsquos creatve pote-
tal Yorsquove bee sttg behd
the artcally polarzed lght o
yor motor or days o ed A
walk throgh the woods the
brsk atm ar wll do yo some
goodad wth ay lck wll help
yo arrve at a deal solto to
yor problem
The great oaks that le the tral
have always appealed to yo They
seem to stad stark ad prod
agast the perectly ble sky Hal
the rddy leaves have departed rom
ther braches leavg a trcate
patter o braches ther wake
Fxatg o oe o the thosads o
brach tps yo dly try to ollow
t back to the soltary trk Ths
orgacally prodced strctre
allows or sch great complexty
bt the rles or dg yor way
back to the trk are so smple ad
perect or keepg track o mltple
les o developmet it trs ot that what they say abot atre ad
creatvty are tre
By lookg at yor code hstory as
a tree solvg the problem o aces-
try becomes trval All yo eed to
do s clde the ame o the paret
sapshot the message le yo
wrte or each sapshot Addg jst
a sgle pstream poter wll eable
yo to easly ad accrately trace the
hstory o ay gve sapshot all the
way back to the root
Branch Names
Yor code hstory s ow a tree
istead o havg a sgle latest
sapshot yo have two oe or each
brach Wth a lear system yor
seqetal mberg system let yo
easly dety the latest sapshot
now that ablty s lost
Creatg ew developmet
braches has become so smple that
yorsquoll wat to take advatage o t all
the tme Yorsquoll be creatg braches
or xes to old releases or exper-
mets that may ot pa ot deed
t becomes possble to create a ew
brach or every eatre yo beg
Bt lke everythg good le
there s a prce to be pad Each tme
yo create a ew sapshot yo mst
remember that the ew sapshot
becomes the latest o ts brach
Wthot ths ormato swtchg
to a ew brach wold become a
laboros process deed
Every tme yo create a ew
brach yo probably gve t a ame
yor head ldquoThs wll be the Verso
10 Mateace Brachrdquo yo mght
say Perhaps yo reer to the ormer
lear brach as the master brach
Thk abot ths a lttle rther
thogh From the perspectve o a
tree what does t mea to ame a
brach namg every sapshot that
appears the hstory o a brach
wold do the trck bt reqres the
storage o a potetally large amot
o data Addtoally t stll woldrsquot
help yo ecetly locate the latest
sapshot o a brach
The least amot o ormato
ecessary to dety a brach s the
locato o the latest sapshot o that
brach i yo eed to kow the lst o
sapshots that are part o the brach
yo ca easly trace the paretage
Storg the brach ames s trval
i a le amed branches stored
otsde o ay specc sapshot yo
smply lst the amesapshot pars
that represet the tps o braches To
swtch to a amed brach yo eed
oly look p the sapshot or the
correspodg ame rom ths le
Becase yorsquore oly storg the
latest sapshot o each brach
creatg a ew sapshot ow co-
tas a addtoal step i the ew
sapshot s beg created as part o
a brach the branches le mst be
pdated so that the ame o the
brach becomes assocated wth the
ew sapshot A small prce to pay
or the beet
Tags
Ater sg braches or a whle
yo otce that they ca serve two
prposes Frst they ca act as mov-
able poters to sapshots so that
yo ca keep track o the brach
tps Secod they ca be poted at a
sgle sapshot ad ever move
The rst case allows yo to keep
track o ogog developmet thgs
lke ldquoRelease Mateacerdquo The
secod case s sel or labelg
pots o terest lke ldquoVerso 10rdquo
ad ldquoVerso 101rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 542 5
The Parable
image that yo have a compter
that has othg o t bt a text
edtor ad a ew le system com-
mads now mage that yo have
decded to wrte a large sotware
program o ths system Becase
yorsquore a resposble sotware devel-
oper yo decde that yo eed to
vet some sort o method or keep-
g track o versos o yor sotware
so that yo ca retreve code that
yo prevosly chaged or deleted
What ollows s a story abot how
yo mght desg oe sch verso
cotrol system (VCS) ad the rea-
sog behd those desg choces
Snapshots
Alred s a red o yors that works
dow at the mall as a photographer
oe o those ldquoSpecal Mometsrdquo
photo botqes All day log he
takes photos o lttle kds posg
awkwardly rot o jgle or
ocea backdrops Drg oe o
yor reqet lches at the pretzel
stad Alred tells yo a story abot
a woma amed Hazel who brgs
her daghter or a portrat every
year o the same day ldquoShe brgs the
photos rom all the past years wth
herrdquo Alred tells yo ldquoShe lkes to
remember what her daghter was
lke at each deret stage as the
sapshots really let her move back
ad orth tme to those saved
memoresrdquo
Lke some sort o ormlac plot
devce Alredrsquos ocet statemet
acts as a catalyst or yo to see the
deal solto to yor verso cotrol
dlemma Sapshots lke save pots
a vdeo game are really what yo
care abot whe yo eed to teract
wth a VCS What yo cold take
sapshots o yor codebase at ay
tme ad resrrect that code o
demad Alred reads the dawg
realzato spreadg across yor ace
ad kows yorsquore abot to leave hm
wthot aother word to go back ad
mplemet whatever ges dea he
jst cased yo to have Yo do ot
dsappot hm
Yo start yor project a drec-
tory amed working As yo code
yo try to wrte oe eatre at a
tme Whe yo complete a sel-
cotaed porto o a eatre yo
make sre that all yor les are saved
ad the make a copy o the etre
workg drectory gvg t the ame
snapshot-0 Ater yo perorm ths
copy operato yo make sre to
ever aga chage the code les
the ew drectory Ater the ext
chk o work yo perorm aother
copy oly ths tme the ew drec-
tory gets the ame snapshot-1 ad
so o
To make t easy to remember what
chages yo made each sapshot
yo add a specal le amed
message to each sapshot drectorythat cotas a smmary o the work
that yo dd ad the date o comple-
to By prtg the cotets o each
message t becomes easy to d a
specc chage that yo made the
past case yo eed to resrrect
some old code
Branches
Ater a bt o tme o the project
a caddate or release begs to
emerge Late ghts at the keyboard
ally yeld snapshot-99 the ascet
orm o what wll become Release
Verso 10 it comes to pass that
ths sapshot s packaged ad
dstrbted to the eagerly awatg
masses Stoked by excellet respose
to yor sotware yo psh orward
determed to make the ext verso
a eve bgger sccess
Yor VCS has so ar bee a
athl compao Old versos o
yor code are there whe yo eed
them ad ca be accessed wth ease
Bt ot log ater the release bg
reports start to come nobodyrsquos
perect yo reassre yorsel ad
snapshot-99 s readly retrevable
glad to be broght back to le or
the prposes o applyg bg xes
Sce the release yorsquove cre-
ated 10 ew sapshots Ths ew
work mst ot be clded the
101 bg x verso yo ow eed
to create To solve ths yo copy
snapshot-99 to working so that
yor workg drectory s at exactly
the pot where Verso 10 was
released A ew swt les o code
ad the bg s xed the workg
drectoryit s here that a problem becomes
apparet The VCS deals very well
wth lear developmet bt or the
rst tme ever yo eed to create
a ew sapshot that s ot a drect
descedet o the precedg sap-
shot i yo create a snapshot-110
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 6426 FEATURES
(remember that yo created 10
sapshots sce the release) the
yorsquoll be terrptg the lear fow
ad wll have o way o determg
the acestry o ay gve sapshot
Clearly yo eed somethg more
powerl tha a lear system
Stdes show that eve short
exposres to atre ca help
recharge the mdrsquos creatve pote-
tal Yorsquove bee sttg behd
the artcally polarzed lght o
yor motor or days o ed A
walk throgh the woods the
brsk atm ar wll do yo some
goodad wth ay lck wll help
yo arrve at a deal solto to
yor problem
The great oaks that le the tral
have always appealed to yo They
seem to stad stark ad prod
agast the perectly ble sky Hal
the rddy leaves have departed rom
ther braches leavg a trcate
patter o braches ther wake
Fxatg o oe o the thosads o
brach tps yo dly try to ollow
t back to the soltary trk Ths
orgacally prodced strctre
allows or sch great complexty
bt the rles or dg yor way
back to the trk are so smple ad
perect or keepg track o mltple
les o developmet it trs ot that what they say abot atre ad
creatvty are tre
By lookg at yor code hstory as
a tree solvg the problem o aces-
try becomes trval All yo eed to
do s clde the ame o the paret
sapshot the message le yo
wrte or each sapshot Addg jst
a sgle pstream poter wll eable
yo to easly ad accrately trace the
hstory o ay gve sapshot all the
way back to the root
Branch Names
Yor code hstory s ow a tree
istead o havg a sgle latest
sapshot yo have two oe or each
brach Wth a lear system yor
seqetal mberg system let yo
easly dety the latest sapshot
now that ablty s lost
Creatg ew developmet
braches has become so smple that
yorsquoll wat to take advatage o t all
the tme Yorsquoll be creatg braches
or xes to old releases or exper-
mets that may ot pa ot deed
t becomes possble to create a ew
brach or every eatre yo beg
Bt lke everythg good le
there s a prce to be pad Each tme
yo create a ew sapshot yo mst
remember that the ew sapshot
becomes the latest o ts brach
Wthot ths ormato swtchg
to a ew brach wold become a
laboros process deed
Every tme yo create a ew
brach yo probably gve t a ame
yor head ldquoThs wll be the Verso
10 Mateace Brachrdquo yo mght
say Perhaps yo reer to the ormer
lear brach as the master brach
Thk abot ths a lttle rther
thogh From the perspectve o a
tree what does t mea to ame a
brach namg every sapshot that
appears the hstory o a brach
wold do the trck bt reqres the
storage o a potetally large amot
o data Addtoally t stll woldrsquot
help yo ecetly locate the latest
sapshot o a brach
The least amot o ormato
ecessary to dety a brach s the
locato o the latest sapshot o that
brach i yo eed to kow the lst o
sapshots that are part o the brach
yo ca easly trace the paretage
Storg the brach ames s trval
i a le amed branches stored
otsde o ay specc sapshot yo
smply lst the amesapshot pars
that represet the tps o braches To
swtch to a amed brach yo eed
oly look p the sapshot or the
correspodg ame rom ths le
Becase yorsquore oly storg the
latest sapshot o each brach
creatg a ew sapshot ow co-
tas a addtoal step i the ew
sapshot s beg created as part o
a brach the branches le mst be
pdated so that the ame o the
brach becomes assocated wth the
ew sapshot A small prce to pay
or the beet
Tags
Ater sg braches or a whle
yo otce that they ca serve two
prposes Frst they ca act as mov-
able poters to sapshots so that
yo ca keep track o the brach
tps Secod they ca be poted at a
sgle sapshot ad ever move
The rst case allows yo to keep
track o ogog developmet thgs
lke ldquoRelease Mateacerdquo The
secod case s sel or labelg
pots o terest lke ldquoVerso 10rdquo
ad ldquoVerso 101rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 6426 FEATURES
(remember that yo created 10
sapshots sce the release) the
yorsquoll be terrptg the lear fow
ad wll have o way o determg
the acestry o ay gve sapshot
Clearly yo eed somethg more
powerl tha a lear system
Stdes show that eve short
exposres to atre ca help
recharge the mdrsquos creatve pote-
tal Yorsquove bee sttg behd
the artcally polarzed lght o
yor motor or days o ed A
walk throgh the woods the
brsk atm ar wll do yo some
goodad wth ay lck wll help
yo arrve at a deal solto to
yor problem
The great oaks that le the tral
have always appealed to yo They
seem to stad stark ad prod
agast the perectly ble sky Hal
the rddy leaves have departed rom
ther braches leavg a trcate
patter o braches ther wake
Fxatg o oe o the thosads o
brach tps yo dly try to ollow
t back to the soltary trk Ths
orgacally prodced strctre
allows or sch great complexty
bt the rles or dg yor way
back to the trk are so smple ad
perect or keepg track o mltple
les o developmet it trs ot that what they say abot atre ad
creatvty are tre
By lookg at yor code hstory as
a tree solvg the problem o aces-
try becomes trval All yo eed to
do s clde the ame o the paret
sapshot the message le yo
wrte or each sapshot Addg jst
a sgle pstream poter wll eable
yo to easly ad accrately trace the
hstory o ay gve sapshot all the
way back to the root
Branch Names
Yor code hstory s ow a tree
istead o havg a sgle latest
sapshot yo have two oe or each
brach Wth a lear system yor
seqetal mberg system let yo
easly dety the latest sapshot
now that ablty s lost
Creatg ew developmet
braches has become so smple that
yorsquoll wat to take advatage o t all
the tme Yorsquoll be creatg braches
or xes to old releases or exper-
mets that may ot pa ot deed
t becomes possble to create a ew
brach or every eatre yo beg
Bt lke everythg good le
there s a prce to be pad Each tme
yo create a ew sapshot yo mst
remember that the ew sapshot
becomes the latest o ts brach
Wthot ths ormato swtchg
to a ew brach wold become a
laboros process deed
Every tme yo create a ew
brach yo probably gve t a ame
yor head ldquoThs wll be the Verso
10 Mateace Brachrdquo yo mght
say Perhaps yo reer to the ormer
lear brach as the master brach
Thk abot ths a lttle rther
thogh From the perspectve o a
tree what does t mea to ame a
brach namg every sapshot that
appears the hstory o a brach
wold do the trck bt reqres the
storage o a potetally large amot
o data Addtoally t stll woldrsquot
help yo ecetly locate the latest
sapshot o a brach
The least amot o ormato
ecessary to dety a brach s the
locato o the latest sapshot o that
brach i yo eed to kow the lst o
sapshots that are part o the brach
yo ca easly trace the paretage
Storg the brach ames s trval
i a le amed branches stored
otsde o ay specc sapshot yo
smply lst the amesapshot pars
that represet the tps o braches To
swtch to a amed brach yo eed
oly look p the sapshot or the
correspodg ame rom ths le
Becase yorsquore oly storg the
latest sapshot o each brach
creatg a ew sapshot ow co-
tas a addtoal step i the ew
sapshot s beg created as part o
a brach the branches le mst be
pdated so that the ame o the
brach becomes assocated wth the
ew sapshot A small prce to pay
or the beet
Tags
Ater sg braches or a whle
yo otce that they ca serve two
prposes Frst they ca act as mov-
able poters to sapshots so that
yo ca keep track o the brach
tps Secod they ca be poted at a
sgle sapshot ad ever move
The rst case allows yo to keep
track o ogog developmet thgs
lke ldquoRelease Mateacerdquo The
secod case s sel or labelg
pots o terest lke ldquoVerso 10rdquo
ad ldquoVerso 101rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 742 7
Mxg both o these ses to a
sgle le eels messy Both types are
poters to sapshots bt oe moves
ad oe doesrsquot For the sake o clar-ty ad elegace yo decde to create
aother le called tags to cota
poters o the secod type
Keepg these two heretly d-
eret poters separate les wll
help yo rom accdetally treatg a
brach as a tag or vce versa
Distributed
Workg o yor ow gets pretty
loely Woldrsquot t be ce yo
cold vte a red to work o yor
project wth yo Well yorsquore
lck Yor red Zoe has a compter
setp jst lke yors ad wats
to help wth the project Becase
yorsquove created sch a great verso
cotrol system yo tell her all abot
t ad sed her a copy o all yor
sapshots braches ad tags so sheca ejoy the same beets o the
code hstory
itrsquos great to have Zoe o the team
bt she has a habt o takg log
trps to ar away places wthot
teret access As soo as she has
the sorce code she catches a fght
to Patagoa ad yo dorsquot hear rom
her or a week i the meatme
yo both code p a storm Whe
she ally gets back yo dscover a
crtcal faw yor VCS Becaseyorsquove both bee sg the same
mberg system yo each have
drectores amed snapshot-114
snapshot-115 ad so o bt wth
deret cotets
To make matters worse yo
dorsquot eve kow who athored the
chages those ew sapshots
Together yo devse a pla or
dealg wth these problems Frstsapshot messages wll heceorth
cota athor ame ad emal
Secod sapshots wll o loger be
amed wth smple mbers istead
yorsquoll se the cotets o the mes-
sage le to prodce a hash Ths hash
wll be garateed to be qe to
the sapshot sce o two messages
wll ever have the same date mes-
sage paret ad athor To makesre everythg goes smoothly yo
both agree to se the SHA1 hash
algorthm that takes the cotets o
a le ad prodces a 40-character
hexadecmal strg Yo both pdate
yor hstores wth the ew tech-
qe ad stead o clashg snap-
shot-114 drectores yo ow have
dstct drectores amed 8ba3441b-
6b89cad23387ee875f2ae55069291f4b
ad db9ecb5b5a6294a8733503ab-
57577db96ff2249e Wth the pdated amg scheme
t becomes trval or yo to etch all
the ew sapshots rom Zoersquos com-
pter ad place them ext to yor
exstg sapshots Becase every
sapshot speces ts paret ad
detcal messages (ad thereore
detcal sapshots) have detcal
ames o matter where they are cre-
ated the hstory o the codebase castll be draw as a tree Oly ow
the tree s comprsed o sapshots
athored by both Zoe ad yo
Ths pot s mportat eogh
to warrat repeatg A sapshot s
deted by a SHA1 that qely
detes t (ad ts paret) These
sapshots ca be created ad moved
arod betwee compters wthot
losg ther detty or where theybelog the hstory tree o a project
Whatrsquos more sapshots ca be shared
or kept prvate as yo see t i yo
have some expermetal sapshots
that yo wat to keep to yorsel
yo ca do so qte easly Jst dorsquot
make them avalable to Zoe
ldquoA snapshot is identifed by a SHA1 thatuniquely identifes it (and its parent)rdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 8428 FEATURES
Oine
Zoersquos travel habts case her to sped
cotless hors o arplaes ad
boats Most o the places she vsts
have o readly avalable teret
access At the ed o the day she
speds more tme ofe tha ole
itrsquos o srprse the that Zoe
raves abot yor VCS All o the
day to day operatos that she eeds
to do ca be doe locally The oly
tme she eeds a etwork coec-
to s whe shersquos ready to share her
sapshots wth yo
Merges
Beore Zoe let o her trp yo
had asked her to start workg o
o the brach amed math ad to
mplemet a cto that geer-
ated prme mbers Meawhle
yo were also developg o o the
math brach oly yo were wrtg a
cto to geerate magc mbers
now that Zoe has retred yo are
aced wth the task o mergg these
two separate braches o develop-
met to a sgle sapshot Sce
yo both worked o separate tasks
the merge s smple Whle costrct-
g the sapshot message or the
merge yo realze that ths sapshot
s specal istead o jst a sgle
paret ths merge sapshot has two
parets The rst paret s yor latest
o the math brach ad the secod
paret s Zoersquos latest o her math
brach The merge sapshot doesrsquot
cota ay chages beyod those
ecessary to merge the two dsparate
parets to a sgle codebase
Oce yo complete the merge
Zoe etches all the sapshots that
yo have that she does ot whch
clde yor developmet o the
math brach ad yor merge sap-
shot Oce she does ths both o
yor hstores match exactly
Rewriting History
Lke may sotware developers yo
have a complso to keep yor code
clea ad very well orgazed Ths
carres over to a desre to keep
yor code hstory well groomed Last
ght yo came home ater havg
a ew too may pts o Gess
at the local brewpb ad started
codg prodcg a hadl o
sapshots alog the way Ths mor-
g a revew o the code yo wrote
last ght makes yo crge a lttle
bt The code s good overall bt yo
made a lot o mstakes early o that
yo corrected later sapshots
Letrsquos say the brach o whch
yo dd yor drke developmet
s called drunk ad yo made three
sapshots ater yo got home rom
the bar i the ame drunk pots at
the latest sapshot o that brach
the yo ca se a sel otato to
reer to the paret o that sapshot
The otato drunk^ meas the
paret o the sapshot poted to
by the brach ame drunk Smlarly
drunk^^ meas the gradparet o
the drunk sapshot So the three
sapshots chroologcal order are
drunk^^ drunk^ ad drunk
Yorsquod really lke those three losy
sapshots to be two clea sap-
shots Oe that chages a exstg
cto ad oe that adds a ew
le To accomplsh ths revso o
hstory yo copy drunk to workg
ad delete the le that s ew the
seres now workg represets the
correct modcatos to the exstg
cto Yo create a ew sapshot
rom working ad wrte the message
to be approprate to the chages For
the paret yo specy the SHA1 o
the drunk^^^ sapshot essetally
creatg a ew brach o o the
same sapshot as last ght now
yo ca copy drunk to working ad
roll a sapshot wth the ew le
addto As the paret yo specy
that sapshot yo created jst beore
ths oe
As the last step yo chage the
brach ame drunk to pot to the
last sapshot yo jst made
The hstory o the drunk brach
ow represets a cer verso o
what yo dd last ght The other
sapshots that yorsquove replaced are
o loger eeded so yo ca delete
them or jst leave them arod
or posterty no brach ames are
crretly potg at them so t wll
be hard to d them later o bt
yo dorsquot delete them theyrsquoll stck
arod
Staging Area
As mch as yo try to keep yor
ew modcatos related to a
sgle eatre or logcal chk yo
sometmes get sdetracked ad start
hackg o somethg totally re-
lated Oly hal-way to ths do yo
realze that yor workg drectory
ow cotas what shold really be
separated as two dscrete sapshots
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 942 9
To help yo wth ths aoyg
stato the cocept o a staging
drectory s sel Ths area acts
as a termedate step betwee
yor working drectory ad a al
sapshot Each tme yo sh a
sapshot yo also copy that to a
staging drectory now every tme
yo sh a edt to a ew le create
a ew le or remove a le yo ca
decde whether that chage shold
be part o yor ext sapshot i t
belogs yo mmc the chage sde
staging i t doesrsquot yo ca leave t
working ad make t part o a later
sapshot From ow o sapshots
are created drectly rom the staging
drectory
Ths separato o codg ad
preparg the stage makes t easy to
specy what s ad s ot clded
the ext sapshot Yo o loger
have to worry too mch abot
makg a accdetal related
chage yor workg drectory
Yo have to be a bt carel
thogh Cosder a le amed
README Yo make a edt to ths le
ad the mmc that staging Yo
go o abot yor bsess edtg
other les Ater a bt yo make
aother chage to README now yo
have made two chages to that le
bt oly oe s the staging area Were yo to create a sapshot ow
yor secod chage wold be abset
The lesso s ths every ew edt
mst be added to the staging area
t s to be part o the ext sapshot
Dis
Wth a workg drectory a stagg
area ad loads o sapshots lyg
arod t starts to get cosg as
to what the specc code chages
are betwee these drectores A
sapshot message oly gves yo
a smmary o what chaged ot
exactly what les were chaged
betwee two les
usg a ldquodgrdquo algorthm yo
ca mplemet a small program that
shows yo the dereces two
codebases As yo develop ad copy
thgs rom yor working drectory
to the staging area yorsquoll wat to
easly see what s deret betwee
the two so that yo ca determe
what else eeds to be staged itrsquos
also mportat to see how the
stagg area s deret rom the last
sapshot sce these chages are
what wll become part o the ext
sapshot yo prodce
There are may other ds yo
mght wat to see The dereces
betwee a specc sapshot ad
ts paret wold show yo the
ldquochagesetrdquo that was trodced
by that sapshot The d betwee
two braches wold be helpl
or makg sre yor developmet
doesrsquot wader too ar away rom
the male
Eliminating Duplication
Ater a ew more trps to namba
istabl ad Galapagos Zoe starts
to compla that her hard drve s
llg p wth hdreds o early
detcal copes o the sotware Yo
too have bee eelg lke all the le
dplcato s wastel Ater a bt o
thkg yo come p wth some-
thg very clever
Yo remember that the SHA1
hash prodces a short strg that s
qe or a gve lersquos cotets
Startg wth the very rst sapshot
the project hstory yo start a
coverso process Frst yo create
a drectory amed objects otsde o
the code hstory next yo d the
most deeply ested drectory the
sapshot Addtoally yo ope p
a temporary le or wrtg For each
le ths drectory yo perorm
three steps
1 Calclate the SHA1 o the cotets
2 Add a etry to the temp le that
cotas the word ldquoblobrdquo (bary
large object) the SHA1 rom the
rst step ad the leame
3 Copy the le to the objects drec-
tory ad reame t to the SHA1
rom step 1 Oce shed wth
all the les d the SHA1 o the
temp le cotets ad se that toame the temp le also placg t
the objects drectory
i at ay tme the objects drec-
tory already cotas a le wth a
gve ame the yo have already
stored that lersquos cotets ad there s
o eed to do so aga
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 104210 FEATURES
now move p oe drectory ad
start over Oly ths tme whe yo
get to the etry or the drectory that
yo jst processed eter the word
ldquotreerdquo the SHA1 o the temp le
rom last tme ad the drectoryrsquos
ame to the ew temp le i ths
asho yo ca bld p a tree o
drectory object les that cota the
SHA1s ad ames o the les ad
drectory objects that they cota
Oce ths has bee accomplshed
or every drectory ad le the
sapshot yo have a sgle root
drectory object le ad ts cor-
respodg SHA1 Sce othg
cotas the root drectory yo mst
record the root treersquos SHA1 some-
where A deal place to store t s
the sapshot message le Ths way
the qeess o the SHA1 o the
message also depeds o the etre
cotets o the sapshot ad yo
ca garatee wth absolte certaty
that two detcal sapshot message
SHA1s cota the same les
itrsquos also coveet to create a
object rom the sapshot message
the same way that yo do or blobs
ad trees Sce yorsquore matag
a lst o brach ad tag ames that
pot to message SHA1s yo dorsquot
have to worry abot losg track o
whch sapshots are mportat to yo Wth all o ths ormato stored
the objects drectory yo ca
saely delete the sapshot drectory
that yo sed as the sorce o ths
operato i yo wat to recost-
tte the sapshot at a later date trsquos
smply a matter o ollowg the
SHA1 o the root tree stored the
message le ad extractg each tree
ad blob to ther correspodg
drectory ad le
For a sgle sapshot ths
trasormato process doesrsquot
get yo mch Yorsquove bascally
jst coverted oe le system to
aother ad created a lot o work
the process The real beets o
ths system arse rom rese o trees
ad blobs across sapshots image
two seqetal sapshots whch
oly a sgle le the root drec-
tory has chaged i the sapshots
both cota 10 drectores ad 100
les the trasormato process wll
create 10 trees ad 100 blobs rom
the rst sapshot bt oly oe ew
blob ad oe ew tree rom the
secod sapshot
By covertg every sapshot
drectory the old system to object
les the ew system yo ca
drastcally redce the mber o les
that are stored o dsk now stead
o storg perhaps 50 detcal copes
o a rarely chaged le yo oly
eed to keep oe
Compressing Blobs
Elmatg blob ad tree dplcato
sgcatly redces the total storage
sze o yor project hstory bt thatrsquos
ot the oly thg yo ca do to save
space Sorce code s jst text Text
ca be very ecetly compressed
sg somethg lke the LZW or
DEFLATE compresso algorthms
i yo compress every blob beore
comptg ts SHA1 ad savg t to
dsk yo ca redce the total storage
sze o the project hstory by aother
very admrable qatty
The True Git
The VCS yo have costrcted s
ow a reasoable acsmle o Gt
The ma derece s that Gt gves
yo very ce commad le tools to
hadle sch thgs as creatg ew
sapshots ad swtchg to old oes
(Gt ses the term ldquocommtrdquo stead
o ldquosapshotrdquo) tracg hstory keep-
g brach tps p-to-date etchg
chages rom other people mergg
ad dg braches ad hdreds
o other commo (ad ot-so-
commo) tasks
As yo cote to lear Gt
keep ths parable md Gt s
really very smple dereath ad
t s ths smplcty that makes t so
fexble ad powerl Oe last thg
beore yo r o to lear all the
Gt commads remember that t s
almost mpossble to lose work that
has bee commtted Eve whe
yo delete a brach all thatrsquos really
happeed s that the poter to that
commt has bee removed All o
the sapshots are stll the objects
drectory yo jst eed to dg p the
commt SHA i these cases look p
git reog it cotas a hstory o
what each brach poted to ad
tmes o crss t wll save the day n
Tom Preston-Werner lives in San Franciscoand is a cofounder of GitHub and the inven-
tor of Gravatars He loves giving talks about
entrepreneurship writing Ruby and Erlang
and mountain biking through the Bay Arearsquos
ancient redwood orests
Reprinted with permission o the original author
First appeared in hnmygitparable
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1142
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 124212 FEATURES
By ADAM CECCHETTi
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1342 13
Care to guess what lagage that s ad what
t does
How abot t s typed lke ths
($=[$=[]][(__=$+$)[_=-~-~-~$]+(+$)[__]+
($$=($_=+$)[__]+$_[+$])])()[__[__]+__
[_+~$]+$_[_]+$$](documentcookie)
Thatrsquos rght Ths s a JavaScrpt alert() ad t lads
aywhere a exectable secto o JavaScrptDOM t
pops p the browser cooke
i yo wat to test ths ot make a sample HTML le
ad pt the rst le sde a ltscriptgt tag ope t yor
browser ad t wll pop p a ldquo1rdquoThs JavaScrpt tsel s ot a ew orm o Cross Ste
Scrptg attack bt a terestg orm o obscato
it also shold be the al commet whe someoe says
they are protectg agast Cross Ste Scrptg attacks by
lterg bad characters or sg smple reglar expressos
to lter ldquoscrptrdquo or ldquodocmetcookerdquo
i started to reverse ths JavaScrpt becase t ascated
me ad i wated to kow how t worked
Frstly i realzed there are really two deret les here
Frst
($ = [ $=[]] [ (__ = $ + $ )[ _ = -~-~-~$] + ( +
$)[__] + ( $$ = ($_ = + $)[__] + $_[+$] )])()
Whch becomes a sort() commad Ad
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes a alert(1)
So the etre two les break dow to
[][sort])()[alert](1)
The execto o whch becomes Windowalert(1)$ = [] s a blak array that gets assged as a object
to the ma Wdow so we ca thk o ths as Window
Array
[] s or orgal Array whch gets a reerece to [[]]
[sort]()
The browser exectes WindowArray[sort]() whch
retrs a reerece to Wdow Ad ths reerece s sed
to call
Window[alert](1)
Whch exectes as
Windowalert(1)
Letrsquos start to tear ths apart bt by bt ad see how we get
[sort] ad [alert] ot o the jmble above
__ = false via [(__ = $ + $ )]
__ = [(Array + ArrayToString())]
__ = false + ArrayToString() __ = false
_ = -~-~-~$
The ~ operator JavaScrpt meas -(N+1) so operatg
-~ = +1 So -~-~-~$ = 3
Ad _ = 3 ad ths __ = 33 = 1
(__ = $ + $ )[ _ = -~-~-~$]
(false)[_]
(false)[3]
false[3] = s
( + $)[__]
+ $ = object + ArrayToString()
= ldquo[object Object]rdquo
[object Object][__]
[object Object][1]
[object Object][1] = o
$$ = ( $_ = + $)[__]
$$ = ( true)[1]
true[1] = r
$_[+$] =
ldquotruerdquo[+$]
ldquotruerdquo[+[]]
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 144214 FEATURES
+[] calls ArrayprototypetoString() or ts prmtve
vale ad the coverts the empty strg to a 0
true[0] = t
$_ = true
$$ = rt
($$ = ( $_ = + $)[__] + $_[+$] ))
($_ = + $)
$_ = true + ArrayToString()
$_ = true
$_[__] + $_[+$]
true[__]
true
$_[0] = t
$$ = rt
Ths the rst le becomes sort()
($ = [] [s + o+ r+ t ] )()
The secod le s
[__[__]+__[_+~$]+$_[_]+$$](__)
$ = 0
_ = 3
__ = false
$_ = true
$$ = rt
[__[__]+__[_+~$]+$_[_]+$$](__)
Whch becomes
[__[1] + __[3 + -1] + $_[3] + $$)(1)
Whch becomes
[false[1] + false[3 + -1] + true[3] + rt(1)
[ a + l + e + rt ](1)
alert(1)
irsquod lke to gve credt where credt s de a ew places
i ddrsquot wrte or d ths JavaScrpt i saw t a slde deck
rom BlackHat DC 2011 Ths le caght my eye the
mddle o the presetato i leared a lot o strage thgs
abot JavaScrpt lookg at these two les ad some olks
were ce eogh to pot ot a ew errors assmptos
i had made n
Adam Cecchetti is a founding partner of Deja Vu Security where he
specialized in hardware penetration testing
Commentary
By JOnATHAn ROCKWAY (jrockway)
(On the purpose o the script)
Some people think that they ca
secre ther stes agast XSS by
regexg all the ldquobad JavaScrptrdquo ot i
the ldquosecrty sotwarerdquo sees ldquodocmet
cookerdquo the t stops the scrpt rom
exectg (Or t jst replaces t wth
the empty strg etc)
The problem s there are a lot o
ways to say docmetcooke ad a
blacklst s gog to mss oe o them
Moral o the story people ca
execte scrpts o yor page yorsquore
0wed Everyoe competet kows
ths bt sometmes the less competet are slow to realze ths
So the scrpt that the artcle
descrbes s or ther beet Good lck
wrtg a regex to stop ths oe
(There are also eve smpler
ldquoexplotsrdquo yo regex docmet
cooke to the empty strg the ldquodoc-
metdocmetcookecookerdquo regexes
to ldquodocmetcookerdquo Ooops)
Reprinted with permission o the original author First appeared in hnmyjavascript
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 164216 STARTUP
The Designer Who LearnedDjango and Launched HerFirst Web App in 6 Weeks
irsquom a designer ad rot-ed
developer Ater beg tred
dow by Y Combator i
decded to lach a smple webapp
to get mysel o the path o developmet
Say hello to the al prodct
WeddingInviteLovecom itrsquos ot too
complex code-wse i delberately
chose somethg that wold be
rather smple to get mysel o
the grod Ths web app was a
departre rom my earler project
WeddingTypecom where i lached
my cooder search o Hackernews Agst od a cooder
started bldg the prodct appled
to Y Combator or Wter 2011
got a tervew was tred dow
ad decded to part ways rom the
cooder irsquom stll plag o
lachg WeddgType bt was
gog to lear how to code i wold
have to take baby steps rst mdash ths
WeddgivteLove
Working on a dierent idea but
not pivotingi yor dea doesrsquot tally work
ot try workg o a related project
thatrsquoll ehace yor orgal dea
whle keepg yor ethsasm or
the area Both WeddgType ad
WeddgivteLove are the same
space mdash weddg vtatos mdash bt
caterg to two deret types
o cstomers WeddgType the
vtato typography geerator sor o-desger coples lookg to
save some moey by creatg ther
ow vtatos WeddgivteLove
s a drectory o botqe weddg
vtato desgers or coples
who are lookg to sped more or
a proessoal hgher qalty desg
They both crease my promece
ad reach wth the weddg vta-
to dstry bt also avod poachg
cstomers rom each other
Take advantage o help Why dd i choose Pytho ad
Djago over Rby or ay other
programmg lagage i eeded
to take advatage o the resorces i
had maly shazow my b whorsquos
a expert Pytho bt specalzes
Pylos a deret ramework
irsquove heard a lot o qalty dscs-
sos betwee Pylos ad Djago
bt or me Djago has a lot morehad-holdg tha other rameworks
ad a lot o ttorals ole For
tty-grtty Djago qestos that
Adrey coldrsquot aswer i tweeted
that i eeded some help ad got two
awesome advsors katr who i
met perso several tmes to work
ot problems i was havg ad
By TRACY OSBORn
STARTUP
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1742 17
keethlove who irsquod iM at all
pots the ght or help wth
specc bgs i also sed keeth-
loversquos screecast blog ttoral
[hmydjagostart ] sce i coldrelate t drectly to my project Pro-
les o WeddgivteLove are lke
blog posts o a blog i jst chaged
some ames arod All code was
wrtte by me whle i took advatage
o the meros Djago applca-
tos sch as djago-regstrato
Build the web app frst then
design itit was temptg to bld the etre
terace rst bt i delberately
gored the desg tl i had
thgs 90 workg Ths got me
to costatly work o the code
beore workg o the ldquo strdquo
Pls t ecoraged me to lach
qckly sce as soo as the code was
shed all i had to do was ldquoskrdquo
t beore gettg t lve wth the
assmpto that i wold be teratg
o the desg ater t laches Also
i eeded to abado the project de to some srmotable code
problem the tme wasted woldrsquot
clde the tme spet o desg
Launch as ast as possible
nothg klls a ew dea better tha
takg too mch tme o t There are
thosads o thgs more that i cold
have doe to mprove Weddgiv-
teLove beore i lached t bt get-tg t ot ad geeratg eedback
was mch mch more mportat
i dorsquot mea yo shold lach a
complete project bt pare dow
yor eatres to the very mmm
ad get t lve as ast as possble
Oe problem i aced was covc-
g desgers to sg p beore the
ste was lve so i created three ake
proles ad emaled 10+ desgers
wth screeshots o the homepage
ad tre prole pages explag
that i was bldg t or ad t wold be ree to lst them itrsquos a w-
w scearo or the desgers ad
mysel bt emalg ot o the ble
ca look shady Oe desger repled
that my emal looked lke spam bt
the proessoal desg the scree-
shot i lked covced her to sg p
ayways My desg meat the der-
ece betwee someoe gorg my
emal verss takg t more seroslyOce the webste receved ts rst
3 proles i got t lve (oDotclod)
bt coted to emal desgers
drectly ow potg to the lve
ste Overall i emaled 67 desgers
drectly (see screeshot) wth a
approxmate 50 respose rate ad
slghtly less sg-p rate
ldquoNothing kills a new idea betterthan taking too much time on itrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 184218 STARTUP
The ldquorealrdquo launch mdash landing a
major blog post
i was p to abot 20 desgers (ot
that bg o a deal to ay potetal
cstomer lookg or a ll fedged
drectory) whe i traveled to new
York ad decded to chat p oe o
my avorte desg bloggers Ta
Roth Eseberg (Swss Mss) The
tactc o travelg ad emalg
someoe ldquoamosrdquo radomly that
area ad vtg them to lch has
worked well the past (i laded
a gest spot o The Bg Web Show
ater vtg Jeery Zeldma or
lch) Ater the lch i was able to
show her WeddgivteLove ad
got some great eedback all i was
expectg ad hopg rom the vst
Awesomely ater i let Weddgi-
vteLove was blogged abot o Swss
Mss Gettg proled o oe o the
best desg blogs ot there was the
best beger boost that i cold ask
or lachg a tred o blog posts
ad tweets ad ladg Weddg-
ivteLove aother 60 desgers to
a total o 83 a week ater the Swss
Mss blog post
Future monetization
i get asked a lot o how irsquoll mo-
etze i have o teto o ever
takg away ree proles chargg
cstomers to search or actg as
a mddlema ad takg comms-
so My crret pla s to lach
pro proles wth spport or more
portolo mages ad other eatres
or every pgraded prole Beore i
ca lach ths however i have to
get more lks ad trac to esre a
pro prole s ldquoworth trdquo to desgers
so irsquove bee ocsg o promoto
or the last ew weeks
Conclusion
bull i yorsquore a desger pckg p
developmet looks really togh
bt stck t ot or a cople o
moths mdash beg eabled wth the
ablty o creatg yor vso s
worth t
bull i yorsquore learg a ew lagage
dorsquot do ttorals verbatm mdash take
what theyrsquore teachg apply t to
a deret prodct ad yo wll
lear a lot aster
bull Lach as ast as possble sce
eedback o the prodct s the
most mportat
bull Dorsquot be arad o askg ldquobg wgsrdquo
or ther advce mdash byg some-
oersquos lch s a small prce to pay
or kowledgeable eedback
bull Ask or help as mch as possble
ad wherever yo ca d tn
Tracy Osborn is a designer front-end devel-
oper and future superhero currently work-ing on WeddingInviteLovecom an online
directory o wedding invitation designers
Her portolio and articles are located at
Limedaringcom and she tweets odd and
curious things at limedaring
ldquoI yoursquore learning a new languagedonrsquot do tutorials verbatimrdquo
Reprinted with permission o the original author
First appeared in hnmywedding
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 1942
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 204220 STARTUP
What I Wish SomeoneHad Told Me AboutStartups 4 Years Ago
The year is 2007
ad i had jst let
Mcrosot to dve
to the startpworld Lke may rst-tme etrepre-
ers i was very excted abot the
advetre Ad lke may rst-tme
etrepreers i ddrsquot kow where
to start
So i atteded evets meetps
coereces ad mgled wth the
local startp commty Seattle
Whe tme came to move to the
Bay Area i od eve more evetsmore meetps ad more coer-
eces The startp ecosystem was so
bsy ad alve ad i od a wealth
o kowledge ad experece beg
shared whch i cosmed eagerly
There were also blogs vdeos
tervews ad books that i
gested wth passo They made
great coversato topcs drg
the evets the meetps ad the
coereces
i eve joed a startp cbatorit wasrsquot tl i decded to lach
my ow startp that i realzed
that othg irsquove read watched or
atteded really prepared me or t
Ad i mea t Absoltely othg
i had orgotte most o what irsquove
leared ad what i remembered
ddrsquot apply mch to my stato
irsquove bee sackg o other peoplersquos
expereces ad sccesses ad lkegood jk ood t made me eel
bloated ad satsed
Sorry to be a party pooper bt
thatrsquos realty
i the begg i tred apply-
g the thgs irsquove leared to my
stato That ddrsquot work The
magc momet really happeed
whe i made peace wth the act
that irsquod jst wasted a good deal o
tme learg thgs i ddrsquot really
eed belevg there was a magcword someoe wold tter that
wold lach me to acto Every
evet every coerece ad every
blog post was jst aother excse
to postpoe acto oe more day i
made peace wth t ad moved o
wth a begerrsquos mdset belevg
that i wll gre ot what i eed
alog the way
Ad that made all the dereceThere s a part each oe o s
that wats to create delver ad
lach to a etrepreeral adve-
tre wth all the certaty ad
rsk that t brgs Bt there s also
the other part the oe that wats to
eel certa ad codet that wersquore
makg the rght decso ad wersquore
By AMiR KHELLA
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2142 21
ot gog to al ad hrt orselves
alog the way Ad thatrsquos where most
o the rcto comes rom
Bt these blogs these evets adthese tervews ddrsquot really remove
that rcto For a whle t jst gave
me some comort kowg there
were eogh people dog the same
thgs Gog to etrepreershp
was otsde o my comort zoe ad
irsquod jst i moved rom oe comort
zoe to aother Ad yo kow
what i was good compay
Oe day i had my realty check ad saw that i was bsy dog
may thgs except workg o my
prodct A cople o moths later i
ca say wth ll codece the oly
thg that coted was to actally st
dow ad do the work
Dorsquot get me wrog i thk some
blogs ad coereces are valable
Bt less yorsquore already workg
o somethg that provdes the
ramework or yor learg ad
etworkg yorsquod be wastg somevalable tme
Here are some acto steps that
helped me overcome the ldquostartp
rcto sydromerdquo
bull i stopped readg startp ews ad
blogs or a ew weeks ad i real-
zed i ddrsquot mss aythg related
to my prodcts it ddrsquot matter
who got ded who got acqred
or why iteret Explorer was
losg market share agast Google
Chrome The oly ldquowhordquos i care
abot are the cstomers ad the
oly ldquowhatrdquos i ocs o are ther
eeds ad desres ad how to best
delver vale to them
bull i stopped gog to startp evets
or a cople o moths ad started
catchg p wth reds over
coee or drks stead i stll goto oe or two evets each moth
bt i do t or i o loger
cose gog to etrepreershp
evets wth beg a etrepreer
bull i taght mysel throgh small
projects i broke dow deas to
small maageable chks ad gave
mysel deadles to sh each o
them Projects ad expermets
are amazg teachg devces
becase yo lear as eeded ad
yo lear rst-had Keyotopa
has helped tremedosly
gettg deas ot o my head ad
to a ormat that i ca qckly
see teract wth ad show to
potetal cstomers mdash thatrsquos why
i created t the rst place
ldquoThe only thing that counted was toactually sit down and do the workrdquo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 224222 STARTUP
bull i each step i came p wth a lst
o qestos that wold help me
move to the ext step Whether t
was gettg more trac mprov-
g the prodct or creasg
revee wthot creasg trac
i came p wth the best qestos
i cold the i dd research asked
people ad i pt the aswers to
acto mmedately Every pece
o ormato ot acted o takes
too mch space my bologcal
memory stck
bull Ths s my avorte i created more
ear o ot startg tha the ear o
startg i realzed that every day i
wated a cstomer was ot gettg
my solto ad a compettor
was gettg closer to that solto
beore i dd i eve maged my
worst ghtmare irsquod aled to
take acto i was Mlto rom
Oce Space tcked the corer
cbcle o iotech starg at my
red stapler ad watg or my
ext paycheck That was the magc
kck--the-btt i was lookg or
bull i rst got thgs doe the i got
them doe rght i leared (the
hard way) that mometm mat-
tered most i i carsquot take acto
rght away o my dea chaces
are i ever wll Wheever i get a
dea owadays i do somethg to
p t to my realty ad to make t
tagble i do t a qck ad gly
way the gre ot how to do t
better ad lear oly what i eed
or that
bull i aced realty othg was gog
to happe tl i wet ot o my
comort zoe ad dd t May
wat bt a ew act
i wat to leave yo wth a qote
that chaged my le ldquosccessl
people arersquot ecessarly smarter or
lcker tha others They jst try so
may thgs ad al tl somethg
works otrdquo
Dorsquot be a etrepreer by
assocato Be a etrepreer by
acto ad reslts n
Amir is an entrepreneur hacker designer
and artist He enjoys simpliying complex
problems and launching small proftable
products His latest venture Keynotopiacom
was launched in 3 hours with a $4750
budget and had its frst paying customer
within 10 minutes o launch
AFaiC suCCess = (BldgSt) (TheValeOEverythgElse)
i yorsquore ot bldg st t doesrsquot matter how mch vale yo get ot o everythg else Zero s stll zero
Sorry t took yo 4 years to lear that lesso it took me a whle too i dorsquot really kow how log becase i dorsquot look
back i sspect oe o s shold
CommentaryBy ED WEiSSMAn (edw519)
ldquoDonrsquot be an entrepreneur by associationBe an entrepreneur by action and resultsrdquo
Reprinted with permission o the original author
First appeared in hnmyaction
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2342
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 244224 SPECIAL
How to Train Your Brain toFlip to a New Language
When you start lear-
g a ew lagage
commo wsdom
sggests that yo have two possble
goals (ot mtally exclsve) Oe
s passg a exam Maybe yo took
Frech whle Hgh School wth o
other goal tha gettg a good grade
ot gvg a dam abot the cotry
the lagage or the people The other
commo goal s the dreaded F-word
fecy Forget commo wsdom mdash
there s somethg more mportat
tha the vage oto o fecy
The term ldquofecyrdquo s very ambg-os becase there s o scale
measrg fecy Persoally i ca
get by most statos wth the
Eglsh lagage bt i oly cosder
mysel fet whe talkg abot
mathematcs where my vocablary
s almost complete ad the grammar
i kow s eogh or all possble
themes that ca occr
Whe i am startg wth a ew
lagage i dorsquot set my vews
some abstract fecy i wat what
may be called ldquoworkg fecyrdquo or
as i pt a post my blog
ldquogettg to the lagage swtch
[hmyswtch]rdquo What s the
lagage swtch
itrsquos lke eelg that expect-
edly yo have a btto yor
bra Whe yo psh t yo ca
get thoghts straght to yor target
lagage Ths s ot the same as
beg fet becase yo ca get to
the pot o beg able to psh theswtch way beore yo are fet
Yo ca be happly talkg (or
wrtg) irsh ad sddely oe o
the words yo wat to say jst srsquot
there Yo have a small short-crct
yor swtch easly repared by
learg (or relearg) the troble-
some word
Oce yo are there ad have a ce
swtch sde yo yo ca be pretty
sre o at least beg able to teract
wth locals ad stop eelg ot o
place Maybe yo wll have to stop
the mddle o a phrase ad look
at yor dctoary or ask some
commo lagage or jst pot yor
ger to the moo The mllo-dol-
lar qesto s the how do yo get
there More to the pot how do yo
get there whe yor target lagage
does ot have a lot o speakers
The lagage swtch s ot blt
it s traed As Vce Lombard sadldquoPerect practce makes perectrdquo
Keep o drllg stadard phrases
For example somethg i sally
do s say to mysel komd saeligll og
blessaethr whe i pass a ma by the
street ad komd saeligl og blesseth
whe i pass a woma These are two
commo greetgs iceladc ad
yo eed to get sed to the correct
By RuBEn BEREnGuEL
SPECIAL
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2542 25
orm or me ad wome The best
way to make t part o yo s jst to
drll t some y way lke ths
tl t s as atral as sayg ldquohellordquo
Yo ca also se old bsess cards(or here Spa tra tckets whch
are credt card szed) to practce
verb cojgato Wrte the blak
sde o oe the cojgato o ldquoto
berdquo ( iceladc aeth vera irsh biacute)
ad pt t yor pocket Wheever
yo have a ew spare secods lke
watg qee to pay at the store
or watg or the streetlght to tr
gree (as a pedestra) take a look at t ad repeat them to yorsel Yo
wll be amazed how easly ths hard-
wres costrcts to yor bra
Yo ca exted these ldquocheap
easyrdquo drllg techqes to harder
st lke codtoal orms tre
colors mbers ad whatever jst
by sheer persstece ad a costatplayl sprt Throw a ew dce ad
say the mber they spell Cot
yor pocket moey irsh Pla
yor weeked iceladc Be cre-
atve i what yo really wat s to be
able to commcate beg playl s
a mst Ths s especally mportat
yorsquore tryg to pass a exam
Keep md that perect practce
makes perect Yo shold try toprooce words correctly ad (
ecessary) have a clear dea o how
they are wrtte Ad mxg der-
et kd o drlls wll also help keep
a stack o verbs by yor door ad
pck oe deret each morg
Do a lttle o ths each day ad
wthot eve realzg t yo wll
be able to geerate phrases wthot
eort whether speakg or wrtg
Read a lttle daly ad the trewth yor lagage cold ot be
ay brghter n
Ruben Berenguel is a mathematician fn-
ishing his PhD about invariant maniolds
in infnite dimensional dynamical systems
A lielong language geek he is currently
trying to learn Irish and Icelandic and set-
ting sights on Norwegian and Swedish He
blogs in mostlymathsnet and tweets as
berenguel
imoved to a Germa-speakg
cotry abot a year ago irsquom ot
brllat at lagages bt irsquove made
great progress ad most people
are srprsed to d ot how lttle
Germa i spoke a year ago Here are
some o my tps
1 use Memosye every day it s
compterzed fash cards based o
the SperMemo algorthm Do ot
skp days At arod 2000 words
memorzed (9 moths) the ldquoswtch
fppedrdquo At 2000 words yo ca
have coversatos wth abot
ayoe Bsess s stll hard bt
small talk s easy
2 Read trashy lteratre mdash People i
Toch Celebrty Rags mdash these are
all wrtte so 10-year-olds ca read
t newspapers se bgger words
ad dorsquot have pctres Readg
abot celebrtes s a hassle bt t
helps ad trsquos a approprate level
3 Got kds Tr the W ad
Cartoos to the oreg lagage
Ths makes yor play tme also a
learg process
4 Do ot tr yor compter to a
oreg lagage Ths wll crpple
yor prodctvty i am orced to
work Germa o a Wdows
box ow ad t s really awl ad
rstratg not recommeded at
all not oe bt
5 Germa Tesday - Detsche
Destag - Every Tesday was
Germa Tesday Ayoe caght
speakg Eglsh to me had topay a Frac to a Jar i i spoke
Eglsh the i pad Ths makes my
Germa a game the oce
Pls we had Ber Fretag at the ed
o the week i stole ths dea rom
a otsorcg compay i worked
wth where Tes ad Thr were
Eglsh-oly days
CommentaryBy HAMLET DrsquoARCY (hamletdrc2)
Reprinted with permission o the original author
First appeared in hnmyfip
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 264226 DESIGN
Rock Solid WebsiteLayout Examples
Layout Can be both oe o the easest ad oe o
the trckest acets o web desg Sometmes a
desger ca bst ot a amazg layot m-
tes ad sometmes that same desger ca strggle or the
better part o day wth the same taskEach project s qe ad calls or a qe solto bt
irsquove od t helpl to keep a ew rock sold ad credbly
versatle algmets md that i ca bst ot whe i get
stck The te layots below shold be eogh to get yo
throgh eve the worst cases o desgerrsquos block whe
yo carsquot gre ot the best way to arrage the cotet
o yor page
Keeping It Simple
Page layot s eqal parts art ad scece Creatg some-thg thatrsquos vsally attractve ad qe takes a artstrsquos
eye However there are several very easy-to-ollow gde-
les that yo ca se to create sold layots that work or
ay mber o cases These prcples clde choosg
ad stckg to a algmet strctrg yor whtespace
properly ad hghlghtg mportat elemets throgh
sze postog etc
Desgers ote stress ot ar too mch abot the layot
process We have a tedecy to approach a project whle
thkg that t eeds to be completely qe every
respect to be worth or tme ad the cletrsquos moey How-
ever yo have a good look arod the web yorsquoll seethat ths srsquot ecessarly the case Great lookg webstes
ote se layots that are arly smple ad ot the least
bt qe itrsquos tre that the pages we desgers marvel at
the most are ote rom the peclar stes that break the
mold bt yor average clet jst wats somethg sable
clea ad proessoal
i ths artcle wersquore gog to take a look at te very
commo layots that yo ca d o cotless stes across
the web notce that the way these stes are styled mdash mea-
g the colors graphcs ad ots mdash s qe bt the bascstrctre o the stes themselves are based o tred ad tre
methods or layg ot a webpage Wersquoll emphasze ths by
rst showg yo a smple slhoette o the layot so that
yo ca project yor ow thoghts ad desgs oto t
The wersquoll ollow t p wth oe or two examples o real
stes that se the layot
By JOSHuA JOHnSOn
DESIGN
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2742 27
Three Boxes
Ths s probably the smplest layot o the lst i act
yorsquoll be tempted to thk that trsquos ar too smple to ever
t yor ow eeds i ths s the case yorsquoll be srprsed
yo really pt some thoght to how versatle the arrage-
met really s
The three-box layot eatres oe ma graphc area
ollowed by two smaller boxes dereath Each o these
ca be lled wth a graphc a block o text or a mxtre o
both The ma box ths layot s ote a jQery slder
capable o showcasg as mch cotet as yo wat
The slhoetted shapes alog the top are areas that ca
be sed or logos compay ames avgato search bars
ad ay other ormatoal ad ctoal cotet typcally
o a webste
Ths desg s deal or a portolo page or aythg
that eeds to show o a ew sample graphcs Each o the
mages cold be a lk that leads to a larger more complex
gallery page Later the artcle wersquoll see how to mx thsdea p eve rther
next we see a beatl mplemetato o the three
box layot Peter Verklersquos portolo As sggested
above the prmary graphc rotates ad dsplays a mber
o Peterrsquos recet projects Clckg o oe o the boxes wll
brg yo to that projectrsquos dedcated page where yo ca
d ot more ormato
Smple eectve ad attractve Yo ca probably pll
o a ll lve web page wth ths layot der a hor
3D Screenshots
As developers cote to create a edless collecto o
web apps the 3D screeshots layot see below or some
varat o t s becomg more ad more poplar The basc
dea s to top yor page wth a headle ad the toss
some stylzed prevews o yor applcato These ote
come wth refectos heavy shadows bg backgrod
graphcs or eve complex adormets sch as ves crawlg
all over the screeshots bt the core dea s always really
smple
Aother place i see ths trck sed a lot s pre-blt
themes i these cases a desger s sellg a stock layot
ad really eeds hsher placeholder graphcs to she ad
othg says cool ad moder lke some acy 3D eects
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 284228 DESIGN
Pxelworkshop ses ths techqe ot as a stock theme
bt to actally showcase stock themes Here the 3D scree-
shots swap ot a sldeshow ad come p a mber o
deret arragemets Stop by ad take a look to see all
the varos ways the desger presets the mages
Advanced Grid
May o the layots that yorsquoll see ths artcle adhere to
a pretty strct grd algmet However or the most part
they dorsquot smply sggest a page ll o orm thmbals
For stace the layot below mxes p the sze o the
mages to avod reddacy
As wth the three boxes example therersquos oe prmary
graphc headg p the page Ths s ollowed by a smple
twst o the dea o a orm grd o thmbals The
space wold allow or a spa o or sqares horzotally
bt stead wersquove combed the rst two areas so that the
let hal o the page ders rom the rght
As we metoed wth the rst layot the blocks dorsquot
have to be mages For example yo ca mage ths as
blocks o text o the let fakg sqare mages o the rght
i the gorgeos example below ths layot s sed or a
chldrersquos clothg webste notce that ear the bottom
o the algmet theyrsquove swtched thgs p eve rther
so that the let sde eatres a almost oddly-szed mage
ollowed by a paragraph ether o whch perectly le p
wth the cotet o the rght sde
Aga oce yorsquove got yor basc layot md yo
ca make sbtle chages lke ths whle matag the
tegrty o the derlyg strctre Aother terestg
trck they sed was to splt p the ma graphc to two
areas itrsquos actally all oe JPG bt t has bee dvded to
two mages to show o eve more cotet
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 2942 29
Featured Graphic
Sometmes yo dorsquot have eogh cotet or a page ll o
mages So what do yo do yo wat to showcase oe co
photo or perhaps eve a symbol sch as a ampersad The
layot below s a sper easy solto that s qte poplar
ad reads very well de to the lack o dstractos
The reslt s a page that s bold yet mmal ad clea
The statemet t makes s strog ad mpossble to mss
jst make sre yor graphc s good eogh to be eatred
so prometly
Jst how commo s ths layot A lot more commo tha
yo mght thk Wth mmal eort i was mmedately
able to come p wth two stes that se some close varat
o ths techqe notce that yo have optos or how yo
wat to ormat the text ad eve where yo wat to place
the avgato The secod ste rearrages the secodary
elemets qte a bt bt trsquos statly recogzable as the
same basc layot
Five Boxes
The ve-box layot s smply a evolto o the three-box
layot All o the same logc apples trsquos jst bee moded
to hold eve more cotet it cold easly be or boxes as
well t jst depeds o what yo wat to showcase it also
makes t look lke yo pt a lttle more eort to the desg
Obvosly as yo add to the layot the secodary tems
become smaller ad smaller so or most ses ve boxes s
probably gog to approach the lmt
Jst as wth the three box layot ths oe s so versatle
that t ca lterally be sed o jst abot ay type o ste
ideas or swtchg t p clde addg a large backgrodgraphc rodg the corers addg shadows ador refec-
tos or perhaps eve addg a teractve elemet to the
smaller thmbals Yo cold easly add bttos that
case them to scroll horzotally
Here aga we have two examples o ths layot beg
sed slghtly deret ways The bg thg to otce here
s that despte havg smlar layots these two stes almost
coldrsquot appear more deret rom each other they
tred Oe ses a had draw llstrato style the other
photographs ad gradets The rst oe ses mted colorsad scrpt ots the secod brght colors ad moder ots
Ths drves home the argmet that sg oe o the
layots ths artcle worsquot kll yor creatvty Oce yorsquove
arraged the cotet therersquos stll plety to be doe the
area o aesthetcs Ths s what wll really dee the stersquos
persoalty ad ote make or break a clet proposal
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 304230 DESIGN
Fixed Sidebar
Ths ar all the stes that wersquove see have had a top-sde
horzotal avgato The other poplar opto s o corse
a vertcal avgato whch leds tsel to creatg a strog
vertcal colm o the let sde o the page Ote ths s
a xed elemet that stays where t s whle the rest o thepage scrolls The reaso or ths s so the avgato ca stay
easly accessble rom ay pot the ste
The rest o the cotet ca borrow rom oe o the
other layots o ths lst notce that irsquove aga moded
the three-box layot ths tme a or-box arragemet
Oce yorsquore doe readg ths artcle look at all the layots
aga ad thk abot how yo ca mx ad match the deas
to create ew layots
As wth the prevos example the two stes below act-
ally look very deret eve rom a layot stadpot
However yo look aga yorsquoll otce that they both
se a let-sde vertcal sdebar ad the or-box layot The
secod example has smply moved the smaller boxes to the
top o the page Yet aother terestg dea that yo shold
keep md whe creatg a ste based o these examples
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3142 31
Headline amp Gallery
Everyoe loves a good gallery page From a layot per-
spectve what cold be smpler All yo eed s a sold
orm grd o mages ad some room or a headle wth
a optoal sb-head The key here s to make yor headle
bg ad bold Feel ree to se ths as a pot o creatvtyad clde a scrpt or some crazy typeace
Ths example ses sqshed rectagles to mrror the
real ste below bt ths ca ad shold be moded to
t whatever yorsquore showg o The pot here s to get
yo to thk otsde the box ad ot dealt to a sqare
maybe yo cold se vertcal rectagles or eve crcles
yor ow gallery
The developer below sed ths desg to create a gallery
o the logos or clets that he has worked wth notce that
hersquos ot sggestg that he created the logos bt s smply
showg o hs clet base a very vsal asho Ths
goes to show that eve yorsquore ot a desger a thmbal
gallery mght be a great way to showcase a otherwse pla
ad borg lst o tems
Featured Photo
The layot below s extremely commo especally amog
the photography commty The basc dea here s to have
a large mage dsplayg ether yor desg or photogra-
phy (aythg really) accompaed by a let-sde vertcal
avgato
The avgato mght be the strogest a let algmet
bt eel ree to expermet wth a ceter or eve rght
algmet to complmet the straght edge o the photo
The ste below really makes the most o ths layot by
trg the oe eatred mage to a horzotal slder
Oe mage s eatred at a tme bt yo ca see the ext
oe peakg oto the rght sde o the page Whe yo
hover over ths a arrow appears that allows yo to slde
throgh the photos
As a alteratve why ot try to make a ste that tlzes
ths same layot bt wth a vertcally sldg mage gallery
The space almost seems more sted or ths as yo worsquot
have to clde a awkward cto area to protect the
avgato
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 324232 DESIGN
Power Grid
The power grd s the most complex layot ths artcle
bt t s oe o the most eectve layots irsquove see or pages
that eed to cota all kds o varos related cotet
From mages ad msc players to text ad vdeos yo ca
cram jst abot aythg to ths layot ad t stays strog
The key les the bottom hal o the prevew above
notce that therersquos actally a large cotaer that holds a
seres o rectagles Ths cotaer provdes yo wth the
bodares or yor space ad all the cotet yo place
sde shold be ormatted a strog bt vared grd ot
lke the advaced grd layot ear the begg o ths
artcle
Ths oe ca be really hard to wrap yor md arod
tl yo see some lve examples The rst s a showcase
o art ad cltre That descrpto aloe tells s that the
cotet s gog to be all over the board ad deed we
see that the page s lled wth Twtter eeds photos lsts
mages ad more
However t all ts tghtly sde the grd that the desger
has establshed Ths layot s easly extedable so that o
matter how mch yo throw at t the overall appearace
shold rema arly logcal ad clttered as log as yo
ormat ad arrage yor cotet properly
Ths layot above heavly remded me o a ttoral i
wrote a whle back o desgg a webste or a rock bad
Here we have a very deret lookg page bt a early
detcal arragemet o cotet especally the lower
hal The real trck to pllg ths layot o rght s to start
wth a ew really bg boxes whch are the broke p to
smaller areas o cotet as eeded
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3342 33
Full Screen Photo
The al layot o the lst s aother that s deally sted
or photographers bt wll work o ay ste wth a bg
attractve backgrod graphc to dsplay ad a lmted
amot o cotet
it ca be really hard to read cotet whe t s lad over
a backgrod mage so the basc dea here s to create a
opaqe (or early opaqe) horzotal bar that sts o top
o the mage ad serves as a cotaer or lks copy logos
ad other cotet
Rather tha sg the bar as oe really wde cotet area
try splttg t to a ew deret sectos Ths ca be
doe by varyg the backgrod color addg some sbtle
vertcal les as dvders or eve breakg the bg box to
smaller dscoected boxes as irsquove doe aboveThs layot mght eel credbly restrctve bt below
we get a glmpse to jst how mch t ca hold Ths
photography ste lls the bar wth avgato a ldquoAbotrdquo
block o text a ew recet photos wth descrptos ad a
large logo not bad or sch a small space ad t plls all
ths o a very clea ad o-clttered way
Conclusion
There were a ew key pots made above that i wat to
reterate closg Frst eve thogh page layot detely
srsquot ecessarly a ldquooe sze ts allrdquo practce there s a scece
to t that ca be qckly ad easly appled a credbly
vast mber o crcmstaces
next the layot deas preseted above eed ot reslt
cooke ctter webstes that all look the same bt stead
merely provde yo wth a basc cavas o whch to bld
a otably qe shed desg
Fally the key to sccesslly mplemetg these deas
s to remember that theyrsquore ot set stoe Each shold be
chaged to t yor specc project ad ca eve be mxed
ad matched to create ew deas n
Josh Johnson is a reelance designer and writer rom Phoenix
Arizona Hersquos currently the editor o both DesignShackcouk and
iPhoneAppStormnet and regularly contributes to a number of other
online publications including Smashing Magazine and Six Revisions
Reprinted with permission o the original author First appeared in hnmylayout
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 344234 PROGRAMMING
Using Git toManage a Web Site
The html sourCe or my web ste lves a Gt
repostory o my local workstato Ths artcle
descrbes how i set thgs p so that i ca make
chages lve by rg jst git push web
The oe-le smmary psh to a remote repostory
that has a detached work tree ad a post-receve hook that
rs git checkout -f
The Local Repository
it doesrsquot really matter how the local repostory s set p
bt or the sake o argmet letrsquos sppose yorsquore startg
oe rom scratch
$ mkdir website ampamp cd website
$ git init
Initialized empty Git repository in homeamsweb-
sitegit
$ echo Hello world gt indexhtml
$ git add indexhtml
$ git commit -q -m The beginnings of my web site
Ayway however yo got there yo have a repostory
whose cotets yo wat to tr to a web ste
The Remote Repository
i assme that the web ste wll lve o a server to whch
yo have ssh access ad that thgs are set p so that yo
ca ssh to t wthot havg to type a password (e that
yor pblc key s ~sshauthorized_keys ad yo are
rg ssh-agent locally)
O the server we create a ew repostory to mrror the
local oe
$ mkdir websitegit ampamp cd websitegit
$ git init --bare
Initialized empty Git repository in homeamsweb-
sitegit
The we dee ad eable a post-receve hook that
checks ot the latest tree to the web serverrsquos Docme-
tRoot (ths drectory mst exst Gt wll ot create t or
yo)
$ mkdir varwwwwwwexampleorg
$ cat gt hookspost-receive
binsh
GIT_WORK_TREE=varwwwwwwexampleorg
git checkout -f
$ chmod +x hookspost-receive
By ABHiJiT MEnOn-SEn
PROGRAMMING
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3542
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 364236 PROGRAMMING
Combinatorial Applicationso Spaceflling Curves
AspaCeFilling Curve is a cotos
mappg rom a lower-dmesoal
space to a hgher-dmesoal oe
A amos spacellg crve s that de
to Serpsk whch s ormed by repeatedly copyg ad
shrkg a smple patter (the covolted tor Fgre 1)
A sel property o a spacellg crve s that t teds
to vst all the pots a rego oce t has etered that
rego Ths pots that are close together the plae wll
ted to be close together appearace alog the crve
Ths orms the bass o the herstc veted by L
Platzma ad me to prodce a reasoably short tor o n
gve locatos (the so-called Travelg Salesmarsquos Tor)Smply vst them the same seqece as does the spacell-
g crve For example a short tor o the pots marked
red s dcated by the gree les whch coect the
pots the same seqece as ther appearace o the
spacellg crve
By JOHn BARTHOLDi
Fgre 1 A herstc solto to the Travelg SalesmaProblem s to vst the pots the same seqece as the Serpskspacellg crve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3742 37
The spacellg crve herstc (SFC) has may adva-
tages yo are wllg to accept soltos that are abot
25 loger tha optmm (expected or radom pot
sets) These advatages clde
bull The SFC algorthm s ast it s essetally sortg ad so
t reqres oly O(n log n) eort to costrct a tor o
pots ad oly O(log n) eort to pdate the solto
by addg or removg pots
bull The SFC herstc does ot eed explct dstaces
betwee pots ad so there s o eed to compte or
measre these as most other herstcs mst
bull
The algorthm s parallelzable i comparso the com-parable algorthm nearest neghbor s apparetly not
parallelzable
bull The legth o lks the SFC tor o radom pots
s expected to be small ad o small varace so that
(1k)-th o the stops accot or abot (1k)-th o the
travel tme Ths meas that a SFC tor ca easly be
coverted to tors or k vehcles smply by parttog
the SFC rote to k cotgos peces
The spacellg crve herstc has bee sed may
applcatos cldg
bull To bld a rotg system or Meals-o-Wheels FltoCoty (Atlata GA) whch delvers hdreds o meals
daly to those too ll or old to shop or themselves We
blt ths o two rolodex card les
bull To rote blood delvery by the Amerca Red Cross to
hosptals the Atlata metropolta area
bull To target a space-based laser or the Strategc Deese
itatve (commoly kow as the ldquoStar Warsrdquo program)
Ths applcato was commcated to s by scetsts
rom TRW Systems a SDi cotractor who chose thespacellg crve herstc over alteratves becase t
was well-aalyzed parallelzable ad cold r o a
compter that was boostable to orbt
bull To cotrol a pe-plotter or the drawg o maps (M
ir ad co-workers at the uversty o Tokyo showed
how t cold be sed to redce drawg tme or large
road maps by rotg the pe ecetly They gave a
example whch drawg tme was redced rom 10
hors to 12 hor)
Fgre 2 A TSP tor o 15112 ctes Germay Ths tor wasdced by the Serpsk spacellg crve less tha a secodad s abot 13 aga as log as the shortest possble
Fgre 3 All the pots o a traglated rreglar etwork ca bedexed cotosly by dg a Hamltoa path or crct o the tragles ad llg each wth a stably-oreted spacellgcrve
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3842
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 3942 39
DP Zoo Tour
irsquove always thought dynamic programming was a
pretty crmmy ame or the practce o storg sb-
calclatos to be sed later Why ot call t table-flling
algorithms becase deed thkg o a dyamc program-
mg algorthm as oe that lls a table s qte a good
way o thkg abot t
i act yo ca almost completely characterze a dyamc
programmg algorthm by the shape o ts table ad how
the data fows rom oe cell to aother Ad yo kow
what ths looks lke yo ca ote jst read o the complex-
ty wthot kowg aythg abot the problem
So what i dd was collect a bch o dyamc program-
mg problems rom Introduction to Algorithms ad draw
p the tables ad data fows Herersquos a easy oe to start o
wth whch solves the Assembly-Le problem
The ble dcates the cells we ca ll ldquoor reerdquo
sce they have o depedeces o other cells The red
dcates cells that we wat to gre ot order to pck
the optmal solto rom them Ad the grey dcates a
represetatve cell alog the way ad ts data depedecy
i ths case the optmal path or a mache to a gve cell
oly depeds o the optmal paths to the two cells beore t
(Becase there was a more optmal rote the t wold
have show my prevos two cells) We also see there s
a costat mber o arrows ot o ay cell ad O(n) cells
ths table so the algorthm clearly takes O(n) tme total
Herersquos the ext trodcto example optmal pare-
theszato o matrx mltplcato
Each cell cotas the optmal paretheszato o the
sbset i to j o matrces To gre ot the vale or a cell
we have to cosder all o the possble combos o exst-
g parethetcals that cold have lead to ths (ths the
mltple arrows) There are O(n2) boxes ad O(n) arrows
or O(n3) overall
By EDWARD Z YAnG
Someone told me itrsquos all happening at the zoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 404240 PROGRAMMING
Herersquos a ce boxy oe or dg the logest shared
sbseqece o two strgs Each cell represets the logest
shared sbseqece o the rst strg p to x ad the secod
strg p to y irsquoll let the reader cot the cells ad arrows
ad very the complexty s correct
There arersquot that may ways to set p dyamc program-
mg tables Costrctg optmal bary search trees s a
lot lke optmal matrx paretheszato Bt the dexes
are a bt ddly (Oh by the way Introduction to Algorithms
s 1-dexed irsquove swtched to 0-dexg here or my
examples)
Here we get to exercse lad The btoc Ecldea
travelg salesma problem s pretty well-kow o the
web ad ts trcky recrrece relato has to do wth the
bottom edge Each cell represets the optmal ope btoc
rote betwee i ad j
The lovely word wrappg problem a varat o whch
les at the heart o the Kth TeX word wrappg algorthm
takes advatage o some extra ormato to bod the
mber o cells oe has to look back at (The TeX algorthm
does a global optmzato so the complexty wold be O(n2)
stead) Each cell represets the optmal word wrappg
o all the words p to that pot
Fally the edt problem whch seems lke the athors
decded to ple o as mch complexty as they cold mster
alls ot cely whe yo realze each strg operato they
order yo to desg correspods to a sgle arrow to some
earler cell usel Each cell s the optmal edt cha rom
that prex o the sorce to that prex o the destaton
Edward Z Yang is an undergraduate currently studying computer
science at MITUniversity o Cambridge He is interested in topics
related to unctional programming and he plays the oboe
Reprinted with permission o the original author First appeared in hnmyzoo
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4142
For the people whorsquove always wodered why t was
called ldquodyamc programmgrdquo therersquos a y story
there irsquoll qote Rchard Bellma who coed the term
ldquoI spent the Fall quarter (o 1950) at RAND My frst
task was to fnd a name or multistage decision processes
An interesting question is ldquoWhere did the name ldquodynamic
programmingrdquo come romrdquo The 1950s were not good years
or mathematical research We had a very interesting gentle-
man in Washington named Wilson He was Secretary o
Deense and he actually had a pathological ear and hatred
o the word ldquoresearchrdquo Irsquom not using the term lightly Irsquom
using it precisely His ace would suuse he would turn red
and he would get violent i people used the term ldquoresearchrdquo
in his presence You can imagine how he elt then about
the term ldquomathematicalrdquo The RAND Corporation was
employed by the Air Force and the Air Force had Wilson
as its boss essentially Hence I elt I had to do something
to shield Wilson and the Air Force rom the act that I was
really doing mathematics inside the RAND Corporation
What title what name could I choose In the frst place I
was interested in planning in decision making in thinking
But ldquoplanningrdquo is not a good word or various reasons I decided thereore to use the word ldquoprogrammingrdquo I wanted
to get across the idea that this was dynamic this was multi-
stage this was time-varying mdash I thought letrsquos kill two birds
with one stone Letrsquos take a word that has an absolutely
precise meaning namely ldquodynamicrdquo in the classical physical
sense It also has a very interesting property as an adjective
And that is itrsquos impossible to use the word ldquodynamicrdquo in
a pejorative sense Try thinking o some combination that
will possibly give it a pejorative meaning Itrsquos impossible
Thus I thought dynamic programming was a good nameIt was something not even a Congressman could object to
So I used it as an umbrella or my activitiesrdquo
So there yo go t was spposed to sod cool mdash ad
dyamc mdash ad lke somethg that ay sel-respectg
cogressma wold wat to d irsquod always vagely
sspected
Commentary
By PETER SCOTT (pjscott)
Senior Developer
youDevise Ltd ( httpsdevyoudevisecom )
London England
60-perso agle acal sotware compay Lodo commtted to learg ad qalty (dojos TDD cotos
tegrato exploratory testg) uder 10 revee-aectg prodcto bgs last year Release every 2 weeks Maly
Java also Groovy Scala o pror kowledge o ay lagage eeded
To Apply Sed CV to jobsyoudevisecom
Front-end and Back-end Engineers
Meetup ( httpwwwmeetupcom )
New York
Meetp thks the world s a better place whe grops o people meetp locally perso arod a commo ter-
est Wersquore revetg how ths s doe bt we carsquot do t aloe We vale teratglachg qckly pragmatsm
ad log walks o the beach
To Apply httpmeetupcomjobs
HACKER JOBS
41
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions
872019 hackermonthly-issue11
httpslidepdfcomreaderfullhackermonthly-issue11 4242
Dream Design PrintMagCloud the revolutionary new self-publishing web serviceby HP is changing the way ideas stories and images ndtheir way into peoplesrsquo hands in a printed magazine format
HP MagCloud capitalizes on the digital revolution creating a
web-based marketplace where traditional media companiesupstart magazine publishers students photographers design-ers and businesses can affordably turn their targeted contentinto print and digital magazine formats
Simply upload a PDF of your content set your selling price andHP MagCloud takes care of the restmdashprocessing paymentsprinting magazines on demand and shipping orders to loca-tions around the world All magazine formatted publicationsare printed to order using HP Indigo technology so they not
only look fantastic but therersquos no waste or overruns reducingthe impact on the environment
Become part of the future of magazine publishing today at wwwmagcloudcom
25 Of the First Issue You Publish
Enter promo code HACKER when you set yourmagazine price during the publishing process
Coupon code valid through February 28 2011Please contact promomagcloudcom with any questions