Tutorials

Making life easier w/ PagodaBox and a special treat!

Have you gotten tired of messing with servers? Doing updates? Maintaining security?

You may just be in the right mind set to look at an architecture as a service, such as PagodaBox or Orchestra.

And now for the treat:

I have set up an easy-to-use quickstart for symfony2 + sonata admin for you to use on PagodaBox.

Want to contribute? Send a PR to the GitHub repository!

How to set up a friction free development setup

So, I keep saying in #symfony (freenode IRC) “I need to blog about my setup”. So, here it is.

Required Software

For my current setup, you’ll need to buy two pieces of software.

If you use a Mac

  1. Parallels Desktop for Mac — $79.99 (on sale for $49.99 in the iStack Mac Bundle)
  2. Your favorite linux distribution

If you use a Windows machine, I don’t have a recommended virtual machine but I bet Parallels Workstation is reasonable.

HOLD IT! I’m not going to BUY software!

Then fine, don’t. Enjoy your fiddling. Enjoy tweaking. Enjoy not working. My goal is to just get stuff done. And besides — how much money do you make a year doing this stuff anyway? If you can’t afford $80 in tools to do your job better, you’re doing it wrong. If you really can’t afford it, make the case to your boss. Download the demos and see the value. Don’t have a boss? Then you’re really in trouble.

ANYWAY

I say your favorite linux distribution because it really doesn’t matter. The more you know about it, the less time you spend fiddling. For me, that’s CentOS. For you, it could be Dumbledebian 5.4.2 XXL. It doesn’t matter.

Installation

First, install your virtual machine. Set it up so it can talk to your computer, and the internet at large.

Next, decide a name for it. I call mine ‘linux’. Fancy, eh?

Now, edit your /etc/hosts file on both your local machine and your VM. Add your VMs IP and point it to ‘linux’. This is important. Now ‘linux’ refers to the VM on both your computer and the VM. That means in your db config, you can say to use ‘linux’ as the host, and it will work locally and remotely.

Here’s my /etc/hosts addition:

10.211.55.4     linux

Now it’s time for the special sauce. The magic. The thing that makes this all worth it.

For this purpose, I will assume all of your development stuff lives within ~/Projects

On your Mac, export your home directory over your VM’s network (/etc/exports):

/Users/[username] -mapall=[username] -network=10.211.55.0 -mask=255.255.255.0

and on your linux VM (/etc/fstab):

10.211.55.2:/Users/[username]  /home/[username]   nfs          rw            0    0

Now to assist your path parity (so that things understand where they live, since OS X uses /Users and linux uses /home), what I did was simply symlink /Users to /home on my OS X and symlink /home to /Users on the VM

#desktop
ln -sf /Users /home
 
#VM
ln -sf /home /Users

Now you just configure your apache:

<Directory /home/[username]>
  Options FollowSymLinks
  AllowOverride All
</Directory>
<VirtualHost *:80>
  DocumentRoot /home/[username]/Projects
  ServerName linux
  ErrorLog /var/log/httpd/linux.error_log
  CustomLog /var/log/httpd/linux.access_log combined
  RewriteLog /var/log/httpd/linux.rewrite_log
</VirtualHost>

Restart your nfsd locally, and apache remotely, and remount /home/user on your linux vm, and you should be ready to enjoy some frictionless development. Work locally in your favorite IDE (I like PHPStorm), and via the magic of NFS, your changes are automatically running in an actual linux environment.

How to build truly responsive images

UPDATE: it looks like Scott Jehl has already beaten me to the punch, so check out his github project!

So, I was almost asleep, and this idea popped into my head. I want to write it down for two reasons:

  1. So I don’t forget it.
  2. To see if anyone else agrees, disagrees, or sees any flaws in the idea.
Basically, I think I have figured out how to make images ridiculously responsive
  1. in a syntax that is logical and 
  2. in a way that can be powered by javascript and 
  3. fails gracefully to non-javascript supporting clients
The code starts out as simple as:
<image data-alt="Some image" data-width="300px" data-height="300px"
  id="my_image" class="some_class">
 
  <source src="/images/high-dpi/image.jpg"
    media="screen and (-webkit-device-pixel-ratio: 2.0)" />
  <source src="/images/print-dpi/image.jpg" media="print" />
  <source src="/images/regular-dpi/image.jpg" />
  <img src="/images/regular-dpi/image.jpg" width="300"
    height="300" alt="Some image" />
</image>

With no javascript, nothing but the <img> tag is displayed, and everything is happy.

With javascript, we run a system which turns it into the following (this becomes easier if we can evaluate media queries in JS, but I’m not sure if we can do that, so I’m showing an alternate way):

<style>
  #my_image {
    background-image: url('/images/regular-dpi/image.jpg');
    background-repeat: no-repeat;
    background-size: 300px 300px;
  }
  @media print {
    #my_image { 
      background-image: url('/images/print-dpi/image.jpg');
    }
  }
  @media screen and (-webkit-device-pixel-ratio: 2.0) {
    #my_image {
      background-image: url('/images/high-dpi/image.jpg');
    }
  }
</style>
<image data-alt="Some image" data-width="300px" data-height="300px"
  id="my_image" style="width: 300px; height: 300px;">
</image>

And now for the fun part – we can use document.getElementById(‘my_image’).style.backgroundImage to get the right image!

This means that the last and final step then turns into:

<image data-alt="Some image" data-width="300px" data-height="300px" id="my_image">
  <img style="width: 300px; height: 300px;" src="/images/high-dpi/image.jpg"
    alt="Some image" width="300" height="300" />
</image>

Which should make it happy with screen readers and other similar systems.

This approach has a few distinct advantages:

  1. It leverages existing tools for defining when to load a particular image (media queries)
  2. It provides a graceful fallback for no javascript support
  3. It (hopefully) will be relatively close to whatever is selected for moving forward in a browser integrated solution, as it fits with the patterns already established.

So that’s it. That’s my master plan. What do you think?

How to fix the heck out of your Brother Control Center in OS X!


If you have (or use) a Brother printer, you know EXACTLY what I am talking about.

EVERY time you restart your computer, you get the obnoxious control center which wants to run an install (on a printer you probably don’t have connected) and takes a minimum of 2 (3 in my case) clicks to dismiss, and it’s slow to boot!

Then you remember, click on the system icon, go to preferences, uncheck display at start up, hit ok, and you’re done.

Then you reboot again and BAM! There’s Brother right back in your face with the obnoxious control center again.

You angrily click through to close it out, go BACK to preferences, UNcheck the startup option, and hit Ok. Now, because you’re NOT crazy, it’s time to make sure it saved what you did. You go BACK to preferences again AND IT IS STILL CHECKED!

Come ON!

But let me share a secret with you.

Let me save your sanity!

Open up a terminal, and type the following:

mkdir ~/Library/Preferences/Brother/

Now, go back, one last time, into Preferences, and uncheck on startup, and press Ok.

Ok, fine, you can go check it again, but look! It’s listened to you!

You’re welcome!

twitter