Technology in Progress

Beta Sites

NYTimes Beta sites
beta620.nytimes.com/

WebGL
ro.me
www.netmagazine.com/features/20-webgl-sites-will-blow-your-mind
LEARN: learningwebgl.com/

CSS3

Generator: css3generator.com/
css3please.com/

For clients: HTML5 & CSS3
coding.smashingmagazine.com/2011/07/28/introducing-html5-and-css3-to-your-clients/

CSS3 Shapes
css-tricks.com/examples/ShapesOfCSS/
CSS3 Page curl shadow: www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow

LESS  CSS:
incident57.com/less/
coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
twitter.github.com/bootstrap/
fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

P.S. To use the live “watch” feature (which will auto-refresh the CSS whenever you save your LESS code), just drop this code into your template:

<script type="text/javascript" charset="utf-8"> less.env = "development"; less.watch(); </script> 

You may not even need the “development” line because the script should detect when you’re running on a local machine, but it didn’t do it in my particular case so I’m setting it manually. Another method to invoke watch is to append “#!watch” to the end of your URL.

P.S.S. Less.js browser script currently won’t work if you’re using Chrome and the path to your page starts with “file:///” due to a known Chrome issue.

Pure CSS3 Animations – 2D & 3D

CSS 3D Animations are rendered through the computer / ios cpu so are much smoother and faster than using canvas to draw objects.
Exploding puffer fish game: creativejs.com/tutorials/create-an-ipad-optimised-game/

New API’s to look out for

Free data to use on your websites:
www.freebase.com/

Google refine – cleans up and helps you analyze excel data
code.google.com/p/google-refine/

WEB GL Animation (THREE)

github.com/mrdoob/three.js/

CANVAS

Canvas Demos:

Snow: sebleedelisle.com/2010/11/javascript-html5-canvas-snow-in-3d/
Smoke/starfield main info page: sebleedelisle.com/2010/11/javascript-2d-and-3d-particle-effects-at-full-frontal/
3d Smoke from mouse cursor: sebleedelisle.com/demos/JSParticles/Particles3_1.html
Star Field: sebleedelisle.com/demos/JSSimple3D/Canvas3D_4_0.html

Download HTML5 Canvas:
html-canvas-lib.sourceforge.net/
Guide to Canvas: developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html#//apple_ref/doc/uid/TP40010542-CH2-SW1

Canvas resize to fit window
stackoverflow.com/questions/1664785/html5-canvas-resize-to-fit-window

HTML5 Canvas tutorial:
webdesigneraid.com/html5-canvas-graphing-solutions-every-web-developers-must-know/

HTML5 Forms:

Home

Hype for HTML5 animations:

HTML5 Video:

Text captions with language switching people.opera.com/brucel/demo/video/multilingual-synergy.html
dev.opera.com/articles/view/accessible-html5-video-with-javascripted-captions/

Syncing Content with HTML5 Video

coding.smashingmagazine.com/2011/03/11/syncing-content-with-html5-video/
Demo: isithackday.com/syncing-video/

HTML5 Data Attribute

HTML5 Custom Data Attributes (data-*)

JQUERY

Top 10 Plugins Sept 2011
www.script-tutorials.com/10-interesting-jquery-plugins-september-2011/

Tweet to download (like on scoutmob) you must tweet in order to go to activate the button!
tutorialzine.com/2011/05/tweet-to-download-jquery/

About Steven Chu


Hi, I'm Steven! I'm an entrepreneur, photographer and art director in New York. Follow this blog for self expression, fun, and most importantly: looking comfortable, at ease, and amazing in your photos no matter who takes them! I dedicate this to my amazing friends who have let me inadvertently turn all of our hangouts and travel photos into a never ending photoshoot of fun. The proof is in the pudding-- our photos rock. My other projects: I'm the founder of InstaTechie.com, a face-to-face tech concierge service for NYC. Book a techie to walk you through something you want to learn! My work focuses on socially engaged art projects which use technology to create access to resources for communities. Visit Steven Chu Studio (stevenchustudio.com) for branding & design work or Steven Chu (stevenchu.com) for photography projects.

Leave a Reply