So this chart..

shows ie8 relative to everyone else

we need one that adds in ie7 and ie6.. hopefully progressively for the big WOW effect.

but it needs to be more obvious the sort of scale of js performance we're dealing with.

sooo if you go to https://github.com/ you have a nice river of news waiting for...

well sometimes a lot of the news items featured is just not the most valuable.

for example, i'm interesting when someone forks my projects, but not so much when they just follow.

I'd love some filtering on these news items so I can apply some rules, based on combinations of person, activity and project.

best if its a userscript so it can be a chrome extension, greasemonkey script, opera userjs, etc...

python has http://www.pythonchallenge.com/

but the open web platform has nuthin. we need something that's fun and gets people more familiar with javascript and their developer tools. a nice way to ramp up on things they've been putting off learning for a big.

I know ross hadden has some ideas around this. lets hear em out and see what can get done!

as jquery ui effects

http://gruppler.dojotoolkit.org/

Both are solutions for bringing <canvas> to IE.

• http://excanvas.sourceforge.net/
• http://flashcanvas.net/

But flash canvas not only uses flash (and avoids DOM manip) but also covers more API ground: http://flashcanvas.net/docs/canvas-api

(not to mention FlashCanvas is actively developed whereas the excanvas developers have moved on to other things...)

I'm fairly certainly flashcanvas is The™ right answer for bringing canvas to IE <=8, but a performance test would confirm that.

We cant possibly have every new framework and library doing this single-vendor stuff https://github.com/blackberry/Alice/blob/master/js/src/alice.fade.js

I am assuming ignorance here, so wondering if there is a small snippet that we can pimp that would be universal (especially given this is JS library doing CSS stuff).

Relative values are usable in jQuery.fn.animate, why not jQuery.fn.css? Help me stop using this work around:

$('elem').animate({
'left' : '+=10px'
}, 0);

I've collected a fuckload of notes on type and its rendering on screen.
http://oksoclap.com/typerendering

mostly relating to webfonts and @font-face.

it needs to be published.
in some form.
:)

it'll go up on http://typerendering.com when its ready.

A lot of demos have nasty "download IE9" or "download Chrome" or "download other browser" placeholder text when viewed on browsers that do not support a selection of features.

The idea is to create a site that would render the correct list of browsers that support the features required for the demo. e.g. http://chooseyourbrowser.com/history+transitions+webGL would give you a polite message with a list of all browsers that support these features (not just one).

get.webgl.org does this very well (and a lot of webGL demos use it).

Easier for demo creators to link to rather than face flack for openweb unfriendly unsupported pages.

wouldn't it be nice to just select two chunks of text/code/whatever in your browser and get a beautiful diff?

Quick hits write-up here:
http://analogysoft.com/learning/ui-hulk-out/#beyondie6

So far, the best SEO tool I've found is SenSEO, which is a firefox addon.

Paul has suggested that this might be a great fit for a Dev tools audit extenstion

I'd like to see almost all of the features that SenSEO has in a Chrome Extension, no matter how we make it happen.

Basically the usercase is this.. most people absorb the standards mailing lists in gmail/thunderbird because without proper threading, the email volume is unmanageable...

but you often want to get a hard permalink to a message (or thread) to send to someone else.

Doing that is hard.

Here's my thought on how this would work:

1. browser extension is a user script (which is installable everywhere)
2. in gmail it uses the gmonkey API that's exposed.
3. tries to detect if its currently viewing a msg from a w3c mailing list (mailing-list attribute says so)
4. if so it gets the Message-ID from "Show Original" (or elsewhere)
5. with the Message-ID it could then use the mailing list search and get the exact message...
6. grabbing the permalink opening it up in a new tab (or something)

Even if you don't specify cache expiration properly in HTTP headers, despite all the warnings generated by tools like the Webkit auditor or YSlow, Chrome & Firefox pull static assets from local cache on subsequent visits to a site. It's difficult to find good information via Google/Stack Overflow searches about how this works, and the browsers themselves don't clearly report expiration dates.

How long will assets be cached? If assets are cached & retrieved locally regardless of server cache expiration headers, are the headers really that important?

From Lars Gunther:

I have been a long time fan of Tidy, a tool to clean up and do some basic checks on the code. However, the tool is not really being updated any more, and since I have moved to using HTML5 and ARIA on all my new projects, it has lost much of its usefulness.

I also see no momentum picking up and thus think it should be considered folding Tidy into html5lib. By that I mean using html5lib to get Tidy like functionality.

Basically we need to evolve TIDY to use html5lib and wcag2 and provide the HTML linting capabilities people want.

Read on:

http://itpastorn.blogspot.com/2010/11/tidy5-aka-future-of-html-tidy.html

Basically links to all the emulators of the devices that are in jquery mobile's mgbs:
http://jquerymobile.com/gbs/

And how to get going.. and what's the best OS to do it all on.. etc.

Filament Group would be great to do this but anyone could, really.

So, I think there is a future where feature detection and UA sniffing go hand in hand.

Thus far one of the biggest dangers of UA sniffing is that everyone does their own sniffs. And they fuck them up. (Same thing with writing your own feature detects, unfortunately)

But one area where the two combine is something along these lines.. The JSKB project already hinted at the potential here:

http://google-caja.googlecode.com/svn/trunk/doc/html/jskb.html
http://googlecode.blogspot.com/2010/06/reversing-code-bloat-with-javascript.html

So essentially the server would detect what UA is coming at it (with a reputable, community-driven UA parsing library, like uaparser or platform.js), match that against the feature tests that have already been run (like what's already in BrowserScope/Modernizr).. and then strip out whole entire chunks of code that are totally unnecessary to send down the pipe to this user agent.

This solves both the bandwidth problem along with the fact that we want to support different agents but send as few bytes as possible.

It's definitely where I see things going and am looking forward to working with people on making it happen.

Mainly for gradients, transforms, transitions (and soon for animations).

So there is detection like..

• http://www.louisremi.com/2011/04/22/navigator-online-alternative-serverreachable/
• http://remysharp.com/2011/04/19/broken-offline-support/

And guides to appcache like http://diveintohtml5.org/offline.html

But stil nobody knows the right way to offline enable your app.
Even yesterday a friend told me she thought one of native apps' hugest edges over web apps was that you can use them when you dont have connectivity.

Seems to me we need more guidance around dealing with flaky and non-connectivity... So perhaps proxies at the XHR level and such.. wycat's https://github.com/wycats/jquery-offline does a lot of this but there should be more.

I think the final deliverable here is some mix of library code (like jquery-offline) and a guide.

it's basically NPM for browser based scripts

• http://www.getbpm.org/
• https://github.com/bpm/bpm
• https://github.com/bpm/bpm/wiki

Strobe made it but they got swallowed by Facebook before it really sailed.

Also ender has some overlap. Would be good to rectify that.

This particular thing has a lot of interested folks, so ping this thread if you want to help.

(Edited 2012.03.01)

TL;DR: don't use defer for external scripts that can depend on eachother if you need IE <= 9 support

There is a bug in IE<=9 (confirmed, below, by an IE engineer) where if you have two scripts such as...

<script defer src="jquery.js"></script>
<script defer src="jquery-ui.js"></script>

And the first script modifies the dom with appendChild, innerHTML, (etc.), the second script can start executing before the first one has finished. Thus, a dependency between the two will break.

The details of this limitation begin at this comment

This essentially means that script[defer] cannot be used in most cases unless you have dropped IE8 and IE9 support. If, however, you can UA sniff to serve script[defer] to all browsers except IE6-9, that will net you large performance wins.

Steve Souders indicated there may be a hack of inserting an empty <script></script> tag between the two tags that may address this problem. Research to be done…

original post follows:

@defer scripts execute when the browser gets around to them, but they execute in order. this is awesome for performance.
it's also awesome that it's been in IE since IE5.

but, we're lacking a little bit of comprehensive research on this..

kyle simpson thinks there may be some edge case issues with defer... from this h5bp thread...

1. support of defer on dynamic script elements isn't defined or supported in any browser... only works for script tags in the markup. this means it's completely useless for the "on-demand" or "lazy-loading" techniques and use-cases.
2. i believe there was a case where in some browsers defer'd scripts would start executing immediately before DOM-ready was to fire, and in others, it happened immediately after DOM-ready fired. Will need to do more digging for more specifics on that.
3. defer used on a script tag referencing an external resource behaved differently than defer specified on a script tag with inline code in it. That is, it couldn't be guaranteed to work to defer both types of scripts and have them still run in the correct order.
4. defer on a script tag written out by a document.write() statement differed from a script tag in markup with @defer.

it'd be excellent to get a great summary of the full story across browsers and these issues so we can use defer confidently.

see also:

• http://stevesouders.com/hpws/js-defer.php
• http://stevesouders.com/efws/couple-script-defer.php
• http://hacks.mozilla.org/2009/06/defer/

we need this.

easteregg.it or like.. aneastereggforyou.com

which has like.. a list of all the triggers against a list of all outcomes

konami, doubleclick on footer, type something, peel corner, drag logo...
      \/   \/    \/
cornify, raptorize, flip upside down, invert color...

and then like.. it outputs code for you!

just like http://ie6update.com/ but for Chrome Frame.

now that CF can be installed without admin rights its the right time to suggest more heavily that it should be installed. the default CFinstall.js prompt defaults to a modal prompt and doesnt have a built-in option to mimic the standard IE "activebar"

ie6update has a jquery dependency, but that seems generally OK.
it is also gpl v3... so that might be worth considering if forking seems wise.

one nice thing i'd add: optional analytics to measure clickthrough.

idea 1 : news feed filter

sooo if you go to https://github.com/ you have a nice river of news waiting ...

well sometimes a lot of the news items featured is just not the most valuable. for example, i'm interesting when someone forks my projects, but not so much when they just follow them.

I'd love some filtering on these news items so I can apply some rules, based on combinations of person, activity and project.

idea 2 : project activity view

When i go to a repo, regardless of if i'm following it, i want to see all project activity.. essentially what i would see if i were following only it, and watching my news feed.

idea 3 : diffs for gists

Implemented already! https://chrome.google.com/webstore/detail/ekibhngllckenihijddjkmehiocljcpc

idea 4 : inline commit previews

Implemented already: http://userscripts.org/scripts/show/76422

...

Ideally this would be a mega-userscript so it can be a chrome extension, greasemonkey script, opera userjs, etc...

(updated 2012.02.17 with subbullets)

• why the XHTML fascination has been bad for the web
  • meh: I'm over it.
• an HTML5 case study with nissan leaf http://www.nissanusa.com/leaf-electric-car
  • my notes here: https://gist.github.com/1858149
• letting go of jQuery for HTML5 devs
  • pretty much done: http://sharedfil.es/js-48hIfQE4XK.html - also i dont think this matters
• IE9, the embedding bit and eot
  • done: http://readableweb.com/web-font-follies/#comment-8096
• yes you can use @media (print) { in css and it works everywhere.
  • done: http://kilianvalkhof.com/2008/css-xhtml/a-useful-print-stylesheet/
• using aria and firebug to make an IRC channel talk out loud.
• how to use yepnope.js
  • done: http://yepnopejs.com/ and http://www.modernizr.com/docs/#load
• CSS3 for engineers
  • still havent seen this one
• IE8 is the new IE6. but wayyy worse. see also
  • done: http://paulirish.com/2011/browser-market-pollution-iex-is-the-new-ie6/

It would be super awesome. The only reason I use Safari is because its syncs with iOS / iCloud.

Xmarks sucks, it syncs with errors etc.

blows my mind that its 2011 and we don't have this yet..

it should probably use http://www.phantomjs.org/ because we need a recent browser at the root of things.

And an API like..

<img src="http://scrnsht.org?width=450&url=http://mothereffinghsl.com">

And should be using a recent webkit or gecko so it can handle decent css3..

Based on a lot of the posts like these....

http://alexsexton.com/?p=106
http://blog.rebeccamurphey.com/on-jquery-large-applications
http://blog.rebeccamurphey.com/on-rolling-your-own

.. we need some documentation (or even an e-book) that gives an overview of how to structure a large web app.

It should be fairly unopinionated, with suggestions and recommendations.

And some other threads on things to keep in mind

• http://jsmentors.com/pipermail/jsmentors_jsmentors.com/2010-November/thread.html#78

For reference.. here are two similar pieces of work, though with different aims:

http://jqfundamentals.com/book/book.html
http://eloquentjavascript.net/

This doesn't exist. I couldn't tell you why.

Sometimes I just wanna know who of my peoples are around me.

1. first get the user name.. lets assume paul_irish
2. grab https://api.twitter.com/1/friends/ids.json?cursor=-1&screen_name=paul_irish&callback=omg
3. break users into chunks of 100
4. call https://api.twitter.com/1/users/lookup.json?user_id=12312,1234123,45645,....,567567&callback=omg
5. grab the location datafield for everyone
6. geocode it or whatever
7. fucking put it on a map

This is basically an alternate version of $.fn.animate but it uses CSS3 transitions where available. This gives it the major benefit of hardware acceleration which is key for high performance.

The API will probably match the api for css transitions pretty closely.

Users would use transition() instead of animate() when possible to get added performance and animation fidelity.

There are a few similar implementations that should be considered as inspiration:

• http://developer.yahoo.com/yui/3/transition/
• http://scripty2.com/hardware-acceleration/ https://github.com/madrobby/scripty2/blob/master/src/effects/css_transitions.js
• https://github.com/sproutcore/sproutcore/tree/master/frameworks/animation/

John Resig has said this is a no-brainer for jQuery Mobile, and he's welcoming patches. It should probably go into jQuery core as well.

edit 2012.02: link to addy's post about it: http://addyosmani.com/blog/css3transitions-jquery/

I know jQuery, Google, and other groups all use qwebirc, which is the default webchat of the freenode network.

for example: http://webchat.freenode.net/?channels=html5

project hosted here: http://www.qwebirc.org/ and repo here http://hg.qwebirc.org/qwebirc/src

The client desperately needs UX and IxD and visual design work. Anyone with design or javascript skills would be a tremendous help.

I'd love to facilitate the work here, working with the project lead and you.

Comment if you'd be into this.

There’s http://msdn.microsoft.com/en-us/library/ms537512.aspx, but it’s missing out on a lot of valuable information. Would be cool to have a better reference with practical code examples etc.

I alluded to this on Twitter yesterday, but I think it would be really great to have a DOM performance test that all of the browsers compete on as they have been for pure language speed. The bottleneck of real applications is not how fast a browser can perform string and array operations, although that is important, but really is the DOM. Browsers have been competing on raw language speed lately and promoting the results on sites like http://arewefastyet.com/, which is great and all, but unfortunately, I think that this is avoiding the real problem.

What we need, is a standardized and comprehensive performance test for the DOM that produces a single easily publishable number to start the competition among browsers in this area. Maybe using a site like "Are we fast yet" to show the results of these tests across browsers would help spur on this competition.

What do you think?

Basically we need a micro-library for DOMContentLoaded-like event binding that works everywhere.

And it should be as small as possible.

And not suck.

One that we can trust.

Annoying to accept/decline and also cluttering up my database list

Mathias attempted to best answer this:
http://mathiasbynens.be/notes/inline-vs-separate-file

In it he says:

Making an HTTP requests costs roughly 100 ms (the average TTFB I’ve seen, though it can be as low as 50 ms or 60 ms). Assuming a low powered DSL connection, [users ...] can download 10 kilobytes every 100 ms

Which seems to mostly answer it but i think we need some more data and confirmation on this figure.

also getify also has a post on this topic http://blog.getify.com/2009/11/labjs-why-not-just-concat/

christian has a test rig up here that explores this topic: http://www.der-schepp.de/http-connects/

HTML-based slide decks are quite popular these days..

for example:

• http://stateofhtml5.appspot.com
• http://fixingthesejquery.com
• http://jquerysbestfriends.com

... but one thing we can't do is Keynote's incredible Flame transition: http://vimeo.com/18031597

It's a beautiful thing.

Especially when you set it for a duration of like 8 full seconds.. BURNNN BABY.

Anyway, we need to do that with javascript. Canvas probably will tackle this better than anything else.

The only flames in canvas demo I've found:
http://skypher.com/SkyLined/demo/PerlinFlames/p4sfx.html

Unobfuscated source: http://skypher.com/SkyLined/demo/PerlinFlames/p4.js

Who can bring this much needed effect to the web?

http://wiki.whatwg.org/wiki/Autocompletetype was published recently and is already available in Chrome stable.

Other planned browser support is unknown but there is active discussion around it.

Mounir from Firefox asked:

Also, I do not understand why we have credit cards types. Is anyone willing to have his credit cards information saved locally? Is any website not using autocomplete=off as soon as credit cards are involved?

I've been storing my CC autofill data in Chrome since the feature debuted and absolutely love it. Not having my CCs memorized means the pull-out-my-wallet-and-put-all-sixteen-plus-digits-in procedure is kind of a pain. I don't know of specific data but I envision it's not hard to say that CC autofill increases ecommerce conversion. This is hugely more important over on mobile browsers, too.

Now here's the problem:

For Chrome, you confirm that you want specific credit card information saved. Without that confirmation, it never gets saved. Then when you load a checkout form with autocomplete=off on the CC fields, the site is actively blocking you from using the CC info you opted into saving. Sucks.

People have asked, "What about public computers?" ... But an explicit opt-in to save after CC info entering means this isn't a concern.

I don't know how autofill saving works on CC fields in other browsers, but I imagine once upon a time they saved it regardless of input name (unless autocomplete=off was set).

Can someone detail the current (and past) browser behavior around saving of information? Once that's done I think the form markup best practices around autofill will coalese (and the standards activity is firming up now as well).

Also if anyone has feedback for the autocompletetype proposal, read through and jump into the whatwg thread!

cc @mounirlamouri

So, I want to prototype stuff and I prefer doing it locally, but it would be lovely if there were a script that would let me:

1. Create fiddle-ready files: fiddle.manifest / fiddle.js / fiddle.html / fiddle.js / fiddle.css (maybe take existing index.html and convert them into these?)
2. Then I mess with them.
3. Convert them into a single public gist.
4. Return me a link to the jsfiddle with a url. e.g. this is the final url http://jsfiddle.net/gh/gist/mootools/1.2/86dc0f0d363446b0869c/ for this gist https://gist.github.com/86dc0f0d363446b0869c

Reasons:

1. Each gist is a git repo
2. jsfiddle sadly is not a git repo or any form of repo, when jsfiddle.net is down everything is down :/
3. I like my texteditor thankyouverymuch

We need to document what features are available to developers after you sunset support for a given browser.

I've done much of IE6 and IE7 here.
http://stateofhtml5.appspot.com/ (starting at slide 10)

We could also use FF3.0 notes.. like inline-block and the ­

http://analogysoft.com/learning/ui-hulk-out/#beyondie6

http://www.bennadel.com/blog/2306-What-CSS-Properties-Are-Supported-When-You-Drop-IE6-Support.htm

http://paulirish.com/2009/browser-specific-css-hacks/
lists a bunch and then there are a few more in the comments (the latest comments)...

and also these which just came in:

I read your post of rule filtering and made some tests. Looks like these selector hides the entire rule.
#not:lang(ie6-7)
#ie:not(#ie6-8)

We need to augment the esence of this test page http://paulirish.com/demo/css-hacks
and then wire it up with some getComputedStyle/currentStyle so we can send the results to browserscope and get a result grid

that way we can easily validate what the story is with these hacks..

and this should probably be on github.

three.js is (and certainly will be) one of the most important libraries for interactive development.
https://github.com/mrdoob/three.js

but it does not have any documentation or tutorials, walkthroughs, etc.
it needs them badly.

maybe something like :

• http://processingjs.org/reference/articles/jsQuickStart
• http://processingjs.org/learning

and a rough API reference of course.

• git browse issues inside a repo opens the issues page for that project
• git browse opens the main project page
• git browse commits opens /commits/master
• git browse commits featurebranch opens /commits/featurebranch

And maybe some syntax to point to the last commit committed.. git browse commits HEAD^1 or whatever?

schacon's git-pulls project actually has git pulls browse 17 which does the pull request side of this. and uses the github API. quite lovely.

https://github.com/schacon/git-pulls/blob/master/lib/git-pulls.rb

http://thechangelog.com/post/2878756980/git-pulls-command-line-tool-for-github-pull-requests

it throws errors when a more gentle warning is suitable.

the w3 team basically agrees with this but no one's got time.
it's an open source project and just needs someone to write the code.

http://lists.w3.org/Archives/Public/www-validator-css/2010Sep/0005.html

http://lists.w3.org/Archives/Public/www-validator-css/2010Sep/thread.html

http://github.com/paulirish/email2feed

^ read all about it.

Michael Smith of the W3C told me they're looking for help developing the W3C's html validator. Yes, the validator that thousands of web developers use every hour.

You want to help make it better for web developers? Good! Most of the work is Java. Below are details from him..

We're looking for somebody to help fix bugs and implement new features in
the source for the HTML5/validator.nu backend.

Ideally, it'd be nice to find somebody who already is using the validator
and is familiar with it and has an interest in helping out with it.

Also ideally, it'd be nice to have somebody with some Java skills, because
the source is pretty much all Java.

What we need mostly is help with changes to the part of the backend that
does checking of attribute "microsyntax"/datatypes and in some cases the
text content of elements (e.g., the <style> and <script> elements), as well
as a part of the backend that provides some custom checkers for doing
things like making sure <table> elements don't have overlapping cells.

To give a more detailed view of what some of what still needs to be done,
the list of open bugs/enhancements that neither Henri nor I am currently
working on is here:

http://is.gd/honoi

The best thing for somebody to do to start to get familiar with it would be
to check out the source and build it:

http://about.validator.nu/#src

About the structure of the code itself, the nutshell description is that it
does streaming, event-based processing (rather than, e.g., constructing a
DOM and then doing processing on that), through a set of SAX handlers that
are piped together and driven by a HTML5-text/html parser.

There's a detailed overview of the architecture in Henri's thesis:

http://hsivonen.iki.fi/thesis/

And I'd be really happy to spend some time personally helping anybody who's
interested in contributing.

--Michael(tm) Smith

comment here if you're interested (or email me) and I can get you set up.

http://box2d-js.sourceforge.net/index2.html

It's currently using prototype for its class and inheritance code.

Box2D.js is also very slow on the iPad. see http://html5.intellicode.nl/ as an example.

I think box2d could use a faster inheritance system.. perhaps one from Dojo?

http://paulirish.com/i/3530.png was an earlier graphical view of the platform features (created by opera).. great stuff

http://platform.html5.org/ was just created which has one of the best views of the features involved in the platform.

I think we need a new diagram representing all this stuff so its easier for people to grok what the layers are.

Lots of people are scared of github.
Like webdesigners.
They shouldn't be.
Scared of git... maybe.. but SmartGit helps alleviate that. but anyway..

We need an article (probably for Github.com itself) that shows that you can actually fork and patch and pull req on github without ever touching a command line.

It's basically this, but maybe with more screenshots:
http://blog.jqueryui.com/2010/05/how-to-submit-a-fix-to-jquery-ui-the-easy-way/

That way developers can get more engagement from scaredy-cats on their github hosted projects. :)

docco: http://jashkenas.github.com/docco/

while it was created for coffeescript, it works fine with plain javascript...

here's what jeremy said in a private email..

npm install docco
docco script.js

and

One more note -- it doesn't handle block comments at the moment -- just // style ones.

we should file a pull req on the docco site so it can describe how to use it..
because
its clearly the most beautiful way to document javascript EVER