@media all and (-webkit-min-device-pixel-ratio: 1){
     selectors {
           properties: values;
     }
}

Put all your Webkit only properties and valus withing the @media at-rule block.

A constant is defined as:

A variable whose value cannot change through assignment or be re-declared while the script is running

A constant is declared using the const keyword.

The scope of a constant is the same as the scope would have been had it not been declared as a constant (local within a function, global outside of a function, or as a closure.

Thru a simple example, Hedger shows that Opera does not respect constants.

If you define a constant, you should not be able to change the value of the constant in your script.

function hello() {};
  const hello = 'goodbye'; //should throw an error

function myfunction() {
  const hello= 'goodbye';
  var hello = 42; //should throw an error
  //statements
}

Hedger defines his constants using the define method.

Web Developer / UI Engineer

OVERVIEW:

We are looking for a brilliant User Interface engineer with strong front-end web development skills. Candidate has desire to have direct influence on the direction and quality of the leading travel search engine.

RESPONSIBILITIES:

Develop application features with a focus on the UI experience, contribute to interaction and visual design of user features, performance measurement and tuning, A/B testing. In addition the successful candidate will assist in the development and maintenance of frameworks for web-tier development,

EXPERIENCE (required):

• 2 years web development experience with at least 2 years experience at a high-traffic consumer web site
• Ability to do rapid prototyping of new features in parallel with design
• Passion for the development of high-quality web UI
• 2 years experience hand coding table-less XHTML, HTML, CSS, including browser differences & hacks
• 2 years experience with Photoshop, Fireworks, or other graphics programs
• 2 years experience debugging Internet Explorer and other browsers.
• 2 years plus experience working with and resolving cross-browser compatibility issues
• 1 year experience Object Oriented JavaScript
• hands-on experience doing widgets mash-ups, such as Google Maps, Facebook, OAuth, Flickr Photo Widget, or similar.
• Front-end optimization experience included search engine optimization, accessibility and perceived / actual download speed optimization.
• Ability to convert visual designs/wireframes into HTML
• Ability to shift gears quickly
• BS in CS with 1+ yr experience, AA in CS with 2+ yrs experience or other degree with 4+ yrs experience preferred.

EXPERIENCE (ideal):

• Hands-on experience with JSON and JavaScript support libraries such as jQuery, prototype, scriptaculous, YUI.
• Experience with mid-tier technologies: PHP, Ruby on Rails, Struts or other (not ASP.net)
• Design/Prototyping Tools: Photoshop/GIMP/Fireworks
• Debugging Tools: YSlow and Firebug/DragonFly/Developer Tools
• SQL, UNIX

Yesterday, Firefox 4 Beta was also released, in beta (duh!). They added a feedback button to enable easy feedback submisstion. Smart, since few will go out of their way to provide feedback, but they make it so easy that you can’t help but provide feedback if you find a quirk. I kind of wish Opera had that feature. And kind of wish Firefox didn’t.

Removing the Firefox Feedback Button

Removing the “Feedback” button is actually beyond easy. It’s simply an addon. And, since Firefox 4 beta is basically incompatible with all other addons, it’s the only one listed that you can disable.

To disable it, click on Tools > Add Ons. A new browser window entitled “Add-Ons Manager” will open with a list of all of your addons. The only one that is not disabled is the “Feedback 10rc1″ addon. Click on the “disable” button, and restart Firefox.

I thought that Firebug was going to be native in FF4, like Opera comes with DragonFly and Safari comes with Developer ToolBar, even Chrome and IE8 have an equivalent of Firebug, but Firefox 4 does not, and Firebug is not compatible. Because Firebug is not compatible with FF4 make sure to enable saving your current version of Firefox before downloading the new Beta.

While Firefox 4beta adds an HTML5 parser and full support for web video, audio, and drag & drop, there has been precious little improvement in Web Forms support. Similar to Safari 5, the beta release has removed some support from :link and :visited. In über cool fashion, it has added support for a non-spec CSS selector :-moz-any(), which basically allows you to say “pick any of these descendent selectors of this parent selector”, instead of having to write out the parent selector in front of every single of its descendants that you want to match separately separated by commas… that always gets long. Since we still have to write the longhad of the selectors for other browsers, unless this selector idea catches on and is added to the spec, it will be useless except for use as a hack to target Firefox 4.

Another added feature in FF4 beta is the CSS calc() value. Useful for when you want to define width of 100% on an element with padding, or when you want to ensure there is a fixed width gutter on a fluid layout, width: -moz-calc(25% – 15px); can help ensure that gutter.

By the way, why are you reading this blog? I’ve moved over to www.standardista.com. It’s prettier, more thorough, and even more interesting over there.

Opera

With Opera it’s almost easier to say what it doesn’t support, since they’re doing such a great job of supporting modern draft standards.

Opera supports all of the new input types except tel, color and search, but since they support pattern matching, you can enter your own pattern. Unfortunately the placeholder and multiples attributes are not yet supported. When placeholder is supported, the lack of support for tel since there is support for pattern may be almost a non-issue.

Definitely download Opera and take Dragonfly, their version of Firebug, for a spin. Not new to 10.6, but still very cool.

I’ll be testing further over the next few days, but since this one is a doozy if it is a bug, and undocumented (my Google skills are failing me at this hour), i wanted to let y’all know now instead of waiting for my full post. Does anyone know if this is a new security feature, or if it is a bug?

You can download safari.

UPDATE:

According to a somewhat hidden security file at Apple, http://support.apple.com/kb/HT4196, this seems like it is actually a security feature:

WebKit: Available for: Mac OS X v10.4.11, Mac OS X Server v10.4.11, Mac OS X v10.5.8, Mac OS X Server v10.5.8, Mac OS X v10.6.2 or later, Mac OS X Server v10.6.2 or later, Windows 7, Vista, XP SP2 or later
Impact: A maliciously crafted website may be able to determine which sites a user has visited

Description: A design issue exists in WebKit’s handling of the CSS :visited pseudo-class. A maliciously crafted website may be able to determine which sites a user has visited. This update limits the ability of web pages to style pages based on whether links are visited.

At the time of this writing, it was at the way bottom of the page.

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .myClass { background-color: #FF0000; }
     #myId {color: #0000FF;}
     p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
}

Put the above code anywhere in your CSS file. The other browsers will read the rest, but only webkit reads the -webkit-min-device-pixel-ratio of the declaration, and therefore only Chrome and Safari will abide by the rules in the CSS code block.

The important stuff to learn:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* put webkit CSS here*/
}

JavaScript Variable Scope: Local and Global Variables

In writing JavaScript functions, variable functions can trip you up. A common error is overwriting a global variable because the variable in a function didn’t have local scope. If that last sentence didn’t make any sense, then this article is for you.

This article covers tips and tricks for understanding variable scope in JavaScript. Read more »

Community MX has over 3,400 articles on web development and design. check it out. They’re also looking for new writers if you’re is interested.

HTML5 Web Forms and Browser Support

HTML5 Web Form specifications are not yet complete, but some browsers are supporting many of the proposed features. I’ve been testing all of the new values in different browsers (want to send me an iPad so I can test, feel free … hint, hint). To see what browsers are supporting as of last week, read more ».
It’s still a work in progress, and i’ll be adding more details to the bottom until it’s complete.

Standardista.com is my new blog where I write about CSS3 and HTML5. There are a lot of excellent (if i do say so myself) browser support grids there. Dig in deep, there isn’t that much there, but what’s there is really thorough.

The “view source” functionality of browsers is near and dear to my heart, as it’s how I learned to code, it’s how I judge who to hire, and it’s how I help trouble shoot bugs and quirks when developers ask me for help.

Here’s the summary from the the interwebs:

View Source Has a Posse – http://my.sxsw.com/events/event/5005

“View source” is a feature of all modern browsers that few people use, and that more probably wouldn’t miss if it disappeared. Still, viewing other people’s source code has played an undeniable role in the Web’s development, spurring a culture of creativity and sharing, and cementing values of openness and transparency in developer practices.

However, as the Web becomes increasingly dedicated to social interaction and applications rather than static documents, the value of viewing machine-generated source code raises a critical question: will view source be relevant to the next generation of Web apps? And what might be lost if new Web applications refuse to include its functionality?

Panelists include Aza Raskin from Mozilla, Chris Wilson from Microsoft, Michael Lucaccini of Archetype, and Alex Russell of Dojo & Google, and ME!.
Questions addressed will include:

1. what is View Source?
2. how have web developers and designers use View Source?
3. what were the original intentions of the feature?
4. how has view source functionality changed with things like Firebug and Web Inspector?
5. what alternatives exist to support iterative hacking on other people’s code?
6. how might tools and communities like GitHub augment or replace View Source?
7. how important is view source to learning to program complex web applications?
8. UserStyles, UserScripts, JetPacks and similar end-user web customizations – will these kinds of innovations be stifled if View Source goes away?
9. how can view source functionality be added to other “non-web” software? How would it be different than open source software?
10. is there a larger point to be made about the relevance of open source in the social/cloud era of computing?

The panel is 3:30 on Saturday in room 12AB. I hope to see you there. Please do say ‘hi’.

I will continue to maintain this blog, but Standardista.com will hopefully be better organized, and less of an eyesore.

Here are some of the CSS3 articles you’ll find in my new online home:

Below is every most CSS3 Properties, all the possible values for that property, and the support for each property value from grade-A browsers

This grid does not include animation, tranforms, grids, columns, layouts or templates. I have a separate post for CSS3 Background Properties and CSS3 border properties. Those are all coming soon. Sorry for the slow download, but this table is over 8000 lines worth of HTML. I am breaking this out into smaller, related sections. I’ll be posting those at my new site. And, yes, I know this table breaks the layout of the page. This whole blog theme is ugly, but some of the content hopefully makes this eyesore worth it The new site should be ready soon: and way prettier!

body {
    background-color: transparent;
    background-position: 0% 0%;
    background-size: auto auto;
    background-repeat: repeat repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none; }