Technique

A Rose by Any Other Name Might Smell as Sweet, But it Would Probably Be Larger

Web Monkey - Monday, February 6, 2012 - 8:31 am

It may have started as a lark, but the annual JS1K contest has long since ceased to be a joke. This year’s contest is already in full swing and notable for a spectacular 3-D drawing of a rose rendered using less than 1,024 bytes of JavaScript.

The JS1K contest seeks the web’s best JavaScript creations, with one small catch — the code used must be less than 1k. It might sound insane considering that some JavaScript frameworks — just the frameworks! — are over 100k, but since it began several years ago, JS1K’s experiments have never failed to impress.

One of this year’s most jaw-dropping efforts to date is developer Román Cortés 3-D rendering of a rose. Relying on Monte Carlo methods to keep the code size down, Cortés’ code draws a very nicely shaded 3-D rose for the love-themed 2012 edition of JS1K. You can check out the live demo on the JS1K website.

One word of warning: Part of what makes Cortés’ rose so small is that much of the heavy lifting is handed off to the processor. The demo code brought my CPU use over 100 percent and kept it pegged there the entire time it was open in Safari. Firefox and Chrome both managed to keep the number down to roughly 93 percent, but suffice it to say that a procedurally generated 3-D rose will tax your CPU.

To see how Cortés created the code behind the rose, be sure to visit his blog which offers a very thorough tutorial explaining how and why the code works. There’s also a great write-up on Cortés’ previous JS1K effort, a 3-D Christmas tree. Also be sure to check out the other submissions to this year’s JS1K contest on the JS1K website.

If you’ve got some impressive but terribly small bit of JavaScript code up your sleeve, fear not; the JS1K contest will continue accepting submissions through Wednesday, March 14, 2012. Details on the rules and submission process can be found on the JS1K website.

Categories: Technique

Microsoft Touts Plugin-Free Web, Offers Desktop Fallback for Flash

Web Monkey - Thursday, February 2, 2012 - 9:06 am

Microsoft’s new version of Internet Explorer has barred browser plugins in the Metro environment. But Microsoft has revealed a method that plugin-dependent websites can use to leap over Metro’s walls and reach the green fields of the conventional Windows desktop, where Flash is still allowed to roam free.

The relevance of proprietary browser plugins is declining as standards-based web technologies mature. Native web technologies don’t yet supply complete functional equivalence with the capabilities of plugins, but the open web has the advantage of greater ubiquity.

The ubiquity of native web standards over proprietary plugins is set to get a major boost from Microsoft with the launch of Windows 8 and Internet Explorer 10. As we have previously reported, the next major version of Microsoft’s web browser will not display plugins in the Metro environment, which will be the default shell in Windows 8.

A plugin-dependent website prompting the user for permission to run on the desktop. Image courtesy of Microsoft

Microsoft has published a series of posts in its official IE development blog that discuss the implications of this change and what it means for users and web developers. In a new post published this week, IE program manager lead John Hrvatin highlighted the advantages of plugin-free browsing and emphasized the need for web developers to start supporting users who browse in environments that don’t have plugins enabled.

“The transition to a plug-in free web is happening today. Any site that uses plugins needs to understand what their customers experience when browsing plugin free. Lots of web browsing today happens on devices that simply don’t support plugins,” he wrote. “Metro style IE runs plug-in free to improve battery life as well as security, reliability, and privacy for consumers.”

A growing number of websites that rely on browser plugins already offer a standards-based fallback for users who are browsing on popular plugin-free devices such as as the iPhone or iPad. Microsoft has previously discussed some of the steps it is taking to ensure that those websites serve their plugin-free content to Metro users.

There will still likely be many Flash-heavy websites, however, that can’t accommodate users who are browsing without plugins. In the blog post, Hrvatin explained that such websites can ask the user for permission to jump to the conventional Windows desktop and launch the windowed version of Internet Explorer, which will have full support for plugins.

Web developers can get the browser to display the prompt by including the special requiresActiveX=true property in an X-UA-Compatible meta tag or HTTP header. Hrvatin cautions that this feature is included for transitional purposes and is intended to serve as a last resort. The preferred behavior is still for web developers to display a plugin-free version of their site to users who are browsing in the Metro environment.

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

Categories: Technique

Firefox 10 Arrives With New Dev Tools and Full-Screen API

Web Monkey - Wednesday, February 1, 2012 - 9:27 am

Mozilla has officially released Firefox 10. The new version of the open source web browser includes a handful of improvements and new features. The browser’s built-in tools for web developers got a particularly significant boost in this release. The new version also offers better support for a number of web standards.

Firefox’s developers decided last year to transition the browser to a time-based, six-week release cycle. The new release management strategy ensures that performance improvements and support for new web standards reach users as soon as possible. The faster release cycle posed challenges, however, for enterprise adopters and other users who require a longer support period. In order to address that issue, Mozilla has decided to offer an annual extended support release with a full year of updates. Firefox 10 is the first official extended support release.

A minor adjustment to the browser’s navigation bar is the biggest user-facing change in Firefox 10. The forward arrow button is no longer persistently visible by default in the navigation toolbar. It will only appear when the user navigates back a page. That means the button only shows when it can be activated. When the user clicks the forward arrow button and returns to the front of the history stack, the button will disappear again.

The distinctive keyhole shape that is formed by the back and forward buttons in Firefox’s navigation toolbar has been characterized in the past by Mozilla designers as an important part of the browser’s visual identity. Much like the angular tabs in Chrome, it’s an aesthetic characteristic that is uniform across platforms and helps make the browser recognizable.

The user interface change in Firefox 10 will make it so that the keyhole shape is only visible when the user navigates back. The feature worked predictably in our tests and didn’t pose any problems in practice. It’s worth noting, however, that it doesn’t appear to be available when the user has toggled the preference for small toolbar icons.

The new developer tools in Firefox 10

Another major change in Firefox 10 is the introduction of new developer tools. Previous versions of the browser have included a web console, a JavaScript scratchpad, and a simple tool for inspecting the Document Object Model (DOM). Firefox 10 has a new tightly-integrated developer panel with a richer DOM inspector and a tool for viewing, toggling, and modifying CSS properties.

The DOM inspector follows your cursor as you move it over elements of the page and will lock in on an element when you click. An HTML pane at the bottom of the screen will show you the markup for the target element and allow you to modify the values of element attributes. The HTML inspector pane also has a slick breadcrumb bar that makes it easy to see the position of the target element in the page hierarchy.

The CSS inspector will show you a list of CSS properties associated with the selected element, including inherited properties. Each one has a checkbox that you can click to toggle visibility. You can also click one of the values to replace it on the fly.

These built-in development tools in Firefox are simpler and less intrusive than more sophisticated alternatives such as the Firebug add-on. There are a number of additional features under development that will be included in the inspector panels in future versions of the web browser. One of the most intriguing is a tool that uses WebGL to show the user a three-dimensional representation of the page DOM. That feature wasn’t ready for inclusion in Firefox 10 and will potentially appear in the next major release.

In addition to the new inspector, web developers can also look forward to improved support for web standards. An addition of particular significance is a new full-screen API, which makes it possible for an individual HTML element to break out of the browser window and stretch itself to cover the entire screen. This feature is going to be especially useful for videos and games. You can see it in action by visiting Mozilla’s fullscreen demo page.

We first wrote about the full-screen API in November, when the feature originally landed in nightly builds. Mozilla carefully considered potential abuse scenarios when implementing the feature. It’s designed so that an element can only switch into fullscreen mode in response to a direct user action. The browser ensures this by using a technique similar to the one used to block unwanted popup windows.

Another addition in this release is support for 3D CSS transforms. This feature, which was originally created by Apple, offers a declarative mechanism for applying animated three dimensional transformations to individual HTML page elements. It’s important to note that 3D CSS transforms are entirely distinct from WebGL, which is a low-level JavaScript API for 3D programming.

Support for 3D CSS transformations is a welcome addition to the browser. Developers are already using the feature in the wild, but most of the existing 3D CSS content was authored with WebKit-specific prefixes and consequently won’t work in Firefox yet.

Firefox 10 is a solid release that expands the browser’s capabilities. Although the lineup of new features is slim, it’s a respectable update by the standards of the rapid release model. The new version will be pushed out through the Firefox update system shortly. Firefox 10 can also be downloaded directly from the Mozilla website. For more details, you can refer to the official release notes.

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

Categories: Technique

Google, Microsoft, Yahoo, PayPal Go After Phishers With New E-Mail Authentication Effort

Web Monkey - Tuesday, January 31, 2012 - 8:18 am

Major e-mail providers, including Google, Microsoft, and Yahoo are teaming up with PayPal, Facebook, LinkedIn, and more, to implement a new system for authenticating e-mail senders to try to prevent the sending of fraudulent spam and phishing messages.

The protocol that powers e-mail, SMTP, dates back to a more trusting era; a time when the only people who sent you e-mails were people you wanted to send you e-mails. SMTP servers are willing to accept pretty much any e-mail destined for a mailbox they know about (which is, admittedly, an improvement on how things used to be, when they’d accept e-mails even for mailboxes they didn’t know about), a fact which spammers and phishers exploit daily.

Making any fundamental changes to SMTP itself is nigh impossible; there are too many e-mail servers, and they all have to interoperate with each other, an insurmountable hurdle for any major change. So what we’re left with is all manner of additional systems that are designed to give SMTP servers a bit more information about the person sending the e-mail, so that they can judge whether or not they really want to accept the message.

The two main systems in use today are called SPF (Sender Policy Framework) and DKIM (DomainKeys Identified Mail). Both systems use DNS to publish extra information about the e-mail sender’s domain. SPF tells the receiving server which outgoing servers are allowed to send mail for a given domain; if the receiving server receives mail from a server not on the list, it should assume that the mail is fraudulent. DKIM embeds a cryptographic signature to e-mail messages and an indication of which DNS entry to examine. The receiving server can then look up the DNS entry and use the data it finds to verify the signature.

These systems are not perfect; though both are used widely, they haven’t been adopted universally. This means that some legitimate mail will arrive that doesn’t have SPF or DKIM DNS entries, and so mail servers can’t depend on its presence. Common legitimate operations can also break them; many mailing list programs add footers to messages, which will cause rejection by DKIM, and forwarding e-mails causes rejection by SPF. As a result, failing one or other test is not a good reason to reject a message.

These systems also make it hard to diagnose misconfigurations; receiving servers will typically just swallow or ignore mails sent by systems with bad SPF or DKIM configurations.

The large group of companies, which includes the biggest web mail servers and some of the most common corporate victims of phishing attempts, is proposing a new scheme, DMARC (“Domain-based Message Authentication, Reporting & Conformance”), in an attempt to tackle these problems. DMARC fills some of the gaps in SPF and DKIM, making them more trustworthy.

DMARC's position within the mail receipt process (illustration by dmarc.org)

DMARC is based on work done by PayPal in conjunction with Yahoo, and later extended to Gmail. This initial work resulted in a substantial reduction in the number of PayPal phishing attempts seen by users of those mail providers, and DMARC is an attempt to extend that to more organizations. As with SPF and DKIM, DMARC depends on storing extra information about the sender in DNS. This information tells receiving mail servers how to handle messages that fail the SPF or DKIM tests, and how critical the two tests are. The sender can tell recipient servers to reject messages that fail SPF and DKIM outright, to quarantine them somehow (for example, putting them into a spam folder), or to accept the mail normally and send a report of the failure back to the sender.

In turn, this makes SPF and DKIM much safer for organizations to deploy. They can start with the “notification” mode, confident that no mail will be lost if they have made a mistake, and use the information learned to repair any errors. DMARC also allows recipients to know if a domain should be using SPF and DKIM in the first place.

Without a global rollout, DMARC can’t solve all phishing and spam problems. The companies that have signed up to support the project include major recipients of phishing attempts—the various free e-mail providers—and sites against which phishing attacks are regularly made. Mail sent between the organizations will be verified using the SPF/DKIM/DMARC trifecta. Anyone using the major mail providers and the major services should see a substantial reduction in fraudulent mail. Senders and recipients who want to receive similar protection can implement DMARC themselves by following the specification that the DMARC group is working on.

Given the constraints imposed by SMTP, we may never get an e-mail system that is entirely free of malicious and annoying junk. SMTP e-mail was never designed to be trustworthy, and systems like SPF and DKIM are constrained by the inadequacies of SMTP’s design. Nonetheless, mechanisms such as DMARC can still make a big difference, and with the support of these major companies, e-mail might get that little bit safer.

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

Illustration by dmarc.org

Categories: Technique

Mozilla Questions Web Orthodoxies With ‘Pancake’

Web Monkey - Monday, January 30, 2012 - 11:47 am

Mozilla Labs has launched a new project designed to question the web as we know it, including what some might think of as the web’s sacred cows — like whether or not we need to see URLs.

Pancake, as the new project is known, will help Mozilla, “better understand what people do on the web, why and how they do those things, and how we can make those things easier and more efficient.” The goal of Pancake according to Mozilla’s new, awesomely titled Director of Pancake Stuart Parmenter, is to play with “huge concepts, monumental problems and occasionally crazy ideas.”

Among the ideas in Pancakes’ sights that many might consider crazy is questioning whether users need to care about the URL. Note that no one is questioning the URL itself, just whether or not the user needs to be concerned with it. Indeed Pancake won’t be the first time Mozilla has questioned whether or not the user needs to know about URLs, nor is Mozilla alone on that score, Google’s Chrome team has also experimented with hiding the URL bar.

Might there be some better means of letting the user know where they are, where a link leads and all the other things URLs currently do? That’s exactly the sort of question that Pancake wants to ask. We’ll never know the answer, and possibly never push the web in interesting new directions, if no one is asking the question.

If you consider the URL bar a sacred part of the web browser, fear not, no one is taking way your URL bar. The goal of Pancake is not to force anything down your throat, but to make the web better. That might mean, as Parmeter writes, “inventing new metaphors and new systems,” but the main goal of those new metaphors and systems is to “give users greater power and control within the modern web.”

In that sense it’s difficult to tell exactly what Mozilla plans to do with Pancake. In the immediate future Pancake will be rolling out its first prototype app, but the announcement is extremely vague about what that app might involve. Historically Labs projects are a very mixed bag. For every very successful Labs effort — like the syncing features that are now a standard part of Firefox — there are several others that have been quietly shelved (Ubiquity anyone? Prism?).

Pancake’s first prototype app — whatever it may be — will be released within the next few months. In the mean time you can check out the new wiki page or join the Pancake Google Group. All the other usual Labs pages — documentation, roadmap, designs and other content — will come in the weeks ahead.

Categories: Technique

HTML5 Video on the Web Today

Web Monkey - Friday, January 27, 2012 - 10:13 am

The hype surrounding HTML5 video has thankfully receded from the high water mark of 2011. But the absence of hype doesn’t mean HTML5 video is a thing of the past. In fact, while it’s true that HTML5 video still can’t completely match all of the features available in Flash, the state of HTML5 video on the web continues to improve with every new browser release.

For a very thorough rundown of exactly where and how well HTML5 video works on the web right now, check out the excellent report on the state of HTML5 video from Long Tail Video. Put together by the makers of JW Player, an HTML5 video player toolkit, the state of HTML5 video report is mercifully free of any evangelism for any particular technology. Instead it offers a level-headed look at reality, answering the basic questions — where can you use HTML5 video? How well will it work for users? And when will you need Flash fallbacks?.

HTML5 video enthusiasts will be happy to know that the state of native video on the web is looking better these days. Two-thirds of all the browsers on the web now support the HTML5 video tag. Support for the various video tag attributes has improved as well, with both Safari and Chrome offering full support.

Still, for all the bright points in the report, there is clearly still a need for Flash fallbacks if you want your video to reach the widest possible audience. With older versions of Internet Explorer still lingering (IE 9 and up support the HTML5 video tag) and the lack of support for closed captions and audio descriptions in any browser, Flash will likely remain the only option for at least some portion of the web for some time.

The good news is that, in some cases, the state of HTML5 video will be improving very soon, for example Firefox 10, which will be released in final form very soon, will support native fullscreen playback.

For more details on which parts of HTML5 video work and which don’t in today’s browsers, be sure to read through the full report.

Categories: Technique

Video: When We Build

Web Monkey - Thursday, January 26, 2012 - 1:30 pm

The web is buzzing, and rightly so, about Wilson Miner’s incredibly inspiring talk from the 2011 Build Conference in Belfast. You may recognize Miner’s name from his role in developing Django, as part of the team that built Apple.com or as one of the founders of Everyblock.

Miner’s talk is not your typical web developer talk; in fact, he hardly mentions the web for most of it. Rather, Miner focuses on the broader impact that technologies, and the developers and designers who create them, have on our world, and how that world in turn shapes us. Miner reminds us that we aren’t building “just websites” but shaping the world we will live in for much of the foreseeable future. And, as the Alistair Smith quote shown in the talk says, “at times of change, the learners are the ones who will inherit the world, while the knowers will be beautifully prepared for a world which no longer exists.”

So turn off your music, throw the video in fullscreen mode and give it 38 minutes. Trust us, you won’t be sorry.

After you’re done be sure to visit Miner’s website, which has links to all the material used in the talk, including books, videos, music and images for anyone who would like to learn more.

Categories: Technique

Twitter Adds Responsive Design Tools to Bootstrap 2.0

Web Monkey - Thursday, January 26, 2012 - 10:26 am

Twitter is gearing up for the release of Bootstrap 2.0, the second major version of its popular open source front-end toolkit for web developers.

Bootstrap 2.0 will arrive Jan. 31, but if you’d like to take it for a spin today you can help test the pre-release build. Just head on over to GitHub and checkout the branch, 2.0-wip.

Bootstrap is designed to help you get your website up and running as fast as possible. Somewhere between a CSS framework and a “theme,” Bootstrap offers an HTML, CSS and JavaScript base for your designs, including built-in forms, buttons, tables, grids and navigation elements. Among Bootstrap’s more impressive tricks is the grid layout tool, which is based on the 960 grid system, with support for advanced features like nested and offset columns.

Bootstrap 2.0 will solve one of the bigger complaints about Bootstrap 1.0 — it was not responsive. To embrace a more responsive approach for mobile devices, Bootstrap is moving to a flexible 12-column grid system. The 2.0 release also includes some updated progress bars and customizable gallery thumbnails, but perhaps the best news is that, at just 10kb (gzipped), Bootstrap 2.0 remains an impressively lightweight framework.

While Bootstrap offers good browser support, with all the modern options covered you should be aware that it won’t work with Internet Explorer 6. To see some real world examples of what you can do with Bootstrap, head on over to the unofficial showcase, Built with Bootstrap on Tumblr.

Photo by Mike Love/flickr/CC.

Categories: Technique

Jokes for Nerds: Wat Moments in Programming

Web Monkey - Thursday, January 26, 2012 - 9:08 am

If you ever doubt your nerdery, head on over to Destroy All Software and watch the video of programmer Gary Bernhardt’s Wat talk. If you find yourself laughing, rest assured, you’re a nerd.

The talk comes from CodeMash 2012, where Bernhardt took a few moments to highlight a few WAT? (link NSFW) moments in some of the web’s favorite languages like Ruby and JavaScript.

Seriously JavaScript, what’s up with this:

> [] + {} [object Object] > {} + [] 0

Categories: Technique

‘HTML5 Please’ Helps You Decide Which Parts of HTML5 and CSS 3 to Use

Web Monkey - Wednesday, January 25, 2012 - 1:22 pm

Keeping track of the ever-evolving HTML5 and CSS 3 support in today’s web browsers can be an overwhelming task. Sure you can use CSS animations to create some whiz-bang effects, but should you? Which browsers support it? What should you do about older browsers?

The first question can be answered by When Can I Use, which tracks browser support for HTML5 and CSS 3. You can then add tools like Modernizer to detect whether or not a feature is supported, so that you can gracefully degrade or provide an alternate solution for browsers that don’t support the features you’re using. But just what are those alternate solutions and polyfills? That’s what the new (somewhat poorly named) HTML5 Please site is designed to help with.

HTML5 Please offers a list of HTML5 elements and CSS 3 rules with an overview of browser support and any polyfills for each element listed (CSS 3 is the much more heavily documented of the two, which is why the HTML5 emphasis in the name is perhaps not the best choice). The creators of the site then go a step further and offer recommendations, “so you can decide if and how to put each of these features to use.”

The goal is to help you “use the new and shiny responsibly.”

HTML5 Please was created by Paul Irish, head of Google Chrome developer relations, Divya Manian, Web Opener for Opera Software, (along with many others) who point out that the recommendations offered on the site “represent the collective knowledge of developers who have been deep in the HTML5 trenches.”

The recommendations for HTML5 and CSS 3 features are divided into three groups — “use”, “use with caution” and “avoid”. The result is a site that makes it easy to figure out which new elements are safe to use (with polyfills) and which are still probably too new for mainstream work. If the misleading name bothers you, there’s also Browser Support, which offers similar data.

If you’d like to contribute to the project, head over to the GitHub repo.

Categories: Technique

Google Works on Internet Standards with TCP Proposals, SPDY Standardization

Web Monkey - Wednesday, January 25, 2012 - 9:30 am

As part of Google’s continuing quest to dole out web pages ever more quickly, the search giant has proposed a number of changes to Transmission Control Protocol (TCP), the ubiquitous Internet protocol used to reliably deliver HTTP and HTTPS data (and much more besides) over the ‘net.

Google’s focus is on reducing latency between client machines and servers, and in particular, reducing the number of round trips (either client to server and back to client, or vice versa) required. When data is sent over a TCP connection, its receipt must be acknowledged by the receiving end. The sending end can only send a certain number of packets before it must wait for an acknowledgement. The time taken to receive an acknowledgement is governed by the round-trip time (RTT). With high bandwidth, high latency connections, clients and servers can end up spending most of their time waiting for acknowledgements, rather than sending packets.

When a new connection is made, a computer may initially send three packets before acknowledgement is required. Google wants to increase this to 10. With 10 packets, a browser can typically deliver an entire HTTP request to a server before it has to stop and wait for a reply.

TCP connections require a certain amount of negotiation between client and server, requiring a round trip, before data can be sent. Google is proposing to modify TCP so that some data can be sent during that negotiation, so that the server will have it on hand already, and can start processing it straight away.

TCP waits a predetermined time (the RTO or retransmission timeout) for acknowledgments to arrive. If the RTO expires, unacknowledged packets are assumed lost and retransmitted. This ensures that if the data has been lost in transmission that the sender is never waiting for an acknowledgement that will never arrive. This timeout value varies according to the network conditions and RTT, with a default of three seconds. Google wants to reduce this default to 1 second, so that if data has been lost, neither end needs to wait so long before it has another go.

Finally, Google wants to use a new algorithm to adjust how TCP connections react to packet loss. Packet loss can indicate networks that are congested, and TCP reacts by reducing the rate at which data is sent when this congestion is detected. The company claims that the algorithms currently used to respond to this packet loss can exact too great a penalty, making connections slow down too much and for too long, and that its new algorithm is better.

In addition to these proposed changes, Google is also suggesting other modifications, especially to make TCP recover better on mobile networks.

Changing TCP is not to be taken lightly. The protocol is already suffering due to buffer bloat undermining its built-in handling of network congestion. While Google’s proposed changes are well intentioned and might improve network performance, they come with the risk that an overlooked problem or a bad interaction with other traffic could cause widespread damage to the internet.

The proposed changes to TCP to reduce latencies and start sending data sooner are a continuation of previous work Google has done to try to make web serving, in particular, faster. The company has previously proposed other modifications to protocols such as SSL to similarly accelerate data transmission.

More far-reaching than these SSL tweaks is Google’s proposed alternative to the HTTP protocol that underpins the web: SPDY.

Initially, SPDY was a proprietary Google protocol implemented only in Google’s Chrome browser. That’s changing, however. Amazon’s Silk browser includes SPDY support, and Firefox 11 will include preliminary SPDY support. Partially motivated by SPDY’s uptake, the IETF’s HTTPbis Working Group — the team of industry experts tasked with maintaining and developing the HTTP specification — is considering the development of a new specification, HTTP/2.0, with the goal of improving the performance of HTTP connections. The working group will solicit suggestions from the industry, and with two, soon to be three implementations already, SPDY is likely to be well placed among those suggestions.

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

Photo: Ariel Zambelich/Wired.com

Categories: Technique

The Disneyfication of Tech

Web Monkey - Tuesday, January 24, 2012 - 4:13 am

Truth is this — users are caught between tech and media. Neither of them is looking out for our interest. Each of them own politicians each owns tech. The tech industry is better at tech (no surprise) and the media industry is better at a lot of other things, including getting Congress to do their bidding.

I’ve been warning the news publishers to be careful about viewing Twitter and Facebook as if they were equivalent to the web. This would be like Kodak trusting Apple to handle its digital photography strategy. We know now how that turned out.

Twitter and Facebook are rich and getting richer. Either of them could easily buy a struggling but independent news organization. Then where would you be if you were dependent on them to distribute news? It would be like the Times depending on Murdoch to print their daily paper. Instead the Times invested in their own printing plant, presumably so they could have better control of the product, both from a creative and tactical standpoint. If Murdoch owned the presses and the trucks, who do you think would deliver the most timely news? They have to think about Twitter that way. At some point they will come to see themselves as a media company, if they don’t already.

Caught in the middle is the original idea of the Internet and the web, that people could be media instead of just consuming it. For that to continue, enough people have to see their future as publishing independently, and enough people have to read independently of corporate media, neither originating from Silicon Valley or Hollywood, to keep the flame alive.

I still hope that there’s a remnant of the idealism of tech. That there was value in the personal-ness of PCs. The net is the same way. We need to make it ever-easier for people to own and run their own infrastructure. People think it’s hard, but it doesn’t have to be! Each of us can have the equivalent of a printing plant, that’s the magic of tech. No harder to keep running than a laptop. To those people in tech who still hold to the ideal of free communication unrestricted by government or corporations, please use some of your profits to help guarantee the future of an independent Internet.

Otherwise, I think we can all see this clearly now, the net will be a single amorphous Disneyfied mess, not too far down the road.

This post first appeared on Scripting News.

Dave Winer, a former researcher at NYU and Harvard, pioneered the development of weblogs, syndication (RSS), podcasting, outlining, and web content management software. A former contributing editor at Wired magazine, Dave won the Wired Tech Renegade award in 2001.
Follow @davewiner on Twitter.
Categories: Technique

Hack Swaps Google’s Search Plus Your World Results for the Wider Social Web

Web Monkey - Monday, January 23, 2012 - 12:09 pm

Shortly after Google launched Search plus Your World earlier this month, critics accused the company of favoring its own nascent social network over the much richer results on others, like Twitter or Facebook. As Wired’s Steven Levy quipped, “there’s too much Plus and not enough of Our World, which has oodles of content on other social networks.”

Now developers at Twitter, Facebook and MySpace have put together a demonstration of just how much relevancy Google sacrifices in order to push Google+. The demo, which uses only Google’s own results, shows, among other questionable results, how Google routinely ignores more relevant Twitter pages to show off seldom-used Google+ profiles. To see it in action, head on over to the new Focus on the User website.

If you decide you prefer the often more relevant results from the Focus on the User experiment there’s a bookmarklet available, cheekily entitled “don’t be evil.” Just drag the bookmarklet into your web browser’s bookmarks bar and then click it whenever you want to see more than just Google+ results in Google’s search results.

The developers behind Focus on the User do work for Google+ rivals, but that doesn’t change the results of the experiment which speak for themselves. The developers also point out that their tool relies entirely on Google’s own data to rank social search results. Here’s their description of how the don’t be evil tool works:

the tool identifies the social profiles within the first ten pages of Google results (top 100 results). The ones Google ranks highest — whether they are from Flickr, Twitter, Facebook, LinkedIn, MySpace, Quora, Tumblr, Foursquare, Crunchbase, FriendFeed, Stack Overflow, Github or Google+ — replace the previous results that could only be from Google+.

In other words the bookmarklet largely returns Google to its previous state, before the Search Plus Your World Update. If you’d like to know more about how the bookmarklet works or see some examples and situations in which the emphasis on Google+ social results actually degrades the quality of search results be sure to check out the video below.

Photo: Rene Tillmann/AP

Categories: Technique

Google Tweaks Search Results to Punish Ad-Heavy Websites

Web Monkey - Monday, January 23, 2012 - 10:11 am

Google has tweaked its search algorithm to punish websites with excessive advertising “above-the-fold,” that is, websites that stack the top of the page with nothing but advertisements.

According to Google, “rather than scrolling down the page past a slew of ads, users want to see content right away.” To help users get to that content, Google may drop ad-heavy websites from its search results.

Google says that the change will only affect about one in 100 searches, and emphasizes that websites using what Google’s Distinguished Engineer and SEO guru Matt Cutts calls “ads above-the-fold to a normal degree” will not be affected.

Instead the change is designed to punish sites that “go much further to load the top of the page with ads to an excessive degree or that make it hard to find the actual original content on the page.” In other words, if a site is so packed with ads that people can’t find what they’re looking for then Google isn’t going to send them to that site anymore.

While the distinction seems clear at first glance, digging deeper reveals some potential confusion for webmasters — for example, what role does screen size play? On a netbook, for instance, Google’s own search results page is almost entirely taken over by advertisements, not the actual search results (i.e., the content).

Google on a netbook screen: Ads are in red, search results in green

At small screen resolutions, Google’s own search results page is one of the worst offenders when it comes to advertising clutter obscuring content. That seeming hypocrisy may leave some webmasters wondering what constitutes “a normal degree of ads” and how screen size affects what is defined as “normal.” Sticking simply with what Google has written about the change, copying Google’s search results page is probably not a good idea in this case.

Cutts does encourage webmasters view their websites at different screen resolutions, suggesting that screen size does play a role, but unfortunately he doesn’t offer any details about what that role is or how it affects the algorithm’s new layout ranking scheme.

Categories: Technique

Google Abandons Anonymous Accounts With New Signup Form

Web Monkey - Friday, January 20, 2012 - 9:47 am

Google is experimenting with a new signup form that eliminates the ability to create anonymous accounts. The new form is part of an effort to expand the Google+ social network by automatically adding every new Google account to Google+. Because Google+ requires a name and gender the new signup form effectively eliminates the anonymous Google account.

The new account creation page can be found by following the links on Google’s homepage. As the Google Operating System blog points out, the older Google account page, which does not require signing up for Google+ or Gmail, is currently still accessible through Google Reader, Calendar and other Google services.

The revamped Google account creation page adds some additional fields to the sign up form, including name and gender which are both necessary for creating a Google+ account. There’s also a new agreement — turned on by default — granting Google permission to “use my account information to personalize +1s on content and ads on non-Google websites.”

In addition to the Google+ integration, signing up for a Google account now means getting a profile page and a Gmail account; gone are the days when you could use an outside email address with your Google account. It is still possible to go in and delete the Google+, Google profile and Gmail portions of your new Google account after it’s been created, but given that few people ever change their default settings it’s safe to assume that most people won’t.

It should come as no surprise that Google is working hard to get more users signed up for Google+, after all, despite marginal momentum, Google+ is far behind Facebook when it comes to signing up new users.

Photo: Anonymous9000/Flickr/CC.

Categories: Technique

Mozilla Demos MediaStream Processing, Audio Mixing in Firefox

Web Monkey - Friday, January 20, 2012 - 7:08 am

Mozilla is drafting a proposal for a new web standard called MediaStream Processing that introduces JavaScript APIs for manipulating audio and video streams in real time. The specification is still at an early stage of development, but Mozilla has already started working on an implementation for testing purposes.

Mozilla’s Robert O’Callahan, the author of the MediaStream Processing API proposal draft, released experimental Firefox builds that include MediaStream Processing support. He has also published a set of demos (note: you need to run the experimental build to see the demos) that illustrate some of the functionality defined by the specification.

The demos show how the APIs can be used to perform tasks like rendering a visualization of a video’s audio track in a Canvas element while the video is playing. It also shows how the APIs can be used for mixing tasks, like implementing a cross-fade between two audio streams, dynamically adjusting the volume of a video, and programmatically generating audio streams.

One of the characteristics that distinguishes the MediaStream Processing API from previous web audio API proposals is that it aims to interoperate better with existing web standards. For example, it relies on the MediaStream interface in the WebRTC specification. It also allows users to take advantage of Web Workers for threading and will work with getUserMedia to eventually support real-time manipulation of streams from microphones and webcams.

The current implementation of the specification focuses on audio capabilities. As O’Callahan explained this week in a blog post, support for video manipulation will be added in the future when the necessary graphics APIs are accessible through Web Workers. MediaStream Processing on video will be useful for doing things like QR code recognition and augmented reality in web applications, he said.

Analyzing a video's audio track and visualizing it in real time

So, when will this functionality be available in a stable Firefox release? It might take some time. According to O’Callahan, the patch needs some cleanup before the functionality can land in trunk and make it into regular nightly builds. Even then, the MediaStream Processing functionality likely won’t be generally available until the specification has solidified.

“The biggest limitation is that it’s not shipping in Firefox yet. My giant patch is messy and a lot of cleanup needs to be done. I have a plan to split the patch up, clean up the pieces and land them piecemeal. In particular I need to get some of the infrastructure landed ASAP to help the WebRTC team make progress,” he wrote. “When we ship it, much or all of the API will probably be disabled by default, behind a hidden pref, until the standards situation is resolved.”

MediaStream Processing is definitely going to be worth the wait. Some fantastic capabilities are going to be unlocked when the specification is fully implemented. It will open the door for using native web standards to perform some sophisticated real-time media processing tasks that were previously only possible with browser plugins.

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

Categories: Technique

See the World Through the Eyes of Google Images

Web Monkey - Thursday, January 19, 2012 - 11:51 am

Dutch artist Sebastien Schmieg has elevated the Google Image search from its humble intent, creating a short film that strings together a series of image searches. The result oscillates between the prosaic and profound, and feels more like a grand homage to humanity than a collection of random images.

To create the image sequence Schmieg fed a single transparent PNG into Google Images and used the “visually similar” feature to recursively loop through the results. Schmieg’s movie of the results, entitled Search by Image, Recursively, Transparent PNG, #1, is a (slightly NSFW) truly hypnotic, algorithmic tour of life as Google Images knows it.

In all there are some 2,951 images in the video. The “visually similar” option in Google Image Search tends to get stuck in loops using it the way Schmieg did so if an image had already been used in the sequence, he would skip to the next image in the results. But otherwise the sequence is entirely algorithmic. Beware pareidolia.

For more info about the movie and some other, similar efforts, be sure to check out Schmieg’s website.

Categories: Technique

CSS1K Showcases How Developers Can Do More With Less

Web Monkey - Thursday, January 19, 2012 - 10:22 am

CSS1K: light on the file size, heavy on variety

When the web standards movement first began to take off years ago one of its primary advocates, Dave Shea, launched CSS Zen Garden to showcase what designers could do using only web standards. CSS Zen Garden proved a huge hit, drawing hundreds of contributions from web developers around the world.

The web has changed considerably since the heyday of CSS Zen Garden. Today we can do just about anything using web standards like HTML and CSS, but now there’s a new problem — websites are getting fatter, as much as 25 percent fatter in the last year alone. Much of that added weight comes from JavaScript, but CSS shares some of the blame. According to HTTP Archive, the top 1,000 sites on the web load an average 30KB worth of CSS.

Inspired by CSS Zen Garden and driven by a desire to showcase what can be done with a mere 1KB of CSS, Jacob Rask, a web developer at Opera Software, created CSS1K about six months ago. Since then the site has showcased 68 different designs, all with stylesheets under 1KB.

The site is modeled on CSS Zen Garden, with a fixed set of HTML tags and content. Using that HTML base designers can then bend the basic frame to whatever look they’ve come up with — provided the total minified size of the CSS file is only 1KB.

Call it an effort in minimalism if you like, or simply think of it as a design constraint; either way designs submitted to CSS1K demonstrate just how much is possible with very little CSS. While no one is suggesting every website needs to be so constrained, playing with CSS1K is a nice reminder that you don’t always need huge stylesheets to create a nice-looking website.

If you’d like to participate in the CSS1K fun just fork CSS1K at GitHub and send your submission as a pull request. There is essentially only one rule — you can’t use data URIs, @font-face or @import statements to skirt the 1K CSS filesize limit. Note, however, that your 1K CSS file can be minified and any browser prefixes you need don’t count toward the total (in fact, you submit your code unprefixed and CSS1K adds the prefixes for you). For the full details and file requirements, head over to CSS1K.

Categories: Technique

Protesting SOPA: How to Make Your Voice Heard

Web Monkey - Wednesday, January 18, 2012 - 7:06 am

This week, “call your Congressperson” is not just a cliché. It’s one of the most important things you can do to make your voice heard.

As Ars readers know, Wikipedia, reddit, Craigslist, and others are blacking out their sites today in protest of the Stop Online Piracy Act (SOPA) and Protect IP Act (PIPA), antipiracy bills that protestors believe would give far too much power to rightsholders at the expense of the Internet as a whole.

Members of Congress are already backpedaling on some of the provisions in SOPA and PIPA, and Rep. Darrell Issa (R-CA) said Tuesday that he expects to have more co-sponsors for his alternative (and much saner) OPEN Act than “than SOPA has in the House.”

SOPA opponents say it is critical to block the bill now, because if it is turned into law website owners will be at risk of having payments blocked, or forced into lengthy and expensive litigation even if they’re not trying to enable piracy or profit from it.

“Scribd could not have come into existence in a world governed by SOPA,” said Scribd co-founder Jared Friedman during a conference call yesterday. Alexis Ohanian, co-founder of reddit (which shares a parent company with Ars Technica), said much the same thing about Internet entrepreneurs. “I’d hate to be the Congressperson who has to go back to his or her district and say, ‘You know what, maybe this is not the industry for you. Maybe you can try your luck in Canada.’”

Video hosting site Veoh found out the hard way what litigation can do to an Internet business, even when the law is on your side. Veoh was “litigated to death” before being finally cleared in a lawsuit filed against the site by Universal Music Group. “The lawsuit dramatically impacted our company,” said founder Dmitry Shapiro. “It cost us millions of dollars to litigate. It took up a tremendous amount of executives’ time. More importantly, it dramatically demotivated our 120 employees who were constantly concerned about what this meant and what would happen to them and their families.”

Veoh’s defense, that it was eligible for safe harbor protection under the Digital Millennium Copyright Act, was upheld on appeal. But it was too late—Shapiro laid everyone off and sold the company in a fire sale.

Friedman said he’s grateful to Shapiro, because Veoh’s “success” in defending itself helped Scribd fend off its own legal threats. But SOPA would weaken safe harbor protections and give copyright owners a “private right of action” to go after money and ad networks, making it even more difficult for future Veohs to gain traction.

You don’t have to be a digital pirate to oppose SOPA, Issa added. “We don’t want people taking brand-new movies and putting them online and prospering while the actual creator of the art is denied,” Issa said. But OPEN, by focusing on the money supply through the International Trade Commission, would target the vast majority of abuses that SOPA intends to prevent without resorting to censorship, he argued. “We think we can do 80 percent of the good with almost no trauma.”

“It is a great time to contact your members of Congress, make sure they know there is an alternative, and that there is a reason to slow down and get it right,” Issa added.

Contact your senator or representative

Sending a message to our elected leaders’ underlings has never been easier. Old-fashioned phone calls count for a lot; they take effort to make, and so they indicate opposition in a way that a mass form e-mail never will. The official Senate site lists the phone numbers and links to contact forms for all senators, while the House has a handy tool that lets you search for your representative by ZIP code and state.

If you’re having trouble thinking of something to say, various anti-SOPA and anti-PIPA organizations can help. Public Knowledge has a form for sending letters to senators describing why PIPA is “overbroad … ripe for abuse … [and] speeds fragmentation of the Internet.” The Electronic Frontier Foundation is providing a similar service for contacting both senators and representatives, as is AmericanCensorship.org.

You can also sign several petitions. This one urges President Barack Obama to veto SOPA should it ever come to his desk and has more than 51,000 signatures; it led to the Obama administration criticizing portions of SOPA, saying that the administration “will not support legislation that reduces freedom of expression, increases cybersecurity risk, or undermines the dynamic, innovative global Internet.”

Another petition backed by Craigslist and reddit is aimed at Congress and has 117,000 supporters. Want to go further and convince your fellow humans that SOPA is bad? If you’re already an expert on SOPA or PIPA, another site lets you volunteer to to explain it to newbies on the phone or in person.

Black out your website

Many of you have your own personal websites. Just because you’re not as big as Wikipedia and reddit doesn’t mean you can’t join the blackout brigade or “SOPA strike,” as some are calling it. On GitHub, one SOPA opponent is providing HTML that can be used to change a website’s homepage to a black screen which lights up when you move your cursor over the middle, revealing a message of protest:

Your own website could look like this today—if you download a bit of code from GitHub

If you have a WordPress site, you can choose from several plugins to make your point, including one that lets you customize which dates the blackout message appears and whether users see it on only their first visit or on all visits. Widgets can also direct visitors to anti-SOPA or anti-PIPA petitions. For those who can’t or don’t want to go completely dark, there are “Stop PIPA” bars to put at the top of your site, while one “SEO-friendly” protest tool created by CloudFlare blacks out any word longer than five characters, making your site look like a redacted government document. Mucking with a site carries some danger of Google’s web-crawling bots not seeing it properly, but luckily a Google employee has posted a handy guide on what not to do.

Boycott SOPA supporters

If you’ve contacted your Congressperson, blacked out your website, and are still itching for more protest action, you can identify SOPA supporters and take the fight to them directly—or boycott their goods and services. One extension for Google Chrome, called No SOPA, warns you when you visit the website of a company that supports the legislation. “Boycott? Nasty letter time? You decide,” writes the maker of the extension.

There’s also quite an extensive list of SOPA supporters on the website of chief SOPA backer Rep. Lamar Smith (R-TX). (GoDaddy was removed from this list after it was the victim of a successful boycott of the company.)

The Internet speaks

“This is the first time we’ve seen an Internet-based action,” Ohanian said yesterday. “There were no leaders of this movement.” But people from numerous political persuasions lined up in agreement that “this was terrible legislation that looked a lot more like lobbyist dollars at work. If you don’t believe this is an election issue already, it is already happening.” In fact, several “real life” protests and rallies are happening today in the streets of San Francisco, New York City, Seattle and perhaps other cities. 

Just because SOPA and PIPA have plenty of opponents doesn’t mean they can’t pass. The bills still have sizable support from music and movie industry groups. Former US Senator Chris Dodd, now CEO of the Motion Picture Association of America, fired off a press release yesterday calling the SOPA blackout “yet another gimmick, albeit a dangerous one, designed to punish elected and administration officials who are working diligently to protect American jobs from foreign criminals.”

If you’re among those who disagree with Dodd, what are your plans now that SOPA blackout day is upon us? If you have any interesting protest ideas, feel free to share them in the comments.

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

Categories: Technique

Visually Stunning Redesign Showcases the 3-D Power of CSS

Web Monkey - Tuesday, January 17, 2012 - 1:07 pm

Steven Wittens' Acko.net features an impressive and unique 3-D header.

It’s one thing to hear about the powerful new 3-D tools coming to CSS, but it’s a very different thing to actually see them used creatively in the wild. Developer Steven Wittens recently did just that when he redesigned his Acko.net website. Wittens turned to the 3-D features in CSS 3 — with a little JavaScript help — to create a visually stunning 3-D page header.

To see the 3-D in action you’ll need to be using a WebKit browser (Safari or Chrome), though the site nicely degrades to a still very readable state for Firefox and other browsers that don’t yet support the 3-D rules coming to CSS. To get the full 3-D effect be sure to scroll down the page.

Wittens has a blog post detailing exactly how he pulled off the effects and he’s even built a 3-D editor you can play around with. Of the initial inspiration Wittens writes:

This idea started with an accidental discovery: if you put a CSS perspective on a scrollable <DIV>, then 3-D elements inside that <DIV> will retain their perspective while you scroll. This results in smooth, native parallax effects, and makes objects jump out of the page, particularly when using an analog input device with inertial scrolling.

This raises the obvious question: how far can you take it? Of course, this only works on WebKit browsers, who currently have the only CSS 3-D implementation out of beta, so it’s not a viable strategy by itself yet. IE10 and Firefox will be the next browsers to offer it.

To work around some of CSS limitations in the browsers, Wittens turned to Three.js, a JavaScript 3-D engine written by Ricardo Cabello, better known as Mr. Doob. For those interested in the code behind some of the transformation happening on Acko.net, Wittens has promised to release it via GitHub in the near future.

Categories: Technique