Archive for April, 2011

File Under: CSS
Apr
29
2011

Got Messy CSS? You’re not Alone

By

Woolly, the CSS sheep.

You just got a new web design gig. There’s a blank CSS file staring out from your favorite text editor. This time, you tell yourself, it’s going to be clean and simple CSS. No crazy descendant selector spaghetti code, no resorting to inline styles for quick changes, no !important. Clean, simple CSS built on established best practices.

Three months later you’re trying to figure out why the new #sidebar .row h3.smallHeader rule is going to affect the existing #sidebar .row header h3. You’ve failed. Again. But it’s okay, and you’re not alone.

In fact, CSS guru Nicole Sullivan thinks the reason you’ve ended up where you are again might even be because of “best practices.”

Sullivan is perhaps best known for having wrangled the massive and tangled CSS of huge, complex sites like Facebook into something even mortals can understand. In a talk at this year’s Webstock conference Sullivan calls out some so-called best practices of CSS that might in fact be part of the reason we end up with tangled CSS:

It is time to let ourselves off the hook. There is nothing we could have done by trying harder. There is no magic juju that some other developer has that we don’t. Following our beloved best practices leads to bad outcomes every. single. time.

What are those flawed best practices?

  • Classitis!
  • Never add an non-semantic element
  • Or, a non-semantic class
  • Use descendant selectors exclusively
  • Sites need to look exactly the same in every browser

No doubt some of Sullivan’s arguments will be controversial with Webmonkey readers, but she has a point: we have best practices, but we still end up with messy, difficult to maintain stylesheets — clearly something in those established practices is not working.

It’s important to note that Sullivan isn’t suggesting throwing out these ideas, just that developers ought to see them less as rules and more as suggestions. For example, don’t litter your markup with classes if you don’t need them, but when you do, don’t feel like adding a non-semantic class is the end of the world.

If you’d like to hear the entire talk, head over to the Webstock site for a video and some slides.

See Also:

Tags:
File Under: Web Services
Apr
29
2011

Amazon Autopsy Reveals Causes of Cloud Death

By

Amazon has apologized to customers affected by last week’s EC2 outage and offered a detailed post mortem about exactly what went wrong. The short answer is that a network update shifted traffic to the wrong router, which then wrecked havoc on Amazon’s US East Region Availability Zone.

In addition to apologizing, Amazon is giving affected customers “a 10 day credit equal to 100 percent of their usage of EBS Volumes, EC2 Instances and RDS database instances that were running in the affected Availability Zone.”

Amazon is also promising to improve its communication with customers when things go wrong, but as we pointed out earlier, the real problem is not necessarily Amazon. While Amazon’s services unquestionably failed, those sites that had a true distributed system in place (e.g. Netflix, SmugMug, SimpleGeo) were not affected.

In the end it depends how you were using EC2. If you were simply using it as a scalable web hosting service, your site went down. If you were using EC2 as a platform to build your own cloud architecture, then your services did not go down. The later is a very complex thing to do, and it’s telling that the sites that survived unaffected were all large companies with entire engineering teams dedicated to creating reliable EC2-based systems.

That may be the real lesson of Amazon’s failure — EC2 is no substitute for quality engineers.

See Also:

Tags: ,
File Under: Browsers
Apr
28
2011

AwesomeBar HD Packs More Awesomeness into Firefox

By

Firefox’s “Awesome bar” turned the humble URL bar into something more. One part web address, one part bookmark, history and open tab search tool, Mozilla keeps looking for ways to add more features to the Awesome bar.

The latest experiment from Mozilla developer Edward Lee is the AwesomeBar HD add-on which combines ideas from Mozilla Labs’ Home Dash and Prospector projects with the existing Firefox 4 awesome bar. Where Home Dash eliminates the URL complete, AwesomeBar HD just gets rid of the dedicated search box, replacing it with a set of search engine links within the URL bar.

if you’d like to take it for a spin, head over to the Mozilla Add-ons site and install AwesomeBar HD.

If you want to search for, for example, Webmonkey, just type in “Webmonkey” and then click the link “search the web” and Firefox will search Google. Click “books” and Firefox will search Amazon; click food and it will search Yelp.

Other categories include weather, maps, news, people, reference and more. Each category has several search provider options, for example, while the books category defaults to Amazon, hover over the link and you’ll find additional options to search Barnes and Noble or Google Books. AwesomeBar HD also works in reverse — click the category you’d like to search in and then start typing.

AwesomeBar HD does nothing you can’t do with a standard Firefox installation, provided you hunt down search engine plugins (or create your own bookmark shortcuts with keywords) for every site it supports. But finding several dozen search engine plugins is a pain and AwesomeBar HD makes it far easier to switch between them with a simple click.

While AwesomeBar HD is an interesting first effort, there are several things that could be improved. For example, the URL of the website you’re currently on is truncated to make room for the links in the URL bar. If you actually click on the URL, AwesomeBar HD will show the entire URL, but not being able to see it at a glance is annoying and potentially raises phishing concerns. Cutting down on the number of search options would leave more room for the URL.

At this early, experimental stage you won’t find any customization features in AwesomeBar HD. You can’t, for example, add more search engines, nor can you delete unused options. AwesomeBar HD also puts the emphasis on the mouse — you need to click to do anything. If you prefer keyboard shortcuts to the mouse, AwesomeBar HD will leave you wanting. Some have suggested adding an option to tab through search engines, but given the number of search engines AwesomeBar HD supports, that would be a rather slow way to select the one you want.

AwesomeBar HD is in it’s infancy and, in addition to being a little rough around the edges, there are some known bugs (we encountered a problem with unresponsive menus on OS X). If you’ve got ideas on how to improve AwesomeBar HD, be sure to let Mozilla know.

See Also:

Tags:
File Under: Browsers
Apr
27
2011

Chrome Covers Your Tracks with new ‘Flash Cookie’ Killer

By

Google has updated the dev channel of its Chrome web browser, adding a new option to delete so-called Flash Cookies. Technically known as “local shared objects” (LSO), Flash Cookies don’t go away when you clear your browser-based cookies. Unless, that is, you happen to be using the dev channel of Google Chrome.

Chrome’s new feature adds Flash LSOs to the list of items you can delete when you clear your browser data. To try out the new tool, grab the latest copy of the Chrome dev channel and head to the wrench menu. Look for the “tools” menu item and then select Clear Browsing Data.

Chrome’s new Flash Cookie cleaning tool works because of the new ClearSiteData API, which was developed by Adobe, Google and Mozilla. The goal is to make deleting plugin-based cookies as simple as normal, browser-based cookies. In Flash’s case the new API will make its official debut when Flash Player 10.3 arrives (it’s currently in the release candidate stage). Prior to the API deleting Flash cookies required navigating through the Flash Player settings dialog and visiting Adobe’s website.

Unfortunately most users are not aware of LSOs, let alone the labyrinthian process required to delete them. The new API turns over the task of managing plugin-based cookies to the web browser, meaning you can control everything from one place. At the moment only the Flash plugin supports the new API, but hopefully other plugins will follow suit.

Since Mozilla has been a part of the API development process, look for Firefox nightlies and Aurora to offer similar options in the coming months.

One thing to keep in mind, unless you have Flash 10.3 installed, the new API won’t work, which is part of the reason you’ll find the new features in Chrome — which ships with Flash built in — and not in Chromium, which does not bundle Flash. Once Flash 10.3 is a final release, look for other browsers to begin offering LSO delete tools as well.

See Also:

Tags: ,
File Under: HTML5, Multimedia, Web Basics
Apr
26
2011

Google Pools WebM Video Supporters for Patent Protection

By

Google has announced the new WebM Community Cross License (CCL) initiative. The new group is designed to create a patent-safe haven around Google’s WebM video codec for HTML5 video. Members of the new CCL initiative agree to license any WebM-related patents to each other under royalty-free terms.

The WebM codec is one of several ways web developers can deliver native HTML5 video on the web, without requiring the Flash Player plugin or other proprietary, non-standard tools. The other major codec, H.264, is older and more widespread, but carries expensive licensing fees for broadcasting sites like YouTube.

So far Firefox 4, Opera, Chrome and Internet Explorer 9 (via a plugin) all support the WebM codec. Apple’s Safari and Mobile Safari are the lone holdouts for H.264 (IE9 also supports H.264).

Microsoft, which many suspected would ignore WebM, has thus far remained cautiously supportive of WebM. While the company doesn’t include support out of the box, it has pledged to support users who “install third-party WebM video support on Windows.” Many of Microsoft’s concerns about WebM revolve around unresolved patents and licensing.

Google’s CCL initiative seems geared at least in part to assuage Microsoft’s patent fears, laying out in clear terms how participating companies will handle patents. In short, organizations that join the CCL agree to license any essential patented WebM technologies to other members of the CCL under royalty-free terms, affording each member a measure of protection against potential patent lawsuits.

For the launch Google has put together 16 companies including AMD, Cisco, LG and Samsung, as well as browser makers Opera and Mozilla.

The elephant in the room is the MPEG-LA organization which governs the licensing of the H.264 codec. MPEG-LA recently closed out its call for the submission of patents essential to WebM, but has yet to announce any lawsuits against WebM. That does not of course mean that MPEG-LA has failed to come up with any potential WebM patent violations. In fact, not announcing anything helps build the sense of patent fear, uncertainty and doubt that surrounds WebM at the moment.

But MPEG-LA may have problems of its own. The U.S. Department of Justice is reportedly investigating the group to see whether the organization is trying to stifle competition from Google. Our friends at Ars Technica report that DOJ investigators are “looking into whether MPEG-LA or its member companies (which include Apple and Microsoft) are making an active effort to cripple adoption of WebM.”

While WebM’s future may still be in doubt, Google is clearly pushing forward regardless. The company has already removed H.264 support from its Chrome web browser and recently began serving up WebM videos on YouTube. With the new CCL initiative Google has expanded its range of WebM allies beyond just browser makers and is well on its way to having a patent pool that can back up WebM against MPEG-LA.

See Also:

Tags: , ,
File Under: Programming, Web Apps, Web Services
Apr
25
2011

Lessons From a Cloud Failure: It’s Not Amazon, It’s You

By

Chaos Monkey will eat your cloud.

Amazon’s cloud-hosted Web Services experienced a catastrophic failure last week, knocking hundreds of sites off the web. Some developers saw the AWS outage as a warning about what happens when we rely too much on the cloud. But the real failure of Amazon’s downtime is not AWS, but the sites that use it.

The problem for those sites that were brought down by the AWS outage is the sites’ own failure to implement the one key design principle of the cloud: Design with failure in mind.

That’s not to say that Amazon didn’t fail rather spectacularly, taking out huge sites like Quora, Reddit, FourSquare and Everyblock, but as Paul Smith of Everyblock admits, while Amazon bears some of the responsibility, Everyblock failed as well:

Frankly, we screwed up. AWS explicitly advises that developers should design a site’s architecture so that it is resilient to occasional failures and outages such as what occurred yesterday, and we did not follow that advice

But perhaps the most instructive lesson comes from those sites that were not affected, notably Netflix, SimpleGeo and SmugMug. Netflix published a look at how it uses AWS last year and, by all appearances, those lessons served the company well, because Netflix remained unaffected by the recent failure.

Among Netflix’s suggestions is to always design for failure: “We’ve sometimes referred to the Netflix software architecture in AWS as our Rambo Architecture. Each system has to be able to succeed, no matter what, even all on its own.”

To ensure that each system can stand on its own, Netflix uses something it calls the Chaos Monkey (no relation). The Chaos Monkey is a set of scripts that run through Netflix’s AWS process and randomly shuts them down to ensure that the rest of the system is able to keep running. Think of it as a system where the parts are greater than the whole.

The photo sharing site SmugMug has also detailed its approach to designing for failure and why SmugMug was largely unaffected by the recent AWS outage. SmugMug co-founder and CEO Don MacAskill, echos Netflix’s redundancy mantra, writing, “Each component (EC2 instance, etc.) should be able to die without affecting the whole system as much as possible. Your product or design may make that hard or impossible to do 100 percent — but I promise large portions of your system can be designed that way.”

MacAskill also has strong words for those who think the recent AWS outage is a good argument for sticking with your own data center: “[SmugMug's] data-center related outages have all been far worse … we’re working hard to get our remaining services out of our control and into Amazon’s.”

“Cloud computing is just a tool,” writes MacAskill, “Some companies, like Netflix and SimpleGeo, likely understand the tool better.”

If you’d like to learn more about how designing for cloud services differs from traditional data-center setups, check out this excellent post on O’Reilly. Also, be sure to read Netflix’s advice and learn from Everyblock’s downtime by following the guidelines in Amazon’s own documentation.

Photo: Technically not a monkey. (DBoy/Flickr/CC)

See Also:

Tags:
File Under: Multimedia, Web Services
Apr
25
2011

Google Video Adds YouTube Export Option

By

Good news Google Video users, Google has given the video sharing site a reprieve. Early this month Google announced it would shut down Google Video’s hosting services on April 29. Now Google has abandoned that deadline and is offering a new option to export your movies directly to the company’s far more popular YouTube video hosting.

In a moment of candor Google has admitted that the lack of YouTube export option in the original announcement was a bad idea. “We … should have done better,” writes Mark Dochtermann, Engineering Manager at Google, on the YouTube blog.

To help smooth the transition, Google has created an “Upload Videos to YouTube” option on the Google Video status page. To migrate your videos you’ll need to have a YouTube account associated with your Google Video account. If you don’t head over to YouTube and set up an account using the same email address tied to your Google Video account.

There’s still one problem for some users though, the time restriction. If you’ve got longer videos on Google Video it’s unclear what happens when you try to migrate them to YouTube (which has a 15 minute limit on videos). Some users also report losing their upload time stamps in the migration.

Still, for most users this should be welcome news. Not only is there no need to panic about April 29th, moving your old Google Video movies into YouTube just became a whole lot easier.

See Also:

Tags: ,
File Under: Identity, Security, Web Basics
Apr
22
2011

EFF Wants to Secure the Web With “HTTPS Now” Campaign

By

The Electronic Frontier Foundation (EFF) has kicked off a new “HTTPS Now” campaign to educate consumers and help “make web surfing safer.”

The new campaign is a two part effort. First the EFF would like to encourage users to install the HTTPS Everywhere Firefox add-on, which will automatically redirect you to https connections. HTTPS Everywhere makes sure you’re always using a secure connection when you visit Gmail, Twitter and several dozen other sites; you don’t need to worry about checking the URL everytime you login.

While HTTPS Everywhere is a good suggestion for users, the primary thrust of the HTTPS Now campaign is aimed at popular websites. After all, HTTPS Everywhere only works if your favorite sites offer secure connections, and an alarming number of sites do not.

The EFF has partnered with Access, a digital freedom activist group, to create the new HTTPS Now website. The new site will keep track of which sites offer HTTPS connections, how much of the site is secure and whether or not the site mixes secure and insecure content.

Why all the fuss about HTTPS? Well, every time you log in to Twitter, Facebook or any other service that uses a plain HTTP connection, you expose your data to the world. It’s a bit like writing your username and password on a postcard and dropping it in the mailbox.

There is a better way, the secure version of HTTP — HTTPS. That extra “S” in the URL means your connection is secure, and it’s much harder for anyone else to see what you’re doing. Think of the extra “S” as the envelop that keeps prying eyes from looking at your postcards.

The problem gets a bit more complicated than just HTTPS though. Most sites already use HTTPS to handle your login info — that’s a good first step — but once you’re logged in the sites often revert back to using an insecure HTTP connection. That means you’re vulnerable to simple attacks like those made possible by the Firesheep Firefox plugin. Firesheep sniffs network traffic and looks for insecure cookies which it then uses to spoof your login credentials to the site. Firesheep allows other people to quickly and easily become you on the web.

So why doesn’t the entire web use HTTPS all the time? The answer is slightly complicated, but the primary reason is speed. HTTPS can’t be cached on CDN networks and there are also some (minor) costs involved with HTTPS certificates.

But obviously neither cost nor minor speed hits have stopped big sites like Twitter, Facebook, Gmail and Flickr from implementing HTTPS. The EFF would like to encourage other sites to follow suit.

If you’d like to see how your favorite sites fair when it comes to protecting your data from traffic snoops, head on over to the HTTPS Now website.

Photo: Joffley/Flickr/CC

See Also:

Tags: ,
File Under: CSS, Web Standards
Apr
22
2011

Speed Up Your Website With CSS 3

By

The drive behind the adoption of new web technologies often revolves around experimentation — developers use HTML5 or CSS 3 because it’s something new and exciting. That experimental drive is great for pushing boundaries and discovering cool new possibilities. But there’s another, more practical reason, to start using the newest features of the web, particularly in the case of CSS 3, which can make not only speed up your development time, but make your site faster as well.

Eliminating images in favor of CSS 3 transitions, web fonts and animations means fewer HTTP requests, fewer files for users to download and faster page loads. Examples include replacing rounded corner images with border-radius, ditching faux-shadow images for drop-shadow and replacing images of fancy fonts with the actual web fonts.

In some cases the fallbacks necessary for older browsers will negate the speed gain for those that aren’t using modern web browsers. You need to be aware of your audience and which browsers make up the majority of your site’s visitors before you jump in with both feet, but in those cases where newer browsers dominate, transitioning your site to CSS 3 can provide a significant speed boost.

Our friends at Smashing Magazine recently broke down the process by creating the same page twice, once using CSS 3, and then again using more traditional techniques like background images for buttons and rounded corners. The result is that CSS 3 not only sped up development time, but also made the page load faster in the browser.

Not convinced? Last year Google began using CSS 3 rules to render elements of the Gmail interface in those browsers that can handle CSS 3. The company reports that using CSS 3 sped up rendering times by 12 percent.

Naturally the speed gains possible by transitioning to CSS 3 will vary considerably depending on the design of your site and how well it lends itself to CSS 3′s new features. But even a tiny speed boost, combined with the great flexibility of CSS 3, the ability to build responsive websites and the ability to tweak designs without opening Photoshop, makes CSS 3 not only fun and experimental, but downright necessary.

See Also:

Tags:
File Under: HTML5, Multimedia, Web Apps
Apr
20
2011

YouTube Begins Serving Up Native WebM Video

By

YouTube has announced it will begin offering HTML5 videos in the WebM codec to web browsers that support it. So far YouTube says that it has encoded 30 percent of its videos in WebM, which accounts for 99 percent of all traffic to the site.

YouTube’s move to WebM is no surprise; Google has already dropped the competing H.264 codec from its Chrome web browser and it was only a matter of time before YouTube began moving to WebM as well.

The WebM Project, a partnership between Google, Mozilla, Opera and dozens of other software and hardware makers, provides web developers a way of embedding video and audio in HTML5 pages without plug-ins, and without the need to pay the expensive licensing fees that surround the competing H.264 codec. Currently WebM video works in Firefox 4, Chrome, Opera and Internet Explorer (via a plugin). The other main HTML5 video codec, H.264, works on all Apple devices and in Internet Explorer 9.

While YouTube is adding WebM support, it isn’t following Chrome’s lead and dropping H.264. The site will continue to serve up H.264 video to those browsers that support it (in other words, Safari, Mobile Safari and Internet Explorer 9).

Despite the new WebM support, YouTube still isn’t serving up HTML5 videos by default. If you’d like to get in on the new WebM fun, you’ll still need to sign up for the opt-in HTML5 player.

See Also:

Tags:
« OLDER POSTS