Tweet
Tweet

Slide 1

Slide 1 text

JS

Slide 2

Slide 2 text

I’M JULIE. I DESIGN & BUILD STUFF AT GITHUB

Slide 3

Slide 3 text

I’M NRRRDCORE. MOST PLACES ON THE INTERNET

Slide 4

Slide 4 text

THE TALK* BECAUSE FUCK PHOTOSHOP

Slide 5

Slide 5 text

I DID SOME RESEARCH AND THE INTERNET TOTALLY AGREES

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

(CREDIBLE SOURCES)

Slide 8

Slide 8 text

THE PROCESS* BECAUSE FUCK PHOTOSHOP

Slide 9

Slide 9 text

MY PROCESS* HAPPENS IN THE BROWSER

Slide 10

Slide 10 text

“A WEBSITE’S DESIGN SHOULD START WHERE IT’S GOING TO LIVE” MEAGAN FISHER

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

THINGS N’ STUFF

Slide 13

Slide 13 text

CSS3 IS FUCKING BEAUTIFUL

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

INCONSISTENCY DOESN’T SOUND LIKE A REAL WORD

Slide 16

Slide 16 text

INCONSISTENCY GOING FROM COMPS TO THE BROWSER

Slide 17

Slide 17 text

DON’T PANIC. DO THE WORK NOW INSTEAD OF LATER

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

SASS/SCSS YOUR NEW BEST FRIEND

Slide 21

Slide 21 text

SASS/SCSS WORK FUCKING FASTER

Slide 22

Slide 22 text

border-top-color: lighten($gray, 10%);

Slide 23

Slide 23 text

border-bottom-color: darken($gray, 10%);

Slide 24

Slide 24 text

SASS/SCSS HANDLES ERRORS LIKE A CHAMP

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

FEWER SURPRISES OH SHIT THIS LOOKS AWFUL

Slide 27

Slide 27 text

CROSS-BROWSER ZEN DO IT ALL AT THE SAME TIME

Slide 28

Slide 28 text

DEBUG CSS NEEDS MORE WEB INSPECTOR

Slide 29

Slide 29 text

DEBUG JS NEEDS MORE CONSOLE

Slide 30

Slide 30 text

WHY JS? THE INTERACTION LAYER

Slide 31

Slide 31 text

DIE, PHOTOSHOP, DIE. SOFTWARE CRASHES SUCK

Slide 32

Slide 32 text

PROBLEM? YES, PROBLEM

Slide 33

Slide 33 text

COMMAND + R DOESN’T AFFECT YOUR CODE

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

VERSION CONTROL IS AN AWESOME DESIGN TOOL

Slide 36

Slide 36 text

VERSION CONTROL HELPS YOU MANAGE ASSETS

Slide 37

Slide 37 text

VERSION CONTROL ALLOWS YOU TO TRACK CHANGES

Slide 38

Slide 38 text

IMAGE DIFFING IS AN AWESOME DESIGN TOOL

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

DESIGNERS ASK YOUR DEVS FOR COMMIT ACCESS

Slide 44

Slide 44 text

DEVELOPERS GIVE YOUR DESIGNERS COMMIT ACCESS

Slide 45

Slide 45 text

BUILD MORE TRUST GIVE YOUR DESIGNERS COMMIT ACCESS

Slide 46

Slide 46 text

TEACH YOUR DESIGNERS THEY MIGHT BREAK SOME THINGS

Slide 47

Slide 47 text

TRUST YOUR DESIGNERS THEY MIGHT NOT

Slide 48

Slide 48 text

BUT BUT BUT COMMAND LINE TOOLS ARE HARD

Slide 49

Slide 49 text

BUT BUT BUT GIT IS SO CONFUSING

Slide 50

Slide 50 text

WE CAN HELP GITHUB FOR MAC & WINDOWS

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

PROTOTYPING IS GOOD FOR THE SOUL

Slide 53

Slide 53 text

PROTOTYPING IS EASY WHEN YOU WRITE CODE

Slide 54

Slide 54 text

GISTS A LIGHT-WEIGHT PROTOTYPING TOOL

Slide 55

Slide 55 text

ABUSING GISTS USING THE HELL OUT OF THEM

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

CSS IS REUSABLE DON’T WRITE THE SAME CODE TWICE

Slide 62

Slide 62 text

CSS IS REUSABLE UNLESS YOU CAN MAKE IT BETTER

Slide 63

Slide 63 text

IF IT’S NOT REUSABLE SET IT ALL ON FIRE AND START OVER

Slide 64

Slide 64 text

PATTERN LIBRARIES ARE TOTALLY A THING

Slide 65

Slide 65 text

PATTERN LIBRARIES ARE REALLY FUCKING AWESOME

Slide 66

Slide 66 text

PATTERN LIBRARIES LETS LEARN FROM EACH OTHER

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

PATTERN LIBRARIES OPEN SOURCE ALL THE THINGS

Slide 69

Slide 69 text

THE FUTURE* BECAUSE FUCK PHOTOSHOP

Slide 70

Slide 70 text

THE FUTURE* HOPEFULLY A MUCH BETTER ONE

Slide 71

Slide 71 text

THE FUTURE* HOPEFULLY A MUCH BETTER ONE

Slide 72

Slide 72 text

STATUS QUO PIXEL-PERFECT PHOTOSHOP COMPS

Slide 73

Slide 73 text

RESPONSIBILITY PIXEL-PERFECT PHOTOSHOP COMPS

Slide 74

Slide 74 text

END PRODUCT PICTURE OF A WEBSITE

Slide 75

Slide 75 text

YOU ARE ALL AWESOME. JSCONFEU

Slide 76

Slide 76 text

RESOURCES * github.com/styleguide * 24 ways: Do Your Mockup in Markup * css3exp.com/moon * sass-lang.com * gist.github.com * dribbble.com/nrrrdcore/buckets * pea.rs