Hackpads are smart collaborative documents. .

Meaghan Bent

1691 days ago
Unfiled. Edited by Perry Trinier , Roufa Therrien , Meaghan Bent 1691 days ago
Perry T 5 types  of js applications
  • No JS
  • e.g. Mom's cat website
  • Tools: None
  • How: Write HTML
  • Declarative js apps
  • e.g. Modals and a carousel
  • HTML carries burden of "logic" in your app
  • Might use Bootstrap.js
  • Create a /lib folder, use plugins
  • Level up if you are adding too many plugins or modifying them
  • $(doc).ready
  • Landing page
  • Tools: Handwritten js
  • main.js and a libs folder with plugins, one $(document).ready() call
  • Level up: Line count (over 50), needing multiple ready calls
  • Objects
Meaghan B
  • e.g. Small blog (forms, dashboard, interactivity)
Perry T
  • Tools: Folders, 1 global object
  • Keep it DRY - Don't repeat yourself
  • how: doc.readys belong in one init(), use your own namespace
  • Level up: Cross-dependent calsses, tired of DIY, not sure where to add event bindings or other DOM-related code
  • Modules and MVC
  • e.g. Big data dashboard - Gmail, GA
  • tools: Modules, MVC, templates, build tools
  • AMD or CommonJS ( use AMD)
  • Meaningful files of code - break up functions of the code into multiple files
  • Guaranteed results in the browser
  • Encourages better code
  • MVC
  • Enhanced organization
  • Backbone, Ember, Angular
  • Porting DOM soup to Backbone is "really easy"
  • Templates
  • Underscore, jade, mustache, handlebars, dust...
  • Look for template libraries that have precompiling support
  • Build tools
  • Housekeeping tasks
  • Grunt.js - task based, runs on node.js
  • How to get here: One piece at a time! Start with templates, maybe add build scripts and finally if you need it use an MVC framework or parts of one
  • Overview
  • Rightsized apps are OK!
  • Err on the size of being prepared for more complexity
  • Know when to level up to more organization of code
 
 
 
 
1692 days ago
Unfiled. Edited by Perry Trinier , Roufa Therrien , Meaghan Bent 1692 days ago
 
Speedometer
 
Perry T As part of what is returned from the navigator.geolocation.getCurrentLocation() method, for mobile devices speed is returned in metres per second
 
 
File Input & File Reader
 
File input is now supported in iOS6. Clicking input[type="file"] brings up selection from the camera roll. 
 
Meaghan B CRAPSTAGRAM
  1. create a webpage with 1 file input and 1 canvas.
  1. use the file input to select a photo from the camera roll
  1. Use JS FileReader() to read the file
 
Accelerometer
Code on github
 
Compass
 
Perry T deviceorientation event returns webkitCompassHeading (number of degrees relative to north) and webkitCompassAccuracy.
 
Camera / WebRTC
 
Roufa T RTC = Real Time Communications
 
Meaghan B Allows you to stream video via live stream through HTML5 and eliminates the reliance on Flash (thank goodness :). Create a peer 1-1 connection.
 
HTML greenscreen is the coolest thing.
 
Perry T Camera access uses getUserMedia()
 
Roufa T Mobile - available on Opera 
 
Meaghan B Recording is still in development, however, Wes said that you could take pictures and compile them in Ffmpeg software. http://www.ffmpeg.org/
 
Roufa T Summary
Second to last slide has "technology review" of what was covered - useful reference 
 
1692 days ago
Unfiled. Edited by Meaghan Bent , Roufa Therrien 1692 days ago
How to make almost NaN dollars a day on a fake startup
 
An entire fake brand of projects. What can be learned from having a lot of projects on the go?
 
(Moxboxx is a playlist service that supports creating playlists of YouTube, Soundcloud and Vimeo with autoplay.)
 
When you make stuff, makes lots of stuff. Make code to be interested in code. Hack on a lot of side projects. Don't worry if they fail. Find out what your interests are from your projects. Focus on repeating elements and try slightly different techniques.
 
Learn about browser quirks and limitations when it comes to using Canvas, CSS, JavaScript. Try testing on various devices.
 
Open source is good!
Get others to look at your code and help out. Nobody is perfect, neither is their code.
 
Consider submitting your apps to Firefox Marketplace.
 
 
 
 
 
 
 
 
 
 
1691 days ago
Unfiled. Edited by Meaghan Bent 1691 days ago
Depending on jQuery
Meaghan B by Alex Sexton
 
Don't mess with Texans.
 
There is bad performance loading many scripts syncronously in the head. Manual dependecy management stinks. 
 
The <script> tag is dead. (??)
 
Most non-trivial applications will benefit rom internal modularization. 
 
Module management
 
AMD is the recommeded module and jquery defines itself as AMD native. AMD modules describe their own dependencies.
They have great compat with gloabs, and legacy code.
Keep your code small and concise
 
AMD JS library on Github
 
  • Don't nest your requires 
 
 
 
1691 days ago
Unfiled. Edited by Perry Trinier , Meaghan Bent , Roufa Therrien 1691 days ago
The Holy Grail: Client and Server
 
Roufa T Accessibility vs. Performance - middle ground is Progressive Enhancement
 
Meaghan B  Who consumes your application?
  • search engine
  • everyone
  • controlled environments
  • semi-controlled environments
 
Do you need server rendering?
Better question, do you need accessibility?
 
  • Try not to make decision based on performance dreams.
  • Think of your users, fight for them!
 
Node.js is the server of choice.
 
Abstraction is everything
 
  • Module abstarction makes laoding flexible
  • Use modules to provide abstraction to your code
 
Loading code
  • On the server side, require with CommonJS sync syntax
  • On client side, include a script tag asynchronously.
 
Unify with modules
There are two competing module formats, CJS and everything else.
 
 
 
 
 
1691 days ago
Unfiled. Edited by Meaghan Bent 1691 days ago
Meaghan B People don't notice a good process while it's working
You do notice when it breaks down.
 
To support creativity, not resist it.
 
 
 
1691 days ago
Unfiled. Edited by Meaghan Bent , Roufa Therrien , Perry Trinier 1691 days ago
The anatomy of a jQuery UI widget
 
Roufa T URL for slides - (hopefully they'll come back ;) 
 
Important to develop a lot of snippets that are reusable.
 
Meaghan B The factory pattern is a way to generate different objects with a common interface.
 
Perry T The widget factory can be used standalone without the full UI source
 
 
 
 

Contact Support



Please check out our How-to Guide and FAQ first to see if your question is already answered! :)

If you have a feature request, please add it to this pad. Thanks!


Log in