Fixing Apache after upgrading to Yosemite

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

Everyone’s local setup is going to be slightly different so this may or may not be helpful to you, 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 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 may want to uncomment this as well if you are using the version of PHP (5.5) that comes with Apache (rather than installed via brew for instance):

LoadModule php5_module libexec/apache2/

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

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

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.