A fly-through guide to web development best practices.
Version 20, MakerSquare, 2016-06-23
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
Q: Who died and made you god of web development?
A: some people on Twitter, America's most trusted source for real facts.
Dunning Kruger
More on Wikipedia: sel.do/dunningkruger
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
D-K quartiles are independent
Also, stop doing Uber for X startups.
Automate everything
Time saved by automation
Touch typing
The command line
Are you even old enough to remember this movie?
Text editors
Version control
aka git
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
Maybe CSS modules?
http://glenmaddern.com/articles/css-modules
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
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
http://sel.do/mobile
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/
Accessibility
will make you money
Databases
CAP Theorem
- Consistency
- Availability
- Partition tolerance
Pick two.
CAP is not the only choice
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.
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
High write, slow read.
Riak
Any CAP combination.
Neo4J
For social networks.
ElasticSearch
Do not use it as a primary store.
The File System
Surprisingly capable.
HDFS/HBase
Big, big data.
S3
Infinite data.
Replication
Backups
Replication is not a backup strategy.
Security
Because people are terrible sometimes.
Defense in Depth
Salt and hash passwords
Auth
Identification
vs
Authentication
vs
Authorization
Identification
is not
Authentication
is not
Authorization
Authority via Identity
Cookies
Performance issues
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
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
Regular expressions are really hard and really worthwhile.
SQL Injection
SELECT id FROM users
WHERE name = 'anyuser'
AND password = 'anything' or 'x' = 'x'
username: anyuser
password: anything' OR 'x'='x
+
=
SELECT id FROM users
WHERE name = '$username'
AND password = '$password'
Direct Object Reference
bob.com/images/../../../mysecret.key
Missing patches
Speed
vs
Efficiency
vs
Throughput
vs
Latency
Performance
is
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
https://aerotwist.com/blog/the-cost-of-frameworks/
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
And so does documentation.
The 3 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
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
http://blog.ycombinator.com/yc-stats
http://sel.do/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)
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!
MakerSquare 5: Stuff Everybody Knows
By seldo
MakerSquare 5: Stuff Everybody Knows
- 3,022