I haven’t figured out a sweet use-case for this, but hey, it’s there.

sftp user@mydomain.com
# then enter password...

# upload
put remote-path [local-path]

# download
get remote-path [local-path]

# get help
help

Contrary to my observations a week ago, Chrome beta channel (I’m currently running 9.0.597.67 beta) now supports GPU accelerated compositing a.k.a. hardware acceleration and 3D CSS transforms.

Go to about:flags URL and enable GPU Accelerated Compositing, then restart Chrome.

Accelerated compositing works as expected. Transforms that use translate3d( x, y, 0 ) transition much more smoothly than 2D translate( x, y ).

Looking over some of the Intro to CSS 3D transforms demos, I did find a several bugs:

• -webkit-backface-visibility: hidden; doesn’t hide all backfaces. See Perspective 3 demo
• 3D transforms break the Element Inspector
• I’m finding some inconsistencies between Safari and Chrome when I use both -webkit-transform-origin and -webkit-perspective-origin. I think Chrome is actually rendering it correctly.

But I’m jazzed to see 3D transforms and hardware acceleration come to Chrome. This will wake up the other browsers to get on board.

I’ve been fiddling with a Gollum wiki and found a couple disappointments running locally.

• Changes must be committed in the git repo before they are seen in the wiki.
• Gollum only runs from master branch. Issue 94. Coupled with the previous issue, this prevents any way to preview changes. If you wish to view changes, you must commit to the master branch.
• If the Home page is missing, no table of contents will be automatically generated (as they are on GitHub). Issue 74
• Sidebars are not added to pages (as they are on GitHub). Issue 97

These issues are all bummers considering how slick Jekyll is.

23:23 into 11 More Things I Learned from the jQuery Source, Paul Irish briefly mentions exponential notation for numbers.

4e3 // => 4 * 10 * 10 * 10 => 4000

He uses in .animate() call for 4000 milliseconds.

Playing around with gradient backgrounds after Lea Verou and Benjamin De Cock’s demos. Gradients don’t render with perfect anti-aliasing if two color-stops share are especially close to one another. Circles are rendered with pixelated edges. It’s probably better just to use an image here, or if it needs to be dynamic, perhaps generate the image via <canvas>.

Fiddle: Polka dot background with gradients

So many gems within Jordan Dobson’s animated border demo, but I especially like his use of positioning with all four directions.

left: 0;
top: 0;
right: 0;
bottom: 0;

With no size dimensions set, the child element stretches to the size of its parent. Typically, when I want a absolutely-positioned element to match its parent, I’ll use left: 0; top: 0; width: 100%; height: 100%;. The pattern employed by Mr. Dobson affords calculated margins, i.e. the child element can extend to within 10px of its parent.

View “left / top / right / bottom positioning” fiddle

Whitson Gordon at Lifehacker:

If you’re running the dev build but still itching to try even more experimental (and possibly buggier) features, just type in about:flags in Chrome’s address bar to see a list of experimental features available in the build.

You know it’s awesome because there’s a big warning sign.

I run the dev branch of Chrome, so it’s nice to have an easy peak at what’s coming down the road.

It’s got an option for GPU Accelerated Compositing, which is encouraging as Chrome’s transition and animation engine seriously lacks compared to Safari’s or Firefox 4’s. So far, I haven’t noticed any changes enabling it.

I do like the Tab Overview.

Clever pattern by Ryan Stout to get the opposite value for strings.

var oppositeOf = {
  'up' : 'down',
  'down' : 'up',
  'left' : 'right',
  'right' : 'left',
  'black' : 'white',
  'white' : 'black'
};

oppositeOf['left'];
// => 'right'

Phil Dokas:

…That’s the memento design pattern. That’s how Undo in OS X is implemented :)

Chrome renders ::-webkit-scrollbar styles on the body in Chrome.

See ::-webkit-scrollbar demo

::-webkit-scrollbar fiddle

WebKit parses #colorkeyword values as valid colors. background: #yellow renders as yellow.

#color fiddle

Being thorough, I also tested other color values with an extra # in front. No dice, only keywords get parsed.

Typically, I’ve only seen outline used for :active styles, i.e. a:active { outline: none; }. Smartypants Piotr Petrus clued me in to using outline for offset borders with outline-offset.

outline fiddle

Note that outline does not inherit border-radius. Firefox does have -moz-outline-radius just for this. No outline-radius in other browsers currently.

Right now I’m working through the documentation of the new super-Masonry plugin. I’m using Jekyll to generate the pages and the examples, in the same manner that I did for Intro to CSS 3D Transforms. Jekyll has Maruku built in, which comes with several benefits.

• Automatic id attributes added to headers. i.e. Introduction - Current Support Environment
• Dynamic generation of table of contents. Note that you will require an h1 tag
• Meta-data syntax for adding id and class attributes to tags