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
690
Ruby, Rails, and Winning Lightning Talk
markmcspadden
1
200

Other Decks in Programming

See All in Programming
Apache Hive 4 on Treasure Data
ryukobayashi
0
330
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
140
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
使ってみよう Azure AI Document Intelligence
kosmosebi
2
310
ゆるい個人開発のススメ
kuroppe1819
10
990
Ruby Pattern Matching
bkuhlmann
0
930
エンターテイメント業界で利用されるAWS
demuyan
0
210
[技育CAMPアカデミア]アイディアを形に！【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
380
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
VSCodeでのDatabricks開発もお勧めしたい/I would also recommend Databricks development with VSCode.
kazumain
0
250
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
23
15k
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
Writing Fast Ruby
sferik
621
60k
Web Components: a chance to create the future
zenorocha
305
41k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
How to Ace a Technical Interview
jacobian
272
22k
What's in a price? How to price your products and services
michaelherold
237
11k
Happy Clients
brianwarren
92
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Producing Creativity
orderedlist
PRO
337
39k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
The Language of Interfaces
destraynor
151
23k

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