February 2012
3 posts
3 tags
Function.prototype.bind
Modernizr 2.5 added lots of robust feature detects and tests, but perhaps its most convienent feature is the addition of a Function.prototype.bind polyfill. In short, .bind() allows you to set this within a function.
As I employ prototypal objects and class methods a lot, I’m using .bind() a bunch. It’s helpful within setTimeout:
function ClassAct() {
this.generation = Math.floor(...
2 tags
Slicing arguments
In the jQuery Plugins Authoring tutorial, Ralph Holzmann details an intriguing pattern for plugin methods:
var args = Array.prototype.slice.call( arguments, 1 );
return methods[ method ].apply( this, args );
// (edited for clarity)
As the tutorial explains, this pattern is what enabled jQuery UI plugins to have multiple methods. Indeed, If you look deep within the coils of jQuery UI widget...
3 tags
Varry var var
John Schulz turned me on to the code style of using var for every variable. This goes against most other code styles (see learn.jquery.com and Idiomatic JavaScript), which advise using one var, and listing following variables with commas.
// typically recommend
var firstName = 'Ryan',
lastName = 'Gosling',
age = 31,
isAlive = true;
// multiple vars
var firstName = 'Ryan';
var...
January 2012
4 posts
4 tags
Perspective values require px
Now that 3D transform support has landed in Firefox Aurora, it’s prime time to go back and revise any previous WebKit-only demos for other browsers.
Paul Rouget:
Please use “px” at the end of the perspective values. If you don’t, this will only works with Webkit (your examples don’t work correctly with Firefox because of that).
You got it, Paul.
#my-3d-environment {
...
2 tags
document.createComment →
Yes, you can dynamically add comments to the DOM.
2 tags
Clear command from terminal in OS X →
Ctrl+U
3 tags
Ignore initial popstate
Within Mike Taylor’s demo for Introducing the HTML5 History API, you’ll find this note:
window.addEventListener('popstate', function(e){
// be nice to Chrome, the spec changed
// and they haven't caught up yet
// http://code.google.com/p/chromium/issues/detail?id=63040
if (history.state){
self.loadImage(e.state.path, e.state.note);
}
}, false);
Per Chromium issue 63040,...
November 2011
3 posts
3 tags
WebKit zoomed-out font-size threshold
The zoomed-out font-size threshold in WebKit is a mysterious anomaly I’ve long had my suspicions about, but now have finally tested. Take some body copy, start zooming out the page, and observe how copy with smaller font-sizes seem to maintain some legible size, even though they should be much smaller. Try hitting ⌘- too see the effect on this fiddle.
View fiddle - zooming font-size...
1 tag
instanceof →
The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor. Like typeof, but for ballers who are working multiple classes and instances.
4 tags
Subpixel positioning with CSS transforms and type...
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...
October 2011
2 posts
1 tag
Command + drag removes items from menu bar
via Apple Support Communities
2 tags
How do you remove untracked files from your git... →
git clean -f
September 2011
3 posts
2 tags
Stack Overflow - How do I edit an incorrect commit... →
git commit --amend
1 tag
Vertical editing
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...
3 tags
output element →
The output element represents the result of a calculation. Ideal to be used with range inputs, as Mike Taylor demonstrates.
August 2011
9 posts
3 tags
Twitter displays Gists →
2 tags
figure margin
<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...
2 tags
GitHub message commit link
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.
2 tags
isFinite
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...
3 tags
TotalFinder →
TotalFinder is little app that adds a couple much-needed features to OS X’s file browser, namely tabs and split windows. Finder windows tend to multiply as the day goes by. Having all Finder windows collected removes a lot of desktop clutter.
There are other Finder replacement apps out there, but this is the only one I’ve stuck with. It works as an extension to Finder, rather than a...
1 tag
rsync
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...
1 tag
git config --get remote.origin.url
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
# >>...
1 tag
Li'l bash scripts
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...
2 tags
GitHub link to source code with commit tree
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...
July 2011
5 posts
example.com →
Via Phize on HTML5 Boilerplate issue 613, the proper example URL is example.com. Other domains like domain.com will point to actual valid URLs, where as example.com is reserved by ICANN.
3 tags
Re-enable Option+arrow move-by-word in Lion
Before you go whining like an impulsive brat about a reliable OS X feature that you believe has been sorely ripped out of Lion, rest assure that there’s probably a preference setting for it.
In my case, my beloved Opt+arrow move-by-word key bindings were not working after I upgraded to Lion. Turns out the default keyboard shortcuts for Mission Control were conflicting with them. Go to...
3 tags
.gitconfig colors
Aw yeah, another command-line coloring post!
John Schulz pointed me to this git cheat sheat (via Rebecca Murphey). Right up front it provides the settings in ~/.gitconfig to color git command output like git diff, git status, and git branch. Here’s what I’m rocking:
[core]
quotepath = false
whitespace=fix,-indent-with-non-tab,trailing-space,cr-at-eol
[color]
ui = true
[color...
1 tag
Option + Click to download link source in Chrome
Option + Click on a link in Google Chrome to download the source of the linked page.
1 tag
Chrome source files
Looking under the hood at the Chrome dev tools and user agent styles, I came across some of the source files that power the dev tools
chrome-devtools://devtools/DevTools.js
chrome-devtools://devtools/devTools.css
devTools.css is worth taking a look a look at as it has the base styles for the syntax highlighting used in the dev tools. Search for /* inspectorSyntaxHighlight.css */.
If...
June 2011
8 posts
3 tags
Coloring remote command line prompts
Picking up on a running theme on the dropshado.ws, I gots to have my command line prompts looking fresh. Locally, I’m now using bash-it, with its killer theming engine by John Schulz to make it happen.
Just recently I realized that I can style my prompt on my remote server when I SSH. Here’s what I added to ~/.bash_profile.
PS1="\[\e[0;32m\]\u@\h \[\e[0;34m\]\w \[\e[0;30m\]#...
1 tag
Gecko DOM Reference →
Or, you can peruse the MDN’s DOM reference, which has proper docs for Element, Node, document, etc.
2 tags
Inspecting DOM object properties
I like taking a peek at native DOM objects like Element and Node using the console’s dir function.
dir( Element )
Then I crack open prototype see all the base properties and methods that native constructor has.
I discovered Element.contains() this way.
2 tags
Returning to stop the function
I’ve been using return more to stop logic inside a function. See PPK: Returning to stop the function.
// within conditional
function doStuff() {
var myCondition = checkCondition();
if ( !myCondition ) {
// do
// lots
// of
// stuff
}
}
// proceed if condition is met
function doStuff() {
var myCondition = checkCondition();
// don't proceed if not myCondition
if (...
1 tag
jQuery version in jQuery.fn.jquery
Get the version of jQuery
jQuery.fn.jquery
// >> '1.6.1'
It’s bizarre that you can get this via a jQuery method. It allows you to get it as a property on any jQuery object.
$(document).jquery
// >> '1.6.1'
1 tag
Deploying websites with Git →
This method is so killer. I’ve never been able to get a handle of Capistrano, rsync, etc, so I can appreciate how easy this is get going. The hardest part for me was setting up Git on my server. Currently I’m employing the post-receive hook, which means I can push commits and then the server takes care of updating the site. I’m using this both on desandro.com and...
4 tags
Resolving anti-aliasing on WebKit...
Activating hardware acceleration in WebKit with 3D CSS transforms changes the way WebKit renders text. WebKit composites the element so that when rendering the transform, it doesn’t have to re-render sub-pixel anti-aliasing for every frame. This feature is a good thing in that vastly improves performance of transitions and transforms in WebKit.
But this affects anti-aliasing when there is...
2 tags
whois
whois is a command-line utility.
whois icanhascheezburger.com
May 2011
7 posts
1 tag
jQuery.data
I’ve been familiar with jQuery’s data method for a while now. It’s awesome, allowing you to get and set data with a jQuery object.
$('body').data('foo', 52);
$('body').data('bar', { myType: 'test', count: 40 });
$('body').data('foo'); // 52
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
It’s especially useful within jQuery plugins, providing a...
3 tags
Learn JavaScript | Mozilla Developer Network →
A collection of JavaScript reference articles. I’d recommend John Resig’s Learning Advanced Javascript and Addy Osmani’s Essential JavaScript Design Patterns for Beginners. Mozilla has been doing a phenomenal job of documenting the core technologies behind the web. In the past year alone, they have produced the essential go-to reference for JavaScript. w3schools no more! They...
2 tags
Previous directory in Terminal
To go back to the previous directory in Terminal:
cd -
Via The Designer’s Guide to the OSX Command Prompt by John W. Long.
1 tag
Selecting multiple table cell in Firefox
Every now and then I open up Firefox solely to select table cells with Cmd+Click.
TurtleColorWeaponCharacterLeonardoBlueKatanasLeaderDonatelloPurpleBo StaffBrainsMichelangeloOrangeNunchakuWild cardRaphaelRedSaisEmo
1 tag
Git create and checkout new branch
Use the -b flag with git checkout to create and checkout a new branch in one command.
# old way
git branch newbranch
git checkout newbranch
# new way
git checkout -b newbranch
4 tags
Enabling PHP, Apache, & .htaccess in Mac OS X
I’m trying out developing without MAMP, and relying on the frameworks that are built into OS X. Here’s how I got Apache, PHP, and htaccess working:
Install Apache/PHP/MySQL on Snow Leopard
Enabling .htaccess in OS X
Additionally, I changed the document root to point to my projects folder.
Within /etc/apache2/httdp.conf it can be changed in:
DocumentRoot...
2 tags
Named access on the window object
Per the HTML5 spec, you can access elements via their id. For example, on dropshado.ws, which has markup of <section id="posts">...</section>, plugging in window.posts or posts in the console will return the HTML element.
document.getElementById('posts')
// >> <section id="posts">...</section>
window.posts
// >> <section...
April 2011
7 posts
1 tag
git remote show origin
git remote show origin displays info for your remote origin repo. I typically use this when I want to get the URL or the remote repo. Here’s what I get in my HTML5 Boilerplate repo:
$ git remote show origin
warning: more than one branch.master.remote
* remote origin
Fetch URL: git://github.com/paulirish/html5-boilerplate.git
Push URL: git://github.com/paulirish/html5-boilerplate.git
...
2 tags
Changing TextMate JavaScript reformat tab size
TextMate has an beautify command built into its default JavaScript bundle ⌃⇧H (Ctrl+Shift+H). To change the tab size used by the beautifier:
Crack open the Bundle Editor. Bundles > Bundle Editor > Show Bundle Editor or ⌃⌥⌘B (Ctrl+Cmd+Opt++B)
Select JavaScript > Reformat Document / Selection
Add a second argument for the number of spaces to js_beautify($input)
For mine, with two space...
4 tags
Opera sans-serif
Re: sans-serif differences, as of version 11.10, Opera now uses Helvetica as the default font for sans-serif for Macs. See changelog for Opera 11.10 beta. I’ve updated the previous post accordingly.
Thanks to Divya Manian for confirming the change and tracking down the changelog and being the awes.
2 tags
cssText
MDC > DOM Reference > cssRule.cssText:
cssText returns the actual text of the style rule.
Found in a fiddle by Divya Manian.
It’s used like element.style.cssText. From what I understand, it’s the equivalent of getting the string returned by element.getAttribute('style'). I haven’t found a use-case for it yet. element.style already returns a object.
View...
2 tags
Strings in terminal
I’ve finally clued in to setting and using simple strings within Terminal. Set a string:
name='David DeSandro'
No spaces around the =. Quotes are required if your string has spaces. Reference it with $
echo $name
# will output `David DeSandro`
For example, when creating a new post, I have to reference the same long filename several...
1 tag
How to open animated gifs in Photoshop CS4 →
To open animated gif in CS4 on a MAC
Go to open, select your GIF, then in the bottom left corner of the open file dialogue box select Quicktime Movie as the format, then open your GIF.
You’ll need to open your animations window by going to window -> animation. This will bring up the time line.
If you want to have all of the frames broken up into layers, click the options in the...