Author Archive for Scott Gilbertson

File Under: Browsers

Adobe Builds Flash Sandbox for Firefox

Flash logoAdobe wants to save Firefox users from falling victim to Flash-based security flaws. Working with Mozilla, Adobe has created a beta version of Flash with a new sandbox technology designed to limit the damage Flash-based attacks can do. Adobe previously added similar sandbox protection to Google’s Chrome browser.

If you’d like to test the new Flash Player Protected Mode for Firefox on Windows 7 or Vista, head over to the Adobe Labs download page. Bear in mind that this is a beta release and may contain some bugs.

The new sandbox feature for Flash in Firefox will provide extra protection against malicious browser exploits launched through the Flash Player. Sandboxing means that even when such attacks succeed, the damage is limited and won’t spill over into the rest of the browser or even the operating system.

The design of the Flash sandbox is similar to what Adobe uses in its Adobe Reader X Protected Mode. “Since its launch in November 2010, we have not seen a single successful exploit in the wild against Adobe Reader X,” writes Peleus Uhley, senior security researcher for Adobe. Uhley goes on to say that Adobe is hoping to “see similar results with the Flash Player sandbox for Firefox once the final version is released later this year.”

While Adobe has ceased development of mobile Flash, the company continues to develop and improve Flash for the desktop. HTML5′s canvas and video elements — among others — are designed to remove the need for plugins like Flash on the web. However, HTML5 support remains incomplete even in the newest browsers, and Flash will likely remain a necessary part of the web video and animation world for the foreseeable future.

File Under: JavaScript

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

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.

File Under: Web Basics

Mozilla Questions Web Orthodoxies With ‘Pancake’

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.

File Under: HTML5, Web Standards

HTML5 Video on the Web Today

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.

File Under: Web Basics

Video: When We Build

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.

Twitter Adds Responsive Design Tools to Bootstrap 2.0

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.

File Under: Humor, Programming

Jokes for Nerds: Wat Moments in Programming

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
File Under: CSS, HTML, HTML5

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

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.

File Under: search, Web Services

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

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