Skip to content

Instantly share code, notes, and snippets.

@ripter

ripter/gist:2772039

Created May 22, 2012 22:25
Show Gist options
  • Save ripter/2772039 to your computer and use it in GitHub Desktop.
Save ripter/2772039 to your computer and use it in GitHub Desktop.
Download ZIP
Notes from Html5 Dev Conf on May 21st 2012 SF.
Raw
gistfile1.md

I ordered these by quality/usefulness, so if you don't read the whole thing you probably didn't miss much.

#What would crockford do?

Revoke all software patents. Would like to have.

##Yahoo's problems

Yahoo was dishonest and started becoming a patent troll. This why he left yahoo for PayPal.

First nosql was developed in 1995 by yahoo.

One of its problems is that it's organized into properties/silos. Basically a bunch of little companies that share a cafeteria.

##What would Crockford do if he was CEO

  • not going to fix it next quarter, need tomato fix it.
  • Optimize for customer value. A/B testing. Ignore the quick buck. Build value for the customers.
  • Culture of Excellence.
  • Fork nodejs. Joynet is immature and childish.
  • De-silo company. Reimplement everything using the new nodejs servers.
  • Groups is 12 years old, basically unchanged. Produces a lot of revenue. Do it over and focus on the users. Fully integrate it into the rest of the system.
  • Fix research, it should look at the opportunities, not how to monetize. Look at the ideal structure of the company. Evolution path. Connect to universities. Teach web as architecture.
  • March on washington to change the patent system.
  • What is yahoo? Customers point of view. It is where you go.

Likes coffescript, not for production. Good design for the future of JavaScript.

#Functional Programming in JavaScript

Functional.js Prelude.js

##Links Looprecur.com Drboolean.tumblr.com Github/drboolean Osteele.com/sources/functional/

My notes about the speaker ( Uses titanium. )

##What is functional

  • pursuit of pure function
  • can only do one thing
  • self contained
  • low coupling
  • reusable
  • obvious, easy to reason
  • optimizable
  • testable

##First class functions

  • higher ordered programming
  • normal JS function stuff
  • Iteration: map fold unfold reduce filter
  • Design patterns:
  • metadata
  • go r context

##Point free code

  • a style
  • no arguments, use partials and composition to reduce the arguments needed to zero.
  • no lambda
  • partial application, aka currying
  • composition, use results of one function as the parameters of the next.
  • Easier to parallelize

##Example

  • (starts looking like Lisp)
  • reads backwards
  • easy to use memoize
  • reduces a lot of code
  • Removes data
  • takes some readjusting of code understanding.
  • it's OK to have somethings not point-free
  • object might be impure, but it's internals can me pure.

##Why JavaScript

  • best parts of Haskell/Lisp/F#/ML
  • JS is everywhere
  • Great to learn
  • mixed paradigm

#JavaScript on Crack URL 9z0.geti.fi, ogp.geti.fi, hip.geti.fi

My notes about the speaker ( JavaScript Architect. Wrote html5 cookbook. Mix of raw JS and jQuery code, almost haphazardly. )

##Gateway Drugs

  • localStorage/sessionStorage ** uses to keep the connection information include the socket gets closed.
  • History API ** history.js ** replaces login page because there is no reason to go back.
  • appCache ** lookup appCache douchebag ** Don't use it until you are done. ** even on refresh user doesn't get the new files.
  • Canvas ** lines can't be part of a clipping mask. **

##Hardcore Stuff

  • Native Drag n Drop ** dataTransfer.dropEffect ** dataTransfer.files **
  • Local Files ** file == dataTransfer.files[0] ** FileReader() ** xhr2 for older browsers **
  • WebSockets ** SocketIO ** namespaces, /site, /www ** Emit() ** .of let's you select namespace ** .in specific channel
  • Webworkers ** communicate with server in a different thread ** use .onmessage ** use .postMessage ** importScripts() async, even socket.io JS file! ** shim or older mobile browsers

#HTML5 Game Design

My notes about the speaker ( Started in the 80s making 8bit games. Makes Facebook games for GSN. )

##Where are HTML games today?

  • Like developing games in the 80s
  • Small teams can have success
  • Brain power can compensate for processing power.
  • New territory
  • Download size is limited
  • App install size limitions
  • Variable screen sizes
  • Variable animation performance
  • variable device capabilities and acceleration.
  • woeful state of HTML5 sounds

##HTML 5

  • no plugins
  • no white elephant (VRML)
  • not just bells and whistles (DHTML)
  • easer to sell because people "know" what it is.

##The future

  • constant increase in performance
  • metro?

##Problems

  • Platform fragmentation.
  • Legacy browsers.
  • Animation performance.
  • Sound.
  • Payments.

##Solutions

  • responsive, viewport, plan from the start. pixels are no longer pixels.
  • IOS is winning, Webkit is best.
  • Sounds sprites for HTML5 sound.
  • Use flash for sound, if possible.
  • IE9 is actually good with HTML5 sound.
  • Use native wrappers

##Coding

  • use jQuery
  • Mix CSS and Canvas, CSS is block level, Canvas is pixel level.
  • use excanvas.js for IE
  • CSS3 for fire and forget animations.
  • Can mix CSS3 and JS animation, but you switch from GPU to JS processing can cause judders
  • Browser games can judder because of background processes.

##Payments

  • Facebook credits are shaky/buggy
  • PhoneGap, AppMobi
  • Native wrapper, surprisingly easy.

##Native wrappers

  • Really easy using UIWebView.
  • Use native wrappers when needed, sounds, payments.
  • Fixes a lot of issues.

##How games are built

  • JS, CSS, animated PNGs, to make slots game. had to turn off some animations for older android devices. Blurring is just a sprite made in photoshop.
  • Wheel of Fortune. PNG in Canvas, use CSS rotation to make it look 3D. IPhone and Android have good canvas support. Better than CSS 3. Falls back to 2D for IE. Spinning is done in canvas.
  • SorcerySchool. Object finding game. Dialogs CSS 3. Canvas on top of background image for custom cursor and effects. Checking pixels in canvas. jQuery CSS to use css3 instead of jQuery animate. Doesn't work in IE. Clock is fire and forget CSS 3.

Kindle Fire has really odd resolution.

#WebGL for game development

My notes about the speaker ( Writing O'Really book. Discount: webglpre. Lots and lots of code examples. Takes a lot of code to make anything. )

TurboSquid for cheep/free models

It is OpenGL ES, IE is still lacking. Have to turn it on in Safari

##How it works

  • low level
  • no file format or object model
  • have to write shaders to use it
  • canvas element
  • create a viewport
  • Float32Array()
  • create buffers and fill with data.

##Building a Game

  • frameworks ** three.js ** CubicVR ** SceneGL ** GLGE
  • engines ** Gladius ** kickJs ** Skybox
  • three.js ** renders to WebGL or 2D ** feature rich ** not a game engine
  • sim.js ** wraps common Theee.js setup ** implements run loop ** Adds Handlers ** provides foundation objects

##Loading Models

  • three.js takes Blender, OBJ, COLLADA, Json
  • Blender is good for three.js

##Animations

  • no built in animation supports
  • three.js has some keyframes
  • with JavaScript we can animate anything.

##Bottom line

  • solid for game development
  • strong support from browsers, not IE
  • same openGL used in mobile devices.
  • tools are lacking
  • JS Garbage collection is an issue
  • audio and video is chaos
  • data format and delivery is lacking.

#Semantics

My notes about the speaker ( Left early. Basic overview of HTML 5 elements. )

##Why

  • unambiguous
  • accessibility
  • search and globalization
  • interoperability
  • if your debating too hard, don't worry about it. Use what works

##Structure

  • header
  • nav
  • article
  • section
  • aside
  • footer

Hyperlinks can now take blocks of elements ( invalid in HTML 4)

  • now have a download attribute
  • rel

#Playcraft, lessons learned

My notes about the speaker ( Started making games. Liked making tools better. Fakes classes :( Basic things that are easy with prototype but "innovative" with classes. Oooh JSON, why hasn't anyone thought of that before. Their engine has a lot of performance issues. )

Trying to build a large team HTML 5 game tool / framework.

##What a we dealing with

  • standards still maturing
  • IE
  • audio sucks
  • no udp, good for high performance games
  • full screen, not quite there yet
  • lack of WebGL, most users don't have it
  • JVM,
  • immature tools

##What cool about it

  • play anywhere
  • fast to develop
  • serious server and client tools
  • not a plugin
  • standards
  • one language
  • update games quickly

Of Top 25 iPhone games 92% are 2D

##Coding

  • high res timer.
  • per-rendering
  • animation frame
  • console.time
  • console.profile
  • Window.performace
  • console.memory
  • pool objects
  • use spatial indexing
  • Doubly linked lists

#Css3 3D, Canvas SVG animations

My notes about the speaker ( presenter is not very good. Doesn't really know how to use his Mac. Talking about border radius. What happens when you round a rectangle. Duh. Got confused because jQuery clone clones everything including the ID. Very ugly demos. Not smooth. )

##iPad 3 and Acer Prime: Cube Demo CCS3 skew scale rotate animate. Works well on both. Using keyframes. Faces are div elements.

Need to use the GPU to work. Nook was unusable. Everything better than Nook Color. Translate3D needs to invoke GPU

Matrix vs components.

  • matrix is slightly slower
  • matrix more compact.
  • matrix is harder to tweak

##Works in webkit. (chrome and safari) Browsers slightly differ. Windows looks best because drivers are more mature.

SVG does not support 3D effects. CSS3 is faster.

iOS is more mature than Android OS for 3D Animation.

Pong in CSS 3! Nope using jQuery events.

No control of speed. Can specify duration of effect.

Code .google.com/p <- code samples

Years away from real use.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment