David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Squash Commits with Git

2012-04-29T03:52:17Z

I’m not a git expert but I know enough git to get by, and surely know enough git to appreciate its ease of use over svn. A while ago I published some basic git commands to that go slightly beyond basic cloning and commits, and should handle most git interactions. Today’s mini git lesson involves squashing multiple commits into one, allowing for easier pull request review and merge management.

Start by making changes to the feature branch you’re doing work on. Let’s assume that these changes span a few commits and I want to consolidate them into one commit. The first step involves making sure the master branch is up to date with the destination repo’s master branch:

# switch to master branch
git checkout master

# ensure our master is up to date
git pull remoteRepoName master

With the master branch up to date, we’ll use git rebase to consolidate:

git rebase -i master

That command will show a list of each commit, as such:

pick fb554f5 This is commit 1
pick 2bd1903 This is commit 2
pick d987ebf This is commit 3

# Rebase 9cbc329..d987ebf onto 9cbc329
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#  x, exec = run command (the rest of the line) using shell
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#

Edit the summary shown to you by the rebase command, leaving the commit you want to be the main commit as “pick” and changing all subsequent “pick” commands as “squash”:

pick fb554f5 This is commit 1
squash 2bd1903 This is commit 2
squash d987ebf This is commit 3

# Rebase 9cbc329..d987ebf onto 9cbc329
#
# Commands:
#  p, pick = use commit
#  r, reword = use commit, but edit the commit message
#  e, edit = use commit, but stop for amending
#  s, squash = use commit, but meld into previous commit
#  f, fixup = like "squash", but discard this commit's log message
#  x, exec = run command (the rest of the line) using shell
#
# If you remove a line here THAT COMMIT WILL BE LOST.
# However, if you remove everything, the rebase will be aborted.
#

Write/quit past the editor twice (the second screen would allow you to change the commit message, though I like to keep it the same). At this point, your commits are squashed into one. Run the following command to force a push of the new, consolidated commit:

git push -f

This forced push updates the source repository and our commits have become one. If you had already submitted a pull request at GitHub, the pull request would now show only one commit! With one consolidated commit, code review becomes much, much easier!

Squash Commits with Git is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Thoughts on “Silent” Browser Upgrades

2012-04-28T16:25:27Z

With the release of version 12, Mozilla Firefox joins the Google Chrome ranks of silent browser updates. This topic has gotten a lot of attention over the past few days due to Firefox’s release and the fact that Mozilla the second vendor to implement said feature. Microsoft has said they plan to implement silent updates as well. I contend that automatic browser upgrading is a good practice. Let me share my reasons for such, and propose a few ideas for improvement.

Full disclosure: I’m a Mozilla employee. That has no bearing on my opinion, however.

See Past Your Expertise

One thing many developers overlook is their own technical expertise. It’s sobering to me that none of my personal friends know what I do, much less name more than two browsers. Realize that 99% of web users don’t care which browser they’re using — they just expect websites to work. My mother, my grandmother, my uncle don’t know what “browser” means or which one they use; they simply know that clicking the blue “e” opens the internet. If they don’t know what browser they use, what are the chances they know how to upgrade their browser, or choose a better vendor? They don’t. Should the expect a great experience from our web applications? Of course. Silent browser upgrading solves the issue of helping those that can’t help themselves.

The Internet Explorer Example

The most obvious example of why automatic browser updating is important is Internet Explorer. Think of how many years we’ve bitched about Internet Explorer 6. Of course the true issue with IE6 is that Microsoft neglected the browser market, but when Microsoft resumed their commitment to IE, pushing IE6 users to a newer version proved all but impossible. IE6 is still a consideration today. Silent browser upgrades would have allowed IE to push browser upgrades and bypass the years of frustration we’ve gone through.

UA Sniffs Gone; Feature Detection Here

When the web and browsers were simpler, there were less features to detect and thus developers didn’t give thought to feature detection, so much as simple user agent sniffing. We’re smarter now and there are better tools to allow us to detect what we need. Of course there will always be developers who don’t follow best practice, but with the proper techniques in place and known, sniffing (and thus browser version) is becoming less of an issue.

Updates are Still Optional

Firefox allows the web-conscious user to stop automatic updates; silent updating is simply the default. One thing we need to realize is that since we’re the experts, we need to find a way to get browsers of a specific version; it shouldn’t be the user’s responsibility to ensure upgrades; see the reasons above to know why. Users who don’t know or care about updates wouldn’t touch this setting and thus only knowledgeable persons would be effected.

Improvement

There’s always room for improvement for us. And by “us”, I mean “developers”, as we’re the true connoisseurs of browsers. We must have each browser version accessible to us by the vendor, and we should be provided the ability to prevent browser version upgrades. Mozilla provides each version on their FTP site, and this script allows for Firefox installation of all versions without upgrade abilities; an incredible script. Browsers vendors also need a bulletproof strategy for ensuring popular extensions work with each browser upgrade, allowing users with little knowledge (just enough to get an extension installed).

In Short…

Get over yourself: not everyone cares about what browser they use
Some don’t know what a browser is; they just want stuff to work
Be a better developer

This is where you can tell me I’m wrong. Bring it.

Thoughts on “Silent” Browser Upgrades is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

OSX Lion Dock Dividers

2012-04-20T22:37:09Z

One thing I hate is ~~Tottenham Football Club~~ clutter. I hate cluttered code, files littered on the desktop, and keeping files in my Downloads folder that I’ll never need again. One place I especially hate clutter is my OSX application dock. I recently upgraded to OSX Lion and found that my old divider apps, which I used to separate related dock apps, were no longer acceptable. As you can imagine, I wasn’t impressed. Luckily I found a great way to create dividers on both sides of the dock with minimal fuss and without the need for phantom apps!

Step 1: Create the Dividers

Open the Terminal and execute the first command to create a divider on the left or the second comment to add one on the right:

# Left side
defaults write com.apple.dock persistent-apps -array-add '{tile-data={}; tile-type="spacer-tile";}'

# Right Side
defaults write com.apple.dock persistent-others -array-add '{tile-data={}; tile-type="spacer-tile";}'

Execute the command as many times as you like; a divider will be created each time. You will not, however, see them added before your eyes.

Step 2: Reset the Dock

Reset the dock to see your new divider(s):

# Reset the dock
killall Dock

Once the dock is reset, you’ll see spacers which you’ll be able to drag throughout the dock.

Why dividers aren’t a common feature of OSX yet is a question I can’t answer. Luckily we can abuse Terminal to make our dividers though.

OSX Lion Dock Dividers is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

DNS Prefetching

2012-04-17T21:55:38Z

Despite anchor tags having HREF attributes which lead to other host names, browsers do not execute DNS lookups on those domains. Content prefetching can be invaluable in speeding up your websites, but did you know that you can also implement DNS prefetching? It’s as easy as simple LINK element:

This technique can be very useful when your website links to related host names. Take Twitter for example; they implement two DNS prefetches:

I’d be willing to bet that most of you didn’t know this tag existed. It’s an interesting idea with a very simple execution. What do you think? Do you manage websites that prefetching could be helpful for?

DNS Prefetching is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

CSS Animations Between Media Queries

2012-04-12T18:53:18Z

CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very CSS little code. Quite often we add CSS transforms to elements via CSS during :hover, and we also create keyframe-based animations by adding a className, but did you know you can animate elements using media queries as the trigger? Let’s have a look!

View Demo

The CSS

The syntax for creating these animations and transitions is the same between media queries as it is between element states; the only difference is actually enacting them between the media queries:

/* base state */
#layout { 
	position: relative; 
	width: 900px; 
	border: 1px solid #ccc; 
	height: 200px; 
	
	/* animate width over a given duration */
	-webkit-transition: width 2s;
	-moz-transition: width 2s;
	-ms-transition: width 2s;
}
.child {
	top: 0; 
	bottom: 0;
	width: 290px;
	position: absolute;
	opacity: 1;
	font-size: 20px;
	overflow: hidden;
	-webkit-transform: translate3d(0, 0, 0);
	
	/* animate opacity, left, width over a given duration */
	-webkit-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
	-moz-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
	-ms-transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
	#child1 { left: 0; background: lightblue; }
	#child2 { left: 300px; background: lightgreen; }
	#child3 { left: 600px; background: lightyellow; }

/* 
	When the client has 860 width or less:
	 	- animate the first two elements to be wider
		- fade out and hide the third element
		- animate the background colors
		- animate the font-size of the block
*/
@media screen and (max-width: 860px) {
	#layout { width: 600px; }
	.child { width: 290px; font-size: 12px; }
	#child1 { left: 0; background: blue; color: #fff; }
	#child2 { left: 300px; background: green; color: #fff; }
	#child3.child { /* hider */ opacity: 0; width: 0; }
}

The creativity is all in the developer’s hands; animating media queries isn’t difficult, but the use of them is more interesting. Some sites used to animate the position of structure elements during window resize, which is nice but how often is that a realistic usage? A more realistic usage is with mobile devices, animating elements when orientation changes:

/* base mobile styles */
#sidebar {
	-webkit-transition: opacity 2s;
	width: 300px;
	overflow: hidden;
}

/* portrait */
@media screen and (orientation:portrait) { 
	/* portrait-specific styles */ 
	#sidebar {
		opacity: 0;
		width: 0;
	}
}

/* landscape */
@media screen and (orientation:landscape) {
	/* landscape-specific styles */
	#sidebar {
		opacity: 1;
	}
}

The animation above triggers when the device goes from portrait to landscape, and visa versa. This is incredibly useful when hiding a pane in portrait view and elegantly showing that pane when the user switches to landscape view.

View Demo

CSS animations between media queries have traditionally been a delicacy of web design, but there are practical uses. The best part of them? There is no JavaScript involved and you can force CSS hardware acceleration if you’d like. Take a few moments to look at your mobile site to see if you can add this effect.

CSS Animations Between Media Queries is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Multiple Backgrounds with CSS

2012-04-04T01:43:05Z

Anyone that’s been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came along. Another one of those simple features is multiple background images with CSS. Instead we’d need to nest another element for every additional background image. Now we a syntax for supporting multiple background images on one element, and here’s what it looks like.

View Demo

The CSS

Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:

#multipleBGs {
	background: url(photo1.png),
				url(photo2.png),
				url(photo3.png)
	;
	background-repeat: no-repeat,
					   no-repeat,
					   repeat-y;
						
	background-position: 0 0,
						 30px 70px,
						 right top;
	
	width: 400px; 
	height: 400px;
	border: 1px solid #ccc;
}

Trying to stuff all properties via shorthand within the background property wont work, unfortunately; multiple property declarations must be used. All of the background properties may be used (background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size), as well as CSS gradients.

View Demo

Another awesome CSS feature that we can finally used. Using multiple CSS backgrounds is an incredible useful tool, preventing the need for nested elements for the sole purpose of formatting.

Multiple Backgrounds with CSS is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

JavaScript CSS Helpers

2012-04-04T00:12:44Z

I spend a good amount of time looking at JavaScript framework source code. Regardless of which frameworks you have allegiance to, you can learn an awful lot by looking under the hood of widely used code collections. One of many handy snippets can be found within the MooTools source code: functions to camelize and hyphenate strings so that your own min framework can accept either form of CSS setter or getter. Here are the functions in all of their glory.

The JavaScript

As you could probably guess, this task is best accomplished with regular expressions:

function camelize(str) {
	return (str + "").replace(/-\D/g, function(match) {
		return match.charAt(1).toUpperCase();
	});
}
camelize("border-bottom-color"); // "borderBottomColor"


function hyphenate(str) {
	return (str + "").replace(/[A-Z]/g, function(match) {
		return "-" + match.toLowerCase();
	});
}
hyphenate("borderBottomColor"); // "border-bottom-color"

A couple of really handy JavaScript String to corresponding String format functions. Instead of expecting strings in only one format, your mini library can now accept both!

JavaScript CSS Helpers is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

View Browser Repaints in Google Chrome and Mozilla Firefox

2012-04-21T12:38:41Z

One goal of super-optimized websites is to prevent browser repaints due to changes in a block’s style or content. There are numerous ways we intentionally (or unintentionally) trigger block repaints, but the browser does it so quickly we have trouble seeing when and where it happens. Recognizing the importance of allowing developers to micro-optimize their pages, the Chrome and Firefox teams have added features to their browsers to allow us to see those repaints. Here’s how to do it!

Google Chrome & Canary

The repaint feature needs to be enabled at startup for Chrome and Canary with the --show-paint-rects config:

open ./Google\ Chrome\ Canary.app --args --show-paint-rects

Be sure to include --args in your command or you’ll run into problems opening the browser. Repaints will display on each site you visit.

Mozilla Firefox, Aurora, Nightly

To view repaints in Firefox and Aurora browsers, you need to enable an about:config option. The option name is nglayout.debug.paint_flashing. Turn this option to true and you’ll quickly see repaints as the happen!

At the time of publish, only nightly exposed this config feature.

I recommend you take a few moments to scope out the repaint frequency on your websites and see what you can do to improve performance!

View Browser Repaints in Google Chrome and Mozilla Firefox is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Load CSS Files via AMD with XStyle

2012-03-27T15:54:41Z

AMD loaders are letting us load just about anything: AMD modules, basic JavaScript files (from any origin), text-based files (HTML templates, for example), and more. Unfortunately most loaders don’t have CSS loading capabilities, most likely because “onLoad”-style events aren’t provided by all browsers for stylesheets. Luckily my SitePen colleague Kris Zyp has created XStyle, an AMD package available to AMD loaders for reliable stylesheet loading. Let’s take a brief look at XStyle!

View Demo

In fairness to XStyle, it’s more than just an AMD plugin for loading stylesheets. XStyle provides the capability to:

Shim and extend CSS
Load stylesheets and execute callbacks
Nested @import loading

Shimming and extending CSS is great but doesn’t seem to be something I would need often; loading CSS with JavaScript modules is nice because:

Loading modules and templates together but needing to add LINK tags manually sucks
One define() to define a complete widget from JS, to template, and CSS, is ideal; especially for third party components

So consider a great JavaScript loader like curl.js. With curl.js, all you need to do to load a CSS file is:

curl(["css!path/to/file.css"], function() {
    // defineCSS loaded, do stuff!
});

Sweet, right? With a different loader, you can load your CSS files with other modules by coding:

define(["xstyle!./path/to/file.css"], function(){
    // module starts after css is loaded
});

Outstanding! With XStyle we can define a complete component, stylesheet and all!

View Demo

XStyle is capable of much more than what I’ve presented above, but just the ability to load stylesheets with every other piece of a given module is priceless. Improves organization and speed of coding; well done Kris!

Load CSS Files via AMD with XStyle is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

curl.js: Incredible AMD Loader

2012-03-26T13:40:50Z

Today there are dozens of AMD JavaScript loaders available, the most popular being RequireJS. There are also lesser known JavaScript loaders like YepNope, $script.js, LABjs, and Dojo’s new native loader. My favorite JavaScript loader, however, is John Hann (unscriptable)’s curl. While allowing for maximum configuration and reliable loading, curl also allows for loading of simple JavaScript files as well as CSS files. Let me show you how to use it!

View Demo

Super Quick AMD Primer

If you aren’t familiar with AMD structure, I’m going to give you the most oversimplified explanation you’ll ever hear. AMD is a system by which you define and require modules asynchronously. A define returns one or zero objects. The first argument of both define and require is (usually) an array of dependencies. The second argument is a function; the define returns the result, the require executes a basic callback:

// "define" a module
define(["namespace/dependencyA", "namespace/dependencyB"], function(depA, depB) {
	// Whole bunch of processing
	
	
	// Return what this module defines
	return function() {
		// Or an object, or whatever
	}
});

// "require" to use modules:
require(["namespace/dependencyC"], function(depC) {
	
	// depC can be used in here only
	// Yay for modularity!
	
});

The slashes in the dependency array items represent paths to module JavaScript files. Once dependencies are loaded, the action is allowed to begin.

As I said, this is a very simple, vanilla example; there are exceptions to every rule, so don’t bother pointing out what-ifs.

Configuring Module Loading with curl

And of course I start out with a few of the exceptions to the rule. Instead of a require function, curl.js defines curl in its place. Additionally, curl.js allows for an object literal as a first parameter, allowing for configuration of loaded modules:

curl({
		baseUrl: "/path/to/js",
		pluginPath: "curl/src/curl/plugin"
	}, 
	["namespace/depC", "namespace/otherDep"],
	function(depC, otherDep) {
		// Do stuff
	}
);

This configuration allows you to provide plugin paths, modules paths, and more.

Basic define and require with curl.js

Basic usage of curl.js is as you would expect from a JavaScript loader; dependency array as the first argument, callback with the second:

define(["namespace/depA", "namespace/depB"], function(depA, depB) {
	// Do something with the dependencies
	
	// Pump out a return obj
	return myFinalObject;
});

With a module defined, the same syntax requires and works with the dependencies:

curl(["namespace/depC"], function(depC) {
	// Do some stuff!
});

This is the same syntax you will have used with any JS loader, with the obvious exception of require being replaced by curl.

curl.js with next

The next method allows for chaining of module loading:

curl(["js!someFile.js"])
	.next(["dep1", "dep2", "dep3"], function (dep1, dep2, dep3) {
		// Execute regardless of domReady status
	})
	.next(["domReady!"])
	.then(
		function () {
		// do something after the dom is ready
		},
		function (ex) {
		// show an error to the user
		}
	);

This syntax may suit your fancy more than others.

curl.js with Deferred Syntax

If you work with the Dojo Toolkit, or more recently with jQuery, Deferreds are becoming more prevalent and incredibly useful; curl.js provides you the ability to write your loader JavaScript in the same fashion:

curl(["namespace/depA"]).then(
	function(depA) { // success callback
	
	},
	function(depB) { // errback
	
	}
);

The deferred format and ability to pass the result of an XHR pool can be very powerful.

Loading Non-AMD JavaScript Files

Sometimes you need to load JavaScript files that aren’t in AMD format, like loading MooTools or jQuery from CDN. curl.js makes that easy:

curl(
	["js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js"]
).next(["namespace/MooModule"], function() {
	// We loaded Moo first, then once loaded, loaded a dependency that requires MooTools
	// At this point, both are loaded and we can work with them!
	
});

All you need to do add the js! prefix to the dependency string and you’re set; your callback will be fire when the basic JavaScript file is loaded. Note that you can mix AMD modules with basic JavaScript files:

curl(
	[
		"js!https://ajax.googleapis.com/ajax/libs/mootools/1.4.1/mootools-yui-compressed.js",
		"js!http://davidwalsh.name/mootools-ftw.js",
		"namespace/independentModule"
	]
).next(["namespace/MooModule"], function() {
	// We loaded Moo first, then once loaded, loaded a dependency that requires MooTools
	// At this point, both are loaded and we can work with them!
	
});

Loading CSS Files

Of course one of the strengths of AMD is modularity, so why not load your stylesheets with your scripts?

curl(
	[
		"namespace/MyWidget",
		"css!namespace/resources/MyWidget.css"
	], 
	function(MyWidget) {
		// Do something with MyWidget
		// The CSS reference isn't in the signature because we don't care about it;
		// we just care that it is now in the page
	}
});

LINK tags don’t provide an onLoad event in all browsers, but curl.js’ shim provides a reliable method of detecting stylesheet load. Since stylesheets are a large part of UI-driven, JavaScript-powered widgets, creating modules with stylesheet dependencies is becoming much more abundant.

More curl Plugins

curl is much more than just a basic JS loader. I’ve already mentioned the JS and CSS plugins above, but curl has a few more. curl features a domReady plugin, as well as a text plugin and an internationalization plugin:

curl(
	[
		"i18n!stuff/nls/strings", // Load string content for the user's namespace
		"text!myWidget/resources/template.html", // Loads a file as text,
		"domReady!" // Don't fire the callback until the DOM is ready
	],
	function(nlsStringObject, template) { // Callback
		// Do something now that we have the NLS object, template, and domContentLoaded has fired
	}
);

These plugins are quick and easy enhancers to existing functionality!

View Demo

curl is an absolute beast of a JavaScript loader. Beyond simple AMD loading, curl is fit with numerous configuration options, plugins, and multiple syntax structures to all the developer to code the way they want. This blog uses curl.js to asynchronously load JavaScript modules and stylesheets, manage domReady, and more; the best endorsement I can give!

curl.js: Incredible AMD Loader is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.