A fly-through guide to web development best practices.

Version 21, Code States, 2016-07-06

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

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

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/

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

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

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

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

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'

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

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.

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

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

  • CSS
  • SQL
  • Cassandra, HDFS, HBase
  • Deployment
  • Source Control
  • Service-oriented architecture
  • Time zones & formats
  • 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