Oct 07
File this one in the crazy cool hacks category. Peter Nitsch has been experimenting with using Flash to access a user’s webcam, and then feeding this data into WebGL:
I tend to stay away from the HTML5 vs Flash “debate”, principally because I think it’s inane. Both platforms offer certain advantages over the other and some interesting results can be achieved by utilizing their strengths. Case in point, Flash’s built-in webcam support and WebGL’s hardware-accelerated 3D graphics are features that only exist in their respective platforms (for now). Bridging the technologies produces something unattainable by only using one, as the following quick examples illustrate.
How does he integrate these two technologies?
Passing webcam data to Javascript involves a few steps. The BitmapData drawn from the Video object needs to be compressed to JPEG and encoded to Base64 for the data URI to read it. This can be a very taxing process in native ActionScript, but is nearly negligible when done in haXe orAlchemy. In this case, I’m using both. The JPEG compression is performed by metalbot’s Alchemy JPEG encoder, while the Base64 encoding is handled by Bloodhound’s haXe crypto library.
Peter then uses Flash’s ExternalInterface to pass the string back to JavaScript and turns the webcam JPEG output into a data URL that can be fed into an HTML Image tag and fed into WebGL. Craziness!
[Via http://www.eleqtriq.com/]
Continue reading »
Tagged with: Data • Flash • into • Passing • Webcam • WebGL
Sep 03
The Yahoo! YUI is an incredibly feature-rich JavaScript library with a LOT of functionality but getting your head around all of those features can be tough. The YUI team wants to help developers get up and running more quickly and announced yesterday the release of SimpleYUI; a basic and more streamlined version of the YUI library.
SimpleYUI will contain basic DOM access and manipulation including support for CSS 3 selectors in the selector engine, animations via the new transition module, the event system, Ajax and JSON support.
The great thing is that when you’re ready to leverage more advanced features like managed attributes and custom events, you still have the ability to do on-demand loading just like you’d expect from the full-featured version of YUI. This includes any YUI 2 or 3 component or YUI 3 Gallery module.
JAVASCRIPT:
<script type=
“text/javascript” src=
“http://yui.yahooapis.com/3.2.0pr2/build/quickyui/quickyui-min.js”></script>
<script>
Y.use(‘dd-drag’,‘yui2-datatable’, ‘gallery-accordion’, function(Y) {
// here you can use YUI 3 Drag and drop, YUI 2 DataTable, Accordian or any other control contributed to the gallery by the community
});
</script>
YUI team member Eric Miraglia put up a nice post about SimpleYUI which shows you some of the goodness include.
Continue reading »
Tagged with: easy • Getting • into • Quick • SimpleYUI
Jun 14
Chris Winberry recently built a node-htmlparser library that we posted on. Now we know why he built that library. He has released JSonduit.com:
Any data, anywhere.
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website may consume. A JSON conduit, if you will.
Feeds are created by specifying one or more source URLs and a custom transform, written in JavaScript, that can manipulate the data before the feed is served.
JSonduit also provides a hosting service for web widgets so that any site can easily display JSonduit feeds on their pages. In fact, those recent/popular lists of you see below are actual widgets served by the JSonduit service; all done in a couple of lines of JavaScript (go ahead, view the page source).
To see what it is like to query the world in this manner, check out the most popular feed…. a view on hacker news:
JAVASCRIPT:
var result =
[];
var items = getElements(
{
class: “title”
},
data[0]
);
items.forEach(function(item){
var links = getElementsByTagName(‘a’, item);
links.forEach(function(link) {
// Remove the "more" link.
if(link[‘attribs’][‘rel’] == ‘nofollow’) return;
result.push({‘title’: link[‘children’][0][‘data’], ‘link’: link[‘attribs’][‘href’]});
});
});
This returns something like:
JAVASCRIPT:
{
“error”: null,
“result”: [
{
“title”: “U.S. Discovers Est. $1 Trillion of Minerals in Afghanistan”,
“link”: “http://www.nytimes.com/2010/06/14/world/asia/14minerals.html”
},
// ..
If this looks a touch familiar though… remember that the awesome YQL gives you acccess to the Web from a simple query language too.
Continue reading »
Tagged with: feed • into • JSON • JSonduit • turn
Apr 08
Anders Carlsson and Sam Weinig announced that Apple has been working on “WebKit2″ for awhile, and it bakes in a split process model a la Chrome:
This is a heads-up that we will shortly start landing patches for a new WebKit framework that we at Apple have been working on for a while. We currently call this new framework “WebKit2″.
WebKit2 is designed from the ground up to support a split process model, where the web content (JavaScript, HTML, layout, etc) lives in a separate process. This model is similar to what Google Chrome offers, with the major difference being that we have built the process split model directly into the framework, allowing other clients to use it.
The documentation lists out the high level API:
One goal of WebKit2 is to provide a stable C-based non-blocking API. In order to achieve the goal of a non-blocking API, several techniques are used to make the API usable while still providing a comprehensive set of features to the embedder. These techniques include:
- Notification style client callbacks (e.g. didFinishLoadForFrame) These inform the embedder that something has happened, but do not give them the chance to do anything about it.
- Policy style clients callbacks (e.g. decidePolicyForNavigationAction) These allow the embedder to decide on an action at their leisure, notifying the page through a listener object.
- Policy settings (e.g. WKContextSetCacheModel, WKContextSetPopupPolicy) These allow the embedder to opt into a predefined policy without any callbacks into the UIProcess. These can either be an enumerated set of specific policies, or something more fine-grained, such as a list of strings with wildcards.
- Injected code (e.g. WebBundle) Code can be loaded into the WebProcess for cases where all the other options fail. This can useful when access to the DOM is required. [Planned, but not currently implemented]
There have been a few comments here and there that the Apple folk haven’t been as vocal and people wondered what they were hacking on…. maybe now we know!
Continue reading »
Tagged with: Baking • into • model • process • renderer • split • WebKit
Mar 26
Sean is awesome, and his latest magic is in the Raindrop logo that he has “ported” to CSS (inspired by the Opera logo by David Desandro.)
The fun is in this CSS where you will see a whole lot of gradients, and in seeing Sean’s cheat sheet on the various layers:
CSS:
-
-
background: -moz-linear-gradient(top, rgba(245,245,245,1), rgba(205,205,205,1));
-
-
-moz-border-radius: 100%;
-
-
background: transparent -moz-radial-gradient(50% 50%, ellipse farthest-corner, rgba(0,0,0,0) 0%, rgba(0,105,149,0.4) 37%, rgba(80,80,80,0.1) 47%, rgba(80,80,80,0) 58%);
-
-
// etc
-
In Firefox 3.6+ give it a whirl (only works with -moz-* right now, but instead of complaining, port it? :)
Continue reading »
Tagged with: game • into • logo • Martell • Raindrops • Sean • whizzes
