hackermonthly-issue11

42
Issue 11 April 2011

Upload: kenneth-nichols

Post on 08-Apr-2018

218 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: hackermonthly-issue11

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

Page 2: hackermonthly-issue11

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

Page 3: hackermonthly-issue11

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

Page 4: hackermonthly-issue11

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

Page 5: hackermonthly-issue11

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

Page 6: hackermonthly-issue11

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

Page 7: hackermonthly-issue11

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

Page 8: hackermonthly-issue11

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

Page 9: hackermonthly-issue11

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

Page 10: hackermonthly-issue11

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

Page 11: hackermonthly-issue11

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

Page 12: hackermonthly-issue11

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

Page 13: hackermonthly-issue11

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

Page 14: hackermonthly-issue11

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

Page 15: hackermonthly-issue11

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

Page 16: hackermonthly-issue11

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

Page 17: hackermonthly-issue11

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

Page 18: hackermonthly-issue11

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

Page 19: hackermonthly-issue11

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

Page 20: hackermonthly-issue11

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

Page 21: hackermonthly-issue11

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

Page 22: hackermonthly-issue11

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

Page 23: hackermonthly-issue11

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

Page 24: hackermonthly-issue11

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

Page 25: hackermonthly-issue11

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

Page 26: hackermonthly-issue11

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

Page 27: hackermonthly-issue11

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

Page 28: hackermonthly-issue11

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

Page 29: hackermonthly-issue11

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

Page 30: hackermonthly-issue11

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

Page 31: hackermonthly-issue11

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

Page 32: hackermonthly-issue11

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

Page 33: hackermonthly-issue11

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

Page 34: hackermonthly-issue11

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

Page 35: hackermonthly-issue11

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

Page 36: hackermonthly-issue11

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

Page 37: hackermonthly-issue11

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

Page 38: hackermonthly-issue11

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

Page 39: hackermonthly-issue11

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

Page 40: hackermonthly-issue11

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

Page 41: hackermonthly-issue11

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

Page 42: hackermonthly-issue11

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