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:

Online Form Builder with Cloud Storage Database

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/

Leave a Reply