rails girls sydney javascript july 2014

38
JAVASCRIPT Rails Girls July 2014

Upload: gregmcintyre

Post on 11-Jul-2015

235 views

Category:

Software


3 download

TRANSCRIPT

Page 1: Rails Girls Sydney JavaScript July 2014

JAVASCRIPTRails Girls July 2014

Page 2: Rails Girls Sydney JavaScript July 2014

LIFE WITHOUT JAVASCRIPT?

Page 3: Rails Girls Sydney JavaScript July 2014

HTML + CSS = “PAGES”

Page 4: Rails Girls Sydney JavaScript July 2014

FULL PAGE LOADS

Page 5: Rails Girls Sydney JavaScript July 2014

BORING BORING PAGES

Page 6: Rails Girls Sydney JavaScript July 2014

HOW DOES IT FIT IN?

Page 7: Rails Girls Sydney JavaScript July 2014

WHAT DOES IT LOOK LIKE?

Page 8: Rails Girls Sydney JavaScript July 2014
Page 9: Rails Girls Sydney JavaScript July 2014

WHEN WOULD I USE IT?

Page 10: Rails Girls Sydney JavaScript July 2014

IN-PAGE UPDATESAJAX = Asynchronous JavaScript and XML

Page 11: Rails Girls Sydney JavaScript July 2014

REARRANGING THE PAGEDOM = Document Object Model

Page 12: Rails Girls Sydney JavaScript July 2014

NON-STANDARD FORM INPUTSCalendars, sliders, etc.

Page 13: Rails Girls Sydney JavaScript July 2014

CHATWeb sockets, “push”, “long polling”

Page 14: Rails Girls Sydney JavaScript July 2014

CROSS-BROWSER PATCHESe.g. Vector graphics and Internet Explorer, “shims”,

“polyfills”

Page 15: Rails Girls Sydney JavaScript July 2014

LIGHTBOXES

Page 16: Rails Girls Sydney JavaScript July 2014

INFINITE SCROLLINGTumblr, Facebook, Pinterest

Page 17: Rails Girls Sydney JavaScript July 2014

MAKING UP FOR CSS BEING CRAPSame-height columns

Page 18: Rails Girls Sydney JavaScript July 2014

MENUS THAT SLIDE IN AND OUTSo slidey

Page 19: Rails Girls Sydney JavaScript July 2014

SLIDESHOWSSuch slide, very wow

Page 20: Rails Girls Sydney JavaScript July 2014

3D GRAPHICS, GAMESCanvas

Page 21: Rails Girls Sydney JavaScript July 2014

STEALING PASSWORDSXSS = Cross Site Scripting

Page 22: Rails Girls Sydney JavaScript July 2014

HOW DO I TRY IT?

Page 23: Rails Girls Sydney JavaScript July 2014

CHROME

VIEW > DEVELOPER > JAVASCRIPT CONSOLE

Page 24: Rails Girls Sydney JavaScript July 2014

FIREFOX !

TOOLS > WEB DEVELOPER > WEB CONSOLE

Page 25: Rails Girls Sydney JavaScript July 2014

TYPE 1 + 1 AND HIT ENTER2!!!

Page 26: Rails Girls Sydney JavaScript July 2014

MAKE A NEW HTML FILE (MAYBE IN SUBLIME)

Page 27: Rails Girls Sydney JavaScript July 2014
Page 28: Rails Girls Sydney JavaScript July 2014

CONSOLE.LOG(STUFF);

Page 29: Rails Girls Sydney JavaScript July 2014

JQUERYAbstraction, convenience, standards

Page 30: Rails Girls Sydney JavaScript July 2014

RICH APPS

Page 31: Rails Girls Sydney JavaScript July 2014

BACKBONE.JS EMBER.JS

ANGULAR.JS

Page 32: Rails Girls Sydney JavaScript July 2014

SERVER-SIDE JAVASCRIPTAlternative to Ruby on Rails

Page 33: Rails Girls Sydney JavaScript July 2014
Page 34: Rails Girls Sydney JavaScript July 2014

COFFEESCRIPT

Page 35: Rails Girls Sydney JavaScript July 2014

STACKOVERFLOW.COM

Page 36: Rails Girls Sydney JavaScript July 2014

WWW.SYDJS.COMI missed cupcake day :(

Page 37: Rails Girls Sydney JavaScript July 2014

QUESTIONS

Page 38: Rails Girls Sydney JavaScript July 2014

INSPIRED BY

TRACY “DISCERNING” MU SUNG

@gregmcintyre