AdventuresInWebDev

For all you out there who like to keep tabs on new developments in the browser markets, Safari 3.1 has been seeded for testing and it seems they’ve incorporated a number on the new WebKit features!

Here’s a select few examples:

Downloadable Fonts

The idea of downloadable font’s isn’t really anything new but WebKit now supports the @font-face rule:

@font-face {
  font-family: "MyFont";
  src: url(http://www.example.com/fonts/MyFont.ttf) format("truetype");
}

h1 { font-family: "MyFont", sans-serif }

Will this be the end of image replacement and sIFR?

HTML5 Audio and Video

The new HTML5 <video> and <audio> elements add native support for embedding video and audio content in web pages. They also provide a rich scripting API for controlling playback. Adding video to a web page is almost as simple as adding an image.

For example, adding a video is as simple as

<video src="sample.mov" autoplay></video>

and you have controll access through JavaScript as well:

function toggleVideo() {
    var myVideo = document.getElementsByTagName('video')[0];
    if (myVideo.paused) {
        myVideo.play();
    } else {
        myVideo.pause();
    }
}

Sweet!

HTML5 SQL Storage

The client-side database storage API allows web applications to store structured data locally using a medium many web developers are already familiar with - SQL. The API is asynchronous and uses callback functions to track the results of a database query.

Wow, client side SQL? Now that might be more useful than a Cookie!

var database = openDatabase("Database Name", "Database Version");
database.executeSql("SELECT * FROM test", function(result) {
    // do something with the result
});

There is a working example on the WebKit blog, but you’ll need WebKit of course.

If you’re interested in playing around, you can download the latest nightly builds at nightly.webkit.org.

• 10 Principles Of Effective Web Design Make your designs work the right way.
• Secure String Interpolation in JavaScript AN interesting read on some of the security concerns surrounding "$string $inInterpolation".
• UI-patterns.com
• X-No-Thanks Another well thought out take on the whole X-UA-Compatible thing.

So I’ve written a plugin and switched to a weekly summary posting of my delicious links, here’s a select few good ones:

• 10 Things You Need to Know About Your Prospects On the freelance side, it’s always good to know a little about the people you work for.
• 5 ways to pimp out your WordPress weblog Just getting started with your blog? Don’t forget these.
• Beyond DOCTYPE If you haven’t hear yet, this is one of the articles that started all the X-UA-Compatible hoopla. Don’t forget to check out X-UA-Lemur-Compatible—too funny! Especially the blue hat!
• Free Fonts Of The Month Some more smashing good FREE stuff!
• Helvetica (Documentary) For all you typophiles out there., here’s an insightful look into the most prevalent typeface out there.
• Pushing Data to the Browser With Open-Get Using a little ingenuity to push data back to your clients.
• Usability and Interface Design Books Some great interface design books.

• Design Police. Bring bad design to justice!

• A Savvy Approach to Copyright Messaging
  Into photography and don’t want random people linking to or passively stealing your photos? try out this technique to remind people about copyright while keeping your site beautiful.
  tags: copyright photography css photos image
• HTML Purifier - Filter your HTML the standards-compliant way!
  Pure awesomeness for good markup!
  tags: PHP HTML filter markup clean purify

• Monday Inspiration: Data Visualization and Infographics
  Lot’s of good ideas.
  tags: infographics graphs information visualization examples

• Zend Framework: Documentation
  Doc for all things Zend Framework
  tags: php zend framework manual reference
• PHPUnit Pocket Guide
  How to write and use PHPUnit tests
  tags: php reference PHPUnit unit testing manual
• PHP: Hypertext Preprocessor
  Will you really ever remember every php function? Probably not so here’s the reference.
  tags: php programming development web reference manual webdev

• outbreak » Messing up the interface
  How web forms can go very, very wrong.
  tags: messingup bad ux interface usability forms