Archive for December, 2011

File Under: Browsers
Dec
13
2011

Sync Your Browsing Life With New Chrome 16

By

Chrome's new profile switcher

Google has released Chrome 16, adding new syncing and user switching features to its increasingly popular web browser.

If you’re already using Chrome just sit tight and it will automatically update. If you’d like to try out the latest version, head over to the Chrome downloads page.

Chrome 16 is most notable for its new syncing tools, which make it dead simple to move between Chrome installations without losing your data. For example, you can now keep your work installation in perfect sync with the your home installation, with bookmarks, apps, extensions, browsing history, and other settings moving seamlessly between the two.

The only catch is that to make the new syncing features work, you’ll need to link Chrome with your Google account. Linking up Chrome with your Google account also means that you’ll be automatically signed in to any Google services you visit.

Chrome 16 also introduces a new user switching model that makes it easy for multiple people to share the same browser and still keep their data separate. Much as you can switch users at the OS level, keeping separate accounts for multiple users on the same machine, Chrome’s user switching enables the same sort of sharing, but at the browser level.

As a number of readers pointed out when we reviewed the beta version, the multi-user scenario isn’t all that common, but the same feature can be used to stay logged in to two entirely separate Google profiles at the same time. For example, if you have a work identity with all your work data and extensions, as well as a personal identity, you can quickly switch between the two. It’s certainly possible to do this without Chrome’s new user switching, but this method makes things a bit quicker and smoother.

One thing to keep in mind is that user switching in Chrome is nowhere near as secure as user switching at the OS level. When the beta was release Google warned that:

this feature isn’t intended to secure your data against other people using your computer, since all it takes is a couple of clicks to switch between users. We want to provide this functionality as a quick and simple user interface convenience for people who are already sharing Chrome on the same computer today. To truly protect your data from being seen by others, please use the built-in user accounts in your operating system of choice.

In other words, the new switching features aren’t something you’d want to enable if you’re just letting someone you don’t know well borrow your laptop for a minute. However, so long as you’re sharing Chrome with people you trust, the new user switching features make it easy to share a browser or just maintain two Google profiles simultaneously.

For more details on how the new syncing features work, check out this video from the Google Chrome blog:

Tags:
File Under: CSS
Dec
12
2011

Write Better CSS With ‘Knyle Style Sheets’

By

An example of the docs generated by Knyle Style Sheets (image via Kyle Neath)

CSS is complicated.

Understanding how CSS works is the first hurdle, but even after you understand the box model and other complexities you still won’t necessarily understand how to organize your CSS code. It seems like with most projects nothing turns to spaghetti code quite as fast as the CSS files.

Kyle Neath, Director of Design at GitHub, wants to make working with stylesheets a bit easier and he believes that the way to do that is for teams to create better documentation. That should be no surprise given GitHub’s obsession with documentation, but Neath has gone a step further than just telling you you should document your styles, he’s actually created a way to do it — Knyle Style Sheets.

The idea is to write documentation within your styles that can then be process into what Neath calls “a living styleguide.” It works a bit like Docstring processors for Python or Neath’s inspiration, TomDoc. Here’s how Neath describes his stylesheets:

Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline. This means it works great with ideas like OOCSS, SMACSS, SASS, and LESS.

If you’re curious, head over to GitHub and look over the KSS documentation.

Rails fans can also check out developer Garrett Bjerkhoel’s KSS Rails which provides a Rails 3 engine you can add to your existing application to automatically parse any CSS files found in app/assets/stylesheets.

It won’t solve all the hassles of working with large and complex stylesheets, but documentation can help tame some of the problems with CSS by ensuring that everyone is on the same page. Never underestimate the power of good documentation.

File Under: Web Standards
Dec
12
2011

Is Apple Using Patents to Hurt Open Standards?

By

Opera developer Haavard Moen has accused Apple of repeatedly using patents to undermine the development of web standards and block their finalization.

World Wide Web Consortium (W3C), the industry group that governs and oversees the development of web standards, requires that every specification it approves be implementable on a royalty-free basis, barring extraordinary circumstances that justify an exception to this rule. The specifications can contain patented technology, as long as royalty-free patent licenses are available.

Members of W3C—a group that includes representatives from Apple, Microsoft, Google, Mozilla, and Opera—are required to disclose any patents that they hold that are relevant to each specification. Depending on how far the specification is through the standardization process, they have between 60 and 150 days to make this disclosure.

If royalty-free licensing is available, the specification can proceed as normal. Participation in the development of a particular specification obliges W3C members to offer royalty-free licensing for technology used in that specification. Nonparticipants can also voluntarily offer a royalty free license, but they are not obliged to.

If, however, there is no commitment to offer royalty-free licensing for the patents in question, a Patent Advisory Group (PAG) is formed. The PAG will then assess whether the patent is truly applicable to the specification, and if so, how best to address the issue. The PAG might then seek prior art to invalidate the patent, or it might recommend that the specification be modified, to work around the patent. It might even advise abandonment of the specification. Only in exceptional circumstances will it decide that the specification should stand, in spite of the lack of royalty freedom.

Without an appropriate patent grant, browser vendors—whether open source or proprietary—cannot implement the specification without opening themselves up to a lawsuit. Such specifications would be, at best, an extremely risky proposition for anyone seeking to develop a browser, and none of the major browser vendors would even consider implementing a specification with known unlicensed patents.

Haavard identifies three separate occasions, twice in 2009, and again in 2011, where Apple has disclosed patents and not offered royalty-free licensing. In the first 2009 patent claim, Apple said that it had a patent covering W3C’s “widget” specification. A PAG was formed, and determined that Apple’s patent was not relevant. In the second 2009 claim, Apple claimed to have two patents covering W3C’s widget security specification. A PAG was again formed. It decided that one patent was not relevant, and the other didn’t apply. With both 2009 claims, Apple waited until the last minute to disclose its patents.

Touch Events

This time, Cupertino is claiming to have three patents, and an application for a fourth, that cover some of W3C’s touch event specification. This time the disclosure was made with about a month left to go. Again, the lack of royalty-free licensing means that a PAG is likely to be formed.

This in turn will delay the development of the specification and cost W3C members further time and money. The PAG process is not quick; the widget security PAG did not deliver its verdict until October of this year.

Haavard’s conclusion is that there is a pattern of behavior here; that Apple is trying to disrupt the standards process with its patent claims. He references the touch specification in particular—this is plainly an area where Apple has lots of expertise and interest in the technology, but the company opted out of working on the specification. If Apple had worked on the specification, it would have had to disclose sooner and offer licensing, and Haavard believes that avoiding this commitment is why Apple refused to work on the specification.

Apple’s is acting within its rights. W3C obliges members to disclose patent claims, and Apple is duly disclosing them. However, it’s easy to be sympathetic to Haavard’s argument. The two prior PAGs that resulted from Apple’s refusal to offer royalty-free patent licenses delayed and inconvenienced W3C, but ultimately on both occasions the groups decided that Apple’s patent claims were irrelevant. If Apple was hoping to keep some technology to itself, it did not succeed.

Moreover, W3C doesn’t require patent-holders to give up their competitive advantage. It’s acceptable to W3C for the royalty-free patent licenses to only cover implementations of the W3C specifications; if Apple wants to permit the royalty-free use of its touch patents in HTML5 browsers, but nowhere else, this would be an option. Such terms would allow browsers to implement the standard but still keep the technology off-limits to, for example, Android. But Apple did not offer such terms before, and so it seems unlikely that it will offer such terms this time.

Further, the only likely result of this is that Apple’s patents simply get worked around. W3C’s aversion to royalties means that it’s unlikely that it would accept any non-free license (should Apple even offer one), and the importance of touch input to phones and tablets means that W3C is unlikely to abandon the specification altogether. There’s no win possible for Apple—just wasted time and money for those seeking to make the web a more effective, more open platform.

Indeed, the result might even constitute a loss for Apple; the prior art that PAGs can uncover could jeopardize the patents themselves. The PAG subjects the patents to a certain amount of scrutiny—scrutiny that could be avoided through provision of a suitable license.

Apple has thus far not responded to our request for comment.

Apple’s work on WebKit and with W3C has undoubtedly helped the web community. But actions such as this show the company’s approach to standards and intellectual property is, at best, inconsistent, and and worst downright unhelpful: if open standards and Apple’s IP interests conflict, it’s the IP interests that win out. This may be good for Apple, but it’s bad for the open web.

This article originally appeared on Ars Technica, Wired’s sister site for in-depth technology news.

Tags: , ,
File Under: APIs, Web Services
Dec
9
2011

Getting Started With Twitter’s Embedded Tweets Feature

By

Embed a tweet in any webpage

Somewhat lost amidst the news of Twitter’s revamped interface is a slightly more interesting tidbit for web developers: Twitter posts can now be embedded in other pages.

The new Embedded Tweet feature works just like a YouTube movie, offering a short HTML snippet that you can copy and paste into any third-party website. Unfortunately using the Embed Tweet feature from Twitter is somewhat awkward since it’s buried in the new interface. First you need to click on a tweet, then click “details” and then you’ll see the embed option.

The real benefit of the embed feature lies with third party platforms like Twitter’s two launch partners WordPress and Posterous. Users of both services can now simply paste a link to a tweet and it will automatically be converted to an embedded tweet, no cut and paste necessary. For example, just drop this code in your WordPress.com blog and it will automatically be converted to an embedded tweet:

[tweet https://twitter.com/twitterapi/status/133640144317198338]

If you’d like to implement something similar on your own site Twitter now has an OEmbed endpoint you can query to convert Twitter links to embedded tweets. Those not familiar with OEmbed can check out our OEmbed tutorial, but, in a nutshell, OEmbed is a standard format where you send a URL and the host site then sends back the necessary embed code.

There are three steps to Twitter’s OEmbed process:

  1. Obtain an URL to or ID number of the Tweet you want to render.
  2. Make a request to the GET statuses/oembed endpoint, passing the Tweet URL or ID as a query parameter.
  3. Render the html property of the response, as well as a <script> element pointing to //platform.twitter.com/widgets.js, if you want the embed to be interactive.

If you choose to render the tweet using Twitter’s widgets.js, the raw HTML will be converted into an interactive tweet. The fancy embedded tweet script uses Web Intents to allow users to reply, retweet, or follow the user directly from the embedded tweet. See the Twitter developer site for more details on Twitter’s widgets.js and how to use OEmbed to embedded tweets to your website.

Tags: ,
File Under: Humor, Visual Design
Dec
9
2011

Forget New Twitter. Check Out Old Facebook

By

1997 called. Your CRT is ready.

The tech press is abuzz, debating the merits and failures of the new (new new?) Twitter web and mobile designs.

If you’re like most, you aren’t even seeing Twitter’s new website just yet, so if you’d like to contemplate something a bit more fun on a Friday morning, consider what Twitter might have looked like had it been around in 1997.

You might remember 1997, the heady early days of web design — 1-pixel spacer images, animated gifs, tables with gray borders and a magical new idea called “cascading stylesheets.”

How would Twitter have looked in that world? We’ll never know, but thanks to a new art project dubbed “Once Upon” you can see what Facebook, YouTube and Google+ might have looked like had they been around in 1997. Once Upon was created by artists Olia Lialina and Dragan Espenschied, who describe the project as “three important contemporary web sites recreated with the technology and spirit of late 1997, according to our memories.”

That’s right, Facebook, YouTube and Google+ redesigned in the spirit and look of 1997. As an added bonus the demo site has been set up to limit bandwidth at a 1997-esque 8 kB/s so it loads just as painfully slow as it would have on dialup.

Naturally all three sites are “best viewed with Netscape Navigator 4.03 and a screen resolution of 1024×768 pixels, running under Windows 95″ (that resolution actually seems a bit large for 1997, but that’s okay). If you can’t find a Windows 95 machine in the closet fear not, the demo site will work in any web browser that supports frames.

[via Today and Tomorrow]

Tags:
File Under: Social, Web Services
Dec
8
2011

Google Adds Google+ Info to Gmail Contacts

By

Google+ Circles in Gmail

Google now includes Google+ profile information within contacts lists, both in Gmail and in the standalone Google Contacts manager. In addition to Google+ information about your contacts any Google+ circles you’ve set up will now be available inside the contacts manager.

If you’d like to see the new features in action, head over to the Google Contacts page (or click the contacts link in your Gmail account). Note that so far the integrated Google+ contacts don’t appear to be available for Google Apps users.

The move is part of Google’s slow, but steady progress toward its goal of adding Google+ features to all its myriad services.

The new integration with the contacts list means that any Google Profile data your contacts have entered will now show up below any information you’ve added. Alex Chitu, writing at Google Operating System, notes that you can combine the two sets of data — what you’ve entered and what your contacts have entered — by clicking the “more” link on a contact page and selecting the “[Show external data] inline” option.

Chitu also reports that the Google Profile data is “automatically added when you enter an email address associated with a profile.” If you don’t want the added social data you can delete the corresponding email address and it will be removed.

Tags:
File Under: CSS, HTML5, JavaScript
Dec
7
2011

Celebrate the Holidays With Advent Calendars for Web Nerds

By

The holiday season is upon us and for web nerds that means only one thing — advent tutorials.

Sure, it might be getting colder, possibly even snowing where you are, but the real way a web developer knows that the holidays are here is that 24Ways, the annual advent calendar for web nerds, is out. That means it’s time to learn new tricks, re-learn best practices and get a leg up on some of the year’s best ideas in web development.

This year’s 24Ways has a decidedly responsive design slant to it (so far anyway). Developer Jeremy Keith weighs in with a tutorial on how to use conditional loading for responsive designs. Adaptive images creator Matt Wilcox also has a great in-depth look at how his technique can serve up the appropriate image size without changing your HTML markup.

Other highlights include a great article from Rich Thornett on the hazards of relying on third-party widgets within your pages. Thornett’s solution is to load your widget content into a hidden <div> at the bottom of the page and then use a local script to move the loaded content from the hidden <div> to its display location. That way, should your third-party widget fail to load, at least it won’t stop the rest of your page from loading.

Also be sure to check out Drew McLellan’s walk-through of CSS 3′s unicode-range. By adding the unicode-range property to a @font-face rule, you can, for example, specify a different font just for fancier ampersands. McLellan covers how to make it work and how to handle the (inevitable) browser shortcomings.

Awesome as 24Ways is — and we’re looking forward to seeing the rest of it — it’s certainly not the only advent calendar around for web nerds. The Mozilla Developer Network has an advent calendar up with some nice articles on topics like WebGL, though in this case most of the articles listed are already up elsewhere on the web.

Somewhat more interesting, especially for those of you who want to get even nerdier than usual this year, is the Performance Calendar. This advent calendar is devoted to tackling the often confusing world of website optimization. All the posts are worth a read, but be sure not to miss Guy Podjarny’s article on why “inlining everything” is not the answer to your site’s speed problems. Also worthwhile is Tim Kadlec’s detailed investigation of mobile networks, appropriately titled: Carrier Networks: Down the Rabbit Hole.

Altoids Advent Calendar photo by Kim Taylor/Flickr/CC. For instructions, visit her blog.

File Under: CSS, Web Standards
Dec
7
2011

DocHub.io: CSS, HTML Documentation in a Clean, Searchable Site

By

The web is filled with great documentation for web developers. But sadly finding that great documentation is not always easy. Take the Mozilla Developer Network (MDN), for example. Mozilla’s developer site offers a wealth of documentation on CSS, JavaScript, HTML, SVG and more, but navigating through it can be tedious — there’s no global menu and searching is downright awful.

That led developer Rafael Garcia to create instaCSS, a faster means of browsing through the CSS documentation from MDN. Thanks to a much better search feature and a cleaner, simpler design with a nice global menu, instaCSS proved a hit with Hacker News readers. Due to popular demand Garcia has since moved the site to the broader DocHub.io domain and expanded to cover CSS, HTML, JavaScript and Dom docs.

Garcia has released his DocHub effort on GitHub, which means you can set up your own local instance for those times when you don’t have internet access (admittedly, those times are becoming rare for most of us).

While DocHub is a nice project, it’s not without its shortcomings. For example it lacks unique URLs, so you can’t link to anything within the site. It also uses hash-based URLs, which, among other crippling problems, breaks the browsers back button. [Update: DocHub.io has been updated numerous times since this piece was written and now has permalinks and a working back button in most browsers.]

Still, despite those two problems, DocHub.io is one of the better documentation sites around — definitely worth adding to your bookmarks.

Tags:
File Under: Mobile, Visual Design
Dec
6
2011

How to Scale Embedded Media in Responsive Designs

By

A responsive movie embed working on a Sony Ericsson (photo by Anders Andersen)

In order to make responsive designs successfully adapt to any screen size, you need to properly scale not just headlines and text elements, but images and other media. We’ve already covered a number of solutions for images, but what about other elements like video?

Scaling video when you can control the embed code is pretty easy, the same max-width tricks that work on images will work on video. The tricky problems with scaling video come when you start trying to embed movies from other websites.

YouTube and most other video hosting sites typically include a fixed width and height in pixels as part of the embed code. That’s fine for older designs, but it doesn’t scale in a responsive layout.

Swedish web developer Anders Andersen recently tackled the problem of responsive embeds and came up with a solution that works with both YouTube and Vimeo movies. Andersen’s solution is to wrap any embed code, whether it’s an actual embed tag or an iframe, with an extra div and then scale that div. Naturally you’ll need to strip any fixed dimensions out of the YouTube or other embed code for this to work.

For the full details and the CSS that makes it work, be sure to read Andersen’s whole post.

The core of Andersen’s method lies in the CSS, which uses this handy trick to preserve the intrinsic ratio of the video even as its container element scales down.

Andersen has tested this technique with YouTube, Vimeo and SlideShare embeds, though it may work with others as well.

Between stripping out any video dimensions and adding a wrapper div, Andersen’s responsive embed trick is a little bit of work. It’s probably not practical for a site with a lot of video, or a site where non-technical users will be posting video. However, if you’ve got a simple site that’s 99 percent responsive, but you’ve been looking for a way to handle video, this fits the bill.

Be sure to check out Andersen’s follow-up post where he does some device testing. The results are generally encouraging, with most modern phones handling the code just fine. The only real problem device seems to be the new Nokia Lumia 800 (running Windows Phone 7) which fails to play the YouTube embeds.

Tags:
File Under: Browsers
Dec
6
2011

New Opera 11.60 Is Faster, Uses Less Memory

By

Opera software has released Opera 11.60, the latest update for the company’s flagship desktop web browser.

If you’d like to take Opera 11.60 for a spin, head on over to the Opera downloads page and grab a copy.

Originally Opera had planned to make Opera 12 its next release (see our review of the Opera 12 alpha), but the company decided to add the interim 11.60 to get some of the already completed new features out to users while work continues on the hardware acceleration in Opera 12.

The full speed boost of hardware acceleration isn’t here yet, but Opera 11.60 is still no slouch when it comes to speed. Opera says 11.60 is faster on secure pages and uses less memory on what Opera calls “advanced web applications.” Presumably that’s another way of saying JavaScript-intensive pages like Gmail or Facebook. While I didn’t notice a dramatic memory-use reduction in my testing, opening the same 15 tabs in both Opera 11.52 and 11.60 required about 30MB less memory in the latter. Not earth shattering, but a reduction nonetheless.

Even better, Opera 11.60 is considerably faster in starting up and shutting down than its predecessor.

This release features a new HTML5 parsing engine under the hood. In addition to all the new elements for developers, HTML5 specifies new rules for how browsers should handle incorrect code. Previously browsers decided for themselves what to do when something was wrong in a page (and most still do, but eventually that will change).

Among the slight visual tweaks in Opera 11.60 is a new star icon in the address field that can be used to bookmark sites or add sites to add them to your speed dial page. It looks and behaves much like what you’ll find in both Firefox and Chrome.

Opera’s often overlooked built-in e-mail client gets a makeover in 11.60. The new layout looks cleaner, is a bit easier to navigate and will feel more familiar to anyone coming from mail apps like Outlook, Mail or Thunderbird.

The revamped mail interface in Opera 11.60 (image by Opera)

One thing to note with the new mail client is that once you upgrade to 11.60 you won’t be able to downgrade if you don’t like the changes. I suggest making a backup of your Opera data folder before you upgrade.

Opera 11.60 is worth the upgrade for the speed boost and slightly reduced memory footprint. It’s also worthwhile if you use the built-in mail client. That said, it’s clearly a minor update. The next big changes for Opera won’t be along until Opera 12 which will bring full hardware acceleration and (possibly) support for the new Paged Media standard.

Tags:
« OLDER POSTS