Links

HTML5 Boiler plate (+mobile version)

Along with HTML5 Boilerplate's rock solid commitment to cross-browser consistency, H5BP brings you delicious documentation, a site optimizing build script, and a custom boilerplate builder. In addition to this, we now support lighttpd, Google App Engine, and NodeJS with optimized server configurations (along with Apache, Nginx, and IIS) and we've reduced the overall size of the published boilerplate by 50%.

Why it is awesome

Cross-platform compatible (Android, iOS, Blackberry, Symbian)
CSS class to target IE Mobile 7
Home screen icon (Android, iOS, Symbian)
Cross browser viewport optimization for Opera Mobile, Android,iOS,IE,Nokia,Blackberry.
Optimized viewport scaling (Opera Mobile, Android, iOS, Mobile IE, Blackberry)
Option to enable iOS start-screen in full screen mode
Better font rendering on IE Mobile
Adaptable markup and CSS skeleton
CSS stylesheet for low-end devices
Mobile sitemap
Mobile MIME type support
Build tool for mobile
Integrates well with PhoneGap and Appcelerator

Why it is awesome-er

HTML5 offline caching for smartphones
Hide URL bar to maximize screen area
Button clicks that don't wait for the default 300ms delayed click event
Textarea autogrow
Hide Safari browser chrome
Mobile bookmark bubble
Browser Database Wrapper API
Robust optional User Agent Detection in .htaccess
Mobile optimized default CSS
Media queries polyfill for Windows Mobile
Google Analytics for low end mobile devices


http://html5boilerplate.com/
http://html5boilerplate.com/mobile/

Filed under  //   html   html5   mobile   ui   web  
Posted April 1, 2011 by email 

CSS drop-shadows without images

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Image001

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Filed under  //   css   html   html5   ui   web  
Posted February 17, 2011 by email 

HTML5 Boilerplate: HTML5/CSS/JS template

HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.

After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, performance optimizations, even optional features like cross-domain Ajax and Flash. A starter apache .htaccess config file hooks you the eff up with caching rules and preps your site to serve HTML5 video, use @font-face, and get your gzip zipple on.

Boilerplate is not a framework, nor does it prescribe any philosophy of development, it's just got some tricks to get your project off the ground quickly and right-footed.

http://html5boilerplate.com/
https://github.com/paulirish/html5-boilerplate/wiki

Filed under  //   html   html5   ui   web  
Posted November 12, 2010 by email 

Dive Into HTML5

"Dive Into HTML5" by Mark Pilgrim
The Work shall remain online under the CC-BY-3.0 License.

http://diveintohtml5.org/

Filed under  //   audio   canvas   form   html   html5   input   location   offline   storage   validation   video   web  
Posted November 11, 2010 by email 

HumbleFinance: Dynamic Charts with HTML5, Canvas, and Flotr for Prototype

HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.

Image001

http://www.humblesoftware.com/finance/index

Filed under  //   canvas   charts   graph   html5   javascript   prototype   webui  
Posted May 21, 2010 by email 

SproutCore: HTML5 application framework

SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.

SproutCore works by doing the only thing that can truly eliminate the latency problem: it moves your business logic to the client. SproutCore applications are full-fledged programs, written in JavaScript. That JavaScript executes in your user’s browser, freeing up your servers (and server engineers) to focus on what’s most important in a cloud application: delivering users’ data as quickly and reliably as possible.

But SproutCore isn’t your mama’s JavaScript library. It isn’t meant to augment existing web pages. It isn’t meant to add animation to documents. SproutCore is a tool for building applications. It has more in common with Cocoa or .NET than jQuery or MooTools. Because of that, SproutCore will change the way you think about building web apps.

SproutCore is server-agnostic and will plug into your existing backend.

Outlook

http://www.sproutcore.com/

Filed under  //   app   html   html5   javascript   ui   web   webui  
Posted April 7, 2010 by email