Total results: 16

Quickly open a web page in all browsers for testing

In order to test a certain web page in all of my development browsers, I wrote a simple shell script that will open a new instance of each of my browsers and automatically point it to a given URL.

This script is designed for OSX and will likely need some tweaks for a Linux distribution (or perhaps a complete rewrite) but the concept can be easily transferred.

browser-test.sh

# $1: URL

open -a "/Applications/Google Chrome.app" $1 -g -n
open -a "/Applications/Google Chrome Canary.app" $1 -g -n
open -a "/Applications/Safari.app" $1 -g -n
open -a "/Applications/Webkit.app" $1 -g -n
open -a "/Applications/Firefox.app" -g $1 -g -n
open -a "/Applications/FirefoxAurora.app" -g $1 -g -n
open -a "/Applications/Opera.app" $1 -g -n
open -a "/Applications/Opera Beta.app" $1 -g -n

I have configured the script to work for Chrome and Canary (Nightly), Safari and Webkit (Nightly), Firefox and Aurora (Nightly) and finally Opera and Opera Beta (Nightly).

On my setup I additionally load an extra app called "CoRD" which is used to connect to remote Windows machines for Internet Explorer testing.

browser-test.sh

open -a "/Applications/CoRD.app" -g -n

The -g option after each open command tells the given app to open in the background. Finally the -n switch will force a new instance of the browser, even if you already have one running, so that the browser is in a clean state to test with.

Finally I symlink this file to my /usr/local/bin directory so that the script is always available on my PATH.

Terminal

$ cd /usr/local/bin
$ ln -s browser-test ~/path/to/browser-test.sh
$ chmod a+x browser-test

Complete these steps in order and you will be able to call browser-test from any directory in the terminal.

Terminal

$ browser-test http://blog.blakesimpson.co.uk/

Ember Server "Bus Error 10" Fix

If you are using the ember-cli package to access the ember command line tool and experience a "Bus Error 10" that crashes the ember server every time you save a file then it is probably due to an incompatible Node.js version.

To fix this issue simply head to the Node.js downloads page and get the latest version of Node for your operating system.

For a functional ember server you should be using Node.js version 0.10.21 or higher, personally I upgraded from 0.10.20 to 0.10.29 and now the server runs perfectly, including the live reload functionality.

Apache Configure CORS Headers for Whitelist Domains

In the current implementation of Cross Origin Resource Sharing (CORS) the Access-Control-Allow-Origin header can only provide a single host domain or a wildcard as the accept value. This is not optimal when you have multiple clients connecting to the same virtual server and simply want to allow a list of known client host domains to the "allow" list.

Since only a single domain in a single access header can be delivered back to the client, Apache must read the incoming Origin header and match it to the list of "white" (accepted) domains. If an appropriate match is found, echo the domain host back to client as the value of Access-Control-Allow-Origin.

Use the following configuration snippet in the Apache virtual host ".conf" file or in the server ".htaccess" file. Ensure mod_headers and SetEnvIfNoCase are enabled.

<IfModule mod_headers.c>
   SetEnvIfNoCase Origin "https?://(www\.)?(domain\.com|staging\.domain\.com)(:\d+)?$" ACAO=$0
   Header set Access-Control-Allow-Origin %{ACAO}e env=ACAO
</IfModule>

The regular expression https?://(www\.)?(domain\.com|staging\.domain\.com)(:\d+)?$ matches the URL of Origin, a required HTTP header for all requests. The pattern matches both the http and https protocols. It will match an optional www. subdomain and finally matches the actual host name of your whitelist entries. Any characters after the domain name are ignored. This example will therefore enable:

* http://domain.com
* https://domain.com
* http://www.domain.com
* https://www.domain.com
* http://staging.domain.com
* https://staging.domain.com
* http://www.staging.domain.com
* https://www.staging.domain.com

If you send a request from http://staging.domain.com/app/, the response would include the header:

Access-Control-Allow-Origin: http://staging.domain.com

If you sent another request from https://www.domain.com/client/, the response would include the header:

Access-Control-Allow-Origin: https://www.domain.com

Restore accidentally deleted /tmp directory

Create the "/tmp" and restore function correctly after deleting it by accident:

http://superuser.com/questions/241955/tmp-directory-deleted-i-cannot-login-to-the-system

# mkdir /tmp
# chmod o+t,ugo+rw /tmp

FTP to a local wordpress install on OSX

If you have the problem when working on a local wordpress installation where you need to do an upgrade or install a plugin, you may be presented with the following screen asking for FTP details to the server.

Wordpress plugin install FTP prompt

Lets assume you need to install a plugin. One option would be to manually download the plugin and move it into the wordpress plugins directory, but this is frustrating and slow. The better way is to let wordpress handle everything for you.

Fix broken Apache and PHP after Mavericks upgrade

My Mac no longer had Apache or PHP working after the upgrade to Mac OSX 10.9, Mavericks. This is caused by the system upgrade removing the main configuration files for each service and creating backups instead.

Here are the steps I used to fix it, open a terminal window and use the following commands:

Fix Apache

cd /etc/apache2/
sudo mv httpd.conf httpd.conf.backup
sudo mv httpd.conf.pre-update httpd.conf
sudo apachectl restart

Once complete, Apache should be back up and running as before. Next, PHP can be repaired like so:

Fix PHP

cd /private/etc/
sudo mv php.ini-5.2-previous php.ini
sudo apachectl restart

That's it! These steps simply move the configuration files back to their correct location and restart the web server.

Notes:

  • I am assuming you use the original Apache/PHP install that comes with OSX, instead of a custom solution like MAMP.
  • Your PHP ini file may have a different name if you are not using version 5.2

Static file web servers

Testing a static website can be done simply by opening the HTML files in a web browser, but for some functionality to perform correctly, such as local AJAX calls, the files need to be served from a web server.

Alternatively, you may want to check out some static files on your mobile device. You can do this easily by starting a simple web server for the project and navigate to your computers IP address with the given server port.

Python Server

The easiest way to do this on UNIX based systems is to use the Python Simple HTTP Server, like so:

python -m SimpleHTTPServer 8080

Run this command in the same directory as your project from the terminal, then point your browser to http://localhost:8080.

This is a great way to get a server running in seconds, for basic testing, but I have found that as the number of files in the project increases, the stability of the server decreases. Often files will not be passed to the client and 404 errors are encountered. For these reasons I have investigated a stronger solution that is still simple to setup. This leads me to Node.JS.

Node Server

Node.JS is no stranger to web servers, in fact this is often the primary task of a Node application.

"Connect" is a Node.JS middleware application that makes the creation of simple web servers trivial.

To get Connect running, first install it via npm:

npm install -g connect

Here is a web server that can be used, simply paste the code into a file called "server.js" in your project's root directory.

var connect = require( 'connect' ),
  http = require( 'http' );

app = connect()
  .use( connect.logger( 'dev' ) )
  .use( connect.static( __dirname ) );

http.createServer( app ).listen( 8080 );

Finally run the server from the terminal like so:

node server.js

If no error was received, the server is running and files can be viewed by browsing http://localhost:8080, just like in the Python example.

I have not had any trouble with the Connect version of my server and it comes built with a nice development logger, showing what files were requested and with what status. This output can be viewed live in the terminal window as requests come in.

Connect Server Dev Log

Fix frozen OSX gestures without restart

Occasionally when working with OSX the magic mouse/trackpad gestures will stop working at random. This appears to be caused by 3rd party software interfering with the Dock, so restarting it will usually fix this problem rather than performing a computer restart.

You can restart the Dock program by opening a terminal window and issuing the following command:

killall Dock

© Blake Simpson, 2012 – 2017