A fly-through guide to web development best practices.
Version 25, Hack Reactor, 2017-01-11
Who is this jerk?
Laurie Voss
COO,
@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
Q: Who died and made you god of web development?
A: Twitter, America's most trusted source for real facts.
Dunning Kruger
More on Wikipedia: en.wikipedia.org/wiki/Dunning%E2%80%93Kruger_effect
Dunning Kruger Study
Dunning & Kruger won the Ig Nobel prize for psychology in 2000, but this is really useful stuff.
Top quartile
Impostor syndrome
Bottom quartile
Disaster area
Automate everything
Time saved by automation
Touch typing
The command line
Are you even old enough to remember this movie?
Text editors
Version control
git or GTFO
What is your job?
50% solving the problem
50% communication
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
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
UX
is what a web app feels like, not what it looks like
Solve the user's problems
Nobody uses carousels:
Be predictable
Links go places, buttons do things
Spatial memory is a thing
UX starts with URLs
Use PushState to allow deep linking within rich web apps.
Remember the hashbang!
http://twitter.com/#!/ded/status/18308450276
is the same as
http://twitter.com/
Be fast
Performance is invisible UX.
Mobile first
Don't reimplement browser UI
Accessibility
is not optional
3.4% of web users have limited vision:
http://www.practicalecommerce.com/articles/2114-Screen-Readers-Eight-Frequently-Asked-Questions
Guide to accessibility:
http://www.nngroup.com/reports/usability-guidelines-accessible-web-design/
Databases
CAP Theorem
- Consistency
- Availability
- Partition tolerance
CAP is not the only choice
- Indexability
- Durability
- Scalability
- Performance
Types of databases
Memory
Best database ever.
Memcache
Memory across machines
Redis
Memory++
MongOhNoDB
Ehhhhhh
CouchDB
Replication is awesome
LevelDB
npm install leveldb
MySQL
(or these days, MariaDB)
Postgres
Get somebody else to install it.
Oracle
More money, less problems.
Riak
Any CAP combination.
ElasticSearch
Do not use it as a primary store.
The File System
Surprisingly capable.
Replication
Backups
Replication is not a backup strategy.
Security
Because people are terrible sometimes.
3 principles of software security
- You can't add it later
- Never trust the user
- Defense in depth
Cookies
Ironically, a half-baked idea.
Cookies
Lock them down
HttpOnly = true
i.e. HTTP, not JavaScript
Secure = true
i.e. smart, not dumb
Always use HTTPS
Always use HTTPS.
Certs are free! letsencrypt.org
XSS
Cross Site Scripting
(because CSS, RSS and OSS were taken)
Hi, my name is <script>alert('evil')</script>
CSRF
Input validation
Regular expressions are really hard and really worthwhile.
Speed
vs
Efficiency
vs
Throughput
vs
Latency
Performance
is
Speed is the only thing that matters
Efficiency
if you're huge
Throughput
if you're dumb
Latency
is another type of speed
Caching
Trade storage for speed whenever you can.
Client caching
aka "Make the user's computer do the work"
Edge caching
aka "Our server farm is the entire Internet"
Asset caching
Page caching
Fragment/query caching
Preprocessing
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
Just learn to type faster.
Avoid being clever
Boring code is better code.
Code readability
Explain your code once, not 100 times.
Comments save you time
And so does documentation.
The 3 commandments
Time zones
All hail UTC
Time formats
Character encoding
UTF-8 or GTFO
(yes, I already used this joke)
Testing
But ask me why TDD is a bad idea
Automate, automate, automate
Make the intern do it
Write evil tests
"What happens if I put emoji in here?"
Debugging
Don't copy code you don't understand.
Be explorative
"What does this button do?"
Be deliberate
If you don't know how you fixed it,
you didn't really fix it.
Binary search is amazing
The more code you delete,
the less code there is to be wrong.
Read the error logs
They are trying to help.
Write useful errors
Error at Line 1
Deployment
is a thing the robots should do for you.
Architecture
Bad code everyone loves is better than beautiful code nobody uses.
Separation of concerns
Having any pattern is better than not having a pattern
Modularity
DRY = Don't Repeat Yourself
Everything's an API
Build a tool, not a contraption
Distribution
All systems are eventually distributed systems.
It feels like we haven't had a joke down here in a while.
Soft skills
is a bullshit term.
These are the hardest skills.
Planning
Building software is easy, finishing software on time is hard.
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
Sleep
Never work alone
"Hey, you guys need any Cold Fusion done?"
Jobs: contracting
Jobs: company size
Keep learning
Share what you know
Interviewing
How to find and get a job (by @jewelia)
How to interview other people:
Fight Impostor Syndrome
by ganging up
- lgbtq.technology - LGBTQ in Tech Slack
- witchat.github.io - Women in Tech Slack
- peopleofcolorintech.com - People of Color in Tech
- devcolor.org - Community for black software engineers
- wocintechchat.com - Women of Color in Tech Slack
- latinosin.tech - Latin@s in Tech Slack
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 10: Stuff Everybody Knows
By seldo
Hack Reactor 10: Stuff Everybody Knows
- 5,087