Skip to content

Instantly share code, notes, and snippets.

@safe1981
Forked from paulirish/gist:1928551
Created March 11, 2012 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save safe1981/2016608 to your computer and use it in GitHub Desktop.
Save safe1981/2016608 to your computer and use it in GitHub Desktop.
draft of lazyweb-requests summary

TODO

  • defer and footnotes
  • mothereffinganimgif huge success
  • api.h5p huge success
  • big IRC client effort

12 months ago, I opened up a repo on Github; the idea was that my ideas were great and I didn't have time to complete them all, so I wrote them for other people to do. (lol) In reality, all of us have way more time than ideas, but it turned out some of the ideas I had were totally shared by other people, we just didn't have a meeting place to collaborate.

lazyweb-requests was set up to help front-end developers do better work by making their jobs easier.

Let me give you a summary of what's happened since launch.

Completed projects

#46 Map my Twitter Friends app : Believe it or not, this app didn't exist. : But a few days ago @theron17 jumped in and wrote it: theron17.github.com/Twitter-Friends-Map/

#40 a (good) screenshotting service : With an API like <img src="http://scrnsht.org?width=450&url=http://mothereffinghsl.com"> : @moondev made one with node.js and Phantom, @visnup chimed in with pinkyurl, @benschwarz made skeet which uses **** : url2png is a paid service, but looks pretty incredible.

#6 python help to launch email2feed : vladikoff took on the project and launched project in private beta

#7 publish type rendering notes : closed mostly because typekit covered the topic very comprehensively

#10 allow relative unit changes in jQuery.fn.css() : duck punch plugin written &rarro; feature then added to jQuery core via brandon aaron

#44 local → gist → jsfiddle workflow : nimbupani ask wants to develop on local files, send those upstream to github and get the resulting jsfiddle link : mklabs delivers a superhot solution

#1 Remove the prototype.js dependency for Box2DJS : we didn't end up doing that, instead we identified a number of projects that built a better Box2D js port: : PL box2d-js, box2d2-js, box2d.js, box2dweb

#14 Write "Github for pansies: A How To" : How To Use Git and Github by integralist. Nicely done. : More noob resources captured in the thread.

#15 patch the w3c's css validator to not throw errors on vendor prefixes : Jens Meiert and another Google engineer patched the validator. story here. Fixed!! : Also Yves Lafon updated it yet again on Oct 31st, fixing some MQ parsing issues.

#16 jQuery.fn.transition - support for hw accelerated css transitions : louisremi wrote jquery.transition.js ! boom. : also Remy Sharp's $.fn.tween and jQuery Animate Enhanced tackle the same problem

#19 replicate Keynote's Flame transition in javascript : WRITE MORE ABOUT THIS AND MAYBE FINISH IT.

#21 performance comparison between excanvas and flashcanvas : tested. flashcanvas is not only maintained, but also 34x faster. (THIRTY FOUR, YES)

#30 An app that converts -webkit-prefixed values, properties into all-prefixed ones : cssprefixer, CSS Prefix Spawner, Prefixr. Take your pick. :)

#25 git browse commands for opening relevant github pages : the push command from @jamiew's git-friendly made my life so much better. @defunkt's hub tackles most of the rest *****

#27 standalone, best practice DOMContentLoaded shim - domready.js : Diego Perini created the doScroll technique used by most libraries now. His standalone: ContentLoaded, and @integralist's DOMReady ***** (which is for what and why etcc)

#45 detection of vendor prefix miniscript : Options: Modernizr.prefixed(), jeffrey way's snippet **** sync his up with mine : I ended up collaborating with jeffrey so we could sunset my gist.

javascript performance chart!! paulirish/lazyweb-requests#11

Open projects

#3 write guidlines for web app architecture : Great resources shared on the issue thread, upcoming jquery learning site will help address, along with Addy Osmani's recent writings

#2 document "browser death features" : essentially the new features you get when you retire support for IE6, IE7, FF2, FF3.5, FF3.6, IE8 : mostly captured by the to-be-released GFS project

#4 port these incredible dojo effects to jQuery UI : jquery/jquery-ui#185

#5 Definitive answer to: concatenate or separate with async script load? : OMG issue 28. still open

#9 articles that need to be written : some tackled. most not. few people write prose. :/

#43 IE update bar widget for Google Chrome Frame : two open solutions: contribute it upstream to ie6update or write a patch for Chrome Frame's real CFInstall.js ******``

#41 a SEO optimization extension for Chrome : SenSEO is great but we could use something for Chrome, maybe using the DevTools audits API

#18 improve/develop the HTML Validator with the W3C : yati sagade stepped up today!

#20 HTML linting, aka the future of HTML Tidy : There is no up-to-date linter tool for HTML5. true story.

#29 Guide: Offline-enable your webapp recommendations : Offline still remains a challenge. This presentation from Ernest Delgado ********** covers things fairly well, but a good amount of work remains.

#32 Reference guide for IE conditional comments : **********

#34 Github++ userscript, chrome extension, etc : Ideas: news feed filtering, project activity view, gist diffing, inline commit previews : Part of this captured in @johan's Github improved extension, and *** has gotten all sorts of extensions and userscipts documented at Github help

#38 Web Platform diagram/infographic : *** image?

80% done projects

#12 document how docco works with plain javascript : strathmeyer filed a beautiful pull request. It's almost in.

#8 document how to get a robust mobile testing setup : resources collected. writing is mostly done, just needs to be merged

#23 chrome/browser extension for mailing list archive permalinks from gmail UI : i did this one, but its still got rough edges.

#24 chrome extension to DIFF two selections of text : pewpewarrows put out an extension, but it needs to be updated with a better diff backend

#31 improve design of webchat IRC client qwebirc : This issue thread was fun to watch, we forked the project from bitbucket to github, got buy-in from primary developer, a few folks started hacking : Some continued, though one decided to write his own node-js based irc client

#36 UA Sniffing + Feature detection solution : @kriszyp's ua-optimized mostly tackled this but it needs wiring up to Modernizr, browserscope and some better integration ***

All-in-all the experiment has been very successful. Lots of developers entering into contributing to open source look for great projects. <<< kill? Github issues have also worked extremely well as a point of collaboration. If you're interested in contributing, please "enable notifications for this issue" or toss a comment on a thread.

** Another realization from this project is that many of these solutions were already written by developers, but aren't very googleable things, so they don't get the visibility they need. Curated lists like the Github userscripts page, the jswiki and the Modernizr polyfills wiki page do a great job of exposing developer's projects to developers when Google fails.

** Also, and this was touched on recently by Addy Osmani's post on Getting involved in Open Source, developers tend to be prone to launching their own competing project instead of contributing to an existing one. Hitting a point of critical mass in open source software seems particularly challenging. I wonder if there are ways to ameliorate

Many new projects have been added as well. If you're looking for a new side project, the ones here would greatly help the web community. Take a poke around some of them:

footnotes

This is a known bug in IE9 that has been fixed in IE10.

In this case, after the page is done loading and IE starts to run the defer scripts, the first script, jQuery is run, and it starts building the .support object. During this time, it sets an .innerHTML, which (incorrectly) causes IE to think it needs to look for more defer scripts to run. IE starts executing the second defer script, jQuery UI, before the first script has completed, so the jQuery namespace isn't available.


 getify commented August 25, 2011
@nicjansma -- do you have any link about that? never heard about this bug before. Also, are you aware/can you confirm that it affects all IE<=9?

I dunno about anyone else, but that bug pretty much seals defer's fate in my mind, at least for a long while. If using defer in markup breaks in IE<=9, apparently for any script which sets innerHTML in the way that jQuery does, then it means you can't use defer until IE<=9 don't matter anymore. For some, I'm sure that's "soon", but for others, that could be years.


 nicjansma commented August 25, 2011
This is a variation of the problems documented here: http://www.iecustomizer.com/msmvp/jsdefer.htm and here: http://stevesouders.com/tests/defer.php

The bug is present in IE8 and IE9, and from the testing others have done in this thread, I would assume it's the same bug causing problems in IE6 and IE7.

With the async and defer tags better specified recently in the HTML5 spec, IE10 PP handles defer/async script tags more consistently.

There are workarounds, of course. For the specific example you've shared, you could merge the jQuery and jQuery UI JavaScripts into a single script that is still defer'd. The code within would be executed synchronously. Or, jQuery could be updated to work around this bug for people that will be using the script defer / script defer pattern. Avoiding the innerHTML until the feature detection is requested would probably be sufficient. This is done for support.shrinkWrapBlocks and support.reliableHiddenOffsets. Not saying that working around bugs like this is ideal.


 paulirish commented August 26, 2011
@nicjansma so what triggers this behavior? adding content using innerHTML adding new elements with appendChild|insertBefore ? Anything else?

and it seems it has to be a synchronous innerHTML call as the script is immediately executing, which probably isnt too common, but most of the time such an operation waits for DOMContentLoaded, etc..


 nicjansma commented September 03, 2011
Edit
Delete
@paulirish Correct, adding content via innerHTML, or modifying the tree via appendChild, insertBefore, replaceChild, etc is likely to trigger this behavior. Basically, any time new HTML needs to be parsed into the tree.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment