A fly-through guide to web development best practices.

Version 23, MakerSquare, 2016-09-29

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: 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

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

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

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

http://sel.do/fallbackfont

UX

is what a web app feels like, not what it looks like

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

As of 2015: more searches from mobile than PCs:

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.

Defense in Depth

Salt and hash passwords

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>

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

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

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

https://www.soasta.com/blog/google-mobile-web-performance-study/

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

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

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

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

http://lunar.lostgarden.com/Rules%20of%20Productivity.pdf

Sleep

http://sel.do/sleep

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

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 - LGBTQ in Tech Slack
• witchat.github.io - Women in Tech Slack
• peopleofcolorintech.com - People of Color in Tech
• wocintechchat.com - Women of Color in Tech Slack
• latinosin.tech - Latinxs 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 socks!