Along with WebKit hardware-accelerated anti-aliasing, CSS 3D transforms can have adverse effects on type rendering when translate X/Y values have subpixel, or decimal values.

View fiddle: Subpixel type rendering. Hover over elements to disable transforms.

In WebKit, the first two elements will have fuzzy type and borders, as rendered elements don’t exactly line up with pixels on the screen.

Just to be thorough, I took a look at 2D subpixel translation transforms (i.e. translateX(0.5px)). In WebKit, the type seems to render appropriately with the subpixel values. However the borders don’t look so good. They get positioned in between pixel spaces, rendering a 1px border with 2 pixels. Firefox doesn’t have any issues with borders.

The fix is to prevent decimal values when using translate and round those values to the nearest integer.

via Apple Support Communities

Vertical editing isn’t a new concept. Googling it with regards to TextMate, I see that it’s oft-referenced as one of the top features. But darnit, I didn’t just start using it until a couple weeks ago. So killer. In TextMate, trigger vertical editing by holding Option and then select using the mouse.

Looking back at CSS3 formatting, vertical editing pairs best with vertically aligned properties. It totally makes sense for editing big blocks of vendor-specific redundant properties. No more cringing when you have to tweak a transition style.

  .foo {
    -webkit-transition: opacity 1s;
       -moz-transition: opacity 1s;
         -o-transition: opacity 1s;
            transition: opacity 1s;
  }

<figure> elements a good amount of margin from Firefox and WebKit’s user agent styles.

figure {
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 40px;
  -webkit-margin-end: 40px;
}

See fiddle figure margin

This is a new style within the past year, as 3dtransforms use <figure>s for the panels of the 3D objects. The default margin was offsetting all the panels.

normalize.css already has the situation under control, setting figure { margin: 0; }.

Quickly link to a commit in a GitHub message. SHA: followed by the first 7 or so of the commit SHA for that project will be converted into a link. For example, I just dropped:

SHA: 49b5c3a6eb509

which became - SHA: 49b5c3a

More goodies in GitHub Flavored Markdown. You can also quickly reference other projects and branches.

isFinite() is a top-level function (like isNaN()) that “Evaluates an argument to determine whether it is a finite number.” JFSIII pointed this out to me, debugging my code. I got lazy checking a numeric value was not undefined and had something like this:

// check if value is defined
if ( value ) {
  // do stuff..
}

The problem was that 0 would be a proper value, but it is evaluated as falsey in the above conditional.

!!0
// >> false
isFinite(0)
// >> true

// check if value is numeric
if ( isFinite(value) ) {
  // do stuff
}

isFinite() does not specifically check if the value is a number, as it returns true for booleans.

isFinite('foo')
// >> false
isFinite(function(){})
// >> false
isFinite(true)
// >> true
isFinite(false)
// >> true

A while back, I was looking for a command line replacement for FTP. Even with the best FTP app out there, dragging and dropping files can get tedious, especially for little updates that you just want to see on the remote server (yeah, you can sync in Transmit… but you still have to open the app and whatnot).

In review, SFTP is decent if you want to browse around the remote server. SCP is quick and easy for uploading a single file. But if you’re looking to sync-up a whole directory, rsync is the way to go.

Because rsync is such an old utility, I had some trouble finding a decent tutorial or blog post. The best reference is its man. So long as you have SSH access, using rsync is fairly straight forward. To upload:

rsync -avz /local/myproject/ user@server:/remote/myproject

To download:

rsync -avz user@server:/remote/myproject/ /local/myproject/

Looking at the arguments, -a syncs all subdirectories, -z compresses the transfer, and -v makes the procedure verbose.

This would recursively transfer all files from the directory src/bar on the machine foo into the /data/tmp/bar directory on the local machine. The files are transferred in “archive” mode, which ensures that symbolic links, devices, attributes, permissions, ownerships, etc. are preserved in the transfer. Additionally, compression will be used to reduce the size of data portions of the transfer.

Note that the remote path in the download script has a trailing /.

A trailing slash on the source changes this behavior to avoid creating an additional directory level at the destination. You can think of a trailing / on a source as meaning “copy the contents of this directory” as opposed to “copy the directory by name.”

I’m using this command in a couple li’l bash scripts to deploy projects to my remote server. Here’s demo/deploy.sh

#!/bin/bash
rsync -avz --exclude '.git' --exclude '*.sh' ./ $BERNA:~/www/demo

The --exclude argument specifies which files to not sync. For desandro.com/deploy.sh, I use --exclude-from and a separate file exclude.txt. ($BERNA is a local alias I have user@server, so I can keep my username and server semi-private.)

I use this following script, sync.sh, upload and download:

#!/bin/bash

REMOTE=user@server:remote/dir

if [ "$1" == 'down' ]; then
    PATHS="$REMOTE/ ./"
else
    PATHS="./ $REMOTE"
fi

rsync -avz --exclude 'ignoreme.txt' $PATHS

./sync.sh uploads, and ./sync.sh down downloads.

Here’s a faster way to get the URL of a remote git repo, using git config:

git config --get remote.origin.url
# >> git@github.com:desandro/dropshado.ws.git

Or to get list all the options of local .git/config:

git config --local -l
# >> core.repositoryformatversion=0
# >> core.filemode=true
# >> core.bare=false
# >> core.logallrefupdates=true
# >> core.ignorecase=true
# >> remote.origin.url=git@github.com:desandro/dropshado.ws.git
# >> remote.origin.fetch=+refs/heads/*:refs/remotes/origin/*
# >> branch.gh-pages.remote=origin
# >> branch.gh-pages.merge=refs/heads/gh-pages

See previous method git remote show origin.

After coming across Modernizr’s compress bash script, I’ve been adding my own li’l bash scripts here and there in my projects. They help automate any repetitive task, or provide a shortcut for a bash command I don’t want to remember.

Development

Make a sweet bash script, like helloworld.sh:

#!/bin/bash
echo 'Hello world!'

Make the script executable by changing the permissions:

$ chmod 755 helloworld.sh

Run the script from the command line

$ ./helloworld.sh
# > Hello World

Examples

metafizzy.co / newpost.sh and dropshado.ws / newpost.sh: creates a new post from a template

#!/bin/bash

# creates a new post
# format as _posts/YYYY/YYYY-MM-DD-filename.ext
# usage:
#   $ ./newpost.sh my-new-post-filename

COPY_FILE=_posts/template.mdown
# create file
POST_FILE=_posts/$(date "+%Y/%Y-%m-%d")-$1.mdown

echo new post: $POST_FILE
cp $COPY_FILE $POST_FILE
# open it
mate $POST_FILE

demo / deploy.sh and desandro / deploy.sh: rsyncs project to remote server

#!/bin/bash
rsync -avz --exclude '.git' --exclude '*.sh' ./ $BERNA:~/www/demo

neo-vision / build.sh: moves release files into sub directory, compresses JS, zips it all up

#!/bin/bash

BUILD_DIR='neo-vision'
ZIP='neo-vision.zip'
REMOVABLES=("build.sh" "prettify.js" "lang-css.js" "README.mdown" $ZIP)

rm -rf $BUILD_DIR/
mkdir $BUILD_DIR
cp *.* $BUILD_DIR

# minifies prettify js
cat prettify.js lang-css.js | uglifyjs -nc > $BUILD_DIR/prettify.min.js

for REMOVE in "${REMOVABLES[@]}"
do
    rm $BUILD_DIR/$REMOVE
done

zip -r -u $ZIP $BUILD_DIR

When referencing source code in a GitHub project, it’s nice to be able to link to specific lines of a source file. GitHub makes this easy enough. From the main project page (github.com/jquery/jquery), you can browse to a specific file (github.com/jquery/jquery/blob/master/src/css.js) and then click on line numbers to highlight a line, which also sets the URL anchor (blob/master/srs/css.js#L171), and Shift+Click to highlight multiple lines (blob/master/srs/css.js#L171-185).

The only problem is that source files are subject to change, or even be removed, so there’s no guarantee that your link will always point to the correct place. By default, GitHub project pages link to the most current version of the source. A better practice is to link to a specific commit, where the content of source files are not subject to versioning.

To view a GitHub project at a certain commit, click on the tree link in the commit header, or just press t on your keyboard. You can then browse the project files, and link to sources of this commit, i.e. github.com/jquery/jquery/blob/27291ff06ddb655f90a8d1eada71f7ac61499b12/src/css.js#L171-185. Note that the only difference in the URL is changing the branch name master with the commit SHA.

+1 tip from Paul Irish:

plus you only need 4 characters of the SHA in the URL.. it figures it out. i usually truncate to 7ish characters.

Nice: github.com/jquery/jquery/blob/27291ff/src/css.js#L171-185