Now you can make your Meebo using the code of soashable. You can download the source code of soashable fom it’s project page on google code, by clicking here

• 2000 missing you e rotic

Let’s consider this standard input field:

<input type="text" value="Text." disabled />

Pretty standard stuff. Your web browser will automatically style it a little, but mostly just prevent the user from editing without any real visual hints. But let’s add some basic CSS to convey the state of the input, and to standardise it across our site and on most platforms. If we add the following CSS:

input[disabled] {
	border: 1px solid #999;
	background-color: #ddd;
}

But wait – our demo uses inline styles, but your browser might not have just styled that properly if we used a full CSS declaration. We don’t set a value for the disabled attribute – it’s a minimized attribute. To get IE to play nicely with it (and for XHTML), we’ll have to set the value to “disabled”:

watch the wrestler in HD

<input type="text" value="Text." disabled="disabled" />

If possible, just for total compatibility, we can also add a “disabled” class that IE6 will respect and apply styles for correctly.

<input type="text" value="Text." disabled="disabled" class="disabled" />

We can then change the CSS selector we’re using:

input[disabled="disabled"], input.disabled

And we’re done! This works across every major browser – IE6+ and FF1.0+ tested, and Safari 3 / Opera 9.5 should be fine as well. The Sitepoint CSS reference has further information on compatibility, available here.

Finally, if you want to see how Firefox styles disabled fields by default, load up your resource://gre/res/forms.css file (you’ll have to copy and paste it to your address bar). There are a number of lengthy selectors with just a few rules, but here’s the big one, way down the bottom:

button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}

GrayText is actually a system color – it’s defined by the CSS 2.1 specification and supported on and off in various browsers. These “special” color keywords are supposed to match the local system styles – on a Windows machine, for instance, Firefox would use the color: GrayText rule to style text in disabled fields with the same color that the local Windows system uses. A list of options is available on the CSS reference as well.

1. ReCSS
ReCSS makes testing out CSS hacks easy. When you alter your CSS in an editor and save the new stylesheet, you have to reload the entire page in your browser to see the effect of the changes. Sure, you can make the edits in Firebug, but Firebug’s inbuilt editor isn’t great for much beyond the slight tweak. With AJAX-powered pages and dynamic state, reloading the page isn’t quite as simple as it sounds.

Enter ReCSS: this handy little bookmarklet will keep your existing page entirely intact, but reload all the CSS sheets. You may see a brief flash of white in your browser as current styles are removed, before your page renders almost immediately with the latest set of CSS rules. Check out the project page.

2. Layout Grid Bookmarklet
Working out pixels and laying out a page is tricky, especially when working from detailed Photoshop mockups and sketches. After some suggestions from the community about using a background image of a grid for layout, Andy Budd created the Layout Grid Bookmarklet, which creates a drawing-paper style grid against the background of your page to generally measure elements with. Check out his blog post about it and the Layout Grid Bookmarklet.

3. XRAY
X-RAY is a great Firebug/Safari/IE Dev-bar style inspector for web pages. It features a simple point-and-click interface, revealing some basic CSS properties and inheritance hierarchy of the selected element, as well as outlining it and displaying dimensions details. The actual interface is quite slick, and hides away neatly when you no longer want it. If you aren’t at your preferred Firebug-equipped machine, XRAY is definitely something to have on hand. Check out the project page and the XRAY bookmarklet.

4. Aardvark
Aardvark is similar to XRAY, but provides a lot more functionality for traversing the DOM visually. Ever wanted to pick a particular element, then see what happens if you move up n levels, go to the next node across, or even dive in and start editing innerHTML there and then? Aardvark provides a point-and-click interface similar to XRAY, and then a set of keyboard shortcuts for moving around, focusing on finding what you need. Aardvark is actually available as a Firefox extension, although the bookmarklet is quite convenient. Head to the project page and try the Aardvark bookmarklet.

5. Slayeroffice Favelet Suite
We’ve saved the best till last – this favelet suite will blow you away. It features everything from DOM charts to mouseover inspectors, color lists to font resizers, rulers and even a hidden field modifier. All in all, this collection of 15 utilities all in the one bookmarklet is a must for any front-end web development. While it was last revised in 2004, it in many ways offers far more functionality than Firebug, with far more detail provided by its various tools. When you’ve finished with it it, just hit escape to quietly hide it away. Head to the project page and grab the Favelet suite.

The Selenium project provides a set of tools to handle the testing of web applications. Selenium itself is simply a portable software testing framework, where the tests can be written in HTML or a programming/scripting language. The difference with Selenium is that tests are run directly within a web browser, “just like real users do.”

As a result, Selenium are very much oriented towards client-side results. For example, one of the simplest tests you can run in Selenium is loading a URL and checking if a certain snippet of text is or isn’t on the page. Selenium offers a number of applications built around the same standard, but we’re interested in Selenium IDE, a Firefox extension that allows tests to be developed and run from within Firefox with no additional software installation.

To get started with Selenium, just head over to the addon page to download Selenium IDE. Once you’ve installed it, restart Firefox and find Selenium in your Tools menu. Load it up, and find an application you want to practice on – one of your pet projects, maybe, or a website you frequently visit. Because Selenium runs on top of a standard web browser, it doesn’t care what you test, as long as it has HTML to work with.

The moment you start Selenium IDE, it starts recording commands. Selenium testing is composed of “test suites”, of which you may have one per application. Each suite includes cases, one of which has been created already and helpfully titled “Untitled”, and each cases consists of a series of commands to be executed in succession. When you start navigating around the current page, Selenium IDE will add those navigation procedures to the current test case, so that they can be replayed at a later stage. Start by clicking on a link; you’ll see a “clickAndWait” appear in the table panel of your Selenium window.

To create your Selenium tests, you can simply navigate around your website while recording. Selenium records everything from clicking links to entering data in input fields and submitting forms. To stop recording, hit the red circle in the top-right. At a basic level, this tests that your pages are being served correctly. You can then add in commands within the table – I suggest starting with “verifyTextPresent” to check if a snippet of text is found within the page (expressions allowed).

Once you’re finished, your test window might look something like this:

To run your tests, just hit the green play buttons – you may need to slow down Selenium to wait for pages to load if you’re running tests over the internet. Remember that some of Selenium’s tests are based on the DOM, and will fail if the DOM hasn’t loaded yet even if the application is running fine.

To save your tests to run them later, just use the File menu. In future posts, we’ll look at more complex use of Selenium and the multitude of custom commands available. In the meantime, why not subscribe to our RSS feed?

Fiddler is actually a tool provided by a Microsoft employee, although works seamlessly with any browser. It requires the .net framework, and so is most likely a Windows-only application, although it may be run on Mono. When Fiddler is running, IE requests are automatically routed through it, and it runs a local transparent proxy server on port 8888. Firefox and other browsers can then be configured to route their requests through Fiddler. (I use SwitchProxy for added simplicity.)

As each HTTP request comes through, Fiddler offers a wealth of options for analysing the request:

The inbuilt request builder enables you to use a past request as a template to send a new HTTP request manually. Fiddler can even autorespond to requests to the proxy, and expose the proxy to clients on the local network. The application also includes a number of other handy tools, including an authentication mechanism. Fiddler’s rules-based proxy system is even scriptable (C#), and a mini-editor with syntax highlighting and reference is available for constructing rule scripts.

Fiddler is an invaluable tool for analysing problems with a web application where HTTP may be an issue, as well as generally observing the movement of a client through the application. It overcomes HTTP’s statelessness with its session-based approach, and integrates well with other tools. It’s also a very convenient HTTP proxy. To get started, just head over to the project page.

The 10/90 rule is also a reproach to companies who tend to spend too much on their web analytics service, sometimes amounting to tens of thousands of dollars, when the same metrics can be had with free tools such as Google Analytics. Avinash recommends the following steps to cut cost on tools and rededicate resources to the more vital task of analysis:

• Apply for a free Google Analytics account at GA Sign Up Page
• Once you get the code implement Google Analytics on your website in parallel with your favorite expensive analytics tool
• Get a comfort level for delta between the two sets of key numbers (you know visitors, conversions, page views etc etc) and create a multiplier (my tool shows visitors 10% higher and page views 10% lower than Google). You will use this multiplier in future to compare year over year trends if you want to.
• Cancel the contract with your favorite expensive analytics vendor and take that $50k or $100k or $200k and: 1) Hire a smart analyst for between $50k to whatever maybe your areas great salary 2) Put the rest of the money in your pocket.
• Your smart analyst will be able to extract just as much value from GA than your old tool, in fact my prediction is that it will be a lot more.
• As the level of savvy in your org grows, as the level of sophistication of supporting processes increased, perhaps in two years you might be ready to plunk down $200k on a web analytics tool and then be ready to extract a corresponding amount of value from it.

How long before a new platform weakens Google’s virtual monopoly? O’Reilly frequently sites the Internet as the dark horse that blind-sided Microsoft. What, if any, will do it for Google? True, nothing lasts forever, but even a few years is a long time, and damage may have already be done by the lack of real competition. The phrase “absolute power corrupts absolutely” has been thrown around a lot, but it’s true. I do love using a lot of Google’s services, but it needs something to keep it honest and on its toes.

What’s gonna stop Google from gobbling (buying out) the “next big thing”? They bought YouTube relatively early and gained dominance in online video distribution. Blog syndication became popular and they acquired the most widely used RSS publishing service, FeedBurner. They understand how important the mobile market, and now they’re launching Android. Google always seem to be one step ahead of the pack. I’m wondering if perhaps it’s not a new product or platform that will take the thunder away from Google. Maybe it will just become too big that it will collapse under its own weight.

How much more brain drain can Yahoo! take? While technology is important, it’s people that run a company, and employees are still its best asset. The alarming number of executives leaving just shows the continued loss of confidence of its own people. Unless drastic measures are taken by the top management to address this, I’m not sure how they can recover. For their sake, I hope Jerry Yang can come out of his shell and address the employees’ concern and give them a clear direction. In short, be a leader.

Yahoo! has let Google win this battle, hoping to regroup and win the war. That’s a tall order, and we can only speculate on their next move.

Earlier this week, they announced that as long as you’re logged in with your Google account, you’ll be able to see a normalized graph of search query trends with numbers, and you can also export the data to .CSV (handy if you like to do more in-depth statistical analysis). More recently, they’ve added a new layer that allows you to see not only the popularity of search queries, but this time of websites themselves. From the Google Trends help page:

When you enter the address of a website into the search box, Trends for Websites shows you a graph reflecting the number of daily unique visitors (the number of people who visit a website) to that website. You can see these numbers on the graph after you’ve signed into your Google Account. Under the graph, you’ll also see a list of regions where visitors originated from, other websites that they have also visited, and terms they have also searched for.

As an example, here’s the search trend for keywords “Facebook” vs “MySpace”, and here’s the website trend of the domains “Facebook.com” vs “MySpace.com”.

As cool as it might seem, Google Trends for websites looks like it has a long way to go. For instance:

• Only top level domains are included. Subdomain data not available.
• Accuracy needs improvement, as Google candidly admits.
• Only useful for websites with relatively high-volume traffic (at least a few thousands per day).
• People can’t request inclusion for their site, or ask for their site’s removal if it’s already there.
• Curiously, it doesn’t show results for some Google-related sites (so far I’ve tried YouTube, Orkut, and even Google itself).

If these things can be addressed, particularly the accuracy issue, then Google Trends can become the web stats authority – Goliath keeps getting bigger. Alexa, et al should definitely rethink their strategies. For more information, read more about Google Trends for Websites.

MySpace has been quite popular for some time, and some people have actually used it to successfully promote their sites/businesses. I, however, could never bring myself to create an account with them. The reason? MySpace is a sight for sore eyes. The pages are crammed with widgets at every nook and cranny, they take forever to load, loud thumping music shocks you into a heart attack, navigation makes you run in circles, and the blogs look like they were stuck in the 90s. Clearly, it’s in dire need of a major makeover, and that’s exactly what they’re promising. So, better late than never?

MySpace 2.0

So what exactly is changing? Take a look at this mockup from Adrants. The layout is cleaner and the elements blend much tighter. In keeping with design trends, there are plenty of rounded corners, the glassy look, “cute” icons, subtle colors and gradients. As for navigation, AJAX will reportedly be used. Internal search will now be handled by Lucene, an open-source search engine, while MySpace TV will be upgraded to Flash 9, capable of HD and full screen. A nice addition is improved profile editing for customization.

What’s in it for you?

Its owner, NewsCorp, is leading this change to boost their revenues, but what’s in it for you? Well, first is that if this so-called MySpace 2.0 becomes successful, the demographics may change in its favor. MySpace has always been criticized by marketers as a site for the young and the penniless, while Facebook is attracting more grownups with purchasing power. A more sober-looking MySpace may just get some converts, and attract those still uninitiated to the social networking phenomenon.

Second, this new design promises bigger ads spaces for promotion. No word yet if they’re going to implement Facebook-like ads, though personally I don’t see that as being far off. Third, competition is always great for consumers. Facebook just caught up with MySpace in terms of number of unique users, and from here on out these two giants will be giving it all they’ve got to make their services better. MySpace’s makeover is only the beginning of good things ahead.

Phase I starts today, June 18. Expect gradual changes in the coming months.

The signup validation is the bane of a web application – despite disposable emails more and more common, site owners and sales staff continue to insist on tying an email address to every user. The validation email, a common task for web developers, can quickly take up far more development time than it involves user time. Making the process of building and maintaining email routines as efficient as possible is simple better for everybody.

The challenge is this: an email, once sent, is not actually sent. For example, when PHP’s mail() function returns true, it simply means that the message has been passed on to the system’s mail server and received succesfully. The actual email could be sent many hours later, or never at all.

Fakemail, from the creators of SimpleTest, is a mail server gateway of sorts, in that it replaces your local mail server for momentarily. When an email is sent on the machine, Fakemail will pick it up and divert it to a predictable location on the filesystem.

We can then create reliable email systems in three easy steps:

1. Build a single, common email routine for the application
2. Run the email routine during build tests
3. Check the email was sent

Building a common email routine

• da vinci code dvd download

This is the single most important factor. As your email routines grow in complexity beyond a single call to a native language API, it’s important that all your email routines use the same final message sending code, if not exactly the same emailing system altogether. For PHP, I recommend the PEAR mailing classes.

Run the email routine during build tests
Use Phing to automate your build process, if only to make sure you run your unit tests every time. Then use SimpleTest or PHPUnit (or even Selenium) to start Fakemail and then run the signup (or similar) routine, causing an email to be sent.

Check the email was sent
Finally, use a unit test or other server-side script to verify that the email was sent: assert that Fakemail created a particular file e.g. templaterecipient@localhost.1 will be created for the first email sent to templaterecipient@localhost.

Fakemail coexists happily with unit testing; in fact, the project website offers sample code for SimpleTest, useful for PHP developers. A similar routine in other web stacks should be fairly trivial to setup; the SimpleTest unit test is barely 20 lines long.

Testing email is not hard, and it can save a lot of stress later. To get started with Fakemail, just check out the extensive tutorial on the project page.