All Posts in nywebstandards

March 2, 2010 - Comments Off on New York Web Standards Meetup—CSS3

New York Web Standards Meetup—CSS3

The New York Web Standards Meetup will meet 17 March 2010 at reBar at 7:00 pm for "CSS3 and the Death of the Background Image, or Yet Another Talk on Progressive Enhancement (aka Death to IE6/7/Sometimes 8)."

The immense CSS3 proposal (which has been on the W3C's table for years) is now seeing a significant number of draft modules being implemented in browsers and most of these modules are explicitly geared toward reducing our time in Photoshop. In this comprehensive how-to, Marco Carag (TheKnot.com) will run through all the new properties you've been reading about and anticipating, including @font-face, rgba, gradients, drop-shadows, transforms and animation. Using both focused proof-of-concept pages and actual production examples from The Knot and other websites across the web, attendees will see the impact of CSS3 on the average front-end workflow and understand how it improves or affects your users' experience across all browsers.

CSS3 and the Death of the Background Image
17 March 2010 . 7:00 pm
reBar
147 Front Street
Brooklyn, NY 11201 [map]

RSVP now!

Please contact The Mechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

November 19, 2009 - Comments Off on Live blogging New York Web Standards Meetup—HTML5 part three

Live blogging New York Web Standards Meetup—HTML5 part three

HTML5 Part Three: Session, local storage, Web databases, and application cache

Marcus Lofthouse (tunecore.com) will continue the HTML5 series by exploring the following web storage techniques:

  • Session and Local Storage—providing a javascript accessible interface to key-value storage.
  • Web Databases—relational database support for storing structured data inside the browser.
  • Application Cache—providing the ability to define a list of files the browser should store locally and not request from the server again (until you explicitly signal the browser that you have something new to offer). Strategically used, this allows for the creation of web applications that can be used completely offline.

HTML5 storage techniques

  • Session/local storage
  • Client-side browser databases
  • Application cache

Current techniques

  • Server-side storage
  • Cookies: often used for customization
  • Plugins (Google Gears): Not used as extensively as server-side storage or cookies

Some issues (server side)

  • Requires persistent connection to the internet
  • Large data sets have to be downloaded each time the page is loaded
  • Can be processing intensive

Some issues (cookies)

  • Difficult to work with in JavaScript
  • Get sent to and from the server with each request (whether used or not)
  • Limited to 4k depending on the browser

Session storage

  • Allow 5–10 mb of storage
  • Works in Firefox, Safari and IE 8
  • Easy to use

Using session storage

sessionStorage.setItem(key, value);
sessionStorage['key'] = value;
sessionStorage.key = value;
sessionStorage.getItem(key);
sessionStorage.length;
sessionStorage.removeItem('key');
sessionStorage.clear();

Local storage

  • Exactly the same—only different
  • Different in scope & persistence

Session storage scope

  • Accessible only to one instance of a browser tab or window
  • All data is destroyed when window is closed
  • Newly created windows or tabs will get a unique copy of sessionStorage; they will diverge from that point forward
  • Prevents data leaking between windows

Local storage

  • Accessible to all windows or tabs (for site—obeys same origin policy)
  • Persistent storage between browser restarts

The base features are the same cross-browser, but each browser has its own specific extensions.

More than simple key-value pairs; can also store large chunks of XML or JSON.

Client-side database

  • Provides persistent storage of well structured data
  • Currently only supported in Webkit

Comments and concerns

  • No standard web SQL dialect
  • SQLite doesn't enforce types
  • SQLite doesn't enforce data lengths

Positives

  • Asynchronous DB calls keep the UI responsive
  • JS interface provides an easy way to clean your data and avoid SQL injection attacks
  • All database calls wrapped in transactions
  • Database versioning

Opening a database

var name = 'cheesedb';
var version = '1.0';

Execute SQL statements; two flavors

executeSQL(sqlStatement, arguments);
executeSQL(sqlStatement …

Security issues

  • Same origin policy
  • Tools can allow users to modify their own local data.

What is an application?

  • Desktop: compiled source, images, config/data files
  • WebApp: HTML, images, CSS, JavaScript, config/data files
  • Largest difference is delivery mechanism: webapps require you to access the sources via the internet

Application cache

  • Allows you to instruct the browser to keep a local copy of a set of files.
  • These files can be used offline, but more importantly won't request the resource from the server until told to do so again.
  • If you specify all of the files needed to run your application you will be able to run it offline.

Application caching

  • Cache manifest

Cache manifest

  • Simple text file
  • First line contains CACHE MANIFEST
  • Following lines contain paths to files to be cached
  • Document is declared as HTML5: <!DOCTYPE html>
  • The cache manifest file is served with …
  • New attribute for the html element: <html manifest="cache.manifest">
  • The cache manifest automatically includes the file it is called from.

Other options

  • Network section for content never to be cached

Updating cache manifest

  • Browsers check to see if the cache file has been updated by doing a byte by byte comparison of the cache manifest file, not by looking to see if the server resources have been updated
  • If the file has been changed the browser will download the new assets in the background
  • Cache updating is atomic. If any file is not found, the cache manifest will re-download everything (304 or 200 requests).

Batteries about to fail; signing out

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

October 5, 2009 - Comments Off on New York Web Standards Meetup—HTML5 part two (links and resources)

New York Web Standards Meetup—HTML5 part two (links and resources)

Links to resources from last month's HTML5 Part Two: Canvas, Web Forms 2.0, Audio and Video presentation to the New York Web Standards Meetup by Mike Taylor (TuenCore) and Jeffrey Barke (theMechanism). Thanks to everyone who attended!

See also:

Published by: jeffreybarke in The Thinking Mechanism
Tags: , , ,

September 23, 2009 - Comments Off on New York Web Standards Meetup—HTML5 part two

New York Web Standards Meetup—HTML5 part two

The New York Web Standards Meetup will meet tomorrow (24 September 2009) at theMechanism at 7:00 pm.

Mike Taylor (Tunecore.com) and Jeffrey Barke (theMechanism) will continue last month's presentation on HTML5 by covering Web Forms 2.0 and the canvas, audio and video elements.

The canvas element can be used to draw graphics using JavaScript, while the audio and video elements permit native embedding of those media elements in the browser. Web Forms 2.0 provides, among other things, strongly-typed input fields, new attributes for defining constraints and new DOM interfaces

HTML5 Part Two: Canvas, Web Forms 2.0, Audio and Video
24 September 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please note—This meetup is currently full and the waiting list is quite long. If you know you won't be able to make it, please update your RSVP.

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

September 2, 2009 - Comments Off on NY Web Standards Meetup—HTML5 part one

NY Web Standards Meetup—HTML5 part one

August 27, 2009 - Comments Off on Liveblogging the New York Web Standards Meetup—Getting started with HTML5

Liveblogging the New York Web Standards Meetup—Getting started with HTML5

Mike Taylor (Tunecore.com) will give a brief overview of (the current state of) HTML5, focusing primarily on browser support, new elements and their corresponding semantics and getting CSS to play along. He will also review how the front-end team at TuneCore is implementing these new features into a production site today.

---

What is HTML5?

And why should I care?

HTML5 is the next version of HTML; primarily aimed at web applications. Began as the Web Applications Spec in a W3C Working Group.

Why going back to HTML, why not continuing XHTML? We're not; HTML5 is both HTML and XHTML. Can write it either way you prefer.

  • New semantic elements
  • Rich DOM APIs (local storage, native drag & drop, content editable fields, web forms 2.0)
  • Rich embedded content (<audio>, <video>, <canvas>)

Mike personally finds the web forms 2.0 the most exciting. Opera 10 is the only who currently supports web forms 2.0.

In this talk, primarily going to cover new semantic elements.

Read more

Published by: jeffreybarke in The Programming Mechanism
Tags: , ,

August 27, 2009 - Comments Off on New York Webstandards Meetup – Getting Started with HTML 5

New York Webstandards Meetup – Getting Started with HTML 5

Mike Taylor (Tunecore.com) will give a brief overview of (the current state of) HTML5, focusing primarily on browser support, new elements and their corresponding semantics, and getting CSS to play along. He will also review how the front-end team at Tunecore.com is implementing these new features into a production site today.

A basic understanding of writing structured HTML is recommended. Other general topics including CSS and JavaScript will be discussed, but are not central to the presentation.

Watch the live broadcast below starting at 7pm EST on August 27th, 2009.

Live video chat by Ustream

Published by: davefletcher in The Programming Mechanism
Tags:

August 6, 2009 - Comments Off on Liveblogging DelveUI: Interaction Design in the Designer’s Hands

Liveblogging DelveUI: Interaction Design in the Designer’s Hands

Ryan Stewart - @ryanstewart - Interaction Design in the Designer's Hands

  • Adobe Flash Catalyst is a new piece of software that allows your to prototype Rich Internet Applications without coding.
  • Output: wireframes, interactive design comps, self-contained Flash sites.
  • Take AI/PS/FW mockups and make them come to life!
  • Code can be passed on to the developer if project needs to go farther.
  • Beta is available right now; release will be early 2010.

Published by: christygurga in The Programming Mechanism
Tags: ,

April 14, 2009 - Comments Off on NY Web Standards Meetup—Typography for the Web

NY Web Standards Meetup—Typography for the Web

The New York Web Standards Meetup Group will meet this Thursday (16 April 2009) at theMechanism at 7:00 pm.

Christy Gurga (theMechanism) will present different perspectives on formatting type online and demonstrate methods you can use right away. While only basic CSS knowledge is required, Christy will cover advanced techniques that are applicable for front-end developers of any level.

You'll learn how to establish the CSS foundation for your type using relative font sizes and ems, implement text replacement practices for specially formatted headers and polish your typography with extra detail.

16 April 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please note—This meetup is currently full and the waiting list is quite long. If you know you won't be able to make it, please update your RSVP.

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,

February 17, 2009 - Comments Off on NY Web Standards Meetup—Advanced Google Maps API

NY Web Standards Meetup—Advanced Google Maps API

Please note—The NY Web Standards Meetup: Advanced Google Maps API has been rescheduled from 19 February 2009 to 26 February 2009.

The New York Web Standards Meetup Group will meet next Thursday (26 February 2009) at theMechanism at 7:00 pm.

After a brief intro to/review of the Google Maps API, Jeffrey Barke (theMechanism) will cover some advanced Google Maps API topics, including server- and client-side clustering, creating custom base maps and some GIS-like functions.

Attendees should have some experience with JavaScript and familiarity with the Google Maps API.

26 February 2009 . 7:00 pm
theMechanism
440 9th Avenue 8th Floor
New York, NY 10001 [map]

RSVP now!

Please contact theMechanism if you'd like to present at a future New York Web Standards meetup.

Published by: jeffreybarke in The Programming Mechanism
Tags: ,