From one designer to a front-end developer: I’m so grateful for you. You take my pretty pictures and turn them into real-live websites and applications; you convert ideas and sketches into real things that people can use. And even despite that superpower, you rarely get the respect you deserve. It’s time for that to change. No longer will I throw my comps over the proverbial wall for you to blindly build. I’ll change my process for you. Let’s sketch together more to be more efficient and effective as a team. Let’s decide in the browser more. I’ll learn to write JSON for you. Let’s share stories about new, more modern ways of shipping products at higher quality in record time. This is gonna be great!
I recently had a Drupal core patch that I needed to use on a site I’m building. This can be done manually using the
patch command, but when managing a Drupal project with Composer, any manual patches could get wiped out on the next run of the
composer update or
composer install commands. In order to make sure patches stick, they need to be added to Composer, like a requirement.
I recently discovered that Chrome does not allow the loading of local resources when I tried to link a stylesheet from one local project to another. Here is an example of what I tried to add to the HTML in my project:
<link rel="stylesheet" href="file:///Users/name/Directory/style.css">
And Chrome gave me this error:
Not allowed to load local resource
I was fortunate enough to attend An Event Apart in Orlando this month. I’ve posted my complete notes separately, but below you will find some of the key themes from the conference as well as an overview of each talk. You can also take a look at Articles, Links, and Tools From An Event Apart Orlando 2016 for more information and resources.
While developing Drupal websites locally, I found it to be somewhat of a pain to sync all of the uploaded files (specifically images) from the server to my computer. In some cases, this could be hundreds of megabytes worth of files to download, but without downloading them, my local version of the site would look incomplete with missing images.
I primarily use MAMP for local development, and it turns out that MAMP PRO has an option to add additional virtual host parameters to each individual site hosted locally within the app. Using this feature, I am able to add a rewrite rule to have the MAMP look for photos on the live site when they don’t exist locally, removing the need to download the files onto my computer.
My notes from An Event Apart Orlando: Special Edition 2014 at Disney’s Contemporary Resort in Walt Disney World.
Update: I wrote these instructions using MAMP PRO 2, and I just noticed that it looks like version 3 has some kind of xip.io support built in.
Testing mobile websites locally can be done by simply resizing the browser window on your computer, but sometimes you just want to test the experience on an actual mobile device. One of the easiest ways I’ve found to do this is to use xip.io, a service created by 37signals. What is xip.io?
xip.io is a magic domain name that provides wildcard DNS for any IP address.
This allows you to have a real domain to use for each of your local virtual hosts. If you use MAMP PRO for local development, this service makes it super easy to test each of your sites on mobile. To do this, check out the instructions below.
Note: I think this will only work with MAMP PRO, because you need access to the virtual hosts feature. Also, your computer and mobile device(s) will need to be on the same local network.
- Set up your project in MAMP just like normal.
- Get your local IP address. In OS X, you can do this by opening “System Preferences” and selecting “Network”. Under the “Status” on your connected network device, it will show your IP address. Be aware that if your router uses DHCP to assign IP addresses, the address may change after rebooting or reconnecting your computer.
- Now go to the “Hosts” tab, and select the virtual host that you would like to test. There is an “Aliases” box under general settings. Add a new xip.io alias using your local IP address. For example, if you have a project called “mysite” and your IP address is
10.0.0.1, you would enter something like this:
- Now open the address you set as your alias in a browser on your mobile device.
That’s all there is to it. Now you can test your full site locally from any other device on your local network. I’ve also found this method helpful for sharing my current progress with co-workers in my office. This is a really great solution for testing on multiple devices without having to push code up to a server.