A fly-through guide to web development best practices.

Version 17, fully refactored, Hack Reactor, 2015-12-17

Who is this jerk?

Laurie Voss

CTO,

@seldo

What are we talking about?

I may also include sarcastic remarks down here.

• Dunning-Kruger
• Automate everything
• HTML & CSS
• JavaScript
• UX
• Databases
• Security
• Performance
• Coding antipatterns
• Testing
• Debugging
• Architecture
• Soft skills
• Random additional things

Who died and made you god of web development?

Twitter, America's most trusted source for unbiased facts.

Dunning Kruger

More on Wikipedia: sel.do/dunningkruger

Dunning Kruger Study

Top quartile

Impostor syndrome

Bottom quartile

Disaster area

D-K quartiles are independent

Automate everything

Time saved by automation

Touch typing

The command line

Text editors

Version control

HTML

All hail Sir Tim, the great and powerful.

HTML is meaningful

• Headings
• Headers/footers
• Articles
• Lists
• Navigation
• Addresses
• Times
• Quotes, citations
• Code
• etc.

Semantic markup is amazing

The entire web is just the <A> tag.

CSS: the box model

CSS: the selectors

• Descendant selectors: div ul li 

• Child selectors: div > ul > li

• Sibling selectors: h1 + h2

• Attribute selectors: input[type=radio]

• Partial attributes: input[data~=bob]

• Pseudo-classes: div:first-child

• Pseudo-elements: p:first-letter

• Media selectors: @media(max-width: n) 

Semantic selectors

NO:

class="big red button"

YES:

class="button" id="buy-button"

Block, Element, Modifier convention:

http://sel.do/bem

JavaScript

Rich apps vs. flat sites

It's a spectrum

Load time vs. latency

Richness vs. indexability

Progressive enhancement

JavaScript is always off at the start

http://www.filamentgroup.com/lab/weight-wait.html

http://sel.do/fallbackfont

Handle the read case

because sometimes JavaScript never loads

UX

Solve the user's problems

http://www.nngroup.com/articles/designing-effective-carousels/

Nobody uses carousels:

Be predictable

Nobody scrolls horizontally:

http://www.nngroup.com/articles/horizontal-scrolling/

Links go places, buttons do things

Spatial memory is a thing

UX starts with URLs

Remember the hashbang!

http://twitter.com/#!/ded/status/18308450276

is the same as

http://twitter.com/

Mobile first

http://sel.do/mobile

Don't reimplement browser UI

Accessibility

is not optional

Databases

CAP Theorem

• Consistency
• Availability
• Partition tolerance

Pick two.

CAP is not the only choice

Types of databases

Memory

Memcache

Redis

MongoOhNoDB

CouchDB

LevelDB

MySQL

Postgres

Oracle

Aside: SQL

Aside: SQL

It's really not that bad.

In defense of SQL:
http://sel.do/sql

ORM is an antipattern: 
http://sel.do/orm

Cassandra

Riak

Neo4J

ElasticSearch

The File System

HDFS/HBase

S3

Replication

Backups

Security

Auth

Identification

vs.

Authentication

vs.

Authorization

Authority via Identity

Cookies

Lock them down

HttpOnly = true

Secure = true

Cookies

Performance issues

Always use HTTPS

Always use HTTPS.

Certs are free! letsencrypt.org

Defense in Depth

Salt and hash passwords

OWASP Top 10

https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project

XSS

Cross Site Scripting

(because CSS, RSS and OSS were taken)

Hi, my name is <script>alert('evil')</script>

http://who.is/dns/jamiehankins.co.uk

CSRF

Input validation

SQL Injection

SELECT id FROM users 

WHERE name = 'someuser' 

AND password = 'anything' OR 'x'='x'

password = anything' OR 'x'='x

Direct Object Reference

bob.com/images/../../../mysecret.key

Missing patches

Performance

Speed

vs

Efficiency

vs

Throughput

vs

Latency

Speed is the only thing that matters

https://blog.kissmetrics.com/loading-time/

http://searchengineland.com/google-now-counts-site-speed-as-ranking-factor-39708

Efficiency

if you're huge

Throughput

if you're dumb

Latency

is another type of speed

Caching

Trade storage for speed. Always.

Client caching

Edge caching

Asset caching

Page caching

Fragment/query caching

Preprocessing

Thundering herds

Coding antipatterns

Globals

function foo(x) {
  return whereDidThisComeFrom + x
} 

God objects

function foo(x, god) {
  return god.universe.random.thing + x
} 

Giant signatures

function foo(a,b,doSpecialCase,leapYear,isPrime,isTuesday) {
  ...
} 

function foo(a,b,options) {
  ...
} 

instead

Tiny variable names

Be boring

Code readability

Comments save you time

The 4 commandments

Time zones

All hail UTC

Time formats

YYYY-MM-DDTHH:MM:SSZ is your time format

aka W3CDTF

http://www.w3.org/TR/NOTE-datetime

Character encoding

UTF-8 or GTFO

Testing

Automate, automate, automate

Make the intern do it

Write evil tests

Debugging

Be explorative

Be deliberate

Binary search is amazing

Read the error logs

Write useful errors

Deployment

Architecture

Everything's an API

DRY = Don't Repeat Yourself

Modularity

Distribution

Soft skills

is a bullshit term.

These are the hardest skills.

Planning

Don't be an asshole

"people will forget what you said, 

people will forget what you did, 

but people will never forget

 how you made them feel." 

Maya Angelou

Value yourself

http://blog.ycombinator.com/yc-stats

http://sel.do/sleep

Never work alone

Ask for help

Keep learning

And share what you know

Interviewing

How to find and get a job (by @jewelia)

http://sel.do/findjobs

How to interview other people:

http://sel.do/interviewing

Fight Impostor Syndrome

by ganging up

• lgbtq.technology - LGBT in Tech
• sel.do/womenintech - Women in Tech
• steamrolers.com - Under-represented groups in tech

Stuff I totally skipped

• SQL
• Deployment
• Source Control
• Service-oriented architecture
• Distributed systems
• Internationalization
• Mobile
• Offline-first
• So. Much. Stuff.
• Go explore!

It's finally over

Holy crap it seemed like he would never shut up

Now would be good time to follow me on Twitter!

@seldo

Good questions get t-shirts!