boulder js meet up presentation for april 16
DESCRIPTION
Boulder JS Meetup presentation for beginner track Meetup was cancelled, but I would like to make this available to any who want to see it anyway. The links to everything in the presentation and more reside at https://github.com/m-schrepel/BoulderJS_Presentation_links/blob/master/Links.rtfTRANSCRIPT
![Page 1: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/1.jpg)
What’s Hot and Now
The cool stuff I’ve learned about since graduating
![Page 2: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/2.jpg)
Media Queries in JSwindow.matchMediaIE9 and up support
![Page 3: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/3.jpg)
Javascript Media Queries• Also allows for checking pixel density
• Screen orientation
• And what type of screen (tv or not)
• @media all and (orientation: portrait) { ... }
• @media screen and (min-resolution: 2dppx) { ... }
• @media tv and (scan: progressive) { ... }
![Page 4: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/4.jpg)
FLEXBOXSome day this will be well-supported
Current iOS and Android browsers are fully supportedDisplay:flex
![Page 5: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/5.jpg)
Flexbox• No hacky padding fixes!
• No clearfix needed!
• Vertically center something? Done!
• No floats
• No inline-block
• Sticky Footer with an unknown height?
• Flexbox solves it.
Disclaimer!Float, clear and vertical-alignhave no effect on flex items
![Page 6: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/6.jpg)
![Page 7: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/7.jpg)
![Page 8: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/8.jpg)
![Page 9: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/9.jpg)
<- Desktop Browser code
Responsive Mobile code ->
![Page 10: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/10.jpg)
MeteorFront end, minimally opinionated, MVC, package-based framework
![Page 11: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/11.jpg)
![Page 12: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/12.jpg)
SIMD
• Single Instruction, Multiple Data
• Performs one operation on many items in parallel
• Huge speed increases for heavy computational processes
• Works anywhere javascript runs
![Page 13: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/13.jpg)
On our other SIMD benchmarks, we get even more dramatic speedups of up to 10x. Google, Intel, and Mozilla are working on a TC39 ECMAScript proposal to include this JavaScript SIMD API in the future ES7 version of the
JavaScript standard.
![Page 14: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/14.jpg)
Form Styling
• Supports IE10+
• Moz
• Chrome
![Page 15: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/15.jpg)
Real Time APIs
• Beacon Push uses Websockets and Comet to bypass traditional HTTP requests
• BrightContext uses real time feeds to process data on the fly, then outputs the processed data however you like (visualization, store, alerts, another API etc)
• Fanout manages push notifications to every type of client that accepts them. It keeps up the persistent connections and you just tell it what to do and when, then it does it for you.
• Pusher is similar to Beacon Push. They claim a 5ms routing time from your app to the client.
• PushWoosh is similar to Fanout, but offers more web-based analytics about what their API is doing for you.
• Realtime does a few things: Pub/sub messaging system and abstracts amazon’s AWS services through their simple REST API. It also allows you to migrate from pusher and pub nub without changing your code.
![Page 16: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/16.jpg)
Papers We LoveComputer Science Research Papers
![Page 17: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/17.jpg)
Browserify/Gulp• Browserify uses the same module.exports syntax as Node (AMD vs.
CommonJS)
• — debug builds in source maps for console debugging
• Gulp alleviates i/o pain by going through memory (no .tmp dir)
• Gulp tasks take milliseconds while grunt tasks take seconds
• Both are so much less ugly, syntactically
• Uses NPM packages like a boss
• Exports Node core modules for use in browser (url, path, events, stream, http)
![Page 18: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/18.jpg)
![Page 19: Boulder JS meet up presentation for April 16](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b772f44a795985568b4633/html5/thumbnails/19.jpg)