.ph(@color: #ccc) {
	input::-webkit-input-placeholder { color: @color; }
	input:-moz-placeholder { color: @color; }
	textarea::-webkit-input-placeholder { color: @color; }
	textarea:-moz-placeholder { color: @color; }
}

I was working on styling some form elements tonight for a project, and needed to style my HTML5 placeholders differently then my input values, so they looked a bit differently when the user entered the code. Doesn’t look like the spec on this is even close to finalized, so I used some browser specific prepends.

I was working working with Less, an awesome tool for dynamic CSS; If you haven’t tried it, you should give it, or SASS, a go.

Anywho, I decided to write a mixin that I could user over and over again if needed, and the above is it. You would call the mixin like so, if you wanted the placeholders to all be black:

.ph(#000);

You could obviously replace the color style with whatever you would need, but this worked for me!

I’ve been getting in the habit of moving preferences, and git repos to dropbox lately. It lets me edit them in one place, and have access to them on multiple machines immediately, which is a huge win for me.

I was talking to a buddy tonight about moving my git config file there, and he had suggesting symlinking with Dropbox. Now, I just need to symlink the same file at home, and I’m working with the same settings on both machines!

[ ~ ]
$ cd ~/Dropbox/
[ ~/Dropbox ]
$ mkdir dotFiles
[ ~/Dropbox ]
$ mv ~/.gitconfig ~/Dropbox/dotFiles/
[ ~/Dropbox ]
$ ln -s ~/Dropbox/dotFiles/.gitconfig ~/.gitconfig

Well, I took a quick look at my Page Speed results today, and it looks like Google is angry at me for my inability to leverage browser caching. Essentially, I’m reaching out to the server for every image on my site, even if the user has loaded it already. Seems like a ton of extra unnecessary work eh?

Well, htaccess to the rescue! I added the following to my .htaccess file, which sped up my site considerably (and also upped my Page Speed score). I opted to set my headers to a long time for both images, css, and js for now, since I don’t really update the look of my site that often. When I do decide to, I’ll most likely rename my js and css files, and removed the old ones.

# Setting Cache Control Headers
# 480 weeks
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=290304000, public"
</filesMatch>

# 2 DAYS
<filesMatch ".(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>

# 2 HOURS
<filesMatch ".(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesMatch>

Anyone out there have any suggestions on ways to set cache control? This was my first attempt at it, and I’d love some feedback!

Ran into this today with a WP site I was working on. I didn’t want the default version of jquery that’s included now with wordpress, so I found this handy dandy script so that I could load the latest from google. I just added it to the bottom of my functions.php file:

//forcing jquery to load the version we want
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    

add_action('wp_enqueue_scripts', 'my_scripts_method');

So yesterday we needed to build a page that would redirect based on the device a user came from. We needed to know if a user was coming from a Droid, iPad/iPhone, BlackBerry, or Desktop. I grabbed some user agents here, and went to town. Lemme know if you know a better way to tackle this, as I tried to make it as lean as possible.

<%@ page import="java.util.*"%>

<%
	Enumeration e;
	e = request.getHeaderNames();
	String userAgent = request.getHeader("user-agent");
%>



<%

	if(userAgent.matches(".*BlackBerry.*")) {
		out.print ("BlackBerries taste yummy.");
	} else if(userAgent.matches(".*Android.*")) {
		out.print ("These aren't the droids you're looking for.");
	} else if(userAgent.matches(".*iPhone.*") || userAgent.matches(".*iPad.*")) {
		out.print ("Pods or pads, doesn't matter.");
	} else {
		out.print ("I'm a PC.");
	}

%>

Just watched Brian W. Fitzpatrick and Ben Collins-Sussman’s Google I/O session, and I was very impressed. This talk is geared towards engineers/developers who have made the transition to management, be it through a promotion, or “accidentally.” This really hit home for me, as I made this exact transition at AE a while back. There are definitely some awesome concepts in here, definitely worth an hour of your time.

Took the State of Web Development Survey a few months ago, and the results came back this week. Definitely some interesting stuff, especially the amount of people using JQuery. You can download all the responses in CSV format here.

http://ie6update.com/

My buddy Joe sent this to me today, and I promptly added the code snippet to my website. IE6 Update looks like IE’s Information Bar, but instead of offering your visitors an ActiveX plugin, it offers a browser update. Even if it doesn’t bleed, someday IE6 will die.

Here is all you need to get it going. Just add the following snippet before your closing body tag:

<!--[if IE 6]>
<script type="text/javascript">
	/*Load jQuery if not already loaded*/ if(typeof jQuery == 'undefined'){ document.write("<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></"+"script>"); var __noconflict = true; }
	var IE6UPDATE_OPTIONS = {
		icons_path: "http://static.ie6update.com/hosted/ie6update/images/"
	}
</script>
<script type="text/javascript" src="http://static.ie6update.com/hosted/ie6update/ie6update.js"></script>
<![endif]-->