Bacteria Grow Under 400,000 Times Earth’s Gravity
25
Apr
Some bacteria can even reproduce under the same crushing gravity found on massive stars or in supernova shock waves, a new study says.
Operation Window Seat: HNL-CXI-HNL
22
Apr
Wow. It’s like an airplane eclipse ~ amazing circular rainbow and shadow of the plane cast on the clouds… apparently it was even more incredible in person, and the camera didn’t even begin to do it justice. This latest Operation Window Seat comes from my dad who just returned from his latest adventures… incredible views as he flies in to Christmas Island… and to Honolulu on the return. The glow of the water and sky ~ the sandy shallows ~ the waves crashing on the shores ~ the dense city by the sea ~ diamondhead crater… and more!
(Want more visual goodness? See NOTCOT.com + NOTCOT.org)
Web Design Evolution: Two Decades of Innovation [INFOGRAPHIC]
17
Apr
The web has come a long way since Tim Berners-Lee created the first website way back in 1991. Here’s an infographic that takes you on a tour of web design, starting with those humble beginnings, and bringing you all the way up to the present day.
It’s like getting into a time machine, where the tremendous progress design has made on the World Wide Web over the past two decades is all laid out in front of you.
Follow along this extensively researched infographic from KISSmetrics, showing us exactly how far we’ve come from those early days where wide pages of text with hyperlinks in between ruled the roost. Do you remember when an animated .gif graphic of a letter folding up and flying into an envelope was seen as the highest of technology? We’re starting to feel nostalgic.
Please note: This graphic is so huge, we had to shrink it to fit our format, but if you’re having a hard time reading it, click the graphic for an enlargement.
Graphic courtesy KISSmetrics
More About: infographic, kissmetrics, Tim Berners-Lee, trending, web design, Web Design evolution
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad
For Your Script Loading Needs
15
Apr
As JavaScript usage has skyrocketed over the last few years, so has the sheer number of scripts that are being loaded in an average web page. With these script tags comes a lot of baggage, such as blocking and lack of dependency management.
Today, I’d like to bring your attention to a number of JavaScript loaders, which are mini toolkits that significantly simplify how you add and load scripts.
The Problem with Simple Script Tags
They Block the Page
The page stops ‘happening’ while the script is downloaded.
JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful.
No Easy Way to Manage Dependencies
Lack of dependency management is a big drawback.
Next up comes the issue of handling dependencies. For your average web page, you probably don’t need one. Check if your library is loaded and move on. For a non-trivial web application though, this isn’t a great solution. You’ll need to load scripts conditionally based on dependencies. Even then, you’ll still have to figure out the order in which they’re loaded. You can probably do it manually for 3-4 files, but when things begin piling up, you’re probably better off with an automated solution.
Available Choices
The initial idea for this round up was sparked by a post over at Hacker News about making a list of JavaScript script loaders, roughly a month ago. I watched the list balloon up from 3 to a grand total of 10 before I lost interest and moved on.
Now that sufficient time has passed, I think that list is going to be quite massive. Unfortunately, my Google-fu is pretty weak and I can’t seem to find it. If an eagle eyed user manages to find this thread, post in the comments below so I can link to it and hopefully expand my list here as well.
This list is drawn from recommendations by high level web developers who use these tools in their applications.
And as to my choices here, this list represents a superset of recommendations which flowed in after I asked some of the front end community to pitch in with the solutions they’re using. Some of the solutions below may handle dependency managements too, though most stick to simple asynchronous loading. Regardless of the extra niceties, each of the scripts below do one thing with aplomb — load up JavaScripts with minimal fuss.
So without further ado, and in no particular order:
HeadJS
Head JS loads scripts in parallel no matter how many of them and what the browser is. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.
Author: Tero Piirainen
Project URL: Here
Size: 6.3 KB
Related links:
LabJS
LABjs (Loading And Blocking JavaScript) is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.
Author: Kyle Simpson
Project URL: Here
Size: 4.7 KB
Related links:
RequireJS
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
Author: James Burke
Project URL: Here
Size: 13 KB
Related links:
ControlJS
ControlJS is a JavaScript module that handles both inline scripts and external scripts, delays script execution until after the page has rendered, allows for scripts to be downloaded, not executed and integrates with simple changes to HTML and no code changes
Author: Steve Souders
Project URL: Here
Size: 3.6 KB
Related links:
StealJS
The StealJS project is a collection of command and client based JavaScript utilities that make building, packaging, sharing and consuming JavaScript applications easy. Includes modules for dependency management, JS compression, cleaning and logging.
Author: Brian Moschel
Project URL: Here
Size: 11.4 KB
Related links:
yepnope
yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It works with both JavaScript and CSS and has a full test suite in QUnit that you can run in your set of supported browsers to make sure it works.
Author: Alex Sexton and Ralph Holzmann
Project URL: Here
Size: 3.4 KB
Related links:
PINF JS Loader
The loader allows for bootstrapping a consistent and state-of-the-art CommonJS environment for any supported platform (on server & in browser) and thus is ideally suited to be used as the target for the commonjs command and the development of cross-platform JavaScript applications and libraries.
Author: Christoph Dorn
Project URL: Here
Size: 22 KB
Related links:
JSLoad
JSLoad is a Javascript file loader that we wrote for Instructables. You give it a set of dependencies and groupings, and it loads the files you need, when your executing code needs them. The real usefulness of JSLoad comes with its ability to group dependencies using tags.
Author: Eric Nguyen
Project URL: Here
Size: 9.8 KB
Related links:
JsDefer
JsDefer features parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself and integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios among many others.
Author: Boris Moore
Project URL: Here
Size: 4.7 KB
Related links:
JSL (JavaScript Loader)
JSL features on-demand loading, is browser cacheable, dynamic asynchronous JavaScript loading, lazy loading and duplicate source prevention among a ton of other features.
Author: Andres Vidal
Project URL: Here
Size: 2.1 KB
Related links:
YUI 3 Get
The Get Utility provides a mechanism for attaching script and css resources — including cross-domain resources — to the DOM after the page has loaded.
Author: Adam Moore
Project URL: Here
Size: 17.9 KB
Related links:
DominateJS
DominateJS allows you to asynchronously load all your JavaScript, and defer sequential execution until the page loads. DominateJS aims to be a cross-browser and 100% document.write-safe library! This is a heavily modified (and powerful!) evolution of ControlJS.
Author: Chris Joel & Jason Benterou
Project URL: Here
Size: 48 KB
Load.js
load.js is a micro JS lazy-loader. Built on top of chain.js, it allows you to lazy load your JS scripts sequentially or in parallel and handle complex dependency chains.
Author: Chris O’Hara
Project URL: Here
Size: 2 KB
Related links:
BravoJS
BravoJS is an implementation of a proposed draft for CommonJS Modules/2.0
Author: Wes Garland
Project URL: Here
Size: 10.7 KB
Bootstrap
Bootstrap is a small library for dynamically loading JavaScript files.
It’s primary use case is for using in your JS code to load JS files only when they are used.
Author: Scott Koon
Project URL: Here
Size: 1.3 KB
LazyLoad
LazyLoad is a tiny (only 904 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.
Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don’t preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.
Author: Ryan Grove
Project URL: Here
Size: 1.6 KB
curl.js
curl.js is a small, but very fast AMD-compliant asynchronous loader. Current size: 4.5KB (2.1KB gzipped) using Google’s Closure Compiler.
If you’d like to use curl.js for non-AMD modules (ordinary javascript files), you’ll want to use the version with the js! plugin built in. You may also want to build-in the domReady module. The combined curl+js+domReady loader is still only 6.1KB (2.7KB gzipped).
Author: John Hann
Project URL: Here
Size: 5 KB
$script.js
$script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint. Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading, like CSS and images.
Author: Dustin Diaz
Project URL: Here
Size: 1.4 KB
NBL.js
NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.
Author: Berklee
Project URL: Here
Size: 971 B
Related links:
That’s a Wrap!
While each of the tools listed above handle script loading in slightly unique ways, be sure to perform your tests when deciding which is the right one for you.
As I mentioned earlier, if you think a loader should be here but isn’t, drop us a line below and we’ll update the roundup accordingly.
As JavaScript usage has skyrocketed over the last few years, so has the sheer number of scripts that are being loaded in an average web page. With these script tags comes a lot of baggage, such as blocking and lack of dependency management.
Today, I’d like to bring your attention to a number of JavaScript loaders, which are mini toolkits that significantly simplify how you add and load scripts.
The Problem with Simple Script Tags
They Block the Page
The page stops ‘happening’ while the script is downloaded.
JavaScript files loaded using the script tag are blocking by nature. Everything that’s happening or loading on the page is halted while the script is downloaded and executed. And remember that this applies to each script tag. Some modern browsers may let you download these in parallel, but the rest of the page is still blocked from doing anything meaningful.
No Easy Way to Manage Dependencies
Lack of dependency management is a big drawback.
Next up comes the issue of handling dependencies. For your average web page, you probably don’t need one. Check if your library is loaded and move on. For a non-trivial web application though, this isn’t a great solution. You’ll need to load scripts conditionally based on dependencies. Even then, you’ll still have to figure out the order in which they’re loaded. You can probably do it manually for 3-4 files, but when things begin piling up, you’re probably better off with an automated solution.
Available Choices
The initial idea for this round up was sparked by a post over at Hacker News about making a list of JavaScript script loaders, roughly a month ago. I watched the list balloon up from 3 to a grand total of 10 before I lost interest and moved on.
Now that sufficient time has passed, I think that list is going to be quite massive. Unfortunately, my Google-fu is pretty weak and I can’t seem to find it. If an eagle eyed user manages to find this thread, post in the comments below so I can link to it and hopefully expand my list here as well.
This list is drawn from recommendations by high level web developers who use these tools in their applications.
And as to my choices here, this list represents a superset of recommendations which flowed in after I asked some of the front end community to pitch in with the solutions they’re using. Some of the solutions below may handle dependency managements too, though most stick to simple asynchronous loading. Regardless of the extra niceties, each of the scripts below do one thing with aplomb — load up JavaScripts with minimal fuss.
So without further ado, and in no particular order:
HeadJS
Head JS loads scripts in parallel no matter how many of them and what the browser is. Load scripts like images. Use HTML5 and CSS3 safely. Target CSS for different screens, paths, states and browsers. Make it the only script in your HEAD.
Author: Tero Piirainen
Project URL: Here
Size: 6.3 KB
Related links:
LabJS
LABjs (Loading And Blocking JavaScript) is an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. You can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.
Author: Kyle Simpson
Project URL: Here
Size: 4.7 KB
Related links:
RequireJS
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
Author: James Burke
Project URL: Here
Size: 13 KB
Related links:
ControlJS
ControlJS is a JavaScript module that handles both inline scripts and external scripts, delays script execution until after the page has rendered, allows for scripts to be downloaded, not executed and integrates with simple changes to HTML and no code changes
Author: Steve Souders
Project URL: Here
Size: 3.6 KB
Related links:
StealJS
The StealJS project is a collection of command and client based JavaScript utilities that make building, packaging, sharing and consuming JavaScript applications easy. Includes modules for dependency management, JS compression, cleaning and logging.
Author: Brian Moschel
Project URL: Here
Size: 11.4 KB
Related links:
yepnope
yepnope is an asynchronous conditional resource loader that’s super-fast, and allows you to load only the scripts that your users need. It works with both JavaScript and CSS and has a full test suite in QUnit that you can run in your set of supported browsers to make sure it works.
Author: Alex Sexton and Ralph Holzmann
Project URL: Here
Size: 3.4 KB
Related links:
PINF JS Loader
The loader allows for bootstrapping a consistent and state-of-the-art CommonJS environment for any supported platform (on server & in browser) and thus is ideally suited to be used as the target for the commonjs command and the development of cross-platform JavaScript applications and libraries.
Author: Christoph Dorn
Project URL: Here
Size: 22 KB
Related links:
JSLoad
JSLoad is a Javascript file loader that we wrote for Instructables. You give it a set of dependencies and groupings, and it loads the files you need, when your executing code needs them. The real usefulness of JSLoad comes with its ability to group dependencies using tags.
Author: Eric Nguyen
Project URL: Here
Size: 9.8 KB
Related links:
JsDefer
JsDefer features parallel/serial loading based on definitions, dependency, and wrapped versus unwrapped, and whether dependencies are defined in separate def file or in script itself and integration with Deferred (as in jQuery 1.5) enables or simplifies many use-case scenarios among many others.
Author: Boris Moore
Project URL: Here
Size: 4.7 KB
Related links:
JSL (JavaScript Loader)
JSL features on-demand loading, is browser cacheable, dynamic asynchronous JavaScript loading, lazy loading and duplicate source prevention among a ton of other features.
Author: Andres Vidal
Project URL: Here
Size: 2.1 KB
Related links:
YUI 3 Get
The Get Utility provides a mechanism for attaching script and css resources — including cross-domain resources — to the DOM after the page has loaded.
Author: Adam Moore
Project URL: Here
Size: 17.9 KB
Related links:
DominateJS
DominateJS allows you to asynchronously load all your JavaScript, and defer sequential execution until the page loads. DominateJS aims to be a cross-browser and 100% document.write-safe library! This is a heavily modified (and powerful!) evolution of ControlJS.
Author: Chris Joel & Jason Benterou
Project URL: Here
Size: 48 KB
Load.js
load.js is a micro JS lazy-loader. Built on top of chain.js, it allows you to lazy load your JS scripts sequentially or in parallel and handle complex dependency chains.
Author: Chris O’Hara
Project URL: Here
Size: 2 KB
Related links:
BravoJS
BravoJS is an implementation of a proposed draft for CommonJS Modules/2.0
Author: Wes Garland
Project URL: Here
Size: 10.7 KB
Bootstrap
Bootstrap is a small library for dynamically loading JavaScript files.
It’s primary use case is for using in your JS code to load JS files only when they are used.
Author: Scott Koon
Project URL: Here
Size: 1.3 KB
LazyLoad
LazyLoad is a tiny (only 904 bytes minified and gzipped), dependency-free JavaScript utility that makes it super easy to load external JavaScript and CSS files on demand.
Whenever possible, LazyLoad will automatically load resources in parallel while ensuring execution order when you specify an array of URLs to load. In browsers that don’t preserve the execution order of asynchronously-loaded scripts, LazyLoad will safely load the scripts sequentially.
Author: Ryan Grove
Project URL: Here
Size: 1.6 KB
curl.js
curl.js is a small, but very fast AMD-compliant asynchronous loader. Current size: 4.5KB (2.1KB gzipped) using Google’s Closure Compiler.
If you’d like to use curl.js for non-AMD modules (ordinary javascript files), you’ll want to use the version with the js! plugin built in. You may also want to build-in the domReady module. The combined curl+js+domReady loader is still only 6.1KB (2.7KB gzipped).
Author: John Hann
Project URL: Here
Size: 5 KB
$script.js
$script.js is an asynchronous JavaScript loader and dependency manager with an astonishingly impressive lightweight footprint. Like many other script loaders, $script.js allows you to load script resources on-demand from any URL and not block other resources from loading, like CSS and images.
Author: Dustin Diaz
Project URL: Here
Size: 1.4 KB
NBL.js
NBL.js is a tiny script that will make your HTML pages load faster by loading all your JavaScript files asynchronously (in parallel) with the rest of your page. Normally if you include two or three scripts in your page, the browser will wait for them to be executed before your page is shown.
Author: Berklee
Project URL: Here
Size: 971 B
Related links:
That’s a Wrap!
While each of the tools listed above handle script loading in slightly unique ways, be sure to perform your tests when deciding which is the right one for you.
As I mentioned earlier, if you think a loader should be here but isn’t, drop us a line below and we’ll update the roundup accordingly.
Brazilian Police to Wear Glasses That Can Scan Faces to Find Criminals [The Future]
14
Apr
‘World’s Biggest Pac-Man’ connects user-created mazes in your browser
14
Apr
The app requires users to sign into Facebook before creating new mazes, but no login is required to explore the growing selection of levels. It should run on any browser (despite being released as promotion for Internet Explorer 9), but based on our experience iOS devices aren't compatible.
'World's Biggest Pac-Man' connects user-created mazes in your browser originally appeared on Joystiq on Thu, 14 Apr 2011 09:30:00 EST. Please see our terms for use of feeds.
It’s official – most people can’t taste the difference
14
Apr
In a blind taste test, volunteers were unable to distinguish between expensive and cheap wine
An expensive wine may well have a full body, a delicate nose and good legs, but the odds are your brain will never know.
A survey of hundreds of drinkers found that on average people could tell good wine from plonk no more often than if they had simply guessed.
In the blind taste test, 578 people commented on a variety of red and white wines ranging from a £3.49 bottle of Claret to a £29.99 bottle of champagne. The researchers categorised inexpensive wines as costing £5 and less, while expensive bottles were £10 and more.
The study found that people correctly distinguished between cheap and expensive white wines only 53% of the time, and only 47% of the time for red wines. The overall result suggests a 50:50 chance of identifying a wine as expensive or cheap based on taste alone – the same odds as flipping a coin.
Richard Wiseman, a psychologist at Hertfordshire University, conducted the survey at the Edinburgh International Science Festival.
"People just could not tell the difference between cheap and expensive wine," he said. "When you know the answer, you fool yourself into thinking you would be able to tell the difference, but most people simply can't."
All of the drinkers who took part in the survey were attending the science festival, but Wiseman claims the group was unlikely to be any worse at wine tasting than a cross-section of the general public.
"The real surprise is that the more expensive wines were double or three times the price of the cheaper ones. Normally when a product is that much more expensive, you would expect to be able to tell the difference," Wiseman said.
People scored best when deciding between two bottles of Pinot Grigio, with 59% correctly deciding which was which. The Claret, which cost either £3.49 or £15.99, fooled most people with only 39% correctly identifying which they had tasted.
In 2008, a study led by Adrian North, a psychologist at Heriot-Watt University in Edinburgh, claimed that music helped boost the flavour of certain wines. North, who was commissioned by a Chilean winemaker, reported that Cabernet Sauvignon was most affected by "powerful and heavy" music, while Chardonnay benefited from "zingy and refreshing" sounds.
guardian.co.uk © Guardian News & Media Limited 2011 | Use of this content is subject to our Terms & Conditions | More Feeds