Go back to school with your Mac, iPhone and TUAW
AOL Tech
Posts with tag JavaScript

Blow up those thumbnails the fancy way with FancyZoom

If your site uses thumbnail images, but you're still opening a separate tab or a separate window to show the larger version, you need to see this: FancyZoom is a little bit of Javascript used by Cabel Sasser on both his personal site and the Panic website, to zoom images inline. Cabel describes the effect as "Mac-like," which is about as accurate a description as you can get. It feels like it should be part of Safari, but it works just fine in other browsers, too.

FancyZoom is a more compact alternative to other zooming effects you might be familiar with, like Lightbox or That Thing Apple Uses on Apple.com. It can be added to a site using only 2 lines of HTML, and it doesn't require any additional libraries. You can also use FancyZoom on a text link to an image, instead of a thumbnail, which could definitely come in handy for some blog layouts we've seen.

[via JoshSpear]

Web developers can breathe a sigh of relief with Firebug

Ahh... nothing like the sweet smell of website glitches in the morning. The web development junkies here at Download Squad know how it feels to spend hours tracking down stubborn CSS styles that have managed to magically disappear, or have cascaded themselves into places where no man has gone before. We can attest to debugging JavaScript into the wee hours of the night, and trying to get rid of that one extra pixel of whitespace at the bottom of the page until we give up and hope nobody notices.

If the above description fits a lot of your day-to-day activities, and you're a Firefox user, Firebug, something we covered a couple years ago in its infancy, is the extension for you. When we last looked at it, Firebug was a basic JavaScript console with a DOM inspector. However, since then, it's had a couple of layout changes, and has been given features that changed Firebug from a simple developer console to a powerful tool for all aspects of web development.

Continue reading Web developers can breathe a sigh of relief with Firebug

Love Obama's slideshow? Here's how to copy it yourself.



Barack Obama's design team has garnered a lot of praise for their work on his campaign materials, including the official website. Heck, there have been entire articles devoted to praising their choice of typefaces. One of the cooler elements the Obama team has cooked up for their website is a slideshow-like animated list for front page navigation.

If you're a fan of this slideshow, and you want to create a similar effect on your own site, look no further than the aptly-named BarackSlideshow script. DevThought has come up with a bit of CSS and JavaScript that loads images and animation effects almost identical to the originals. Some users in the comment thread are reporting browser or plug-in specific issues with the script, so your mileage may vary.

SproutCore gets huge buzz ahead of MobileMe launch

Since it was revealed that Apple's recently-announced .mac replacement, MobileMe, was partially built on something called SproutCore, the buzz around this hot new JavaScript framework has been growing. Although this is the first that many people will have heard about it, SproutCore has actually been around for a while, powering services like .mac's Mobile Galleries. Now it's getting so much attention that SproutCore.com has been unreachable all day, a week after the WWDC announcement.

So, why SproutCore? Daniel Eran Dilger, over at RoughlyDrafted, has a great rundown of things to love about this open source JavaScript framework: it will allow developers to build web apps that look more like desktop apps, function offline, and take advantage of modern browser features. Apple's using SproutCore to build a front end for WebDav and its own WebObjects, but other developments could easily add PHP, JSON or XML data to the mix, to name a few.

[via RoughlyDrafted]

CSS exploit allows detection of social site use

Web developer Aza Raskin knows we visit Digg, Del.icio.us, Reddit and Facebook without even having to ask.

No, he isn't employing privacy violating hackery, but he is exploiting a "cute" information leak in CSS that traditionally displays visited links differently than those that have yet to be visited. By loading in an iframe a list of social site URLs to see which are purple (visited) and blue (not visited), an assumption can be made on what sites to prompt users for submitting a story or blog entry.

Raskin has wrapped this functionality in a script called SocialHistory.js.

Continue reading CSS exploit allows detection of social site use

Firefox 3 beta 4 released

Firefox 3 beta 4Mozilla has released the 4th public beta version of Firefox 3. If it feels like the next generation of the Firefox web browser has been in beta for pretty much ever, that's because it has been. The first public alpha was released in 2006. But with each new test build, Firefox 3 gets a little more stable, and gets a few new features. Here are a few of the updates packed into Firefox 3 beta 4:
  • Full page zoom - Up until now, Firefox would let you make text larger or smaller, but there was no way to increase or decrease the size of all the content on a web site (something you've been able to do with Opera for years). Now you can choose whether the zoom feature works for text or full pages.
  • New download manager - The new download manager shows active time remaining, and the status of downloads. You can also search your downloads and see the site where your downloaded files are from.
  • Improved OS integration - Firefox 3 beta 4 includes specific icons and themes for Windows Vista, OS X, and Linux (using the native GTK theme).
  • Improved memory usage -
Firefox 3 beta 4 also includes a ton of other tweaks and bug fixes. The browser is also designed to use less memory, and there are major improvements to the JavaScript engine that should allow web based applications like Gmail and Zoho Office to run twice as fast in Firefox 3 as Firefox 2.

Browsershots: view a webpage in many browsers

Browsershots
Browsershots is a free web service for viewing a website in about 50 web browsers among 4 operating systems (Linux, Windows, Mac OS X, BSD). This is helpful for checking your web design on multiple configurations without having to use virtual machines or extra hardware and software.

You just enter your URL, check the browsers you want to see, choose extra output options like screen width, color depth, and Javascript version, and then click "Submit."

Your job will be added to a queue so that all of the browser screenshots can be generated, so waste some time for a few minutes. When the job is complete, you'll have a group of thumbnails (one for each browser screenshot).

Clicking a thumbnail will enlarge the screenshot and give you information on the computer and browser that rendered your site. Clicking the screenshot again will enlarge the picture to full size.

Browsershots supports Firefox 3 (on Linux and Windows) and IE 8, but not Safari 3.

[Thanks Jonathan!]

Install Facebook applications on any web site

Facebook appsLove them or hate them, Facebook applications are what makes the social networking site what it is. Back when MySpace, Friendster, and other sites let you connect with friends, leave messages, and maybe even play some music, Facebook let you send snowballs, play Scrabble, and graph your bestest friends.

The only problem with Facebook applications is that up until now, you've had to actually visit Facebook to access them. OK, sure, that makes sense. But as Google promotes its OpenSocial initiative which will let people develop applications that can run on any website, Facebook's approach was starting to look a bit antiquated.

Now Facebook has upped the ante by releasing a JavaScript client library that lets you add a Facebook application to any site. That means you can visit Joe Schmo's home page and still play a game of Scrabulous with your Facebook contacts. You know, if Hasbro and Mattel don't shut it down.

There appears to be some debate in the developer community about how significant this announcement was. Facebook had already released an API for writing applications. And some developers have created applications that can be hosted on other sites. But by releasing the JavaScript library, developers can create multi-site applications that do not require any server-side code, making it incredibly easy for anyone to embed an application on their site.

[via All Facebook]

Douglas Crockford: The State of Ajax


It isn't every day that Douglas Crockford (the father of JSON and JSLint) pops up with a new tech talk. In this one he discusses the current state of Ajax development, why mashups are inherently insecure, why the standards process is broken, and how our best hope for a newer better platform may be mobile. Say what?

Basically he proposes the idea that because the replacement rate on mobile phones is so quick (around 2 years) it would be possible to move that industry to a new platform for website interactivity. The traditional PC market moves slowly and requires that you support many many legacy platforms. But with mobile, you can run and gun with your technology and count on people upgrading. A new web platform for mobile could be Flash, it could be Silverlight, it could be a future version of ECMA Script (JavaScript) with a better CSS implementation.

The video also gives a good overview of the history of computing over networks and why the web has lagged behind on everything from rounded corners to security.

Google Gadget Ads

Google Gadget AdsIt's hard to escape online ads, and now Google has rolled out another ad format in order to take control of another piece of the ad pie and make it more dynamic and interesting. Ads in Google's Gadgets.

The AdWords Gadget program has been built to quite simply turn widgets into ads. These websites within websites can draw in dynamic content including data feeds, maps, images, audio, Flash, HTML and JavaScript content to serve an audience in over 100 countries with no hosting charges attached. The ads can then be embedded and users of your brand can share them amongst friends. Built on the iGoogle platform, companies like AOL and IBM are already using them to drive traffic.

With widgets and gadgets being so easy to embed into social networks and websites, there is surely no stopping Google from deploying these into such high profile locations as MySpace and Facebook.

Check out some samples of the Google Gadgets.

World of Solitaire - Time Waster

World of SolitaireWorld of Solitaire is a full screen Javascript based solitaire program built with the ever adaptive YUI library. The game has smooth animations, a customizable card deck, and 12 game modes including popular versions such as Spider, Klondike, and FreeCell. The game also tracks a host of statistics and a status bar indicates your time, number of moves, and overall score.

The game is free and no signup is required. If you want to keep track of your stats you'll need to register though. Robert Shultz, the developer of the game, gave an interview over Yahoo about the building process, the technology he used, and his plans for future development.

Is JavaScript slowing down the web?

JS errorRead/WriteWeb has a great article up that claims that JavaScript and - more to the point: all of the widgets that JavaScript powers - are ruining the web by slowing down websites to a crawl. The surprising information here is that JavaScript is a single-threaded language, meaning that in most cases nothing can happen on a website while a given piece of JavaScript code is being run. While this isn't a big deal for small or fast code, anything that your site is loading from a 3rd party that isn't optimized could be drastically slowing your site down.

Some tips are included with respect to how to optimize your pages to be minimally impacted by potentially slow JavaScript, however there is no easy solution. Maybe simply using moderation when determining which widgets to add to your site is the best advice.

DHTML Lemmings - an oldie but a goodie

DHTML LemmingsLemmings is probably one of the most popular games of all time, and to see it implemented entirely in Javascript is pretty amazing. The fact that it is a perfect reimplementation of the original is that much better. This site has been around now for years, but that doesn't make it any less cool.

If you're not familiar with the game, the concept behind Lemmings is that you get a bunch of little guys that are released at a steady rate, and you need to get them to their goal. You have palette of different skills that you can give to your lemmings at any given time, such as digging, building stairways, parachuting and even exploding, and giving the right attribute to the right lemming at the right time is crucial to your success.

For a walk down memory lane, and a very fun time waster, check out DHTML Lemmings.

[Thanks to reader hnkelley for the tip]

Google launches Mapplets, gadgets for maps

Google launches Mapplets, gadgets for maps

Google has added in Mapplets to Google Maps today. It was previously offered in a preview mode. Mapplets are like mini applications that can be embedded into the Google Maps site.

Google currently has standard Mapplets available including Real Estate Search, Photos, Gas Prices, Distance Measurement tool, Earth as Art, and Crop Circles. Mapplets are essentially Google Gadgets that can work with Google Maps using Flash or Javascript and the API's.

Google Mapplets can be found under the "My Maps" tab. Additional mapping gadgets can also be added to user profiles. These include some interesting ones as Famous Photos, Earthquake search, Chicago Transit, and Flickr photos.

Build your first Adobe AIR application with Aptana

Aptana and Adobe AIRRecently Aptana added support for Adobe AIR (the platform formally known as Apollo) to their Open Source IDE. Why is this cool? Well Aptana is a standalone web/JavaScript development application that is built on top of Eclipse. Best of all, Aptana is free. This is a great alternative to locking yourself into Adobe's Dreamweaver or Flex builder plugins.

You can download Aptana here. Once you have it installed, open it up and look at the Aptana start page under Plugins. Here you will be able to walk through the process of downloading and installing the Adobe Air Runtime, SDK, and the Aptana Plugin.

Once everything is setup simply go to File > New > Project and select Adobe Air. Fill in the project name and description and then import your preferred Ajax Libraries to start coding with. There is a host to libraries to choose from including YUI, jQuery, and ProtoType.

The pre-created project includes all of the Javascript needed to start writing your application. The AIRAliases.js file maps all of the local OS and file system functions to JavaScript so that you can, within AIR, make calls directly to the users computer. I recommend trying out the sample text-file editor application from the Adobe's QuickStart page to get a sense of how easy it is to build AIR applications and what is possible using this new framework.

Once you have your code ready to test, just hit the green "Play" button and Aptana will compile your app and launch it within Adobe AIR

Next Page >

Download Squad Features




View Posts By

Categories
Audio (857)
Beta (345)
Blogging (705)
Browsers (65)
Business (1379)
Design (827)
Developer (939)
E-mail (521)
Finance (128)
Fun (1779)
Games (563)
Internet (4908)
Kids (135)
Office (499)
OS Updates (582)
P2P (182)
Photo (471)
Podcasting (168)
Productivity (1350)
Search (271)
Security (548)
Social Software (1136)
Text (440)
Troubleshooting (52)
Utilities (1995)
Video (1036)
VoIP (140)
web 2.0 (802)
Web services (3382)
Companies
Adobe (188)
AOL (51)
Apache Foundation (1)
Apple (477)
Canonical (35)
Google (1334)
IBM (30)
Microsoft (1323)
Mozilla (475)
Novell (20)
OpenOffice.org (43)
PalmSource (12)
Red Hat (17)
Symantec (14)
Yahoo! (356)
License
Commercial (681)
Shareware (195)
Freeware (2049)
Open Source (925)
Misc
Podcasts (14)
Features (392)
Hardware (167)
News (1129)
Holiday Gift Guide (15)
Platforms
Windows (3694)
Windows Mobile (429)
BlackBerry (45)
Macintosh (2102)
iPhone (104)
Linux (1605)
Unix (78)
Palm (177)
Symbian (123)
Columns
Ask DLS (11)
Analysis (33)
Browser Tips (297)
DLS Podcast (6)
Googleholic (202)
How-Tos (103)
DLS Interviews (19)
Design Tips (15)
Mobile Minute (133)
Mods (68)
Time-Wasters (392)
Weekend Review (40)
Imaging Tips (32)

RESOURCES

RSS NEWSFEEDS

Powered by Blogsmith

Sponsored Links

Advertise with Download Squad

Most Commented On (60 days)

Recent Comments

Urlesque Headlines

BloggingStocks Tech Coverage

More Tech Coverage

Other Weblogs Inc. Network blogs you might be interested in: