Solve your site rendering problem with Google Chrome

By Glenn Wilson, Product Manager, Google Chrome
http://googlewebmastercentral.blogspot.com/2009/03/helping-your-site-look-great-with.html


Since launching Google Chrome last September, we received a number of questions from webmasters and web developers about how to make their sites look great in Google Chrome. The questions were very insightful and illuminating for the Chrome team, and I want to respond with a few helpful tips for making your site look stellar in Google Chrome.

Detecting Google Chrome

Most sites will render the same in both Safari and Google Chrome, because they're both WebKit-based browsers. If your site looks right in Safari, then it should look right in Google Chrome, too.

Since Chrome is relatively new, many sites have confused Google Chrome with another browser. If your site doesn't look quite right in Chrome but works fine in Safari, it's possible your site may just not recognize Chrome's user-agent string.

As platforms and browsers adopt WebKit as their rendering engine, your site can detect and support them automatically with the right JavaScript checks. Commonly, sites use JavaScript to 'sniff' the navigator.userAgent property for "Chrome" or "Safari", but you should use proper object detection if possible. In fact, Gmail has been detecting WebKit properly in Chrome since day one!

If you must detect the user-agent type, you can use this simple JavaScript to detect WebKit:

var isWebkit =
navigator.userAgent.indexOf("AppleWebKit") > -1;

Or, if you want to check that the version of WebKit is at least a certain version—say, if you want to use a spiffy new WebKit feature:

var webkitVersion =
parseFloat(navigator.userAgent.split("AppleWebKit/")[1]) ||
undefined;
if (webkitVersion && webkitVersion > 500 ) {
// use spiffy WebKit feature here
}

For reference, here are a few browser releases and the version of WebKit they shipped:


Browser Version of WebKit
Chrome 1.0 525.19
Chrome 2.0 beta 530.1
Safari 3.1 525.19
Safari 3.2 525.26.2
Safari 4.0 beta 528.16



You can find more information about detecting WebKit at webkit.org.

Other helpful tips
Google Chrome doesn't support ActiveX plug-ins, but does support NPAPI plug-ins. This means you can show plug-in content like Flash and Java in Google Chrome the same way you do with Firefox and Safari.
If text on your site looks a bit off, make sure you provide the proper content type and character encoding information in the HTTP response headers, or at the beginning of your pages, preferably near the top of the section.
Don't put block elements inside inline elements.
Wrong:

This will look wrong.

Right:

This will look right!

If your JavaScript isn't working in Google Chrome, you can debug using Chrome's built-in JavaScript debugger, under the "page" menu -> 'Developer' -> 'Debug JavaScript' menu option.
To help webmasters and web developers find more answers, we created a support center and forum specifically to answer your questions. Of course, if you find something you think is really a bug in Chrome, please report it to us!

Help us improve Google Chrome!

If you'd like to help even more, we're looking for sites that may be interested in allowing Google to use their site as a benchmark for our internal compatibility and performance measurements. If you're interested in having Google Chrome development optimized against a cached version of your site, please contact us about details at chrome-webmasters@google.com.

Please keep the feedback coming, and we'll keep working to improve Google Chrome!

Develop new gadgets with support from Google.

http://www.google.com/gadgetventures/

Try your hand on Google pilot program dedicated to helping developers create richer, more useful gadgets. Inspired by the success of iGoogle, which has been driven by the creation by 3rd-party developers of a broad range of gadgets, Gadget Ventures provides two types of funding:

1. Grants of $5,000 to those who’ve built gadgets we’d like to see developed further. You’re eligible to apply for a grant if you’ve developed a gadget that’s in our gadgets directory and gets at least 250,000 weekly page views. To apply, you must submit a one-page proposal detailing how you’d use the grant to improve your gadget.
2. Seed investments of $100,000 to developers who’d like to build a business around the gadgets platform. Only Google Gadget Venture grant recipients are eligible for this type of funding. Submitting a business plan detailing how you plan to build a viable business around the gadgets platform is a required part of the seed investment application process.

Chrome Experiments - The Power of JavaScript!

http://tnerd.com/2009/03/20/5-best-chrome-experiments-the-power-of-javascript/

Google has always been a step ahead when it comes to creating a buzz for its products and attracting great talent to build upon its tools.

ChromeExperiments.com is one such example. Applications showcased on this site are mostly built on JavaScript technologies and are a showcase of out-of-the-box thinking and creativity. These Applications/Experiments might not be put to use as it is, however, they serve their purpose of demonstrating the power of JavaScript and the Browser.

Following are the top 5 experiments from the bunch.. (I recommend viewing these experiments in Google Chrome. Click here to download Chrome if you don’t have it installed already)

BallDroppings: It’s a musical app which looks like pong. The balls are dropped one after the other, users can draw lines/bars to keep the balls from going off the screen. The balls bounce off the bar drawn on the screen creating a sound every time a ball hits the bar.

Click here to launch the experiment or watch the video below to see it in action.

Browser Ball: This is another fun application which shows the power of JavaScript and how well Chrome handles it.

All you have to do is Open windows and throw the ball through them. Not only that but you can also add new windows on the fly.

Click here to launch the app or watch the following video to see it in action

Ball Pool: Ball Pool works on the laws of physics. Shake the browser, move or throw the balls around and see how the browser and see how the onscreen objects react to it.

From the Author: Start by shaking the browser, then create new balls (click on empty space), move some others (drag) and reset the screen (double click).

It’s like the old days once again!

Click here to launch the experiment or watch the following video to see the app in action

Boombox: This application lets you control the volume of the sound by resizing the channel window.

For demo purpose the application plays a song online, however, it would be great if it can be integrated with any of the music services online.

Click here to launch the application or watch the video below to see the app in action

Monster: This application demonstrates how JavaScript is used instead of Flash to create 3D objects and animation in the browser.

Click here to launch the animation or watch the video below to see it in action.

Abhishek Rungta interviewed at SES London 2009

Show You’re a Professional with Isilon Certification

In the IT industry you can show you’re a professional with Isilion and the Isilion certification. With the Isilion certifications training and the Isilion practice exams, you cannot go wrong in any way. You will be able to pass your exams with flying colors.
Everything that you need will be made available to you including Isilion training tools, Isilion exams preparation and the Isilion study guide prepared by certified exams expert. With all of this and so much more, you will not fail in the task you have set for yourself.
After all of the effort that you have put forth, studying day in and day out, the Isilion exams will be a walk in the park by the time that you are done. There are professional instructors and teachers that are at your disposal to help you every step of the way.

Move On With Your Career
They want to make sure that you get your certifications with Isilion and move forward in the career and field of your choice. By getting your certifications, you are showing the IT world that you are ready to undertake one of the most challenging careers in today’s market place.
Employers will see you as someone that is taking their career seriously and will not let anything stand in their way of getting what they want. You will have the opportunity to shine above all others when you can show a potential employer that you are certified.

Use the Guidelines

By following the study guide for Isilion that is made available to you by you are getting all of the information that you could possible need to help you succeed. Although they cannot take the test for you, with all of the support that you will receive you will feel as though they are actually there helping you with every question that you have to answer for the Isilion exam or other exams preparation study guides , tutorial, practice tests, 200-045 practice exam.
So, what are you waiting for? There is no time like the present to jump on board with Isilion and start studying for your future. This is a choice and a decision that you will never regret working with Isilion. Secure your future and get your certifications with exams experts today and Isilion so you will never look back again.

Zend Framework 1.7.5 released - contains important security fix

Zend Framework 1.7.5 has been released, and as always you can download the latest copy of Zend Framework for free from:

http://framework.zend.com/download/latest/

Besides the normal small enhancements and bug fixes that come with an incremental release such as this, there is also a rather important (and somewhat controversial) security fix that was added. This security fix breaks backwards compatibility with the previous version, because it simply must in order to exist. There is however a way to turn the security fix off to keep your current applications working in the case that this change breaks you.

5 Popular CSS Frameworks + Tutorials & Tools for Getting Started

CSS frameworks have grown in popularity recently, enabling developers to rapidly prototype designs. The idea of CSS Frameworks is to do all the heavy lifting of the repetitive tasks you do over and over again on each site, allowing you to get faster results and get to the fun stuff designers love.

Main features of good CSS Framework is to 1) rapidly speed up our development time, 2) should have a very small size, 3) have good documentation and tutorials and 4) have clean grid structure. You will need a basic understanding of the CSS framework you are going to use to understand why and how things get solved.

In today’s post we present an overview of the 5 most popular CSS Frameworks; showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.

1. 960 CSS Framework

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.

Demo can be found here

Tutorials Explaining how to use 960 CSS Framework

• A Detailed Look at the 960 CSS Framework

  

  “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.

• 960 CSS Framework - Learn the Basics

  Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.

• Fluid 960 Grid System

  

  The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.

2. Blueprint CSS Framework

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.

There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.

Check out the Live Demos

Tutorials Explaining how to use Blueprint CSS Framework and tools using it

• BlueprintCSS 101

  Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.

• A Closer Look At the Blueprint CSS Framework

  In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.

• Blueprint CSS Cheat Sheet

• Blueprint Grid CSS Generator

  This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

• PXtoEM

  

  PXtoEM.com is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.

• Construct

  Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.

3. The jQuery UI CSS Framework

jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.

• Styling Buttons and Toolbars with the jQuery UI

  

  A real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed for jQuery UI widgets that can easily be applied to any plugin, and even static content. Here are button examples that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.

  Check out the Live Demos here

4. YAML

Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.

YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.

Check out the Live Demos here

• Flexible Layouts with YAML

  

  Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.

5. Yahoo YUI Grids CSS

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.

The YUI Grids Builder — a simple interface for Grids customization.

Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet