Recent WebKit browsers (I’m looking at Safari 5.0.1 and Chrome 6.0.472.36 beta) now adhere to the CSS3 border-radius spec, so you can drop the -webkit- vendor prefix. But conflict occurs when you use two parameters as the value.
.box {
-webkit-border-radius: 40px 10px;
-moz-border-radius: 40px 10px;
border-radius: 40px 10px;
}
Firefox, Opera, and the latest WebKit browsers (and IE9, I’m guessing) will display a box with the top-left and bottom-right with 40px border-radius, and a top-right and bottom-left with a border-radius of 10px.
But older WebKit browsers will not have the new border-radius rule overwrite the previous -webkit-border-radius, and instead the box with have an eliptical border-radius, the equivalent of border-radius: 40px/10px;.
Working with the DOM can cause browser reflow, which is the browser’s process of determining how things should be displayed. Directly manipulating the DOM, changing CSS styles of elements, and resizing the browser window can all trigger a reflow. Accessing an element’s layout properties such as offsetHeight and offsetWidth can also trigger a reflow. Because each reflow takes time, the more we can minimise browser reflow, the faster our applications will be.
4 practices I need to remember when tooling around with the DOM:
Rather than changing multiple style properties on an element, just change its class and rely on CSS.
Remove elements from the DOM when you’re doing heavy manipulation.
When creating a new element, manipulate its properties before appending it to the DOM.
var element = document.createElement('div');
document.body.appendChild(element);
element.innerHTML = 'This is a div.';
element.className = 'new-element';
var element = document.createElement('div');
element.innerHTML = 'This is a div.';
element.className = 'new-element';
document.body.appendChild(element);
Append multiple elements to a DocumentFragement and when the entire structure is complete, append that DocumentFragement once to the DOM.
for (var i=0; i < newElementCount; i++ ) {
var element = document.createElement('div');
document.body.appendChild(element);
}
var fragment = document.createDocumentFragment();
for (var i=0; i < newElementCount; i++ ) {
var element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
In TextMate, Ctrl + arrows jumps to next word(ish). It will stop at underscores and camel-cased letters.
Getting a fluid bouncing animation can be tricky as you have to set the easing (otherwise known as -webkit-animation-timing-function) for each keyframe. Keep the physics of a bouncing ball in mind. As the object moves upwards, its acceleration decreases until it comes to the top of its accent. So going upwards, -webkit-animation-timing-function: ease-out. Returning downwards, acceleration increases due to gravity. Ergo, -webkit-animation-timing-function: ease-in.
Take a look at this example code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WebKit animation bounce easing</title>
<meta charset="utf-8" />
<style media="screen">
h1 {
position: absolute;
left: 10px;
top: 200px;
-webkit-animation: bounce 1s infinite ;
}
@-webkit-keyframes bounce {
0% { -webkit-transform: translate3d(0, 0px,0);
-webkit-animation-timing-function: ease-out; }
50% { -webkit-transform: translate3d(0,-150px,0);
-webkit-animation-timing-function: ease-in; }
100% { -webkit-transform: translate3d(0, 0px,0); }
}
</style>
</head>
<body>
<h1>Bouncing</h1>
</body>
</html>
Note that the easing is being set on which keyframe. For the upward motion (0% - 50%) it is set on the initial keyframe. On the downward motion (50% - 100%), it is set on the 50% keyframe. The final keyframe requires no easing to be set as this is the final destination of the animation, with no motion occurring afterwards.
This example works in Safari 5. Chrome’s animation rendering engine (I’m looking at on 5.0.375.125 beta) currently looks glitchy.
while loops clean up basic loops. Let’s compare
Using a typical for loop:
for (var i=0; i < maxNum; i++ ) { ...
And a while loop:
var i = maxNum
while ( i-- ) { ...
Only two statements and the logic inside the conditional is one statement. The downside to the while loop above is that it will iterate in a descending manner. That is, if maxNum is 9, the loop will iterate from 9 down to 0, instead of 0 to 9. Of course, you could just as well do an ascending while loop, which looks like:
var i = -1;
while ( i++ < maxNum ) { ...
But this can be a bit obscure if you’re not familiar with what’s going on. Plus, it’s just as long as the standard for loop.
See Rebecca Murphey’s documentation for more details.
Brandon helped me out with this one.
Switch statements clean up your code when you’re checking if a variable matches a value. Say if you’re looking to check if the variable direction is valid.
if ( direction === 'north' || direction === 'south' || direction === 'east' || direction === 'west' ) {
console.log('valid direction: ' + direction);
} else {
console.log('invalid direction');
}
switch ( direction ) {
case 'north' : case 'south' : case 'east' : case 'west' :
console.log('valid direction: ' + direction);
break;
default :
console.log('invalid direction');
}
You can ‘combo’ transition classes only when they use different properties.
for example, with this markup:
<div class="slide-down slide-right fade"></div>
and these styles:
.slide-down:hover { -webkit-transform: translateY(100% ); }
.slide-right:hover { -webkit-transform: rotateX(180deg); }
.fade:hover { opacity: 0; }
When you hover over this element, it will spin upside-down and fade to zero opacity, but it will not move along its Y-axis.
Sweet PhotoShop key command: Cmd + Opt + Shift + E = Create new layer from what’s currently visible
