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

  • 1,374

More from seldo