Hackpads are smart collaborative documents. .

Roufa Therrien

1575 days ago
Unfiled. Edited by Perry Trinier , Roufa Therrien , Meaghan Bent 1575 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
 
 
 
 
1576 days ago
Unfiled. Edited by Perry Trinier , Roufa Therrien , Meaghan Bent 1576 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 
 
1576 days ago
Unfiled. Edited by Meaghan Bent , Roufa Therrien 1576 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.
 
 
 
 
 
 
 
 
 
 
1576 days ago
Unfiled. Edited by Roufa Therrien 1576 days ago
Roufa T Take away concepts:
  • think modular
  • learn the subtleties of the tools
 
JQuery animation thus far: methods like .animate() or .fadeIn(), etc
  • unnecessary with new CSS3 tools?
  • one way is to add an 'animate-box' class into the CSS code using JQuery, and then manipulate this class
  • in other words, you use the CSS to do what it can do and add other aspects through JQuery
 
New section in W3C: Web Animations 1.0 (released Feb 28 2013)
 
{Ooops, internet connection went down :( }
 
Slides from the talk available at:
 
 
 
1576 days ago
Unfiled. Edited by Roufa Therrien 1576 days ago
Roufa T by T J VanToll
 
A proof of JavaScript's flexibility is that when a program creates a bug on a browser, it's possible to figure out hacks that will resolve the problem, and don't need a total rethink of the code -- which would be the case in Java.
 
What to do if there is a bug:
 
  1. Try to find whether someone else has already experienced the same bug - using bug trackers, such as bugs.jquery.com/newticket
  1. Make sure that you use the latest version or build of a browser
  1. Create a reduced test case
 
Reducing = isolate the problem so you can figure out the actual problem, without getting distracted by the other code around it
  • remove code 
  • refresh
  • repeat
 
If problem recurs on the repeat, it means you've successfully isolated the code where the problem occurs.
 
Then continue to remove code, and see whether it still creates a problem with IE.
 
Then do code changes to determine - is it a problem with JQuery, or is strictly a browser problem: so you could for example change the JQuery code to JavaScript.
 
--
Once the iterations have led you to clearly identify the problem, submit the bug to the Bugtracker. 
 
Be polite and be humble as you do so.
 
 
 
 
 
 
 
 
1575 days ago
Unfiled. Edited by Perry Trinier , Meaghan Bent , Roufa Therrien 1575 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.
 
 
 
 
 

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