May 2012
1 post
2 tags
NaN messes with sorting
I’m building some dynamic table sorting. Looks like NaN values are messing with the sorting. For the sake of the example, let’s use an array of number-like strings. Try pasting this in your console.
(function() {
var numbers = '19 26 63 twelve 83 106 hundred zero 12'.split(' ');
return numbers.sort();
})();
// ["106", "12", "19", "26", "63", "83", "hundred", "twelve", "zero"]
...
April 2012
2 posts
2 tags
Sequel Pro →
Nice SQL database management app.
2 tags
Chrome Developer Tools settings
Via JFSIII, Chrome’s Developer Tools has some useful options hidden in its settings panel. All this time, it has been hiding as that little cog icon in the bottom right.
Personal favorites include Disable cache, Text Editor indent, Dock to right which is ideal for mobile-sized media-query development.
March 2012
3 posts
2 tags
Git submodules
I think I’m ready to discuss Git submodules. My chronic problem with submodules is that I don’t use them often enough to understand how they work. From what I gather, you can do a lot more than what I’ll cover, but I’m only interested in just placing a repo in a repo.
The benefit of submodules is that you can reduce duplicate code. Instead of copying files from one repo...
1 tag
Git Book - Maintaining Git →
What’s this… git gc and git fsck? Oh, Git. Does anybody every really know you?
1 tag
jQuery .filter() - more than just selectors
Via Hugo Dias’s comment on an Isotope filtering issue, turns out you can pass more than just DOM selector strings into jQuery .filter(). Using a function is pretty useful if you need additional logic to run over for each item in the jQuery collection.
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...