the long web JSON HTML SVG CSS ABC JavaScript RSS X: 1 T: - - PowerPoint PPT Presentation

▶
the long web
SMART_READER_LITE
LIVE PREVIEW

the long web JSON HTML SVG CSS ABC JavaScript RSS X: 1 T: - - PowerPoint PPT Presentation

May 05, 2023 312 likes •1.19k views

the long web JSON HTML SVG CSS ABC JavaScript RSS X: 1 T: Chief O'Neill's Favourite R: hornpipe M: 4/4 L: 1/8 K: Dmaj |:de|fefg afge|fdec dBAG|FEDE FGAB|=cAd^c A2 de| fefg afge|fdec dBAG|FEDF GBAG|F2 D2 D2:| |:DE|=F2FE FGAB|=cAdB

slide-1
SLIDE 1

the long

web

slide-2
SLIDE 2

HTML

CSS

JavaScript

JSON RSS

SVG

ABC

slide-3
SLIDE 3
slide-4
SLIDE 4
slide-5
SLIDE 5
slide-6
SLIDE 6
slide-7
SLIDE 7
slide-8
SLIDE 8
slide-9
SLIDE 9
slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12
slide-13
SLIDE 13
slide-14
SLIDE 14
slide-15
SLIDE 15

X: 1 T: Chief O'Neill's Favourite R: hornpipe M: 4/4 L: 1/8 K: Dmaj |:de|fefg afge|fdec dBAG|FEDE FGAB|=cAd^c A2 de| fefg afge|fdec dBAG|FEDF GBAG|F2 D2 D2:| |:DE|=F2FE FGAB|=cAdB =cAGB|Adde fded|=cAd^c A2de| fefg afge|fdec dBAG|FEDF GBAG|F2 D2 D2:|

slide-16
SLIDE 16

thesession.org

slide-17
SLIDE 17
slide-18
SLIDE 18
slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

mobile first

slide-26
SLIDE 26

content first

slide-27
SLIDE 27

URL first

slide-28
SLIDE 28

URL design

slide-29
SLIDE 29

/events /events/ID /events/ID/edit /events/add

slide-30
SLIDE 30

/tunes /tunes/ID /tunes/ID/edit /tunes/add

slide-31
SLIDE 31

/tunes/new /tunes/search /tunes/popular

slide-32
SLIDE 32

/tunes/new?format=rss /tunes/search?format=rss /tunes/popular?format=rss

slide-33
SLIDE 33

/tunes/new?format=json /tunes/search?format=json /tunes/popular?format=json

slide-34
SLIDE 34

content first

slide-35
SLIDE 35

github.com/adactio/Pattern-Primer

slide-36
SLIDE 36

navigation second

slide-37
SLIDE 37
slide-38
SLIDE 38
slide-39
SLIDE 39
slide-40
SLIDE 40
slide-41
SLIDE 41
slide-42
SLIDE 42
slide-43
SLIDE 43

input

slide-44
SLIDE 44
slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47
slide-48
SLIDE 48

input type="number" input type="search" input type="email" input type="url"

slide-49
SLIDE 49

input type="number"

slide-50
SLIDE 50

input type="number" inputmode="numeric"

slide-51
SLIDE 51

input type="number" pattern="[0-9]"

slide-52
SLIDE 52

<input type="text" name="town" list="towns"> <datalist id="towns"> <option value="Clonakilty"></option> <option value="Cloyne"></option> <option value="Cobh"></option> <option value="Cork"></option> </datalist>

slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55

<input type="text" name="town" list="towns" placeholder="e.g. Clonakilty"> <datalist id="towns"> <option value="Clonakilty"></option> <option value="Cloyne"></option> <option value="Cobh"></option> <option value="Cork"></option> </datalist>

slide-56
SLIDE 56

gist.github.com/adactio/3332444

slide-57
SLIDE 57

progressive enhancement

slide-58
SLIDE 58
slide-59
SLIDE 59
slide-60
SLIDE 60
slide-61
SLIDE 61
slide-62
SLIDE 62
slide-63
SLIDE 63

<a href="javascript:void(0)"> Download Chrome </a>

slide-64
SLIDE 64

<a href="javascript:void(0)">

<span class="li_icon"></span>

</a>

slide-65
SLIDE 65

<span class="link"> Create a new list </span>

slide-66
SLIDE 66
slide-67
SLIDE 67

<button type="submit"> sheet music </button> <form method="post">

slide-68
SLIDE 68
slide-69
SLIDE 69
slide-70
SLIDE 70
slide-71
SLIDE 71
slide-72
SLIDE 72
slide-73
SLIDE 73
slide-74
SLIDE 74
slide-75
SLIDE 75

github.com/adactio/ Canvas-Sparkline

slide-76
SLIDE 76

github.com/phuu/ sparksvg

slide-77
SLIDE 77

sparkline.svg? 9,37,23,28,44,26,43,43,24 <svg> <script> //JavaScript </script> </svg>

slide-78
SLIDE 78
slide-79
SLIDE 79

conditional loading

slide-80
SLIDE 80
slide-81
SLIDE 81

<link rel="dns-prefetch" href="http://api.flickr.com"> <link rel="prefetch" href="next-page"> <link rel="prerender" href="next-page">

slide-82
SLIDE 82
slide-83
SLIDE 83
slide-84
SLIDE 84

futurefriend.ly

slide-85
SLIDE 85
slide-86
SLIDE 86

HTML

CSS

JavaScript

JSON RSS

SVG

ABC

slide-87
SLIDE 87

the long

web