Software

My experience with Google Drive

May 20, 2012 – 12:19 am

I’ve been a loyal Dropbox user for over 2 years, and I’ve found it invaluable for managing files between multiple users and machines. It’s been a great product – I don’t recall ever having any issues with it, everything just always seemed to work™.

I’ve always wanted a Dropbox account for personal use, however a limitation of Dropbox is that you can only have one copy running at any one time. So with my work account set up, I’ve had to make do without it. With the release of Google Drive I thought I’d test it out for my personal use to see how it faired up. At 1/4 of Dropbox’s price point I must say I was pretty intrigued to see what it had to offer.

Downloading and installing it was easy enough and the familiar Google docs interface is quite functional. I uploaded my library of pictures, but noticed that Drive doesn’t give any indication of upload status or speed – it only states that it’s syncing. Needless to say my network was hammered for a good few hours while my files were being uploaded, with Drive providing no way to cap the upload. Occasionally there was issue connecting to the server, but I don’t think it affected the sync that much. Then I found an interesting issue – midway through sync I realised I had a 40mb file uploading that I didn’t even want. I’ve got a slow upload, so thinking in Dropbox terms I’d just delete the file and the sync should stop. However Google Drive continued to sync the file even after deletion and just kept copying it back into the folder. I was forced to quit Drive, delete the file, and restart it to stop the syncing of the file. Not a great start.

When that was done I installed Drive on my Macbook. It had to download all the pictures via the internet – no lan sync (as we already knew, still a disappointment though). Then I realised I had put the Drive folder in the wrong location, but Drive doesn’t have the ability to move the folder. My only option was to deauthorise my account to change the location. So I did that and copied all the synced files across to the new location, but Drive can only be initialised in a blank folder. So I moved all the files out and created a blank folder for Drive, copied all the files back in so it wouldn’t have to download them all again, and started syncing. But instead of smartly figuring out that all the files were the same, Drive tried to re-upload all the files I copied AND download all the files off the server (creating duplicates of every file). Not impressed. Contrast this to Dropbox, which would simply do a checksum on every file to determine that the entire folder was already synced. So the syncing functionality of Drive (which is what you’re using it for, right?!) is sub-par.

This is only my first day with Drive but I felt compelled to write this article. I was ready to pay for the premium account before I’d even used it, but now I’m not convinced. I think I’ll just stick with Dropbox – it’s a much more solid product.

Permalink | Comment (0)
PHP

vhosts and MAMP

May 5, 2012 – 1:01 am

I’ve been using MAMP for a while now, and I really love the ease of use it provides in setting up a container for PHP/MySQL related projects. Setting up vhosts is a really neat way of managing projects; using subfolders is quite messy and is poor development practice. It’s pretty easy to set up vhosts with MAMP, and there are a few guides out there, but I found that I needed to combine a few of them to get it to really work properly. So here’s a full guide of what you need to do to get vhosts working with MAMP.

Step 1 (from http://sawmac.com/mamp/virtual/)

Open up /etc/hosts in your favourite text editor, and add your projects to the end of the file like so:

127.0.0.1 project1.dev
127.0.0.1 project2.dev

Step 2 (additional settings from http://forum.mamp.info/viewtopic.php?f=2&t=4459)

Open up /Applications/MAMP/conf/apache/httpd.conf in your favourite text editor, scroll to the bottom, and add the following (customise to your specific installation):

NameVirtualHost *
<VirtualHost *>
DocumentRoot "/Users/your-username/sites/"
ServerName localhost
</VirtualHost>
<VirtualHost *>
DocumentRoot "/Users/your-username/sites/project1/"
ServerName project1.dev
</VirtualHost>
<VirtualHost *>
DocumentRoot "/Users/your-username/sites/project2/"
ServerName project2.dev
</VirtualHost>
<Directory />
Options FollowSymLinks
AllowOverride All
</Directory>

The difference between this and the instructions in the above URL is the Directory configuration (AllowOverride All). Without this, .htaccess files won’t work, which isn’t desirable. For each additional project, you just copy and paste this one bit:

<VirtualHost *>
DocumentRoot "/Users/your-username/sites/project2/"
ServerName project2.dev
</VirtualHost>

Step 3 (from http://timneill.net/2012/02/reclaiming-your-favicons-using-mamp/)

With httpd.conf still open, search for a line that says Alias /favicon.ico “/Applications/MAMP/bin/favicon.ico” and comment it out by putting a # infront of it. You may also want to comment out a line beneath it which is an alias for the /icons/ directory. These aliases override the favicon and icons directory for all sites – which again is quite annoying – so you’ll want these lines commented out.

Step 4

Open up MAMP, click on Preferences, click on the Ports tab, and click Set to default Apache and MySQL ports. This allows you to open up your project.dev URLs without specifying a port at the end (like :8888 as MAMP defaults to).

Start the MAMP server, and you’re done! You should have beautiful vhosts, with favicons and .htaccess working as desired.

A note on using the .local suffix: You may be tempted to use .local as your suffix as it makes logical sense and many tutorials recommend it. However, you will experience slow page loads when using .local as apparently the bonjour service interferes with the .local domain (reference). So you’re better off using .dev, or any other suffix you can think of apart from .local to get the fastest development experience.

Tags , , | Permalink | Comment (0)
CSS

The power of clear: both

April 5, 2012 – 8:04 pm

I’ve been a front end developer for 2 years, and been dabbling with HTML and CSS for over 6. So you could say that I’m super late to the party. But it’s finally happened, I’ve had an epiphany and now understand the power of empty ‘clear’ elements. No doubt there’s tons of posts out there explaining why you’d use them, but here’s one more.

The scenario is simple, you have a page div, with a content and sidebar inside it. Like so (excuse the inline styles, it’s just for readability and demonstration purposes):

<div id="page">
    <div id="content" style="float: left">
        ...
    </div>
    <div id="sidebar" style="float: right">
        ...
    </div>
</div>

Now, say you want the page div to expand to the height of it’s children. Of course, with floated children, the height of page is 0. You could use overflow: auto, but this continuously causes weird bugs and generally seems pretty hacky. Enter the clear div.

<div id="page">
    <div id="content" style="float: left">
        ...
    </div>
    <div id="sidebar" style="float: right">
        ...
    </div>
    <div class="clear" style="clear: both"></div>
</div>

It clears both of it’s previous siblings, and because it’s not floated itself, expands the height of the page to the height of content. And if you don’t care about older browsers (< IE7), you can even do it better using the :after pseuo-selector:

.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Using this method you can just apply the clearfix class to the sidebar div, and you won’t require any additional markup to make it work. Much more semantic.

Tags , | Permalink | Comment (0)
30 Day Blog Challenge

Motivation

March 8, 2012 – 12:23 am

My last post touched on doing things you want to do without hesitation and procrastination. In theory this idea sounds good, but there’s still another piece to the puzzle. Motivation.

To be able to do anything, you need motivation. Think you don’t have it? Think again. You’re reading this post, which requires motivation. You got out of bed (hopefully), that also requires motivation. But the harder things are, the more motivation you need to do them. And sometimes it can be really hard to get motivated.

While there’s countless ways to get motivated, I’ve found three things that seem to really work well together. It may seem simple, but as we know the simplest answers are usually the best. As a quick scenario so we can apply this knowledge, let’s take an example of someone wanting to start working out and changing their body for good.

The first type of motivator is called a towards motivator, also known as pleasure. This type of motivation lets you set goals targeted towards desirable outcomes. These are things you want to get to. Some goals in our example could be to have a certain level of visible fitness, be able to run a certain distance, reach a certain desired weight etc.

The second type is called an away from motivator, also known as pain. This type of motivation sees you moving away from certain things that cause you grief, so for example, you might want to not be the fat person any more, or you might not want to be the person who always gets puffed out first etc.

Does this matter? You bet. There are quite a few things we need to consider about both. Some people are highly motivated by pain, because pain is such a strong feeling that we as humans tend to remember for much longer than pleasure (and with greater intensity too). So the idea of moving away from pain can really push people. However, towards motivators allow you to set clear & positive goals, which would otherwise be quite difficult and fluffy when using away-from motivators. And when you’re moving towards a clear cut goal, it can be extremely rewarding feeling that sense of achievement when you finally do hit the goal.

But the mother of all motivation strategies is accountability. Accountability means becoming responsible for your actions in the eyes of others. If you don’t tell anyone you want to start working out, you’re only letting yourself down if you don’t (and as I’ve previously mentioned, we’re very good at justifying missed opportunities). But holding yourself accountable, posting about it on a forum, or even better on Facebook, is really going to push you. Because not many people can stand the shame of not even trying after they’ve told people they’re going to do something.

Being accountable might just be the motivation that pushes you over the edge. Post something you want to do on your facebook/blog/twitter/fridge right now. Unless you enjoy letting your friends down, there’s no turning back.

Permalink | Comment (0)
30 Day Blog Challenge

Just do it™

March 6, 2012 – 12:03 am

Just do it. Whatever you’re thinking about doing, do it now.

So many people have so many excuses for not doing amazing things. You’ve all heard it before, someone suggests they’d like to do something a little out there, then comes the “I would do it, but…”. “It’s raining”. “It’s too difficult”. “I just can’t right now”. The list goes on, you know the drill. And there you are, thinking that they should do it or shut up and stop complaining. Then you get home at 10pm and say to yourself “Oh, it’s 10pm, probably too late to go for a run. Might just watch some TV instead”. And somehow, in your mind, that’s justified. It shouldn’t be.

If you want to do something, just do it. Don’t ever hesitate. Don’t ever overthink it. Just do it. Want to visit a new country? Just pack up and go. The old you would still be “trying to decide” by the time you get back and put your life back together in better condition than when you left. Planned to go for a run but got home 3 hours late? Don’t sit there and think about whether you still have time, get out there and you’ll be back before you watched 2 episodes of Futurama. Wanted to do Steve Hopkins blog a day challenge in March but you’re 5 days late, it’s 1am and you need to be up at 7? You’ve already missed out. Might as well not do it all, right? Nice try, but you’re not getting away that easy.

Now, I know it’s easy to say just do whatever you want, but when it comes down to it, actually making that choice and performing an action without procrastination is still extremely difficult. For something like packing up and visiting a new country, ok, I understand, that’s not easy. But going for a run? Talking to someone new? Changing your career? Deciding to go to the gym? Why is it so hard to do things that for the most part have positives that massively outweigh the negatives? And what allows us to live with ourselves when we constantly miss out on great opportunities? Well, the answer probably isn’t far off what you’re thinking. Whatever it is you want to do, it’s easier not to do it, and that’s the cold hard fact. After all, we are creatures of habit, so the more often we procrastinate, the longer we do it for, and the more situations we apply it to. Until nearly every task is met with procrastination, and your mind is conditioned to not want to try new things. And after you’ve seen an opportunity, let the procrastination take over, and missed a chance, your mind tries justify the act of not doing it with excuse, “oh it was too late”. “oh the job probably wouldn’t have been that good”. “oh the gym costs too much anyway”. Fluff. Lies that make you feel better, but are still lies. Or at best mistruths, because you truly never know what you’ve missed out on.

What you have to consider is the potential cost of not doing something. I’m not just talking pure monetary value, but an overall cost of lifestyle, happiness, and opportunity. Take a hypothetical networking event where you could be talking to a big name in the industry. You’re comfortable where you are, with the people you know, so you don’t have to do it. The cost of doing it is perhaps anywhere from 5-30 minutes of your time. The potential cost of not doing it is missing out on one of the biggest contracts you have ever got for your business; the one that sets you off on your way to becoming a multi-million dollar company. Or  lets take the simple example of going to the gym. The cost is ~$20 and 4 hours a week. The potential cost of not doing it is being unfit and unhealthy with a less-than-average body, not sleeping well, not being happy with yourself, and not meeting amazing people who are there to make the most out of their body and life.

For most situations a simple cost/benefit analysis will prove to yourself that most things you want to do in life — but constantly make excuses for — have far greater positive outcomes than negatives. You’ll even find that many situations don’t have any real negatives at all, just perceived negatives. This is something I might touch on in a later post. For now, stop procrastinating on all the things you want to do, remind yourself what you’re potentially missing out on, and get to it!

Permalink | Comment (1)
jQuery

How to stop jQuery Tools Scrollable from buffering clicks

September 24, 2011 – 1:33 pm

jQuery Tools Scrollable is an awesome plugin for creating scrollable image & content galleries. We used it for the portfolio and footer sections on peacock.st. The only gripe I had with it is that it buffers clicks on navigation elements, which might be ok for some people but wasn’t desirable behaviour in our case. Thankfully it’s quite easy to change this behaviour so that any clicks on the navigation will automatically complete the current animation and animate to the next element in the scrollable.

All you need to do is open up the js file that contains scrollable (you can do this with the minified file, you don’t need the source), and find the part that says “h.animate(n,c,e.easing,k“. Replace this with “h.stop(true,true).animate(n,c,e.easing,k“. So just before  the animate, you are putting a .stop(true,true) in. As you may already know, .stop() stops the current animation in it’s tracks (so it doesn’t complete). This isn’t always useful, in our case we do want the animation to complete but we want it to jump to the end instead of waiting for animation to complete. The second argument true tells .stop() to complete the animation immediately which is what we want. The first argument tells it to clear the animation queue. You can read more about jQuery .stop() here: api.jquery.com/stop/

I’m sure this will be of use to many people. If you have any questions about this post, please feel free to leave a comment below.

Tags , , | Permalink | Comments (4)
Operating Systems

What I don’t like about Mac App Store

August 6, 2011 – 4:22 pm

When OSX Lion came out, everyone in the office needed a copy of the latest xcode. Instead of 20 people downloading the same file individually, one person downloaded xcode via the app store and shared the installer with us. It all went fine, we were able to install it and it worked, however when it comes time to update, trouble arises. Basically the only way to update is if the original person signs in to their Apple account on your computer. You can’t update via Software Update. The only way to get updates without getting the original person to sign in is to uninstall xcode, redownload it, and reinstall it.

That’s right. To obtain updates, I need to uninstall an app I already have installed, and download an installer I already have. That – to me – seems like a big waste of bandwidth. I’ll go back to using serials so installers can be shared instead of being linked to accounts.

Permalink | Comment (0)
MacBook

CMSO4GX3M1A1333C9 in 2011 MacBook Pro

May 27, 2011 – 9:34 pm

There didn’t appear to be many people talking about Corsair CMSO4GX3M1A1333C9 4GB PC-10600 and it’s compatibility with 2011 MacBook Pros, so I thought I’d write a quick post about it. I bought 4 of these sticks, 2 for my 13″ 2.7GHz i7 MacBook Pro (8,1), and 2 for another 15″ 2.2GHz i7 Macbook Pro. We put them in and our MacBooks booted perfectly, neither machines have had any issues, so I’m confident to say that these modules work great in 2011 MacBook Pros. Despite the fact I never actually reached 4GB usage on the standard RAM, my MacBook feels snappier and quicker to boot. It’s probably just a placebo though. Either way, at $45 AUD a pop (so, $90 AUD to upgrade to 8GB), these modules are great value and well worth the upgrade.

CMSO4GX3M1A1333C9 4GB PC-10600 SODIMM
Tags , , | Permalink | Comments (3)
jQuery

jQuery – Resize image to parent container plugin

May 11, 2011 – 10:51 pm

Recently I came across a problem whereby I had to dynamically resize an image to fill it’s parent container. The requirements are pretty straight forward – upscale if the image is too small, downscale if it’s too large, and always resize based on the smallest dimension in relation to the aspect ratio of the parent container (which means that you’ll never see any whitespace, the image will always overflow on either height or width). Strangely enough I couldn’t find a jQuery plugin to do quite what I wanted, so I created one.

Check out the demo.

The plugin is as follows:

/*
 * Plugin Name: Resize Image to Parent Container
 *
 * Author: Christian Varga
 * Author URI: http://christianvarga.com
 *
 */

jQuery.fn.resizeToParent = function(options) {
  var defaults = {
   parent: 'div'
  }

  var options = jQuery.extend(defaults, options);

  return this.each(function() {
    var o = options;
    var obj = jQuery(this);

    // bind to load of image
    obj.load(function() {
      // dimensions of the parent
      var parentWidth = obj.parents(o.parent).width();
      var parentHeight = obj.parents(o.parent).height();

      // dimensions of the image
      var imageWidth = obj.width();
      var imageHeight = obj.height();

      // step 1 - calculate the percentage difference between image width and container width
      var diff = imageWidth / parentWidth;

      // step 2 - if height divided by difference is smaller than container height, resize by height. otherwise resize by width
      if ((imageHeight / diff) < parentHeight) {
       obj.css({'width': 'auto', 'height': parentHeight});

       // set image variables to new dimensions
       imageWidth = imageWidth / (imageHeight / parentHeight);
       imageHeight = parentHeight;
      }
      else {
       obj.css({'height': 'auto', 'width': parentWidth});

       // set image variables to new dimensions
       imageWidth = parentWidth;
       imageHeight = imageHeight / diff;
      }

      // step 3 - center image in container
      var leftOffset = (imageWidth - parentWidth) / -2;
      var topOffset = (imageHeight - parentHeight) / -2;

      obj.css({'left': leftOffset, 'top': topOffset});
    });

    // force ie to run the load function if the image is cached
    if (this.complete) {
      obj.trigger('load');
    }
  });
}

And to use it, simply call resizeToParent on your image, like so:

$('#myImage').resizeToParent();

The plugin will automatically resize the image as soon as it’s finished loading. By default, the image will get resized to the nearest parent div. If you want to target a specific parent, simply pass a selector to the function as the ‘parent’ parameter, like so:

$('#myImage').resizeToParent({parent: '.parentContainer'});

Also, don’t forget that the parent container must have ‘overflow: hidden’ so that the image doesn’t spill out of the parent, and the image must be positioned relatively or absolutely for it to be centered correctly.

Please feel free to leave any questions, comments, or suggestions in the comments below :)

Tags , | Permalink | Comments (4)
Google API

How to calculate driving distance between 2 locations with Google Maps API

December 10, 2010 – 9:47 pm

Although this is quite a common question, the majority of tutorials seem to be over-complicating the solution which may confuse people who are new to the Google Maps API. This tutorial is designed to show you an easy way to geocode 2 addresses and get the driving distance between them.

We are going to base our app off the directions-simple.html sample that Google provides. We only need to change a few things to make it display the driving distance.

The first thing we’ll do is create the HTML file. You can use the following code as a guide:

<html>
	<head>
		<title>Distance Calculator</title>
		<style type="text/css">
			#map_canvas {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				<label for="start">Start: </label>
				<input type="text" name="start" id="start" />

				<label for="end">End: </label>
				<input type="text" name="end" id="end" />

				<input type="submit" value="Calculate Route" />
			</p>
			<p>
				<label for="distance">Distance (km): </label>
				<input type="text" name="distance" id="distance" readonly="true" />
			</p>
		</div>
		<div id="map_canvas"></div>
	</body>
</html>

Next, we’ll add the map to the page. Include the following 2 lines in your head tag:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Then add a script tag to your head with the initialize function to set up the map:

<script type="text/javascript">
var directionDisplay;
var map;

function initialize() {
	directionsDisplay = new google.maps.DirectionsRenderer();
	var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
	var myOptions = {
		zoom:12,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: melbourne
	}

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	directionsDisplay.setMap(map);
}
</script>

Finally, add the initialize function to the body onload, like so:

<body onload="initialize()">

If you load up your page, you should see a nice big Google map that doesn’t do much. Let’s change that.

Add a new variable called directionsService and a function called calcRoute() to your script, like so:

var directionsService = new google.maps.DirectionsService();

function calcRoute() {
	var start = document.getElementById("start").value;
	var end = document.getElementById("end").value;

	var request = {
		origin:start,
		destination:end,
		travelMode: google.maps.DirectionsTravelMode.DRIVING
	};

	directionsService.route(request, function(response, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
		}
	});
}

Then change your submit button to call the function:

<input type="submit" value="Calculate Route" onclick="calcRoute()" />

If you save and reload your page, you should be able to enter 2 locations and the Google Maps API will geocode them and display the route on the map.

But of course, what you’ve really been waiting for is to get the distance of the trip. Let’s do it!

Inside the calcRoute() function, add a new variable called distanceInput (add it under the existing variables):

var distanceInput = document.getElementById("distance");

Last but not least, add the following line of code inside the directionsService response’s anonymous function (add it under the “directionsDisplay.setDirections(response);” line):

distanceInput.value = response.routes[0].legs[0].distance.value / 1000;

Save and reload your page. When you click Calculate Route, not only will the route be shown on the map, but the distance will be calculated too. Congratulations! If your code doesn’t seem to be working, you can view my working example at http://www.christianvarga.com/driving_distance.html to see what went wrong.

Let’s quickly discuss what we’re actually doing here so we can understand why we refer to the response like this.

The directions result object we receive from Google contains a routes array. Multiple routes can be returned if a request is sent with the provideRouteAlternatives field set to true (this is set in the request parameters), but this field defaults to false, and because we don’t set it, we are only ever dealing with one route so we refer to routes[0].

Inside the routes array is another array called legs, which contains details relating to each leg of the journey. A leg is defined as the trip from one waypoint to another. Waypoints can be set in the request parameters (these force the route to pass through the waypoint), however because we don’t set any waypoints, there is only one leg in the journey which is from the start location to the end location, so we refer to legs[0].

Finally, each leg of the journey contains a distance field, which you can either get the value of (in metres) by referring to .value, or you can get a textual representation in the locale’s units by referring to .text. I prefer to get the exact value in metres and then perform my own calculation (divide by 1000) to convert it into kilometres, so I call distance.value / 1000.

There’s a lot more to the Google Maps API, to get the most out of it you can have a look at the directions request/response documentation at http://code.google.com/apis/maps/documentation/javascript/services.html#Directions. This should get you started with extending the functionality of our little app.

If you have any questions or comments, please don’t hesitate to leave them below.

Permalink | Comments (3)