RSS
 

Posts Tagged ‘Uncategorized’

75 (Really) Useful JavaScript Techniques

11 Sep
Vitaly Friedman & Sven Lennartz via Smashing Magazine shared by 12 people

Developers and designers are using more and more JavaScript in modern designs. Sometimes this can be a hindrance to the user and take away from the simplicity of the design, and other times it can add greatly to the user’s experience. The key is a) adding the right amount of JavaScript, and b) using the right JavaScript techniques. We have already collected various JavaScript techniques in the past – now it’s time for a new portion of JavaScript.

Thanks to the Web’s widespread adoption of JavaScript, JavaScript libraries have sprung up to help make design and development easier. Here are a few of the major JavaScript libraries that developers use: jQuery, Prototype, Scriptaculous, mootools, Dojo. These frameworks have thriving communities whose members have developed countless plug-ins that can greatly add to the JavaScript framework.

However, sometimes we need JavaScript solutions that are a little more involved or specific. Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.

75 Useful JavaScript Techniques

Textboxlist Auto-Completion
One of the most attractive features of JavaScript is the highly useful autocompletion. No other website does the autocompletion better than Facebook. They have created an elegant way to search for other Facebook users using the autocomplete feature. Once the user is found, their name is added with an outline and an “X” link to remove the name. TextboxList has mimicked this feature and created a little script for downloading.

TextboxList's Autocompletion

Hyphenation in Web
This project collects working solutions for automatic hyphenation in (X)HTML pages. For different human and script languages, server- and client-side. A JavaScript-solution, called Hyphenator.js is available as well. Hyphenator.js brings client-side hyphenation of HTML-Documents on to every browser by inserting soft hyphens using hyphenation patterns and Franklin M. Liangs hyphenation algorithm commonly known from LaTeX and Openoffice.

Showcase of Beautiful Album and CD covers- Hyphenation in Web

SocialHistory.js
SocialHistory.js enables you to detect which social bookmarking sites your visitors use. It cannot enable you to see all of the user’s history. It checks, in a 20-questions style, if the user has been to a particular URL: It’s hit or miss. SocialHistory.js has a big list of the most popular social bookmarking sites which it checks against. An alternative approach.

Useful JavaScript Techniques - SocialHistory.js

addSizes.js
This small JavaScript takes care of an automatic link file-size generation. For instance, if you have large .mp3- or .pdf-files offered on your page, this script automatically checks the size of the file and displays the format and the file size in brackets.

Useful JavaScript Techniques - addSizes.js

syntaxhighlighter
SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It’s 100% Java Script based and it doesn’t care what you have on your server.

Useful JavaScript Techniques - syntaxhighlighter

samaxesjs
samaxesJS is a set of utilities and controls, written in JavaScript, for building rich interactive web applications. The TOC control dynamically builds a table of contents from the headings in a document and prepends legal-style section numbers to each of the headings: adds numeration in front of all headings, generates an HTML table of contents, degrades gracefully if JavaScript is not available/enabled.

Useful JavaScript Techniques - samaxesjs

Step by Step
This script allows you to show and explain visitors what your page has for them. You might have encountered interactive demos created with screencasting and screengrabbing software that explain an interface to users in a step-by-step manner. This is exactly what this script does for web sites.

Useful JavaScript Techniques - Step by Step

MoreCSS
MoreCSS is a small, cross-browser compatible JavaScript library which enables you to create tab menus, tables and lists with “zebra”-style as if you were using regular CSS. It’s enough to include the library in HTML and use CSS for general purpose design elements.

Useful JavaScript Techniques - MoreCSS

Facelift Image Replacement
Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (h1, h2, etc.) to span-elements and everything in between!

Useful JavaScript Techniques - Facelift Image Replacement

CSS Sprites2
Cross-browser functionality is a bit of a freebie; jQuery works across most modern browsers, so everything you see here works in IE6+, Firefox, Safari, Opera, etc. We’ve also accounted for multiple graceful degradation scenarios.

Useful JavaScript Techniques - CSS Sprites2

jParralax
“Parallax is [a jQuery library that] turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.” Think of looking through a camera and having layers of objects at various distances moving around. This library achieves that effect using multiple using static images, one for each layer.

Useful JavaScript Techniques - jParralax

ddMenu - Context Menu Script
ddMenu is a simple MooTools-based script to create you’re own context menus. Press the Crtl-key and right click to switch between ddMenu and browser default context menu. Press the Shift-key and right click to open ddMenu beside the browser default context menu.

Useful JavaScript Techniques - ddMenu - Context Menu Script

js-hotkeys
jQuery.Hotkeys plugin lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination. It takes one line of code to bind/unbind a hot key combination. Alternative approach.

Useful JavaScript Techniques - js-hotkeys

BarackSlideshow
An elegant, lightweight slideshow script. It works with MooTools 1.2, and supports all kinds of shape transformations (top and left coordinates, and height and width properties), which means it can now be used with vertical, horizontal, or even irregular lists.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Galleria
Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Useful JavaScript Techniques - Galleria

History Keeper
unFocus History Keeper is a JavaScript based library for managing browser history (back button) and providing support for deep linking for Flash and Ajax applications. It enables back button support, for client-side applications, has a hash-based deep linking (Anchor Style - index.html#foo=bar) and is event-driven - Subscriber pattern. Currently the script works well in all modern browsers.

Useful JavaScript Techniques - History Keeper

date.js
Datejs is an extensive open source JavaScript Date library for parsing, formatting and processing time and dates.

Useful JavaScript Techniques - date.js

Lightview
Lightview is another script that create modal windows on a web-site. It has a smart image preloading, adjustable rounded corners, without PNGs and content resizes to always fit on your screen. The script can be used for presentations, single images, Quicktime-files, Forms, Iframes, Inline content and Flash-files.

Useful JavaScript Techniques - Lightview

Coda popup bubbles

The software company Panic has a beloved Mac application for developers called Coda. Coda has an incredibly elegant design, and one of the subtle JavaScript effects that have been added to it is a stylized pop-up bubble. The blog jQuery for Designers has created a script that combines jQuery with custom code to replicate the feature used on the Coda website. The effect is subtle and elegant and greatly adds to the user’s experience.

Coda Bubble

ajax im
With the popularity of Web-based IM clients, like meebox, many developers want to add a JavaScript IM client of their own. Ajax IM is a library dedicated to creating an Ajax IM client that works out of the box. The script is a relatively large one, but it can be a nice effect for some websites that need more interaction with their users.

LiveValidation

This is a handy gem for any web developer who uses forms. Trying to create an intuitive sign-up form can be a chore with all the different types of validation that need to happen. Also, creating a faster, more intuitive form with JavaScript can be tricky, too. Thankfully, LiveValidation has taken the guesswork out of the process and created a tiny, unobtrusive script that can take the pain out of form validation. If you’re a Ruby on Rails developer, LiveValidation comes in two forms: either with Prototype (ideal for Ruby on Rails) or one that can be used as a stand-alone package.

Live Validation

Ajax AutoSuggest
Like TextboxList’s autocompletion script, Ajax AutoSuggest is a tasteful and refined autosuggest script. The script is quite tiny, weighing in at just under 9k, and adds a very nice touch to any search form.

Ajax Auto Suggest

FancyUpload
This is an upload script that shows the progress of files you are uploading. It’s perfect for any upload form and even allows for multiple uploads at the same time. You can limit the size of the uploaded file as well as restrict the type of file that can be uploaded. The only requirement that FancyUpload has is that your users have installed Flash, which has a 95% penetration among Web users.

Fancy Upload

Taggify
Taggify is a bit different in implementation than the other JavaScripts listed. Taggify is a hosted solution for adding pop-up widgets to photos. Instead of having to download a script and host it on your site, you can just add a tiny <include> in your tag, and you’ll have the power of Taggify installed on your site. Using Taggify is interesting; it adds notes and other useful information to photos.

Think of it as a souped-up version of the note-adding feature for Flickr images. You can add any HTML to the Taggify note, creating a nice informational page to accompany any image that needs a bit more explanation.

Taggify

AmberJack
AmberJack is one of the more interesting and compelling JavaScript techniques. Website tours are extremely beneficial because they can help familiarize users, showcase features and products, and many other things. Possibly the best part about AmberJack is that nothing has to be installed or learned to start creating website tours. AmberJack provides a way for website and product owners to quickly and easily create website tours with JavaScript. It’s an amazingly tiny download, at only 4 KB.

Sliding Tabs
This is another script inspired by Coda. Essentially, it’s a smooth-scrolling tab system that makes switching between panes easy and smart. You can see a demo of Sliding Tabs here. Sliding Tabs is built off of the JavaScript framework MooTools. Alternative solution.

JavaScript Image Loader
If you’re looking for a more intuitive way for users to upload and preview images on your website, the JavaScript Image Loader (demo) might fit the bill. The JavaScript Image Loader is a great way to show your users an image before it has uploaded, and it can also provide other information about the image if desired.

swfIR
swfIR is an interesting concept as it uses a combination of Flash and JavaScript and adds image manipulation functionality to it. Once swfIR is installed, it adds a <span> with the class “swfir” around the image. swfIR can add almost any manipulation to an image. An especially useful feature of the script is its ability to automatically resize images based on the size of the page. When you resize the text on the page, the image resizes proportionally with the layout. By resizing the picture along with the text, the design feels much more cohesive.

swfIR

MooFlow
For fans of Apple’s Cover Flow feature in Leopard, MooFlow is taken directly from Apple’s playbook. MooFlow is a JavaScript gallery script that uses MooTools and adds a bit of JavaScript magic to make beautiful image galleries, complete with a slider that mimics Cover Flow.

Just like with Cover Flow, you can manipulate MooFlow’s gallery layout and functionality. You can toggle full-screen mode, image reflection, and autoplay. MooFlow is quite configurable and easy to set up because it just grabs all of the images within an element.

MooFlow

amCharts
This script is a chart generator that runs off of a combination of flash and JavaScript. You can generate virtually any type of graph or chart with the script, and can even use .csv and xml files to pull the data from. With amCharts, you can generate graphs in the form of Column & Bar, Pie & Donut, Line & Area and Scatter & Bubble.

AM Charts

GreyBox
GreyBox’s website hails the JavaScript pop-up window as “A pop-up window that doesn’t suck,” and for good reason. GreyBox does everything that a modal window should do. It can display pictures, websites, and just about any other content you can think of.

Using GreyBox is incredibly easy because once you’ve included the JavaScript file in the header, the only thing left to configure is adding a <rel> tag to whatever element you want to display in the window.

Mailist
While Mailist isn’t a full-blown AJAX contact form, the tiny script is exactly what most Web developers need to quickly store email addresses for things like beta sign-ups and other expression-of-interest forms. It even has a back end for administering things like email backups and editing the look of the form.

SWFObject
SWFObject is a tiny little Flash player that uses JavaScript to overcome many of the obstacles that can’t be solved by markup alone. The player is a tiny download, only 9.5 KB (or 3.8 KB GZIP’ed). SWFObject prides itself on its compatibility with modern browsers, and it actually uses JavaScript to help detect which Flash player version to use and to avoid outdated Flash plug-ins that break Flash content.

SWF Object

PlotKit
PlotKit is a JavaScript chart-plotting script that relies on the tiny JavaScript framework Moochikit. PlotKit is an exceptional library for quickly plotting all sorts of graphs.

PlotKit

JavaScript tabifier
The JavaScript tabifier is a nifty little script that allows you to quickly and easily create tabs for your content. All that is required to use tabifier is to include the JavaScript and add a <div> with the class “tabber” surrounding the tabbed content, and then add the class “tabbertab” and the title for the <div> in what shows as the tab’s title. You can even use advanced techniques, such as adding cookies to the tabs, dynamically changing the tabs, and setting a default tab.

Tabifier

FancyZoom 1.1
Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom is providing a smooth, clean, truly Mac-like effect.

It is focused on a smoothest, polished zooming animation and automatically scales images from any image link, with no HTML changes. The script also preloads full-size images in the background on link mouseover and requires no Javascript libraries. FancyZoom requires only two lines of code in your HTML-files.

Useful JavaScript Techniques - FancyZoom 1.1

A Mac OS X-style Dock In JavaScript
Apple’s Mac OS X operating system is renowned for its fluid graphical effects. One impressive feature is the dock’s ‘fish-eye’ effect, whereby icons expand and contract as the mouse moves over them. Achieving this effect in JavaScript is difficult, but the MacStyleDock function allows this feature to be implemented easily.

Useful JavaScript Techniques - A Mac OS X-style Dock In JavaScript

fValidator - An open source (free) unobtrusive javascript tool for easy handling form validation
fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). Alternative jQuery Plugin.

Useful JavaScript Techniques - fValidator - An open source (free) unobtrusive javascript tool for easy handling form validation

jQuery Interactive Date Range Picker with Shortcuts
An advanced jQuery date picker that is optimized for quickly selecting a date from a list of preset dates/ranges, and we added smooth transitions when additional options are revealed.

Useful JavaScript Techniques - jQuery Interactive Date Range Picker with Shortcuts

Raphaël
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the Web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library. Raphaël uses SVG and VML as a base for graphics creation.

Useful JavaScript Techniques - Raphaël

NoGray Time Picker
This time picker utilizes a simple drag and drop interface. To select the time users can just drag the minutes or hour of a clock.

Useful JavaScript Techniques - NoGray Time Picker

Yetii - Yet (E)Another JavaScript Tab Interface
Yetii is a simple, yet functional tab interface implementation. It has lightweight, object-oriented code and degrades gracefully in browsers without JavaScript-support. You can have many independend tab interfaces on a single page, specify initial tab, turn on automatic tabs rotation, add next/previous navigation, nest one tab interface inside another and define custom function to run after certain tab is clicked.

You can link to certain tab on page A from page B via URL parameter and you can turn on tab persistence feature, so the most recently clicked tab is stored inside a cookie and remembered between page refresh.

Useful JavaScript Techniques - Yetii - Yet (E)Another JavaScript Tab Interface

Calendar
Calendar is a Mootools Javascript class that adds accessible and unobtrusive date-pickers to your form elements.It has highly configurable inputs and selects, multi-calendar support (with padding), variable navigation options and multi-lingual and fancy date formatting.

Useful JavaScript Techniques - Calendar

Starbox
Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well.

Useful JavaScript Techniques - Starbox

Magic Zoom
Magic Zoom is a JavaScript zoom tool. It’s the best way to display images in incredible detail. Users do not need to click anything - they just move their mouse over the image to see every detail of your product.

Useful JavaScript Techniques - Magic Zoom

Magic Magnify
Magic Magnify is a Flash zoom tool. It’s an elegant effect to view images with a magnifying-glass. Upon hover over the image, the user sees the close-up detail of the product. Price: $28 / £15 / €18.

Useful JavaScript Techniques - Magic Magnify

Carousel.us
Carousel.us is a Javascript 3D carousel, using either the prototype.js and scriptaculous.js or mootools.js frameworks. It also uses PHP Easy Reflections v3 by Richard Davey.

Useful JavaScript Techniques - Carousel.us

slideshow
Slideshow is a javascript class for Mootools 1.2 to stream and animate the presentation of images on your website. Slideshow is the result of many trials in code attempting to create a javascript class that was lightweight, unobtrusive, a snap to setup (but also highly configurable), extendable and - built using the javascript framework with the best effects - visually very impressive. Slideshow began as a side project by Aeron Glemann, and is now open source with an MIT-style license.

Useful JavaScript Techniques - slideshow

jgrousedoc
jGrouseDoc allows developers to produce documentation for their javascript code based on javadoc-like comments embedded into the source code. It allows documentation of classes, regardless what kind of library/technology was used to implement OOP. The script also allows documentation of multiple syntaxes that could be used to invoke a function/method. The output is customizable using CSS and Velocity templates or XSLT.

Useful JavaScript Techniques - jgrousedoc

Lightbox 2
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Useful JavaScript Techniques - Lightbox 2

Control.Window
Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

Useful JavaScript Techniques - Control.Window

SimpleModal
SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. The goal of SimpleModal is to provide developers with a cross-browser overlay and container that will be populated with data provided to SimpleModal.

Useful JavaScript Techniques - SimpleModal

Creating a carousel with MooTools
You’ve probably seen it on various websites: those neat little inline slideshows that browse you through a gallery of images (or content if you want, too). Most people simply copy the code to use it on their own site, but I believe that by making it yourself, you learn new techniques and gain new insight. Therefore I’ll walk you through this tutorial that teaches you how to achieve this through the use of CSS and MooTools.

Useful JavaScript Techniques - Creating a carousel with MooTools

Unobtrusive Expand and Collapse Navigation
A tutorial that displays how to to create a vertical navigation that will expand and collapse to show and hide sub-navigation using only unordered lists and as few class/id names as possible.

Useful JavaScript Techniques - Unobtrusive Expand and Collapse Navigation

Image Cross Fade Transition
Image rollovers were the staple JavaScript nugget of the 90s, and for a lot of JavaScript developers I know, one of the starting places their passion for JavaScript. Today, rollovers are a no-brainer - either in CSS or with the simplest of JavaScript. Today’s challenge is the rollover transition.

Useful JavaScript Techniques - Image Cross Fade Transition

Slider Gallery
This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items.

Useful JavaScript Techniques - Slider Gallery

FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple

Useful JavaScript Techniques - FancyZoom meets jQuery // Ordered List // We Make The Web Beautifully Simple

Build An AJAX Powered Shopping Cart
The goal of this tutorial is to show you how to build an AJAX powered shopping cart. However, it will not be production ready. The back end requirements vary from site to site far too much to write an effective tutorial. Instead, we are going to focus on the AJAX parts.

Useful JavaScript Techniques - Build An AJAX Powered Shopping Cart

jQuery iPod-style Drilldown Menu
“We created an iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.”

Useful JavaScript Techniques - jQuery iPod-style Drilldown Menu

Load Content While Scrolling With jQuery
This script allows to load the content “on the fly” - once th visitors has scrolled vertically to the end of the content block. “I always loved the dZone’s Ajax content loading while scrolling feature and created a similar one using jQuery.”

Useful JavaScript Techniques - Load Content While Scrolling With jQuery

JavaScript Tooltips
This tutorial describes how to create a nice, lightweight JavaScript tooltip. By Michael Leigeber.

Useful JavaScript Techniques - JavaScript Tooltips

Newsticker
Antonio Lupetti re-creates a news ticker which is similar to the one used on Newsvine. Mootools in use.

Useful JavaScript Techniques - Newsticker

jQuery virtual tour
This is an extension to the simple panorama viewer that allows you to play a little bit more with jQuery by adding interactivity to transform some panoramic views into a virtual tour.

Useful JavaScript Techniques - jQuery virtual tour

Flexigrid
Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Useful JavaScript Techniques - Flexigrid

tableFilter
This script allows users to filter and sort even large tables quickly and in an interactive way.

Useful JavaScript Techniques - tableFilter

Row Locking with Checkboxes
“I had my function set up so that if any part of the row was clicked, the checkbox would check. When I clicked the actual checkbox, it would show a checkmark, but since the checkbox is a part of that row, my function would run, too, which would then think it’s time to uncheck the checkbox. In a fraction of a second, it would look like the checkbox never checked, but the row changed color anyway, sending the wrong signals to the end user.”

Useful JavaScript Techniques - Row Locking with Checkboxes

jQuery File Tree
jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. It has the ability to style icons based on file extension, uses AJAX to fetch file information on the fly, has a customizable expand/collapse event and support single- and multi-folder views.

Useful JavaScript Techniques - jQuery File Tree

Proto.Menu, prototype based context menu
Proto.Menu is a simple and lightweight prototype-based solution for context menu functionality on your page.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Pricing Matrix
This tutorial explains how to create a matrix that would give an indication of relationships among the information provided.

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Toggling Announcement Slider
“A few of my customer have asked for me to create a subtle but dynamic (…I know…) way for them to advertise different specials on their website. Not something that would display on every page, but periodically or only the homepage. Using a trick from GoDaddy’s playbook, I put together an announcement slider that toggles on click. Thanks to MooTools 1.2, this was a breeze.”

Useful JavaScript Techniques - Proto.Menu, prototype based context menu

Tutorials

Show/hide a Login Panel using Mootools 1.2
“Some of you were wondering what script I used to show/hide the login panel on top of this page (or in my latest Wordpress theme: “Night Transition”). In this tutorial, we will see how to create a similar login/signup panel for your website using Mootools 1.2.”

Images slider to create Flickr-like slideshows
If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework. “Since long time I was looking for a simple way to implement a Flickr-like slideshow (”image carousel”) and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.”

Create an apple style menu and improve it via jQuery
“Since I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done.”

Useful JavaScript Techniques - Create an apple style menu and improve it via jQuery

Creating a Slick Auto-Playing Featured Content Slider
By Chris Coyier.

Useful JavaScript Techniques - Creating a Slick Auto-Playing Featured Content Slider

Build An Incredible Login Form With jQuery
One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it

Useful JavaScript Techniques - Build An Incredible Login Form With jQuery

Create a Slick Tabbed Content Area using CSS & jQuery
“One of the biggest challenge to web designers is finding ways to place a lot of information on a page without losing usability. Tabbed content is a great way to handle this issue and has been widely used on blogs recently. Today we’re going to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.”

Useful JavaScript Techniques - Create a Slick Tabbed Content Area using CSS & jQuery

Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous
Learn how to create a lightweight, intelligent “accordion” effect using the Prototype and Scriptaculous libraries.

Useful JavaScript Techniques - Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

Create a Simple, Powerful Product Highlighter with MooTools
This tutorial will help you find your inner cow by introducing you to one of the most powerful and modular javascript libraries—MooTools. You’ll create a flexible tool for highlighting your sites products or services using the MooTools javascript framework.

Useful JavaScript Techniques - Create a Simple, Powerful Product Highlighter with MooTools

Creating a Dynamic Poll with jQuery and PHP
When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.

Useful JavaScript Techniques - Creating a Dynamic Poll with jQuery and PHP

Related Posts

You may want to take a look at the following related articles:

 
Comments Off on 75 (Really) Useful JavaScript Techniques

Posted in Uncategorized

 

Anti-Corruption Posters

11 Sep

via http://www.anthonyburrill.com/anti_corruption.html

 
Comments Off on Anti-Corruption Posters

Posted in Uncategorized

 

Radical Transparency: Three Lessons Apple Can Learn from Google

11 Sep
Steve Rubel via Micro Persuasion shared by 6 people

Google isn't exactly known as the most transparent company in the world, but they're light years ahead of Apple - a company that in some ways they share a kinship with when it comes to their reputation for innovation. Apple (or for that matter any big company) can learn a lot about radical transparency, customer service and PR from Google, even though they're hardly perfect here.

First, Google does a great job of telling you where they're fallible. Many Google products have pages that list the bugs that they know need to be fixed. GMail and Google Docs are just two. You can visit each of these pages for an update and even let Google know if you're experiencing one of these issues.

Knownissues

Apple, by contrast, just lets you know when they've fixed bugs, but leave it to bloggers to dig into the code to see just what was fixed. Most Apple software update release notes from Apple simply say "Bug fixes."

Iphone201080804

Second, Google, like Apple, has forums where users can voice their opinions about new features, gripes, wishes, use cases and more. Google employees actively participate in these forums and you can track their activity. Here's a page that shows you all of the posts that a Google Reader forum guide, "Roger," has responded to. Apple does the same in its forums. Here's a list of all of the postings that Jason L has responded to.

However, the difference between the two is that users can rank the posts of Google employees or even report misconduct. I give credit to Apple for participating, however, I wished they would let users rate employee postings.

Roger

Finally, Google has a ton of blogs. Most of them link back to the bloggers who link there. Some are beginning to allow for comments. Google Blogoscoped aggregates them here. Even better, all Google blog posts clearly identify the employee who authored the post and their title.

Daniel

Apple meanwhile has one blog for its much troubled MobileMe services, which I am probably dignifying by calling it that. It's bascially a news feed of product updates. The authors aren't identified. Worse, there are no comments or links to other bloggers.

There are other companies in the tech industry that go even further than Google in their transparency - namely Dell and Microsoft (an Edelman client). However, Google and Apple are often closely linked in their cultures. The reality is, though, that when it comes to customer engagement, they are quite different.

 
Comments Off on Radical Transparency: Three Lessons Apple Can Learn from Google

Posted in Uncategorized

 

Harvest

11 Sep

"Harvest"
 
Comments Off on Harvest

Posted in Uncategorized

 

Great Photography by Dave Hill + Quick Tutorial | Abduzeedo – graphic design | design inspiration | design tutorials

11 Sep

via http://abduzeedo.com/great-photography-dave-hill-quick-tutorial

 
Comments Off on Great Photography by Dave Hill + Quick Tutorial | Abduzeedo – graphic design | design inspiration | design tutorials

Posted in Uncategorized

 

Pixdaus: God Gave Us Pics!

11 Sep

no description

via http://pixdaus.com/single.php?id=5412

 
Comments Off on Pixdaus: God Gave Us Pics!

Posted in Uncategorized

 

Defending against the spin. So frustrating. [Corrections about candidates]

10 Sep
Chris Wetherell via massless shared by 4 people


1) Watch it get thrown.
2) *sigh* Correct it.
I'm trying to sort out the chaff from the messaging wheat about our candidates for the U.S. executive branch...so I'm making another list for myself (maybe useful to you?) so that I can be reminded of the current research about each claim. This is a non-comprehensive list and as a watchmen's watchman I should be fact-checked as well. Please correct me as necessary. (And yes, I know...that I'm publishing another political post annoys me as much as it may annoy you. Please accept my apology.)

Correcting stuff about Sarah Palin that isn't true.

  • Palin did NOT cut funding for special needs education in Alaska.
  • Actually, just the opposite - she tripled per-pupil funding.
  • Palin did NOT demand that books be banned from the Wasilla library.
    Though she did inquire about banning, she never, ever banned any books. Ever.
  • Palin was NEVER a member of the Alaskan Independence Party.
  • Palin NEVER endorsed or supported Pat Buchanan for president.
    This is just ridiculous. She wore a pin only when he visited and then took it off. More factually, she headed Steve Forbes' campaign efforts in Alaska.
  • Palin has NOT pushed for teaching creationism in Alaska's schools.
    She's said she's open to it being taught alongside evolution, however, she hasn't actually done anything substantive about it. Hopefully, she'll clarify her position. But it's (currently) incorrect to say she's actually made any changes in Alaskan education regarding creationism.
Source: http://www.factcheck.org/elections-2008/sliming_palin.html

Correcting stuff about Barack Obama that isn't true.

  • Obama’s health care plan will NOT "force small businesses to cut jobs".
    In fact, the plan exempts small businesses.
  • Obama's health care plan will NOT put "a bureaucrat ... between you and your doctor."
    In fact, those who have insurance now could keep the coverage they have.
  • Obama has NEVER voted for "corporate welfare" for oil companies.
    In fact, the bill Obama voted for raised taxes on oil companies by $300 million over 11 years while providing $5.8 billion in subsidies for renewable energy, energy efficiency and alternative fuels.
  • Obama will NOT close markets to trade.
    Though he once said he wanted to "renegotiate" NAFTA, now he says he wants to try to strengthen environmental and labor provisions in it. He's not advocating closing any markets.
Source: http://www.factcheck.org/elections-2008/factchecking_mccain.html
  • Obama DID NOT vote to teach sex to kindergarten children.
    Wow, this is disgustingly wrong. Rather, Obama voted for a bill in the Illinois state Senate that would update the sex education curriculum and make it "medically accurate." It was specifically designed to teach young kids how to recognize inappropriate behavior and avoid pedophiles and also demanded that any instruction be "age-appropriate". It was deemed urgently necessary enough to arm kids with knowledge about predators that it adjusted the year of beginning instruction. (Additionally, Obama was neither a co-sponsor nor a sponsor of the bill and it never got past the Senate.)
Source: http://www.factcheck.org/elections-2008/off_base_on_sex_ed.html
  • Obama IS OPEN TO DRILLING for oil.
    Specifically, he said he's open to "a careful, well thought-out drilling strategy that was carefully circumscribed to avoid significant environmental damage".
Source: http://www.palmbeachpost.com/state/content/state/epaper/2008/08/01/0801obama1.html
Source: http://www.factcheck.org/elections-2008/gop_convention_spin_part_ii.html
  • Obama will NOT INCREASE TAXES for working, middle-class families.
    Nope. NO. NO. This is wholly incorrect. Despite a McCain ad claiming otherwise, Obama's plan would cut taxes for the vast majority of American households, with middle-income earners benefiting a great deal.
Source: http://www.factcheck.org/elections-2008/a_new_stitch_in_a_bad_pattern.html

Correcting stuff about John McCain that isn't true.

  • McCain will NOT fail to support loan guarantees for the auto industry.
    Despite what an Obama ad says, McCain is actually in favor of low-cost loans to that industry.
Source: http://www.factcheck.org/elections-2008/hit_the_brakes.html
  • McCain did NOT say we could just "muddle through" in Afghanistan.
    In 2003, McCain actually said that we "may" muddle through, and he recently also called for more troops there.
  • McCain does NOT define middle-class as someone making under five million dollars a year.
    He was joking. Seriously. He even said, "but seriously" just after it. C'mon.
Source: http://www.factcheck.org/elections-2008/factchecking_obama.html

Correcting stuff about Joe Biden that isn't true.

  • Biden did NOT get fewer votes as a presidential nominee than Palin as mayor.
Source: http://politifact.com/truth-o-meter/statements/694/

[What they said] - McCain has said stuff that's wrong, incorrect, or misleading.

  • McCain FALSELY claimed that his plan will increase use of "wind, tide [and] solar" energy.
    His actual energy plan contains no new money for renewable energy.
Source: http://www.factcheck.org/elections-2008/factchecking_mccain.html

[What they said] - Obama has said stuff that's wrong, incorrect, or misleading.

  • Obama's plan currently CANNOT "pay for every dime" of his spending and tax cut proposals "by closing corporate loopholes and tax havens."
    This was quite the whopper. His proposed tax increases on upper-income individuals seems crucial. And his plan, like McCain’s, looks likely to leave the U.S. facing big budget deficits.
Source: http://www.factcheck.org/elections-2008/factchecking_obama.html
  • Obama FALSELY accused McCain of saying "no to higher fuel-efficiency standards for cars, no to investment in renewable energy, no to renewable fuels."
    In fact, in 2002 McCain not only wanted tougher standards than most of the Senate did, but he was lauded by a Democrat.
Source: http://politifact.com/truth-o-meter/statements/672/

[What they said] - Biden has said stuff that's wrong, incorrect, or misleading.

  • Biden FALSELY claimed that "murder and violent crime rates went down eight years in a row" as a result of the Biden Crime Bill.
    A peer-reviewed study published in the February 2007 issue of the journal Criminology found that the bill's "spending had little to no effect on crime."
Source: http://politifact.com/truth-o-meter/statements/158/

[What they said] - Palin has said stuff that's wrong, incorrect, or misleading.

  • Palin did NOT say "thanks, but no thanks" to the building of the Ketchikan bridge.
    She clearly supported it and didn't stand up to Congressional waste - she accepted the money on behalf of Alaska.
  • Palin FALSELY accused Obama of being more worried about terrorists being read their rights than apprehended.
    This is a whopper. Obama seems as committed to apprehending terrorists as the other candidates. But he's a constitutional scholar and law professor and is passionate about the rights of habeus corpus being respected.
Source: http://www.factcheck.org/elections-2008/gop_convention_spin_part_ii.html
 
Comments Off on Defending against the spin. So frustrating. [Corrections about candidates]

Posted in Uncategorized

 

TC50: Atmosphir, The Build-It-Yourself Gaming Platform

10 Sep
Jason Kincaid via TechCrunch shared by 5 people

Atmosphir is a gaming platform and engine that allows users to easily create their own levels in a 3D world by painting basic elements into a three dimensional grid. After downloading a client application, users can play in their own levels, or they can visit the Atmosphir community website to play on any of the maps that have been uploaded by other users. The application is currently available in a limited beta with plans to release by the end of the year, and is available for both Mac and PC.

Users can choose from a number of palettes, including pieces of land, bridges, and hazard props that will threaten the in-game avatar with blazing fireballs. The application also includes a number of theme packs, which allow users to create some variety in their levels. The packs are currently pretty basic, but the site plans to release more exciting themes like “Pirates” and “Robots”.

As far as gameplay goes, Atmosphir seems to be very straightfoward, much like a standard “Mario Brothers” game. The player’s avatar can run and jump around each level, which allows for jumping puzzles and the stomping on bad guys, but that’s about it. Atmosphir says that the current iteration is just a foundation, and that it plans to implement far more functionality including multiplayer support, which it says it can seamlessly push to every user’s client through an integrated updating system.

Panel

Robert Scoble - That’s what i’m talking about!

Bradley Horowitz - It’s impressive. Are the games suitable to play on game consoles?

Atmosphir - Definitely, I was always into Nintendo (they’re looking at getting onto gaming systems, like the Wii)

Bradley Horowitz - whats the level of effort involved?

Atmosphir - We built an abstraction layer that makes it easy to port to different systems, port to Sony PSP, we’re testing for the iPhone.

Bradley Horowitz - I can see a business model where I make a game and there’s a rev share.

Robert Scoble - Single player or online?

Atmosphir - Currently looking to make mulitplayer, add multiplayer code on top.. The game features automatic transparent updates. If we add code, we can download that seamlessly to user… client updates automatically

Robert Scoble - Is making level collaborative? I’d like to collaborate with my son.

Atmosphir - Yes, you can collaborate. Right now you take a file, send draft back and forth.. eventually would like to design in same environmental, can also upload with edit unlocked tag.. Levels are small files, only around 100k for a large level.

Robert Scoble - are blocks interactive? Can you make it play audio when you land on a block?

Atmosphir - Right now there are interactive things we’re working on.. some blocks shoot you up. we’re looking at doing audio stuff.

Sheryl Sandberg - looks exciting.. i think collaborative looks good going forward.

Joi Ito - How big is the client?

Atmosphir - Around 40 MB.

Joi Ito - Seems like tradeoff between user scriptabillty and blocks. Running from start flag would get kind of boring… are you going to have just one category of users.. User game play… it’s going to be a weird problem.

Atmosphir - We’re interested in when people mix roles of games and genres.. We want to mix it up.

Robert Scoble - Where’s the violence?

Atmosphir - We want to keep it family friendly, maybe we’ll have more mature themes. For right now we’re taking a Nintendo approach… But a rocket launcher is on the way.

Information provided by CrunchBase

Crunch Network: CrunchBoard because it’s time for you to find a new Job2.0

 
Comments Off on TC50: Atmosphir, The Build-It-Yourself Gaming Platform

Posted in Uncategorized

 

Smoke

10 Sep

"Smoke"
 
Comments Off on Smoke

Posted in Uncategorized

 

The Landscape of Possible Intelligences

10 Sep
(author unknown) via The Technium shared by 4 people

In A Taxonomy of Minds I explore the varieties of intelligence which a greater-than-human intelligence might take.  We could meet greater-than-human intelligences in an alien ET, or we can make synthetic ones. The one foundational assumption behind our making new minds ourselves is that we assume our mind is intelligent enough to make a new and different mind. Just because we are conscious does not mean we have the smarts to make consciousness ourselves. Whether (or when) AI is possible will ultimately depend on whether we are smart enough to make something smarter than ourselves. We assume that ants have not achieved this level. We also assume that as smart as chimpanzees are, chimps are not smart enough to make a mind smarter than a chimp, and so have not reached this threshold either. While some people assume humans can create a mind smarter than a human mind, humans may be at a level of intelligence that is below that threshold also. We simply don't know where the threshold of bootstrapping intelligence is, nor where we are on this metric.

We can distinguish several categories of elementary minds in relation to bootstrapping:

1) A  mind capable of imagining, or identifying a greater mind.
2) A  mind capable of imaging but incapable of designing a greater mind.
3) A  mind capable of designing a greater mind.

We fit the first criteria, but it is unclear whether we are of the second or third type of mind.  There is also a fourth type, which follows the third:

4) A mind capable of generating a greater mind which in turn itself creates a greater mind, and so on.

This is an cascading, bootstrapping mind. Once a mind reach this level, the recursive mind-enlargement can either keep going ad infinitum, or it might reach some limit. On the other hand, there may be more than one threshold in intelligence. Think of it as quantum levels. A mind may be able to make a mind smarter than itself, but the offspring mind may not be smart enough to make the next leap, and so gets stuck.

If we imagine the levels of intelligence as a ladder with unevenly spaced rungs, there may be jumps that some intelligences are not able to complete, or their derivatives are not able to jump. So a type 3 mind may be able to jump up four levels of bootstrapping intelligence, but not five. Since I don't believe intelligence is linear (that is I believe intelligence grows in many dimensions), a better illustration may be to view the problem of bootstrapping super intelligence as navigating across a rugged evolutionary landscape.

Intelligencelandscape

In this type of graph higher means better adapted, more suitable in form. Different hills indicated different varieties of environments, and different types of forms. This particular chart represents the landscape of possible types of intelligences. Here the higher a mind goes on a hill, the more highly it is suited or perfected for that type of intelligence.

In a very rugged fitness landscape, the danger is getting stuck on local optima of form. Your organism perfects a type of mind that is optimal for a local condition, but this very perfection imprisons you locally and prevents you from reaching a greater optimal form elsewhere. In other words, evolving to a higher elevation is not a matter of sheer power of intelligence, but of type. There may be certain kinds of minds that are powerful and optimal for some kinds of thinking, but that are incapable overcoming hurdles to reach a different, higher peak. Certain types of minds may be able to keep getting more powerful in the direction they have been evolving, but incapable of shifting direction in order to reach a new power. In other words, they may be incapable of bootstrapping the next generation. Other kinds of minds may be not as optimal but more nimble.

At the moment we are totally ignorant of what the possibility landscape of intelligence is. We have not yet even mapped out animal intelligences, and we have no real examples of other self-conscious intelligences to map. Navigating through the evolutionary landscape may be very smooth, or it may be very rough and very dependent on the path an evolving mind takes.

Because we have experience with such a small set of mind types, we really have no idea whether there are limits to the varieties and levels of intelligence.  While we can calculate the limits of computation (and folks like Seth Lloyd have done just that), I don't think intelligence as we currently understand it is equivalent to computation. The internet as a whole is computationally larger than our brains, but not as intelligent in the way we crave. Some people, like Stephen Wolfram, believe there is only one type of computation, and that there is sort of one universal intelligence. I tend to think there will be millions and billions of types of minds.

Recently, in conversations with George Dyson, I realized there is a fifth type of elementary mind:

5) A mind incapable of designing a greater mind, but capable of creating a platform upon which greater mind emerges.

This type of mind cannot figure out how to birth an intelligence equal to itself, but it does figure out how to set up conditions of evolution so that a new mind emerges from the forces pushing it. Dyson and I believe this is what is happening with the web and Google. An intelligence is forming without an overt top-down designer.  Right now that intelligence is rather dimwitted, but it continues to grow. Whether it continues to develop into something near human or greater-than-human remains to be seen. But if this embryonic smartness continued, it would represent a new way of making a mind.  And of course, this indirect way of making something smarter than yourself could be used at any point in the evolutionary bootstrapping cycle of a mind. Perhaps the fourth of fifth generation of a mind may be incapable of designing the next generation but capable of designing a system in which it emerges.

We tend to think of intelligence as singular, but biologically this is unlikely. More likely intelligence is multiple, diverse, and fecund. In the long haul, the central question will concern the differences between the evolvability of these various intelligences. Which types are capable of bootstrapping? And are we one of those?

 
Comments Off on The Landscape of Possible Intelligences

Posted in Uncategorized