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!
Hack Reactor 7
By seldo
Hack Reactor 7
- 2,977