All posts tagged ‘safari’

File Under: Browsers

The Curious Case of Web Browser Names

Chances are your web browser is open all day, every day. Whether it’s Internet Explorer, Firefox, Opera, Chrome or Safari, the browser is the single most important piece of software most of us use. Given its central place in our lives, some history seems in order. If you’ve ever stopped browsing long enough to wonder why Safari is named Safari or where in the world the word “Mozilla” comes from, we have some answers for you.

Martin Beeby, a developer evangelist at Microsoft, has put together a nice little history of web browser names. Some are obvious — Internet Explorer came about because it was “a name that gave people a clear idea of what the product did” — some are less so, like Opera, which was apparently chosen because, among other things, “the Opera is fun.”

With the exception of Opera and IE, none of Beeby’s name origin stories come directly from the companies behind the browsers, so take all of these with a grain of salt. For instance, no one seems to know the exact origins of “Safari”, though the Beach Boys’ album seems like a reasonable guess — surfing the web, Surfin’ Safari… get it? The WebKit blog is named Surfin’ Safari, which might lend some credence to that story, but the name also nicely ties in with the notion of exploring the wild and connotes some of the same images as “explorer” and “navigator”.

Perhaps the least obvious name in the bunch is Firefox’s parent company Mozilla. Beeby cites a well-known story that the name that was derived by combining the words that were its original goal — “Mosaic Killer.” Webmonkey has heard another version of that story that claims the word “Godzilla” was the inspiration for “Mozilla,” a Godzilla-like force that would destroy Mosaic.

Beeby doesn’t offer any stories for less well-known browsers, like Konqueror, which, as the story goes, was going to “conquer” what IE and Netscape had “explored” and “navigated” respectively. The allusion didn’t really pan out, but, when Apple came along and ported KHTML to form WebKit, the developers did name their early efforts after a famous conqueror — Alexander.

For more details, and to learn where the names Firefox and Chrome come from, be sure to read through Beeby’s post.

File Under: Browsers, HTML5, Mobile

Mobile Safari Gets More HTML5 Love in iOS Update

Apple recently updated its iOS software for iPhones, iPods and iPads. While there were plenty of new features for users (which you can read about on Gadget Lab), the updated version of Mobile Safari has quite a few nice new tricks for web developers.

Mobile Safari has long been at the front of the mobile pack when it comes to HTML5 support, and the latest version adds several more welcome new features. We now get support for WebSockets, better @font-face handling, better HTML5 forms and even support for the bleeding edge DeviceOrientation API — that’s the API that lets you access the accelerometer from inside the browser.

So far it doesn’t appear that Apple has fully documented the new features, but Maximiliano Firtman, the author of Programming the Mobile Web, has been testing the latest version of Mobile Safari and offers a nice overview of what’s new in iOS 4.2.

If you’re developing mobile-optimized site, or just want to play with next generation HTML features like WebSockets, check out Firtman’s overview of what Mobile Safari can and can’t do. If you’d like to see what Android 2.2 is capable of, Firtman has a similar overview of Froyo’s support for HTML5 and its related APIs.

See Also:

File Under: Browsers, JavaScript

Mozilla Asks, ‘Are We Fast Yet?’

The above charts show the performance of JavaScript engines across different architectures. The tests shown are the common SunSpider and V8 JavaScript benchmarks, with output measured in milliseconds. The tests are run once a day, and the graphs show the last five weeks or so of results.

Go to the real site and click on all the clicky bits.

The green line is Google V8, the red line is Apple Nitro, and the orange and black lines are Mozilla’s two engines, JaegerMonkey and TraceMonkey, respectively. The purple lines reflect Mozilla’s new approach of running the engines concurrently. As you can see, it speeds things up.

But the answer to the question being asked by the URL is “No” — Google is currently either on par with Apple Safari or slightly better, depending on the test and the architecture. Mozilla is improving, but still has a lot of catching up to do.

This testing tool is maintained by Mozilla’s JavaScript team. I found out about it earlier today when John Resig, the guy behind jQuery and a Mozilla employee, tweeted the link. It’s an effective motivational tool, especially since it shows how slow Mozilla’s engines were only a month ago, and how quickly the team is gaining on the leaders.

A couple of caveats: The tests aren’t run in the browser, they are run from the command line. Also, a Mac Mini in doing the testing, so Internet Explorer isn’t represented. From what we’ve seen of IE9′s pre-release code, the browser is incredibly fast. We’re curious to see how its JavaScript engine stacks up.

Also, no Opera. Opera’s Carakan engine is also blazing fast, but it’s not represented here.

Check out the page’s FAQ for more details. Also, the code for the test is open source, so if you have philosophical issues with these methods, build your own testing environment.

Update: Here’s a much more detailed post about Mozilla’s performance on JavaScript benchmarks by Rob Sayre.

See Also:

File Under: Browsers, HTML5

Is Your Browser Ready for HTML5?

The HTML5 era is already here, it just isn’t evenly distributed yet. Browsers vary in their levels of support for the emerging standard, and developers are pushing the envelope with hacks, experiments and proof-of-concept demos.

If you want to find out how well-equipped your browser is for the HTML5 future, just pay a visit HTML5test.com.

The page will check if your browser supports HTML5 parsing, canvas, file drag-and-drop, embedded audio and video, and all of the other elements required by the draft HTML5 specification, as well as specifications that are related to HTML5 but not actually a part of it, like geolocation and local storage.

You’ll be issued a score (out of a total of 300 points) that indicates the level of support for the stuff in the spec, as well as bonus points for support that goes beyond what’s required for HTML5 compliance. For example, your browser gets bonus points for each video codec and audio codec included in the browser. These are only bonus points, and not real points, since HTML5 outlines how audio and video files can be embedded on a page, but does not require a specific audio or video codec to be included.

Here’s how the browsers on my Mac stack up:

  • Chrome (dev channel) scores 217 points and 10 bonus points
  • Safari 5.01 scores 208 points with 6 bonus points
  • Firefox 4 beta 2 scores 189 points with 9 bonus points
  • Opera 10.6 scores 159 points and 7 bonus points
  • Internet Explorer 9 platform preview scores 84 points and 1 bonus point

If you’re wondering how these scores are being generated, the code behind the single-serving app was posted to Github by creator Niels Leenheer. He says he also incorporated the HTML5 parser tests created by Mozilla developer Henri Sivonen.

HTML5, the much-anticipated rewrite of the web’s lingua franca, is currently in open development, with the web’s standards body and all the browser vendors taking part. While some browsers won’t fully support HTML5 until it is officially standardized some time in the next year or two, developers have already begun building with it, and all major browser vendors are adding support into their latest releases.

There are multiple methods of checking for HTML5 element support when a user visits your page, as well as libraries like Modernizr, which let you take advantage of HTML5 elements while controlling how browsers with limited support handle your page.

The HTML5 specification is updated frequently, and browser support for the various elements is in constant flux. As such, the test numbers will go up and down as new browser versions are released and as the code that powers the tests is improved and is updated to reflect HTML5′s changing status.

Also, Leenheer has posted the next version of the test, which ups the total possible score to 315 points, at beta.html5test.com. Go there if you want to see what the page will be testing for in the future.

See Also:

File Under: Browsers

Apple Updates Safari, Turns on Extensions

The new Safari browser with the Twitter toolbar extension installed

Apple released an update to its Safari web browser Wednesday.

Safari 5.0.1 is available from Apple as a free download for Windows and for Mac OS X (Leopard or better). Mac users can also find it in Software Update.

This is an incremental upgrade, but it comes with one big new feature: Safari now has a real platform for third-party extensions, a feature that Firefox and Chrome have had for some time.

Safari 5 arrived in early June, and in addition to dozens of other enhancements (including the much-discussed Reader feature) it included a new architecture for creating lightweight browser extensions that enhance and personalize web pages and web services. Wednesday’s update now lets you install and run those extensions. Apple has also launched a new Extensions Gallery where you can browse the available extensions and download them.

All the major browsers — Safari included — have had a variety of plug-ins, add-ons and toolbars available for years. But Safari’s new extension architecture is much closer to the format recently adopted by Google Chrome and Firefox. This new breed of extensions can be written using HTML, JavaScript, CSS and other web standards. It makes for a much gentler learning curve for potential developers, and for an experienced web programmer, the effort required to create and distribute a standards-based extension is almost trivial. For users, these extensions are easier to maintain and less likely to slow down the browser.

Mozilla calls its lightweight extension project Jetpack, and it’s being incorporated into the newest Firefox releases. The next version of Google’s browser will let users sync their extensions across multiple installations of the browser.

Go to extensions.apple.com to see the gallery of extensions being promoted by Apple. Also, keep in mind that anyone can create and distribute a Safari extension, so distribution isn’t controlled like the App Store. For safety’s sake, Safari extensions are sandboxed inside the browser and signed with a digital certificate so you know you’re getting updates from the same person who created the original.

Apple is promoting a few big-name creations in the gallery. There’s an official Twitter extension, which integrates a simple toolbar Twitter client into your browser, one from MLB that displays scores and headlines, and an eBay manager sidebar for keeping a close eye on your auctions. There’s one on the way from Instapaper.

Of course, the irreverent extensions are more interesting. There’s Defacer, which hides “Like” buttons and other Facebook cruft you find around the web. Shut Up hides comments by default on blogs. A Cleaner YouTube removes visual distractions from video pages, promising to turn YouTube into “a clean and tranquil place” as if that’s even remotely possible.

There are around 100 extensions to choose from right now, and since the new extensions framework in Safari is so simple to develop for, we expect the list to keep growing quickly.

There is one other notable safety enhancement to Safari 5.0.1 — the form auto-fill vulnerability has been patched. This fixes a vulnerability that hackers could exploit to grab personal information from a user by forcing the browser to auto-fill a hidden web form with locally stored data. So, even if you may not care for extensions, you should upgrade Safari for this reason alone.

See Also:

File Under: HTML5, Web Standards

Chrome Shows Off Some Fancy HTML5 Tricks

Google’s Chrome browser has a well-established reputation for being not only extremely fast at rendering executing JavaScript, but also robust in its support of cutting-edge HTML5 technologies.

Both of these capabilities are on display at Chrome Experiments, a site that Google set up to showcase some of the coolest demos on the web for JavaScript apps, intricate CSS layouts and animations done with Canvas.

Chrome Experiments now has over 100 demos on offer, and we picked out some of our favorites for this little gallery.

Interest is exploding in HTML5 and its companion technologies. The hope is that these emerging standards will be widely used to power new web apps, as well as for playing animations, songs and videos in the browser without any plug-ins. Developers and content providers continue to rely on plug-ins like Flash or Silverlight for such multimedia playback tasks for now, but they are increasingly turning to HTML5, JavaScript and other web standards as browser makers continue to build the new capabilities into their latest releases.

We tested all of these experiments in multiple browsers, and almost all of them worked in Safari and Firefox, though they performed much better in the latest beta of Firefox 4 than in the current stable Firefox 3.x builds. Some of them also work splendidly in the latest Microsoft pre-release, Internet Explorer 9 preview 3.

Of course, a few of the Chrome demos on the Experiments site use Webkit-specific technologies and CSS prefixes, so those only work in Chrome and Safari. Some have poo-poohed vendor-specific prefixes, and others see them as a necessary step to force browser makers to adopt the latest behaviors being used in the wild. Regardless of that debate, it’s encouraging to see the different browsers all improving their JavaScript capabilities, which all of these demos exploit.

In short, you don’t need Chrome to view these, but they will all be more impressive in Chrome than in other browsers.

Continue Reading “Chrome Shows Off Some Fancy HTML5 Tricks” »

File Under: CSS, HTML, Web Standards

The Solar System, Rendered in CSS and HTML

A web developer named Alex Giron has created a working model of the solar system using only web standards.

It’s fully animated — though Alex takes advantage of some new CSS 3 features (border-radius, transforms and animations) and utilizes the -webkit prefix, so you’ll need to view it in Safari or Chrome to see the planets move around the sun.

Firefox and Opera users won’t see the animations, just a static CSS layout. But the hover events work, so you can mouse over each planet and learn the story of each celestial body. And yes, he included Pluto.

Here’s Alex’s blog post that includes a walk-through of the code.

Bonus: Alex’s screenshot of the same page in IE.

[Via kottke]

See Also:

File Under: Browsers

Chrome Gains More Converts, Edges Out Safari

Google’s Chrome web browser has, for the first time ever, surpassed Apple’s Safari browser in the United States according to some new browser share data released Monday by StatsCounter.

Chrome now accounts for 8.97 percent of U.S. web traffic, putting it ahead of Safari which is used by 8.88 of U.S. web surfers. In the worldwide arena, Chrome has had the lead since September, 2009.

That’s not much of margin, and it may well be that when Safari 5, released at Apple’s World Wide Developer Conference earlier in June, is added to the numbers, Chrome will slip again.

But considering that Chrome has been around less than two years and Safari has over seven under its belt, even matching Safari’s numbers is impressive.

Of course the two titans of the internet have little to fear from either browser. Microsoft’s Internet Explorer still lays claim to 52 percent of the market with Firefox picking up the slack at 28.5 percent.

The numbers come from StatsCounter, which also has global statistics that put Chrome well ahead of Safari. But, as with any market share survey, take these numbers with a grain of salt. Browser usage routinely fluctuate from month to month and it may well be to early to say Chrome is really ahead of Safari. Here’s StatsCounter’s methodology, if you’re interested.

This does possibly mean good news for Google’s WebM video codec, though. Given that Safari is now the only browser lacking support for the new open WebM video codec, Chrome’s rise may mean that early adopters of HTML5 video will treat WebM as a “works-everywhere” solution.

After all, Safari’s tiny market share is in the same range as the number of users without JavaScript, and clearly that group is routinely ignored.

Horse race photo by Paolo Camera/Flickr/CC

See Also:

File Under: Browsers, Software

Review: New Features Bring Safari 5 Up to Speed

Apple released an update to its Safari web browser Monday afternoon. We’ve been testing it for close to a full day, and we’ve found that Safari 5 performs as advertised: It’s faster, more capable and well worth the upgrade.

Safari 5 was launched rather quietly at the end of the first day of the 2010 Worldwide Developer Conference, an event that was dominated by Steve Jobs’ debut of the next iPhone and the new iOS. Safari wasn’t discussed during the morning keynote, but an announcement was made later that afternoon at a web-developer session.

You can download Safari 5 on Apple’s site. Both Mac OS X (Leopard or better) and Windows (XP and up) versions are available.

First up is the speed boost, which is definitely noticeable in GMail, Facebook, our WordPress admin and other sites with lots of “stuff” going on, like Huffington Post. This is thanks to Safari 5′s new Nitro JavaScript engine. This is the same piece of engineering previously named SquirrelFish (we kind of wish they’d kept that name), that powers JavaScript rendering on top of Safari’s WebKit engine. It gives a small bump to page-load times, but the real improvements are seen in page performance. The complex web apps we tested perform with close to zero latency, about as fast as Google Chrome, the most nimble of the major browsers.

For faster page loads, Safari 5 is implementing DNS pre-fetching. Basically, the browser looks at all the links on the page you’re currently on and fetches the IP addresses of all the linked sites and page assets, preparing itself to make the jump more quickly as soon as you click on a link and begin loading another page. All of this happens in the background. Google Chrome and Firefox do this, too.

There’s added support for various pieces of the HTML5 stack in Safari 5, as well as more support for CSS 3 and other technologies powering modern web apps. According to Apple’s overview page, Safari 5 supports geolocation, sectioning elements, drag and drop, HTML5 form validation, Ruby, AJAX History, EventSource and WebSocket. We can’t tell which version of WebSocket is being supported — typing javascript:alert('WebSocket' in window) into the URL bar just tells us “True,” but nothing else.

At any rate, all of these new features are great to see, as Firefox, Chrome and Opera have supported most or all of these APIs and technologies for a while, and IE9 will support most of them. It also washes away some of the bitter aftertaste left by last week’s PR mess around HTML5 support.

There’s also support for full-screen playback of H.264 videos, and for subtitles — the screenshot at the top shows YouTube’s H.264 player. Apple is touting this as HTML5 video support, but we’d like to point out that while H.264 does make up the bulk of online video, HTML5 doesn’t require videos be H.264. All the other major browsers are backing the new, open source WebM format for video, which we’ve urged Apple to support as well.

One of the most talked-about new features is Safari Reader. A small gray “Reader” button now appears in the URL bar when you land on a news website or blog. Click it, and Safari strips out all of the clutter on the page (ads, widgets, sidebars, headers and footers) and presents just the text in a large typeface, cleanly formatted in a white window that floats, lightbox-style, over a darkened page. It also strings multipage articles together in the same window automatically. It’s intriguing to speculate about how Reader, if widely adopted, will change website-design principles by encouraging cleaner, more readable layouts. Scott Gilbertson explores this idea in detail in his in-depth look at Safari Reader here on Webmonkey.

Continue Reading “Review: New Features Bring Safari 5 Up to Speed” »

File Under: Browsers, UI/UX

Safari 5′s ‘Reader’ Simplifies the Web

Steve Jobs hates your website’s design.

That’s the impression we’re left with after playing with Safari 5′s new feature, Reader. It takes a web page and, in Apple’s words, “removes annoying ads and other visual distractions from online articles,” presenting a clean, uncluttered version of the page content.

To try it out — head the Safari download page and grab a copy of Safari 5, which was made available Monday for Mac OS X and Windows. Click the Reader button (located in the URL bar once a page loads) and Safari 5 will overlay the current page with a black shade. You can also launch it with a keyboard shortcut (Command-Shift-R on a Mac, Esc to exit). The main article on the page is shown against a plain white background, stripping away ads, sidebars, headers and footers. Also, Reader pulls multiple-page articles into the window, so once you hit the first page, you don’t have to click anything to read more. Just scroll down, and the extra pages are tacked on at the end automatically.

The result is a clear message to web designers: Your designs are failing your readers. In contrast to what we all see everyday, Reader’s vision of the web is a very clean and more readable place — there are no distractions, nothing competes for your attention, the web page is suddenly simple and elegant.

It’s no secret that most people spend very little time on a web page; sites have mere seconds to capture a reader’s attention. With so many sidebars, gadgets, animated ads and other confusion, is it any wonder that most people just move on?

Reader’s vision of the web doesn’t make sense on every site, but for long articles in particular, it’s a godsend.

Read our full walk-through of Safari 5 here on Webmonkey.

Of course, Reader isn’t an entirely new idea. Browser add-ons and bookmark scripts like Readability have long offered the same feature (with customization options even), but this is the first time we’ve seen a browser ship with the feature. In that sense, Reader could be a signal of the tides changing.

On one level, Reader seems like it could hurt publishers by subtracting ad revenue, and it could hurt ad networks like Google’s. But Safari loads the entire page — ads and all — before it presents the Reader button in the URL bar. So, by the time the person clicks on the button and launches the Reader view, the ad impressions have already been counted. Reader also has the ability to string multiple pages together, and it appears as though Safari is loading all of the information (including the ads) from the next pages, but only displaying the text. Ad impression numbers should be unaffected by Safari Reader, but click-through numbers will no doubt go down. Also, we noticed some ads served within the text body made it through into the Reader view, so it’s not perfect at stripping out ads.

The message that ads are distracting is nothing new — ad blockers are as old as sin — but the the more interesting implicit message is that the web is currently a cluttered confusing mess. Or at least Apple thinks it is and, having used Reader all morning, we’re inclined to agree.

Apple’s vision of the web does not include Twitter sidebars, recently popular article links, fancy headers or sharing widgets. In short, Reader cuts through the distractions to the actual content. Of course, that’s exactly what good design should do in the first place — focus your attention on what’s important. If every web page were well-designed, there would be no need for Reader. Clearly, that’s not the case.

As web developers ourselves, we appreciate experimental page layout designs. But when it comes to actually reading things on the web, less is far more. In short, we’re hooked. Well, technically, we installed Readability in Chrome and Firefox, but conceptually, the idea of a cleaner, simpler, more readable web is a step forward.

What remains to be seen is how designer’s react to Reader. Some backlash seems inevitable; some sites may even go so far as to block Safari — though that would an extreme move given that just because you’re using Safari does not mean you’re using Reader. In fact, most users may not even notice or use the feature.

However, we’re hoping that not only will something similar appear in other browsers, but that web designers will focus on simplifying their designs. Reader takes things to an extreme. There are ways to give content focus without eliminating nearly everything, and we look forward to seeing that idea gain more currency.

We’re also looking forward to an iPhone version of Reader that eliminates iAds.

See Also: