Fixing Apache after upgrading to Yosemite

If you have just upgraded OS X to Yosemite and use Apache for local web development, you are mostly likely going to run into some problems after you finish admiring how sharp Helvetica looks and start trying to do some work.

Everyone’s setup if likely to be slightly different so you might have different issues, but here are the issues I ran into.

Fix Brew

First of all, brew was broken. This is because brew targets Ruby 1.8 and Yosemite comes with Ruby 2.0. Hans van Gent has you covered with a simple fix for this.

Fix Apache

When hitting localhost I was getting a 403 error.

Yosemite will upgrade Apache to version 2.4.9, this means you’ll have a new httpd.conf file in /private/etc/apache2. Handily, during the upgrade process, a copy of your previous httpd config file is created called httpd.conf~previous. It is worth comparing these two files to see what has changed – it will be quite a bit different.

I have a virtual hosts set up for numerous local sites, so the first thing I needed to do was uncomment this line:

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf

You’ll probably want to uncomment this as well:

LoadModule php5_module libexec/apache2/libphp5.so

Here’s the section that was causing my 403:

#
# Deny access to the entirety of your server's filesystem. You must
# explicitly permit access to web content directories in other
# <Directory> blocks below.
#
<Directory />
AllowOverride none
Require all denied
</Directory>

As the comments suggest, everything is locked down by default. Here’s the config that cured my 403 error:

<Directory />
Options FollowSymLinks
AllowOverride all
Order allow,deny
Allow from all
</Directory>

Hopefully this will help you get back up and running.

Responsive Slanted Divs with CSS

The design for a website I worked on recently required slanted boxes, here’s a simplified version of the what the designer had in mind:

screenshot of design featuring slanted divs

Because the site was responsive, using background images wasn’t an option because retaining the slant angle at different widths would mean using lots of different images across breakpoints. This would be too much of a maintenance overhead, not to mention the fact that using a background image for a single colour block would be morally wrong.

The next approach that sprung to mind was using CSS triangles on before and after pseudo elements - a method I’ve used before on City’s course pages for slanted tabs. Unfortunately this method also failed the responsive test as you would need to know the width of the box to get a consistent angled line across the whole div.

My final approach was again to use pseudo elements, but this time applying a css 3 transform on them, skewing the whole element and hiding the overlapping areas. Here’s a pen with the code …

See the Pen Responsive slanted divs with CSS by Larry Naman (@LarryAnomie) on CodePen.

Port 35729 is already in use by another process

I’ve run into this error a couple of times recently when using the Yeoman webapp generator with Livereload. After trying changing the port used by the Livereload server in the Gruntfile and still seeing the error, running this command in the terminal…

lsof | grep 35729

…confirmed that Sublime Text was the port hogging culprit. Specifically the Livereload Sublime plugin. Disabling this plugin resolved the conflict.

Backbone Views Scoped Queries

Like Dave Brailsford, I’m a fan of marginal gains and love discovering small tips and tricks to optimise my development workflow. So in the spirit of marginal gains, here’s a tiny productivity tip for Backbone.js that I stumbled upon the the other day.

If you have jQuery included and need to target a child of your view’s el, instead of this…

view.$el.find('.some-other-element');

You can just write…

view.$('.some-other-element');

BOOM. milliseconds of typing time saved.

Every Backbone view has a $ function that runs scoped queries within the view’s el. Probably obvious to most as it’s right there in the docs, but I only just noticed it so am recording it here as an aide memoir.