Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

M I N I - D O C U M E N T A R Y ON A DAY IN THE LIFE OF A WEB DEVELOPER

Slide 3

Slide 3 text

Let’s make a “like” button. Let’s go.

Slide 4

Slide 4 text

Let’s start with a search.

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Looking good so far.

Slide 7

Slide 7 text

It makes buttons.

Slide 8

Slide 8 text

It gives you code.

Slide 9

Slide 9 text

Now let’s make a page…

Slide 10

Slide 10 text

Paste it in…

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

And load it.

Slide 13

Slide 13 text

Nope. It doesn’t work.

Slide 14

Slide 14 text

HUH.

Slide 15

Slide 15 text

You’ll start to look for solutions online.

Slide 16

Slide 16 text

Maybe you’ll ask a more-experienced colleague for help.

Slide 17

Slide 17 text

“Oh this is easy. Just run it on a local server.”

Slide 18

Slide 18 text

“Open a terminal.”

Slide 19

Slide 19 text

“Do you have Ruby installed? Nah, let’s go with Python…”

Slide 20

Slide 20 text

“Try using Python’s built-in SimpleHTTPServer module.”

Slide 21

Slide 21 text

“Oh, what port does Python use again? Oh right, 8000…”

Slide 22

Slide 22 text

“So, yeah… point your browser to localhost:8000.”

Slide 23

Slide 23 text

“And there you have it. TADA! It works!”

Slide 24

Slide 24 text

HUH. That’s really confusing, and that’s the job of many web developers today.

Slide 25

Slide 25 text

R I C O S T A . C R U Z @rstacruz

Slide 26

Slide 26 text

Why is it so hard to be a web developer today? A S H O R T T A L K B Y @rstacruz R I C O S T A . C R U Z O N

Slide 27

Slide 27 text

2014 2000 1990 2010 Let’s start with a brief history. Let’s talk about the Internet.

Slide 28

Slide 28 text

2014 2000 1990 2010 www The web started before the 90’s. Back then, nobody took it seriously so much.

Slide 29

Slide 29 text

People were happy with sites like these. To make these things, we used HTML.

Slide 30

Slide 30 text

HTML

Slide 31

Slide 31 text

1995 2014 2000 1990 2010 Netscape Navigator 2.0 In the mid 90’s, a new browser was released that changed the web.

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

JAVASCRIPT .js It shipped with a new language. Nobody cared much, not even Netscape…

Slide 34

Slide 34 text

Netscape considered their client-server offering a distributed OS, running a portable version of Sun Microsystems' Java. Because Java was a competitor of C++ and aimed at professional programmers, Netscape also wanted a lightweight interpreted language that would complement Java by appealing to nonprofessional programmers, like Microsoft's Visual Basic. “WIKIPEDIA ARTICLE ON JAVASCRIPT:

Slide 35

Slide 35 text

JavaScript Java is to is to Car Carpet

Slide 36

Slide 36 text

1995 2014 2000 1990 2010 JavaScript 1995 then can also be considered as the birth year of JavaScript.

Slide 37

Slide 37 text

HTML JavaScript We now have 2 major technologies in the world wide web.

Slide 38

Slide 38 text

2014 2000 1990 2010 Some years then pass.

Slide 39

Slide 39 text

CSS JSS … There were lots of inventions along the way. Some are good, some are better forgotten.

Slide 40

Slide 40 text

Designing with Web Standards 2003 Soon enough, a book came along and made us realize we actually have the technology to properly make cool things on the web.

Slide 41

Slide 41 text

2003 2014 2000 1990 2010 2003 gave rise to the trifecta of the 3 main technologies that make the web possible.

Slide 42

Slide 42 text

HTML JS CSS

Slide 43

Slide 43 text

This modern use of CSS made many things possible. Designers were able to make multiple looks for a site with the same markup.

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

HTML JS CSS We realized that we can combine the 3 together to make some pretty amazing things.

Slide 46

Slide 46 text

Let’s build a “like” button. From scratch.

Slide 47

Slide 47 text

A “like” button from scratch.

Slide 48

Slide 48 text

with no frameworks.

Slide 49

Slide 49 text

Just plain HTML, CSS…

Slide 50

Slide 50 text

and some JavaScript.

Slide 51

Slide 51 text

Here we go!

Slide 52

Slide 52 text

Some CSS here…

Slide 53

Slide 53 text

Some CSS there…

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

And more…

Slide 57

Slide 57 text

Let’s steal some icons from ionicons.com

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Make a loading spinner animation…

Slide 61

Slide 61 text

Using animation @keyframes…

Slide 62

Slide 62 text

Some research…

Slide 63

Slide 63 text

A little JavaScript (no jQuery!)…

Slide 64

Slide 64 text

Build a small server on Node.js…

Slide 65

Slide 65 text

No express.js or any frameworks here…

Slide 66

Slide 66 text

Just plain Node.js…

Slide 67

Slide 67 text

Oops, my laptop is about to die, hang on…

Slide 68

Slide 68 text

Just a little more…

Slide 69

Slide 69 text

and…

Slide 70

Slide 70 text

Tada!

Slide 71

Slide 71 text

It finally works!

Slide 72

Slide 72 text

TOTAL TIME: 32 minutes

Slide 73

Slide 73 text

2006 2014 2000 1990 2010 jQuery One of the solutions made to address this complexity is a library called jQuery.

Slide 74

Slide 74 text

Scroller effect without using any frameworks

Slide 75

Slide 75 text

Scroller effect without using any frameworks

Slide 76

Slide 76 text

Scroller effect without using any frameworks

Slide 77

Slide 77 text

Scroller effect without using any frameworks

Slide 78

Slide 78 text

Scroller effect without using any frameworks

Slide 79

Slide 79 text

Scroller effect without using any frameworks

Slide 80

Slide 80 text

Scroller effect without using any frameworks

Slide 81

Slide 81 text

Scroller effect without using any frameworks

Slide 82

Slide 82 text

IE10 and below IE8 and below Gecko Firefox et al Standards

Slide 83

Slide 83 text

Scroller effect with jQuery

Slide 84

Slide 84 text

HTML JS CSS jQuery The complexities of JavaScript were hidden away by jQuery. This is a concept called “abstraction.”

Slide 85

Slide 85 text

Abstraction

Slide 86

Slide 86 text

HTML JS CSS jQuery jQuery sits on top of JavaScript, abstracting its details away.

Slide 87

Slide 87 text

But what about CSS?

Slide 88

Slide 88 text

CSS circa 2006

Slide 89

Slide 89 text

Sass “fixed” the pains of CSS syntax.

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

HTML JS CSS jQuery Sass Sass is an abstraction on top of CSS.

Slide 92

Slide 92 text

Abstraction

Slide 93

Slide 93 text

HTML JS CSS jQuery Sass But what about HTML?

Slide 94

Slide 94 text

It wasn’t long until we realised HTML can be “fixed”, too.

Slide 95

Slide 95 text

HTML JS CSS jQuery Sass HAML But what about JavaScript’s syntax?

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

HTML JS CSS jQuery Sass HAML CoffeeScript Preprocessors Frameworks And that completes one level of abstraction: preprocessors.

Slide 98

Slide 98 text

Abstraction LEVEL 2

Slide 99

Slide 99 text

HTML JS CSS jQuery Sass HAML CoffeeScript Preprocessors Frameworks

Slide 100

Slide 100 text

Bootstrap circa 2012 We realised there’s more things we can abstract away, because we write too much code.

Slide 101

Slide 101 text

HTML JS CSS jQuery Sass HAML CoffeeScript Bootstrap Frameworks Preprocessors Frameworks are born.

Slide 102

Slide 102 text

Abstraction LEVEL 3

Slide 103

Slide 103 text

It’s not long until more people start to think: “I can make better abstractions.”

Slide 104

Slide 104 text

HTML JS CSS jQuery Sass HAML CoffeeScript Bootstrap Frameworks Preprocessors There are many solutions to a problem.

Slide 105

Slide 105 text

HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton And people will build them.

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

But now, how do we manage all these packages?

Slide 108

Slide 108 text

HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton

Slide 109

Slide 109 text

HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component So: package managers are born.

Slide 110

Slide 110 text

Abstraction LEVEL 4

Slide 111

Slide 111 text

This is your typical everyday screen for a web developer. Perhaps there’s a way to manage all these?

Slide 112

Slide 112 text

HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component

Slide 113

Slide 113 text

HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component Gulp Grunt Task managers

Slide 114

Slide 114 text

Abstraction LEVEL 5

Slide 115

Slide 115 text

Maybe there’s a way to manage all that? HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Bootstrap Foundation Skeleton Bower NPM Component Gulp Grunt

Slide 116

Slide 116 text

HTML JS CSS Less Sass Stylus HAML Slim Jade Coffee TypeS.. Kaff.. Less Sass Stylus HAML Slim Jade Coffee TypeS.. Dart Ender jQuery Moo Ender jQuery Moo Bootstrap Foundation Skeleton Preprocessors Frameworks Bootstrap Foundation Skeleton Package managers Bower NPM Component Gulp Grunt Task managers Yeoman H5BP Ionic …? Boilerplates Yes there are.

Slide 117

Slide 117 text

Abstraction LEVEL

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

So then, is abstraction bad? Maybe, But then again…

Slide 120

Slide 120 text

Everything is just an abstraction of something else. Y O U K N O W ,

Slide 121

Slide 121 text

Every piece of technology we have today is just abstracting away the complexity below it.

Slide 122

Slide 122 text

C++ is an abstraction of C. Rails is an abstraction of Rack and ActiveRecord. ActiveRecord is an abstraction of SQL. Rack is an abstraction of HTTP. Angular.js is an abstraction of JS AJAX + DOM. TypeScript is an abstraction of JavaScript. Flask is an abstraction of Python WSCGI. Django is an abstraction of SQL and Python WSCGI. Bootstrap is an abstraction of CSS and JS behaviours. jQuery is an abstraction of the JavaScript DOM. RubyMotion is an abstraction of the Cocoa API. Phantom is an abstraction of Webkit. Express is an abstraction of Node.js HTTP. Socket.io is an abstraction of web sockets. CoffeeScript is an abstraction of JavaScript syntax. Heroku is an abstraction of AWS. … e.g.:

Slide 123

Slide 123 text

Abstractions are what made everything today possible. H O W E V E R ,

Slide 124

Slide 124 text

jQuery is an abstraction of the document object model. DOM is an abstraction of HTML internals. JavaScript is an abstraction of the browser. The browser is an abstraction of OS API calls. OS’s are an abstraction of your machine instructions. Machine instructions are an abstraction of electric signals. … e.g.:

Slide 125

Slide 125 text

Abstraction is how humans deal with complexity. A B S T R A C T I O N I S B Y N E C E S S I T Y

Slide 126

Slide 126 text

Abstractions are what made everything today possible. @rstacruz R I C O S T A . C R U Z