Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rapid Prototyping with HTML, CSS, and Javascript

Mark McSpadden
September 26, 2013
Programming
0
190

Rapid Prototyping with HTML, CSS, and Javascript

Code Accompaniment: https://github.com/markmcspadden/rapid_prototyping_presentation

Mark McSpadden

September 26, 2013
Tweet

More Decks by Mark McSpadden

See All by Mark McSpadden
The Quiet Programmer
markmcspadden
1
160
What I've Learned Failing at Hackathons
markmcspadden
1
120
RailsConf 2013: Your First Rails Pull Request
markmcspadden
4
700
Ruby, Rails, and Winning Lightning Talk
markmcspadden
1
200

Other Decks in Programming

See All in Programming
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
Jakarta EE meets AI
ivargrimstad
0
160
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
220
C++でシェーダを書く
fadis
6
4.1k
受け取る人から提供する人になるということ
little_rubyist
0
230
Jakarta EE meets AI
ivargrimstad
0
620
役立つログに取り組もう
irof
28
9.6k
AWS Lambdaから始まった
Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
260
CSC509 Lecture 09
javiergs
PRO
0
140
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.9k
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.7k

Featured

See All Featured
Agile that works and the tools we love
rasmusluckow
327
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
89
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Bash Introduction
62gerente
608
210k
Navigating Team Friction
lara
183
14k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
A designer walks into a library…
pauljervisheath
204
24k
Designing for humans not robots
tammielis
250
25k

Transcript

  1. Rapid Prototyping with HTML, CSS, and Javascript Mark McSpadden Beyond

    the Edge 2013 Thomson Reuters Slides https://speakerdeck.com/markmcspadden Code https://github.com/markmcspadden/rapid_prototyping_presentation Wednesday, September 25, 13

  2. github.com/markmcspadden twitter.com/markmcspadden Wednesday, September 25, 13

  3. Wednesday, September 25, 13

  4. Wednesday, September 25, 13

  5. Wednesday, September 25, 13

  6. 1 Billion API calls / DAY Wednesday, September 25, 13

  7. Wednesday, September 25, 13

  8. prototype ALL THE THINGS Wednesday, September 25, 13

  9. yeah but you get paid to prototype... Wednesday, September 25,

    13

  10. why build a prototype? Wednesday, September 25, 13

  11. what is a prototype anyways? Wednesday, September 25, 13

  12. proof of concept prototype mvp Wednesday, September 25, 13

  13. why use html, css, and javascript? Wednesday, September 25, 13

  14. what’s the deal with being rapid? Wednesday, September 25, 13

  15. Rapid Prototyping with HTML, CSS, and Javascript Mark McSpadden Beyond

    the Edge 2013 Thomson Reuters Wednesday, September 25, 13

  16. what if... Wednesday, September 25, 13

  17. <html> Wednesday, September 25, 13

  18. the year 2000 git checkout d5af9bbe55717013dbcdf954750006cbab561d57 Wednesday, September 25, 13

  19. the year 2013 git checkout 8781349cd99a1623099ee0d5947af3f8443f411b Wednesday, September 25, 13

  20. know your html5 elements Wednesday, September 25, 13

  21. a few html5 friends • header • nav • section

    • aside • article • footer • main? Wednesday, September 25, 13

  22. a few other html5 elements • input types (email, tel,

    url, date, time, datetime, search, number, range, color) • audio • video • canvas Wednesday, September 25, 13

  23. html5 resources • HTML5 Rocks http://www.html5rocks.com/en/ • HTML5 Weekly http://html5weekly.com/

    Wednesday, September 25, 13

  24. css { } Wednesday, September 25, 13

  25. Wednesday, September 25, 13

  26. that’s nice git checkout e340f1f5b6db9541747fbd83407f840e878f84a3 Wednesday, September 25, 13

  27. that’s better git checkout 65f210652b036bbe8a6c61fae243601e011341de Wednesday, September 25, 13

  28. is it? Wednesday, September 25, 13

  29. sass Wednesday, September 25, 13

  30. sass-bootstrap git checkout 47b1aab29f7bb83a431c80acb641de6006f2fd94 Wednesday, September 25, 13

  31. codekit Wednesday, September 25, 13

  32. css resources • Bootstrap http://getbootstrap.com • Sass-Bootstrap https://github.com/jlong/sass-bootstrap • Sass

    http://sass-lang.com/ • CodeKit http://incident57.com/codekit/ Wednesday, September 25, 13

  33. javascript(){ } Wednesday, September 25, 13

  34. json git checkout 5735402fbed462878d50342f5dd8918748d5bc17 Wednesday, September 25, 13

  35. jquery git checkout 80a8ef1cd2c95fabeb7846dbce0db833d37ea4c3 Wednesday, September 25, 13

  36. handlebars git checkout 35c7460f3fe21391487b8e7f591c6beb42143676 git checkout 09cefcf3c3f34fd0802ca5731763e83916d134a9 git checkout 57f616cf52d3ba7925e038891e9026357115caaf

    Wednesday, September 25, 13

  37. ajax git checkout cb88ca05d708d610653e97fc4330d5577da55288 Wednesday, September 25, 13

  38. same origin policy Wednesday, September 25, 13

  39. --allow-file-access-from-files (in development only) Wednesday, September 25, 13

  40. single page javascript application git checkout 42ab40bb99bb377993b1c0fafc8f3e32c4ba355d Wednesday, September 25,

    13

  41. javascript resources • JSON Website http://www.json.org/ (will probably scare you

    into never using json) • JSON Tutorial http://www.w3schools.com/json/ (w3schools to the rescue!) • jQuery http://jquery.com/ • Handlebars http://handlebarsjs.com/ • jQuery $.ajax http://api.jquery.com/jQuery.ajax/ • Same Origin Policy http://en.wikipedia.org/wiki/Same-origin_policy Wednesday, September 25, 13

  42. extra credit Wednesday, September 25, 13

  43. advanced html5 Wednesday, September 25, 13

  44. geolocation git checkout 8fc368e13a0da41e3d8cab2f4e7cd5eb070dfc2f Wednesday, September 25, 13

  45. mobile ALL THE THINGS git checkout 21cb83cf8002a80e492bee8e504bf5a96f10cb0c Wednesday, September 25,

    13

  46. sprinkles of “native” functionality git checkout 037fb41c4186eeaff15791e80c408f5c03c3e1b0 Wednesday, September 25,

    13

  47. extra credit resources • Dive into HTML5 Geolocation http://diveintohtml5.info/geolocation.html •

    Reverse Geocoding https://developers.google.com/maps/documentation/ javascript/examples/geocoding-reverse • Web Apps for iOS https://developer.apple.com/library/ios/documentation/ AppleApplications/Reference/SafariWebContent/ ConfiguringWebApplications/ConfiguringWebApplications.html • iOS URL Schemas https://developer.apple.com/library/ios/featuredarticles/ iPhoneURLScheme_Reference/Introduction/Introduction.html#//apple_ref/ doc/uid/TP40007899 • PhoneGap http://phonegap.com/ Wednesday, September 25, 13

  48. prototype ALL THE THINGS Wednesday, September 25, 13

  49. Thank you! Slides https://speakerdeck.com/markmcspadden Code https://github.com/markmcspadden/rapid_prototyping_presentation Wednesday, September 25, 13