FileWatcher

Synopsis

Currently, there is no cross-platform solution that allows a front-end developer to alter some code (flavor agnostic) and immediately see the result occur in the browser.

This is a poor man's solution to solving that problem half way. The code base has been split up into two halves; a script that watches specific URL's for any content changes and another script which gathers the resources used on the page.

This script is the first half.

How It Works

FileWatcher is a constructor function that keeps a in-object cache of the contents of files. When a file is added to the watcher, it is pushed into a queue.

When a watcher is started, it takes the first item from the queue and fires an XHR or one of its cousins (cross-browser down to IE5.5) to fetch the content of a resource.

If the content has never been seen before, it is added to our cache. If there is a change, trigger the listeners.

Next, the file is added back to the queue to be watched. Then, one second later (or whatever the delay is) the next item is pulled from the queue and the process begins again.

Develop with a hands-free refresh

FileWatcher was initially built with a sister script called ResourceCollector. When these scripts are used together, they allow for webpages to dynamically refresh whenever there is an HTML change and seamlessly update images and CSS.

https://github.com/twolfson/File-Watcher

Cross Browser HTML5 Progress Bars In Depth

As a web application developer, progress bars are great when you want to show the user that some action is happening, especially when it can take a long time. They can be animated (like the one in Gmail does when it shows the user how long it is going to take for it to load and initialize), or static (like some shopping cart applications have to show the user how many pages it will take to check out an order). I used to create progress bars using 

 tags, CSS and a litle bit of math, but now I like to do it the HTML5 way using the  tag. This article will discuss how this tag is rendered by default in all operating systems and browsers and how to style the progress tag with CSS, even in browsers that don’t officially support the it. It will also discuss some interestinglimitations of all the browser implementations amd show some interesting examples using advanced CSS3 techniques.


http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth

NETEYE Activity Indicator

A jQuery plugin that renders a translucent activity indicator (spinner) using SVG or VML.

Features

• Lightweight script
• No images required
• No external CSS
• Resolution independent
• Alpha transparency
• Highly configurable appearance
• Works in all major browsers
• Uses feature detection
• Degrades gracefully

Supported Browsers

The plugin has been successfully tested in the following browsers:

• Firefox 2.0
• Safari 3.2.1
• Internet Explorer 6.0
• Opera 10.6

Of course newer versions of the various browsers are also supported.

Dependencies

The plugin requires jQuery v1.4.2 (or higher). Besides that, no other files are required, especially no style-sheets or images.

http://neteye.github.com/activity-indicator.html

Javascript: Copy To Clipboard Cross Browser

If you use any script for syntax highlighting, you'll see most of them has "copy to clipboard" feature. This is a fascinating thing done with Javascript.

1.  Copy to clipboard is very easy in Internet Explorer
2.  Flash solution for other browsers
3.  Zero Clipboard: A Javascript library for copy to clipboard functionality

http://www.deluxeblogtips.com/2010/06/javascript-copy-to-clipboard.html

XRegExp

What is it?

XRegExp is an open source (MIT license) JavaScript library that provides an augmented, extensible, cross-browser implementation of regular expressions, including support for additional syntax, flags, and methods.

XRegExp is fully compliant with the regular expression flavor specified in ECMA-262 Edition 3 (ES3), and has been tested with Internet Explorer 5.5–8, Firefox 2–3.5, Safari 3–4, Chrome 1–2, and Opera 9. XRegExp uses feature detection—no browser sniffing.

Features

• Adds new regex and replacement text syntax, including comprehensive support for named capture.
• Adds two new regex flags: s, to make dot match all characters (aka singleline mode), and x, for free-spacing and comments (aka extended mode).
• Provides a suite of 12 functions and methods that make complex regex processing a breeze.
• Automagically fixes the most commonly encountered cross-browser inconsistencies in regex behavior and syntax.
• Lets you easily create and use plugins that add new syntax and flags to XRegExp's regular expression language.

http://xregexp.com/

Expression Web SuperPreview makes cross-browser testing like moist delicious cake

Editorial note: If you’ve been following my tweets in the past 12 hours you’d have seen me hinting at something very cool for web developers coming out of Microsoft’s MIX09 event today. Well, it’s still at least 3 hours until MIX but it appears Microsoft’s own Expression Web team blog has let the dogs out early (their server is set to to New York time, not Las Vegas time), so consider the NDA broken

“Expression Web SuperPreview”, the name is typical of Microsoft products, it’s technically self-explanatory but mind-numbingly bland and ridiculously long.

To make matters worse, the beta being released today - a subset of the full release coming with Expression Web 3 - is called “Expression Web SuperPreview for Windows Internet Explorer”. Granted the name is not that important for a developer tool, a kickass one at that.

Every web developer today faces the challenge of checking website compatibility across a large pool of browsers and browser versions in the marketplace. Up and until now, either you could install every browser, verify the website via a visual inspection and debug with tools specialized to that browser, or you could send a URL to a third-party screenshotting service like BrowserShots for an all-in-one visual inspection. The former is messy and tedious but gives you more control and an opportunity to diagnose problems, whilst the latter is simple but slow and useless to fix the problem. Needless to say, SuperPreview is the best of both worlds.

Note: The following screenshots come from a newer unreleased internal build of the application and does not reflect accurately what you can do in Expression Web SuperPreview today. Please don’t hurt me. I like kittens.

SuperPreview as a tool allows you to compare different rendering engines in a single unified interface. Simple clicks gives you comparisons between Internet Explorer 6, the native version of Internet Explorer installed, other browsers you may have installed locally - Firefox 3.5, Safari 3, Safari 4 - and even an bitmap images of website prototypes.

Pushing the envelopes a little, Microsoft is also building in support for remote rendering, such as those on different operating systems even. Details about this feature is not entirely clear at the moment, but I would expect this to be more advanced than just an image rendering.

On top of just a visual inspection, you have a standard set of modern HTML debugging tools like a DOM inspector, CSS inspector, element highlighting, pixel rulers and guides.

And perhaps what I think is the coolest feature, an overlay mode to compare exactly what’s different for pixel-perfect alignment. Or if you cross your eyes, the web in 3D.

Finally, how you can get your dirty web developer paws on this awesome tool, and it’s a little complicated to say the least. The beta of this software available right now is downloadable from Microsoft.com (250MB). The catch being it only supports renderings between IE6 and versions of IE installed on your computer already, but it should ease the pain of testing for IE6/7/8 compatibility for a lot of devs.

The full and final version of this product will be bundled together with Expression Web 3, sometime later this year and will run as a separate standalone application. Unfortunately for the many Mac web developers out there, because Expression Web is not an application part of the Expression Mac suite, SuperPreview will not be available.

You can watch this announcement and more from MIX09 from the livestream website starting at 9AM PST (Las Vegas time), and not EDT (New York time).

http://www.istartedsomething.com/20090318/expression-web-superpreview-cross-browser-testing/