1. Test for MySQL

First, open up Terminal. You can do this quickly and easily using Spotlight:

Command + Spacebar -> Type: terminal -> Press ‘Return’

Next, start MySQL via MAMP and confirm MySQL is available by running the following in Terminal:

/Applications/MAMP/Library/bin/mysql -uroot -p

In a default MAMP installation your password should be ‘root’ but you can double check by navigating to your MAMP start page.

If all goes well you’ll be at your MySQL prompt. Give it a whirl with a quick MySQL command:

show processlist;

2. Create a MySQL Shortcut

1. Type ‘quit’ to get back to terminal from MySQL and enter:

mkdir ~/bin

2. Link the MySQL binary into the directory:

cd ~/bin
ln -s /Applications/MAMP/Library/bin/mysql mysql

Tip: Pressing tab auto completes a folder’s name if you’ve typed enough of it to differentiate it from other folders in the same directory.

3. Create a .bash_profile

You can skip this if it’s already done.

1. In Terminal type:

cd ~/

2. Create the file by typing:

touch .bash_profile

4. Update .bash_profile with your MySQL path

1. Open the newly created .bash_profile for editing by typing:

open -e .bash_profile

This should open in TextEdit.

2. In .bash_profile, add the following, save and close:

export PATH=$PATH:/Users/YOUR_USERNAME/bin/

3. Reload .bash_profile by running the following command in Terminal:

source .bash_profile

All set! You can now connect to MySQL through Terminal by simply typing ‘mysql’ into Terminal.

Didn’t Quite Work Out?

1. Confirm the path is set correctly:

echo $PATH;

This should echo out the path you’ve set in your .bash_profile file.

2. Confirm the link is in place:

ls -la ~/bin

You should see:

mysql -> /Applications/MAMP/Library/bin/mysql

One issue I come across on almost a daily basis is terrible use of drop shadows on body copy (open up Chrome/webkit to see what I mean). More often than not it’s used in web apps (project management tools, etc) which is slightly more forgivable, but I’ve also come across it in blog posts.

There’s no doubt: that embossed text look is sexy. The problem is that some users highlight the text their reading, and more often than not text with a text shadow is near incomprehensible with the default highlighting color.

Here’s an example (highlight it!):

Check out how artsy I am!

It takes all of another 30 seconds to 1) make your website more awesome and 2) cause less seizures (highlight again!):

Check out how artsy I am!

All it took was the following CSS:

p.sexy-highlight::selection {
        background: #fff2a8;
}

There’s a chance you highlighted both of those and saw no difference. If that’s the case, do your part and download a better browser! Even though ::selection isn’t quite cross browser, adding it to your stylesheet means your website will get better with time.

So, moral of this post? Don’t forget to use the websites you create!

Let’s call it FO, short for Facebook Optimization. Coined? Sure.

There are three meta tags we should be primarily concerned with, although Facebook offers considerably more:

The Description

By default, Facebook scrapes your website’s description meta tag. That’s perfectly acceptable in most situations, and a fantastic fall back, but your website’s description is keen to those people searching for your website. On Facebook, you’re in the way of much more important things. In other words, you’re interrupting.

In light of this, you can target your description while keeping that information in mind by adding a secondary description to your pages:

<meta property="og:description" content="Just try to distrac-"/>

Image

Images play a key role in distractions (source), so ensuring the right one hangs to the left of your site description can help bump up those Facebook referrals. Without specifying your Open Graph image, Facebook conveniently parses your site for all images sources and allows you to scroll through prior to posting. Specifying via a meta tag ensures you’re in control (and the images don’t have to be on the page).

<meta property="og:image" content="path/to/img.ext"/>

Title

By default, Facebook pulls from the title tag in the HTML of the linked page. Typically okay, but again, controlling the content to a specific visitor niche is extraordinarily powerful if used correctly.

<meta property="og:title" content="Make It Awesome"/>

Check Your Work!

Facebook developers, out of the kindness of their hearts, created a tool to help you test your meta tags instead of just posting and deleting time and time again. Head over to the Facebook URL Linter to see your meta tags in action!

Imagine, though, a Javascript-free way to on-the-fly watch the results of your CSS. Sounds cool, right? Well it’s even cooler when you see just how easy it is.

We’re all, hopefully, familiar with the <style> tag. We often use it in the <head> of our documents to draft up some document-level styling before porting it over to an external stylesheet (right?!).

Not today. Instead, drop that <style> tag right into the body of your document. Below it, add some simple HTML. For the purpose of this post, let’s just throw a paragraph tag on the page. Right now we should have something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Title</title>
</head>
<body> 

	<p>Funky!</p>

	<style type="text/css">

	</style>

</body>
</html>

Next, some styling. In your <style> block, let’s start off by giving that paragraph a border so we can see what the heck is happening, and whatever else you want to do. By default, browsers render the <style> block as ‘display: none’, so what’s a developer to do? Well, ‘display: block;’ of course. Refresh – we’re halfway there already!

Next, we’ll want that css to be a little easier to read. We can do that by giving it a monospaced typeface and a little white-space magic to preserve line breaks:

<style type="text/css">

	p {
		border: solid 1px #000;
		padding: 10px;
	}

	style {
		display: block;
		font-size: 12px;
		font-family: Courier;
		white-space: pre;
	}

</style>

Refresh the page. Fancy, right? But not good enough. Drop the awesome ‘contenteditable’ parameter into the opening <style> tag and, there you have it, on the fly CSS! Play around with floats, overflows, background positions – anything – and watch things change (or not change) as you type.

Here’s the final code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Title</title>
</head>
<body> 

	<p>Funky!</p>

	<style type="text/css" contenteditable>

		p {
			border: solid 1px #000;
			padding: 10px;
		}

		body style {
			display: block;
			font-size: 12px;
			font-family: Courier;
			white-space: pre;
		}

	</style>

</body>
</html>

And, of course, here’s the live code – go nuts! But note that you may have to shift-enter to line break, depending on your browser.