Gadgetopia

How many people actually shut off JavaScript in their browsers? In the Web development world, you're constantly advised not to depend on JavaScript because "[insert double-digit percentage here] of Web surfers shut off JavaScript." I have never known someone who shut off JavaScript. I have used a lot of computers ...

cross-browser javascript table control.: This is one heck of a feat with JavaScript. Nicely done.

Simple Tricks for More Usable Forms: Some good JavaScript tricks for more usable forms.

Create a Pull Quote with Javascript (and CSS): Interesting method of dynamically creating pullquotes. When used for drawing a readers eye to an important passage, it can be argued that they are a presentational effect, so it would be nice to have a method to create a pull quote without ...

JavaScriptTemplates: With all the Ajax and client-side stuff floating around these days, we really need things like this. The JST engine is written entirely in standard JavaScript. It supports a productive template markup syntax very much like FreeMarker, Velocity, Smarty. JST is a readable alternative to manually coded massive String ...

JavaScript Syndication: How to Easily Syndicate Your Web Content: Here's an extremely well-done article on using JavaScript includes to syndicate your content. Very in-depth with many code samples and diagrams. If you are syndicating to websites that are not under your control, you don't know that the webmaster will have ...

Christian Decker wrote up a nice tutorial on doing a full framework with AJAX. This is the "all-in" approach to AJAX: the site is loaded entirely through javascript and javascript handles nearly all of the client-server communication. This looks like an attractive way to write a web app. You essentially ...

jQuery: The Write Less, Do More, JavaScript Library: We need another JavaScript library like we need a hole in the head, but this one looks quite good. jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to ...

Mozilla, Microsoft reps argue over the future of web scripting: Interesting article on the future of JavaScript. Do you release a new version with incremental improvements, or do you scrap it in favor of something more robust like Python or Ruby. Critics like Microsoft and Yahoo argue that certain characteristics ...

DOM Tooltip: Here's a great little JavaScript library to create custom tooltips for your Web page. A tooltip, in case you didn't know, is the little popup box that appears when you mouseover an element which has a TITLE attribute. Put your mouse on this link for a second (don't ...

I occasionally run into situations where it would be really great to add an 'intellisense' feature to a text input on a web form. That is, something along the lines of AutoComplete or Google Suggest. There are a bunch of scripts available on the Internets to handle this for you, ...

CSS Rounded Corners Roundup : Rounded corners suck. There s so many ways to do them, and they differ based on how many images they use, whether or not they re liquid, whether or not they use JavaScript, etc. This guy has collected links to a bunch of major techniques and made a ...

I like UNIX. I like Javascript. But for some reason, JS/UIX scares the bejeesus out of me. JS/UIX is an UN*X-like OS for standard web-browsers, written entirely in JavaScript (no plug-ins used). It comprises a vir- tual machine, shell, virtual file-system, process-management, and brings its own terminal with screen- and ...

...it's all about layers. A List Apart has put out two great new articles on the use of JavaScript in web design. In 'JavaScript Triggers', Peter-Paul Koch (of Quirksmode fame) makes an interesting point: There are 3 big layers to an HTML page: structure, appearance, and behavior. CSS is great ...

Found this via SvN: script.aculo.us is a javascript library that makes a lot of the new fun Ajax/javascript goodies that everyone's so fond of easier to put together. The Web is changing. The 30-year-old terminal-like technology it was originally is gradually giving way to new ways of doing things. The ...

I'm going to kick off a new weekly series this week I'm calling "The Basics"; Here's the idea: Every time I need to write some JavaScript for feature X on a new site I'm building, I always just go back to the last site I remember writing feature X for, ...

Fantastic article (as usual) over on A List Apart this morning. The next version of CSS (CSS3) includes a lot of handy features, one of which is a 'column-count' property, telling a web element to render its contained text into multiple columns (think magazine or newspaper). That would be a ...

Web Development Bookmarklets: Thanks for Simon Willison for pointing us at this amazing page of bookmarklets that let you play with the CSS and JavaScript of any page. These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, ...

Sorry, Stu Nichols, but you now have to share the title of Diabolical Mastermind with Cameron Adams over at Man In Blue for this crazy bit of CSS/JS magic. Cameron is dynamically changing the page layout based on the user's screen resolution and browser size, just by changing the stylesheet ...

Datejs - A JavaScript Date Library: A fairly stunning Javascript date library that can parse human-readable date references ( last April 3 ) into datetime values. Comprehensive, yet simple, stealthy and fast. Datejs has passed all trials and is ready to strike. Datejs doesn t just parse strings, it slices them cleanly in ...

Elliot Back has come up with the best anti-comment-spam measure I've heard in quite a while. Taking Matt's stopgap spam solution, which sends precomputed hashes to be echoed back by the user-agent's form, I've added dynamic generation of the md5 hash. Rather than write it to a hidden field, we ...

dp.SyntaxHighlighter - free JavaScript syntax highlighting: This is an insanely well-done syntax-hilighter in JavaScript. Just dump code in a CSSed textarea, and it comes out looking like these examples, which are nuts. The script is meant to help a developer to post code snippets online with ease and without having ...

GMail code hints at coming domain feature: These guys did some snooping around in the huge JavaScript code libraries for GMail and found some code that leads them to some cool conclusions. Their next big move will likely be GMail for domains -- a powerful way for anybody who owns ...

Firefox add-on lets surfers tweak sites, but is it safe?: This Greasemonkey extension is getting a lot of coverage these days. Essentially, it lets you write JavaScript that's applied to individual pages automatically. So if there's this one page that shows too many ads, you can write some JavaScript to ...

Steve Souders is Yahoo s front end engineer. He s the guy who wrote the article we discussed a few months back which brought us back to all those old tricks that make your Web site load faster. Consider this: say your page takes 700 milliseconds to load from request to final ...

Ajax Mistakes: This resource is so, so necessary. As I've ranted about before, Ajax has the potential to introduce a massive new dimension of UI problems into the Web. Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as ...

Here's something that may not be common knowledge to a lot of people: having Google Adsense ads on your page gets you indexed faster. Here's why: I made a post the other night about the PHP templating language Smarty. I published it in Movable Type, then viewed the permalink page. ...

There's a standard way of handling object updates via HTML forms. Generally speaking, when the user selects an object to edit, you populate an HTML form with all the data from the object, post all these fields when the user presses Submit, then update all the fields of the record ...

TinyMCE Javascript Content Editor by Moxiecode Systems AB: This is a really nice, open source WYSIWYG editor. The plugins and demo look great (note that the demo has every single feature enabled, so it's awfully cluttered).

Well, I broke down and am trying a WYSIWYG editor called htmlarea from Interactive Tools.  It's JavaScript-based and it seems slick as all get out.  I like Textile, and it was very...pure, but I'm weak.  Sorry to all the text purists out there.

PrettyPrinter.de, an online pretty printer for PHP, Java, C , C, Perl, JavaScript, CSS: Here's a nice little service that will clean up your semicolon-and-bracket-type code. It's well-done, but I'd like to see it sniff functions and alphabetize them. Via Simon in a comment to this post.

flot - Google Code: Flot looks crazy, crazy good. Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming. Hats off to the developers at ...

Speaking of CSS, check out this crazy gallery by Stu Nicholls. There's nary a stitch of javascript on this page. Even the CSS isn't that complicated, and the HTML is fairly basic. This is so cool, it literally gave me chills. That's how big of a dork I am, people.

Sick hackers start seizures: If this is true, it s pretty messed up. SICKO HACKERS posted JavaScript code and flashing computer animation on an epilepsy site with the aim of triggering migraines and seizures in users. The non-profit Epilepsy Foundation shut the site down to kill off the offending messages and ...

VisiBone Style Sheet Examples: An interesting little page that uses constantly changing JavaScript styles to show you various style rules will do the styles change constantly as you sit and watch. Nicely done. A free public service by VisiBone. Here are some cascading style sheet examples. See the start ...

Two great articles over at A List Apart this morning: Some folks insist on printing web pages before reading them. ALA has a neat technique for including high-res alternate images in your documents using CSS. David Miller introduces us to fvlogger, a Log4J clone for javascript, which looks like it ...

Blogging: Design Your Own Weblog Application from Scratch Using ASP.NET, JavaScript, and OLE DB: "It seems like everyone wants a blog these daysâ I know I did. But I couldn't find any pre-built ASP.NET blog code with the features I wanted, so I built my own." I found this ...

PHP Click Tracker - Track Ad Clicks Free: This little script claims to log what AdSense ads are being clicked on your site. It appears to put an event handler on clicks in the AdSense DIV, then looks for the words "go to" in the status bar when something is ...

blueprintcss - Google Code: Why am I so shocked at the notion of a CSS framework? We have server-side frameworks, javascript frameworks, etc. But when I saw the phrase CSS framework, I thought of course, what a great idea Blueprint is a CSS framework, which aims to cut down on ...

The All-Music Guide has long had a pretty irritating web site. The design rendered poorly in non-IE browsers, almost all of the links were javascript-driven for no apparent reason, etc. So, when they recently redesigned, you'd expect them to fix these problems, right? No such luck. The new design not ...

BlogChatter - Realtime Weblog Aggregation: Uses an IFRAME and javascript to refresh it every so often. You get a little window that shows all sorts of pings to a specified server. "BlogChatter is a window into weblog activity right now, at this moment. It is a real-time event stream of ...

About Dynamic Properties: Ever heard of IE's CSS "expression" property? It allows you to set a CSS property not to a constant, but to the result of a JavaScript expression. Like this: p{width:expression(400 + "px");} What this lets you do, according to this really good article, is make IE emulate ...

DEFENDER of the Favicon: Ah geez, this is the stupidest, coolest thing I ve ever seen. DEFENDER of the favicon was done in 3 nights, from start to finish. Each frame of the game is generated on the fly in JavaScript into a 16?16 canvas element, then converted to a 32bits ...

dean.edwards.name/IE7/: This guy made an "IE7" patch for Internet Explorer that uses JavaScript to force IE to honor CSS features like min-width, :first-child, [attr=value], etc. Here's the good news: it works. It comes with a series of test pages that prove it's doing what it should be doing imagine, ...

Dynamic Text Replacement: Look at this page. It looks like someone did all their headings as images, which hides the text from search engines and has huge usability problems...but then look at the source. It's all good 'ol HTML. I haven't read the article that explains how to do it, ...

QuirksMode - for all your browser quirks: I wasn't there ten seconds before I learned something new: the * selector (warning: deep link into a frameset). Who knew? "QuirksMode.org is the personal and professional site of Peter-Paul Koch, freelance web developer in Amsterdam, the Netherlands. It contains more than 150 ...

Porn Sites Hiding Behind Blogs: This is a lot like the "shill blog" concept we talked about a few months ago Over the last few days, I’ve seen a number of pseudo-realistic blogs spring up. They link to real stories, but all the comment and trackback links are just javascript ...

The International Herald Tribute does something really interesting with their news articles. This design has been around for a while, but it's worth looking at again. Look at this one. See how it's divided up into columns, and you can page back and forth without reloading the page. This is ...

Lyrics: White & Nerdy by Weird Al Yankovic: Weird Al is the greatest artist in the history of music. There's no killer app I haven't run At Pascal, well I'm number one Do vector calculus just for fun I ain't got a gat but I got a soldering gun Happy ...

stackoverflow.com: With both Spolsky and Atwood involved, I suspect this will be huge. Jeff Atwood and I decided to do something about it. We re starting to build a programming Q&A site that s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain ...

Preparing for Widescreen: A good idea that's going to become more and more popular as screen sizes exist in a much larger range of resolutions and aspect ratios than ever before. I'm suggesting that we use a different stylesheet for different screen resolutions. With simple JavaScript, we can test for ...

The Mythical Business Layer: This is an exceptionally well-written article from an unlikely source discussing the classic N-Tier application structure. [ ] what it really is, however, is a bad design that leads to bad software. Or at the very least, dangerously poor semantics. Now, multi-tiered applications aren t bad, but some ...

Firebug 1.0: It's Hot, Baby, Hot!: I agree with Josh -- if you have the Web Developer extension, its perfect partner is Firebug. The ability to inspect the CSS of individual elements is a huge help. If you have anything at all to do with making web pages, you've gotta ...

Note: This entry changed quite a bit in the 24 hours after it was published. I discovered a lot of stuff I'm ashamed to say I didn't know, I posted several updates to the end of the post, and I eventually changed the title. Quick survey: if you are a ...

Yahoo! UI Library: Yahoo somewhat rules for this. A Free BSD license makes it even yummier. The Yahoo! User Interface Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, HTML and AJAX. The UI Library Utilities ...

One of the interesting side effects of separating style from content is the fact that it takes very little to redesign the style even if it's not your site. In his programming journal, Mihai Parparita has a neat article about reskinning GMail with his own custom stylesheet. However, there ...

MT-Keystrokes: This isn't a bad idea. This plugin counts the keystrokes entered in the TEXTAREA for the Movable Type comments form, and sends that number with the comment. the plugin does some arithmetic on it to make sure it roughly matches the number of characters in the comment. Based on ...

All sorts of FireFox news this weekend: The Fedora Core blog has posted a short preview of features expected in FireFox 1.1. Among them are instant rendering on the back button, instant application of settings changes, and enhanced tab navigation. I'm very sad to report that The 'Fox got it's ...

Well, this will probably be the last entry of 2004. This year we posted 1,530 entries and you posted 2,962 (!) comments. As the comment count should verify, Gadgetopia went buckwild this year. According to Google Adsense, we push about 100,000 page views a month to the HTML version (and ...

5K Competition "Since 2000, the hugely popular 5k competition has been challenging web developers to create the most innovative and stimulating work possible in less than 5,120 bytes. Entries for the 5k can include virtually any client-side technology in use on the web, including Flash, DHTML, Java, SVG, X3D, and ...

I've finally found a legitimate, value-adding use for Ajax -- comment previewing. On this site, you used to have to preview the comment on a separate screen, remember what you wanted to change, then go back to the main screen and make your changes (I've complained about this exact model ...

Movable Type doesn't have a content review system. You can write an entry and leave it in "Draft" status, but no one knows about it unless they go looking for it. In practice, this can be a pain. New authors to Gadgetopia are told to leave their first dozen or ...

I have a client who wants to engage one of the big job sites for recruiting. They'd like to advertise all their available jobs and take applications via a service like Monster, HotJobs, CareerBuilder, or Dice. But, at the same time, this client would like to list these jobs on ...

Texty: scms: This interesting. It s a CMS where you can create fragments of HTML, and then put them on your Web site using a Javascript include. So you edit the content there, and it gets pulled in to your pages client-side. Never open a HTML page again for a minor ...

JotForm: This is a somewhat insane JavaScript form builder. You drag and drop elements in your browser to build a Web form -- somewhat like the various IDEs. Each element has properties, etc. It's in beta right now, so details are thin, but apparently you can have them host the ...

tinydb.org: This is the first Google App Engine app I ve seen. tinydb lets you write to it by send a small GET request with querystring arguments containing some bit of textual data. You get a URL back, from which you can retrieve what you wrote in XML or JSON. Here ...

Well, I went ahead and upgraded to Movable Type 3.1 with the free version I got from joining the MT Professionals Network (still trying to find a catch...). Note that if you're considering a 3.1 upgrade, wait there are errors in the upgrade scripts that Six Apart is working ...

You may have already seen something on TiddlyWiki floating around the blogosphere. If you thought, "Blech, yet another Wiki", without checking it out, adjust your attitude and go check again, because you're missing out on one of the most original concepts to hit the web in some time. A TiddlyWiki ...

Ten Most Violated Homepage Design Guidelines: Love him or hate him, there is some good advice here. Still, I don't quite understand the emphasis on number eight: "Don't use a heading to label the search area; instead use a 'Search' button to the right of the box." That doesn't seem ...

Being Popular: Here's an extremely long but interesting essay from Paul Graham about how to design the perfect programming language. He has no plans to do this, of course, but in considering the question he covers a lot of ground on why certain languages have thrived and others haven't. For ...

Eric Meyer, in addition to working the turntables and personally speeding up the entire Internet (at least if you get your news from Apple), has come up with a really slick set of CSS rules and Javascript that can take a garden-variety web page and turn it into a dead ...

Google has launched Google Reader, an online feed reader. As expected, it's a fairly slick and AJAX-ized reader interface that seems at home alongside Gmail. I imported my feeds from Bloglines, and here are my first impressions: Google's reader takes the approach of focusing on aggregating all the posts into ...

I've purchased a shrink-wrapped copy of Turbo Tax every year for the last five years or so. I was going to do it again this year, but Joe told me to try their Web-based version (same link as above). I've known about Turbo Tax for the Web, but I've always ...

I had to remove some nasty spyware yesterday from an employee's home machine. It was an IE search toolbar (I'm not going to say the name since I'd rather take a shotgun blast to the face than give them any publicity) that generated a JavaScript error on any search results ...

Joe and I have been working with eZ publish for the last few months. It is, without a doubt, the best content management system I've ever used. I got more done in one week with eZ publish than I did in nine months with Documentum. I like it so much, ...

Six Apart ProNet - Plugin Directory - Built for 3.2: If you're on the latest version of Movable Type, take a browse of the plugins built to take advantage of the new API hooks in that version. There's some really great stuff here: Ajaxify Ajaxify is a set of plugins ...

Differences in the "standard" coding style from language to language frustrate me. I get irritated that I have to change styles to fit in with the accepted norms for different languages. Traditionally, some use variable names with_underscores, some MixedCase some mixedCase with the first word uncapitalized, some use tabs, some ...

According to Stephan, certain features of Tiger's new Dashboard feature allow for the automatic installation of potentially evil widgets. I picked up [Tiger] at launch time from my local Apple store, brought it home, and got inspired to start in on a widget the next day. My flores and coras ...

Does a good looking Web site get used more than a plain one? If so, why? Consider two Web sites: Site A is written in plain HTML / CSS / JavaScript, etc. It s a traditional Web app, well-designed and aesthetically-pleasing, but no attempt has been made to engineer a slick ...

Update: See the comments. I have found a way around this in both IE and Mozilla. I thought about deleting the post, but if taken with the comments, it's still a pretty good tutorial of how to do this. Another Update: One of our commentors points out that Mozilla 1.7 ...

I've complained off and on about the lack of user-defined fields in Movable Type. Today was finally the day I got off my high-horse and messed with some code. Here is a method to add a new field to the MT database. The field can store whatever you like, can ...

Well, here we are at #4,000. This puts us just 1,000 posts away from our stated goal of 5,000. Along with the 4,000 posts, we have 6,050 comments as of this writing, and that's very cool. We appreciate all the interaction everyone has with the site. Interestingly, we hit 2,500 ...

Admit it: whenever some group like 37 Signals or Six Apart comes out with a new software product, you secretly think, "I could of done that." How many of us developers thing we could build something just as good if we only put in the time? I do. Yes, I ...

Web developers want one thing: control. HTML is such an imprecise language that building Web pages has continually been a struggle between what we want to do and what the language is capable of. As a result, the short history of the Web has been an exercise in perverting HTML ...