h5bp / lazyweb-requests Goto Github PK
View Code? Open in Web Editor NEWGet projects and ideas built by the community
Home Page: https://github.com/h5bp/lazyweb-requests/issues
Get projects and ideas built by the community
Home Page: https://github.com/h5bp/lazyweb-requests/issues
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.
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!
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.
as jquery ui effects
Mainly for gradients, transforms, transitions (and soon for animations).
HTML-based slide decks are quite popular these days..
... 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?
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.
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.
Implemented already! https://chrome.google.com/webstore/detail/ekibhngllckenihijddjkmehiocljcpc
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...
(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...
- 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.
- 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.
defer
used on a script tag referencing an external resource behaved differently thandefer
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.defer
on a script tag written out by adocument.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:
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..
Both are solutions for bringing <canvas>
to IE.
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.
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.
http://github.com/paulirish/email2feed
^ read all about it.
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.
Quick hits write-up here:
http://analogysoft.com/learning/ui-hulk-out/#beyondie6
it's basically NPM for browser based scripts
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.
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
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?
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.
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?
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
So there is detection like..
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.
(updated 2012.02.17 with subbullets)
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.
This doesn't exist. I couldn't tell you why.
Sometimes I just wanna know who of my peoples are around me.
paul_irish
https://api.twitter.com/1/friends/ids.json?cursor=-1&screen_name=paul_irish&callback=omg
https://api.twitter.com/1/users/lookup.json?user_id=12312,1234123,45645,
....,567567&callback=omg
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.
and a rough API reference of course.
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.
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.
git browse issues
inside a repo opens the issues page for that projectgit browse
opens the main project pagegit browse commits
opens /commits/mastergit browse commits featurebranch
opens /commits/featurebranchAnd 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
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.
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...
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
For reference.. here are two similar pieces of work, though with different aims:
http://jqfundamentals.com/book/book.html
http://eloquentjavascript.net/
wouldn't it be nice to just select two chunks of text/code/whatever in your browser and get a beautiful diff?
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!
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.
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:
Annoying to accept/decline and also cluttering up my database list
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
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
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:
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.
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:
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/
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?
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.
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:
Reasons:
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. :)
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!
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.
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/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.