Categories
How To

How to save .webp images as .png files

Sooner or later, you’ll experience this annoyance:

Meme: Smiling face (Save image as), Unhappy face (.webp).
Icon: “Download .png”

If you use Chrome or a browser that supports Chrome extensions (which includes Microsoft’s Edge), you can install the Save Image as PNG extension, which adds a Save Image as PNG option to the contextual menu that appears when you right-click on an image, as shown below:

Image on web page with contextual menu displayed beside it. Highlighted item in menu is “Save image as PNG.”

Try it out! Download and install the extension and try saving the .webp image below as .png:

Image: .png image of man kayaking in rapids.

For more .webp images, visit Google Developers’ WebP Image Galleries site.

What is WebP, anyway?

It’s an image format developed by Google, and it’s meant to replace image formats that we’re all familiar with — .gif, .jpeg, and .png. It supports features that we’ve come to expect for online images, including:

  • Lossless and lossy compression
  • Alpha transparency
  • Animation

WebP images were designed with the goal of fast er internet image transmission, so they’re optimized for small size. Encoding an image as .webp often produces smaller file sizes that encoding the same image at the same level of image quality using .jpeg or .png encoding.

Most current browsers support WebP, but older browsers such as Internet Explorer don’t.

Although WebP encoding often produced smaller images than JPEG or PNG, the image quality drops a lot as you increase the compression.

Categories
Uncategorized

So That’s What We Do

From a textbook on learning Spanish:

Excerpt from a Spanish textbookFound via Reddit. Click the picture to see it at full size.

The text:

To ask what people do for a living

¿A qué se dedica el señor Machado?

What does Mr. Machado do?

To respond

Es programador. Sabe diseñar páginas Web mejor que nadie.

He is a programmer. He knows how to design web pages better than anyone.

This article also appears in Canadian Developer Connection.

Categories
Uncategorized

Introducing WebMatrix

What is WebMatrix?

webmatrixBy now, you’ve probably seen the tech news reports as well as Scott Guthrie’s announcement about WebMatrix, Microsoft’s lightweight web development web development system that packages a web development tool with a number of new web technologies:

  • IIS Developer Express: a lightweight, free-as-in-beer web server with simple setup, runs on all versions of Windows and is compatible with the full-on version of IIS 7.5
  • SQL Server Compact Edition: a lightweight, free-as-in-beer file-based database with simple setup that can be embedded within ASP.NET applications, supports low-cost hosting and whose databases can be migrated to the full-on version of SQL Server.
  • ASP.NET “Razor”: A new view engine option for ASP.NET for easy and clean templating with a simple syntax. You can use Razor to embed C# or VB into HTML.

WebMatrix ties these goodies together in a nice simple package that the beginning web developer will find easy to use and that the pro web developer will find handy for building quick sites. These parts are also available individually to ASP.NET developers and will soon be available to ASP.NET MVC developers.

If you’re looking for a quick video tour of WebMatrix, chack out the Channel 9 video below:

Get Microsoft Silverlight

Can’t see the video? You can download and install Silverlight or download the video in iPod, MP3, PSP, WMA, WMV, WMV (High) or Zune formats.

A Quick Look at WebMatrix’s Parts

WebMatrix provides a simple, task-based interface for quickly creating web sites, both static and dynamic:

WebMatrix "Quick Start" screen, with four links: My Sites, Site from Web Gallery, Site from Template, Site from Folder

It makes it easy to include open source ASP.NET- and PHP-based web applications in your site:

WebMatrix App Gallery page, featuring apps like DotNetNuke and WordPress

It’s also easy to manage applications in a WebMatrix site:

BlogEngine.NET management page in WebMatrix
If you’d rather write your own web app in WebMatrix, you can do that too. There’s a rich file editor:

WebMatrix file editor, showing the site.master page in BlogEngine.NET being edited

And database definition and management tools:

Screenshot of table definiton and contents in WebMatrix's database tools

There’s also sample code and web helpers to make your life easier and show you what’s possible, such as this handy sample that makes it easy to make a Twitter client. Here’s the code that takes advantage of the sample:

WebMatrix code editor showing a Twitter class' "Search" method being called

…and here’s the result:

Screenshot of sample Twitter app in WebMatrix

If you need to get hardcore, you can open your WebMatrix project in Visual Studio or even the free-as-in-beer Visual Web Developer 2010 Express:

WebMatrix toolbar, with the "Launch in Visual Studio" button highlighted

Previewing your WebMatrix site in multiple browsers is a snap:

The "Run" button in WebMatrix, showing the different browsers you can use to preview your site

Deployment is nice and easy once you’re doing editing your site:

The "publish" button and screen in WebMatrix

Find Out More

I haven’t had a chance to take WebMatrix out for a proper spin yet, but I’m hoping to over the next few days. It’s a collection of cool technologies (which I ‘ll also use in my regular ASP.NET MVC development) wrapped together by a nice, simple tool that’s great for the web developer who’s not working on enterprise sites. I can also see myself using it as a handy prototyping tool.

If you’d like to find out more about WebMatrix, take a look at these:

Download the WebMatrix Beta now!

WebMatrix has just been released as a beta and available for download right now! We want you to try it out and let us know what you think, because we’ll be refining it based on what you tell us.

This article also appears in Canadian Developer Connection.

Categories
Uncategorized

Dive Into HTML 5

dive into html 5

If you’ve decided to learn HTML 5 and are looking for a good introduction, I can’t think of a better starting point than Mark Pilgrim’s Dive Into HTML 5. If Mark’s name rings a bell, it’s probably because you’ve heard of his books Dive Into Python and Dive Into Accessibility. As you can see, he’s taken a theme and he’s running with it.

Dive Into HTML 5 covers a number of topics, including:

Mark has a knack for explaining things, so I’m always happy to point people to his books. I consider Dive Into HTML 5 to be pretty comprehensive; you could create a course based solely on the material in this book, and thanks to the licensing, you can!

Dive Into HTML 5 is available for free online and is a work in progress. It seems to be largely complete with only a couple of missing chapters, and when it’s done, it’ll be available in a couple of forms:

  • For free, online
  • For money, in the form of an O’Reilly book

As with Dive Into Python and Dive Into Accessibility, Dive Into HTML 5 is published under a Creative Commons “By” 3.0 license. You can freely share the contents of the book and even take it and adapt it any way you please: into your presentations, into a lecture or blog article series, or even your own book on HTML 5 – as long as you give Mark credit for creating the original work.

This article also appears in Canadian Developer Connection.

Categories
Uncategorized

IE’s Big Leap Forward

"nine" spelled using the IE logo for the "e"Peter-Paul “ppk” Koch writes in his blog, QuirksBlog (which lives on his site, QuirksMode):

In the past few days I’ve been revising the CSS compatibility table with information about the latest crop of browsers. There’s no doubt about it: this is IE9’s show. It just supports nearly everything. No hassle, no buts.

Microsoft has finally taken the big leap forward we’ve been waiting for ever since they announced their decision to restart IE development back in 2005.

IE9 promises to be an excellent browser. Its CSS support is now at par with that of the other browsers — although each browser still has its specific areas where it performs less. But we cannot in good faith say that IE is behind the others any more.

In the article, he does a run-down of CSS selectors and finds that the upcoming IE9 does an excellent job of supporting them.

Go take IE9 for a spin – download Platform Preview 3 and try it out – and make sure to try your hand at CSS 3 as well!

Download IE9 Platform Preview 3 now!

This article also appears in Canadian Developer Connection.

Categories
Uncategorized

IE9’s Hardware-Accelerated Canvas in Action

As announced in yesterday’s posting, Platform Preview 3 of Internet Explorer 9 is out, and it’s faster than snakes on ice. Some of the credit goes to “Chakra”, the new JavaScript engine, and some of it goes to IE9’s hardware acceleration, which bypasses the layers of abstraction between your web app and the “metal” (namely, your browser, and then the underlying OS).

Download Squad have posted a video showing IE9 Platform Preview 3 blazing past Chrome 6 in side-by-side sessions of the “FishIE Tank” canvas demo. Even on my “medium performance” machine – a Dell Latitude XT2 tablet whose graphics card gets a 3.2 on the Windows Experience Index – I have to push the fish count to 250 before the frame rate drops below 30 fps. Here’s a screenshot taken from that laptop running FishIE Tank, rendering 250 constantly moving and scaling fish sprites between 22 and 29 fps:

fishIE tanks screen shot

The Mr. Potato Gun canvas test is amusing. You load a reasonable facsimile of a popular toy into a potato gun, pull the trigger and watch the hapless tuber’s components fly all over the screen:

mr potato gun

Here’s a demo featuring a more practical use of canvas: Amazon Shelf, which presents a bookshelf of some of Amazon.com’s current bestsellers:

amazon shelf 1

Click on a book in Amazon Shelf to get a better look at its cover:

amazon shelf 2

Click on that cover and get the publisher’s blurb and customer ratings:

amazon shelf 3

Take IE9 out for a spin! Visit the IE9 Test Drive site, download IE9 Platform Preview 3 and hit some canvas-enabled sites.

download

This article also appears in Canadian Developer Connection.

Categories
Uncategorized

Internet Explorer 9: Kicking Ass and Acid3 with Platform Preview 3!

"nine" spelled using the IE logo for the "e"

Back in March, when the first platform preview of Internet Explorer 9 was released at the MIX10 conference, the IE9 team promised to release new previews of the browser about every eight weeks. Eight weeks after MIX10, they kept their promise and released Platform Preview 2. It featured improved JavaScript performance and better adherence to HTML5/CSS/JavaScript standards.

A red, green and blue "Pokeball", each with the IE logo on it

Eight weeks has passed since Platform Preview 2, and it’s time for another release. I’m pleased to announce the launch of Internet Explorer 9 Platform Preview 3! Go ahead, download it, and read on to find out what’s in this new Platform Preview.

V8 engine: "Hardware acceleration"

Not so long ago, if you were using an application, chances are that it was a desktop native app running on top of your operating system. These days, the odds are that the apps you’re running are web apps, which run inside your browser, which in turn run on top of your OS. Even if you’re not factoring in network latency, that extra layer of abstraction slows things down. Hardware acceleration is one fix to this problem, and that’s a major focus of Platform Preview 3. IE9 takes advantage of your computer’s GPU to render HTML graphics and text with greater speed.

Rocket-powered 18-wheeler truck: "JavaScript Performance"

When we say “HTML5”, we’re talking about more than just HTML and the associated styling, but JavaScript as well. Luckily, we’re not only speeding up HTML rendering; we’re also cranking up the JavaScript engine, codenamed “Chakra”, which is even faster in this release.

All this work means that IE9’s performance has been improving steadily since it was first shown (but not released) to the audience at the PDC conference in November. Here are the results of the SunSpider JavaScript benchmark for a number of IE9 iterations (and a Firefox thrown in for good measure):

Graph showing the performance of various version of IE9 previews

And here’s a “wider” version of that chart, showing more of the Esteemed Competition’s browsers:

WebKit SunSpider JavaScript Benchmark results, showing IE9 Platform preview 3 placing nicely

This puts IE9’s JavaScript performance within 50 milliseconds of the fastest browsers – that’s the time it takes sound to travel less than a couple dozen paces.

As the IE9 team will tell you, while JavaScript speed is important, many sites spend cycles in a browser’s subsystems that aren’t JavaScript. They’re always benchmarking against more than just the SunSpider test, but against some of the most popular sites on the net, a real-world test of a browser’s performance, and they’re not done optimizing yet.

By the bye, IE9’s JavaScript isn’t just fast, it adheres better to the ECMAScript standard and even implements new features in the 5th edition of the spec, known colloquially as ES5. They include new array and object methods, as well as other language enhancements for working with strings and dates, and the IE Test Drive site has some demos showing them in action.

"Three Keyboard Cats" pardoy of the "Three Wolf Shirt": "Audio and Video"

Speed is just one dimension of browsing – standards is an important one, too! The support for the <audio> and <video> tags we talked about at MIX10 has been baked into Platform Preview 3.

There is one tag that was conspicuous in its absence, leaving a number of cynics, wags and conspiracy theorists to jump to the conclusion that it would never be included in IE9. Well, it’s here…

Vincent Van Gogh: "Canvas!"

That’s right, Platform Preview 3 introduces the <canvas> tag to Internet Explorer. And it’s hardware-accelerated, too!

We’ve got a number of demos on the Test Drive IE site showing off hardware-accelerated <canvas>, including “Asteroid Belt”, shown below:

Screenshot of the IE9 "Asteroid Belt" demo

So how does Platform Preview 3 fare on the Acid3 test suite, the supposed bane of Internet Explorer’s existence? Not too shabby, jumping up to 83 out of a possible 100 (if you recall, Platform Preview 2’s score was 68):

Acid3 test result screen for IE9 Platform Preview 3: 83/100

There’s a lot more in Internet Explorer 9’s Platform Preview 3, but in the spirit of “Show, don’t tell”, I’m sending you to the IE Test Drive site to download it and take it for a spin, and please let us know what you think!

Download IE9 Platform Preview 3 now!

This article also appears in Canadian Developer Connection.