Little changes to get concrete5 working

By Ammon | October 26 2010

I took the concrete5 content management system out for a spin today. Its very pretty and the interface is great. There were a couple things I had to tweak in order to make it run on my local development system.  Its the usual suspects: permissions, virtual hosts, and permalinks. They were an easy fix (for a seasoned WordPress developer), but why not learn from my mistakes?

Setup

Official installation instructions for Apache servers can be found here. I feel like I need to post the link because the page was actually a little hard to find on the concrete5 website.  Here we go!

  1. Download concrete5 from the download page
  2. Extract the files and put them in your webserver’s root directory (probably /var/www).  You can name the top-level folder whatever you want.  I called mine “concrete5″
  3. Go to your terminal and sudo yourself (you’re going to need root permissions most of this): $ sudo su
  4. In your terminal, navigate to your concrete5 install and run: $ chmod 777 config/ files/ packages/ (don’t worry, we’ll change this back to something more secure later)
  5. In your browser, go to your localhost phpMyAdmin and create a new user with a new database and grant that user all privileges (Privileges > Add a new user)

Installation

  1. In your browser, navigate to http://localhost/concrete5.  You will see a list of installation requirements under “Testing Required Items” that should be all green checkmarks.  Fill in the Personal Information and the Database Information (server will be “localhost” and database name should be the same as your username)
  2. Click install, and you should get a message that says your installation is complete.  Take down the randomly generated admin password, cause you’re gonna need it.

Permalinks

  1. After installation, you’ll be presented with your new website.  Click on Dashboard in the top right corner
  2. From the Dashboard, click on Sitewide Settings in the lower left
  3. Under Linking, put a checkmark next to “Enable pretty URLs” and click save
  4. If your setup is like mine, you’ll get a little warning that says “URL rewriting enabled. Make sure you copy the lines below these URL Rewriting settings area and place them in your .htaccess or web server configuration file.”
  5. Find the code that was generated for your .htaccess file under Required Code.  Highlight and copy that.
  6. Back in terminal, navigate to your concrete5 install directory and make a new file called .htaccess
  7. Paste the “Required Code” in that file.
  8. Change the line RewriteBase /concrete5/ to RewriteBase /

Virtual Hosting

  1. Still in terminal, navigate to /etc/apache2/sites-available and create a file  called concrete5.dev. Fill it with something like this:
    • <VirtualHost *:80>
      ServerName concrete5.dev
      ServerAlias concrete5.dev
      ServerAdmin myemail@host.com
      DocumentRoot /var/www/concrete5/
      </VirtualHost>
  2. Save that file and cd over to /etc/apache2/sites-enabled. Create a pseudo link like this: $ ln -s ../sites-available/concrete5.dev concrete5.dev
  3. In the terminal, add line like this to the /etc/hosts file: 127.0.0.1 concrete5.dev
  4. Restart apache: $ service apache2 restart

Finishing Move

  1. Open this file in a text editor: /var/www/concrete5/config/site.php
  2. site.php is generated by the installation process.  Its very similar to config.php in WordPress.  You need to edit it a bit to get permalinks and virtual hosts working
  3. Change the line define('BASE_URL', 'http://localhost'); to define('BASE_URL', 'http://concrete5.dev');
  4. Change the line define('DIR_REL', '/concrete5_v2'); to define('DIR_REL', '');

Secure your site

Edit 2/25/11: File these steps under “hella important”. In the terminal, navigate to your concrete5/ directory and enter the following lines to set more secure file permissions:

  1. sudo chmod -R 755 config/ files/ packages/
  2. sudo chmod 644 config/site.php
  3. sudo chmod 755 sitemap.xml

That’s it!  You should be able to navigate over to http://concrete5.dev in your browser and see your new site.

Posted in Tutorial | Tagged | Leave a comment

Use Image Magick to batch convert .png files to .gif

By Ammon | October 16 2010

I just checked, and W3Counter puts global Internet Explorer 6 usage at just 5.78%. This is a pretty good argument for not supporting it anymore with my websites, but I still do it. Maybe its just habit, or maybe its because I’ve become really fast at dealing with IE6 and its many deficiencies so its just not that big a deal.

Just ignore it

One thing that sames me time is the way I handle .png files in IE6: I don’t. IE6 can’t handle transparency in .png files, but instead of using a script to fix it (which has never really worked for me) I just copy all the pertinent css to a file called IE6.css, which I load via conditional comments. I change all the image filenames to .gif like this:

style.css

#content {
background: transparent url('images/background.png') repeat-y top left;
}

ie6.css

#content {
background: transparent url('images/background.gif') repeat-y top left;
}

The Magick

Then I batch convert all my .png files with Image Magick and place them in a special folder, like this:

$ mkdir gifs
$ mogrify -path gifs/ -format gif *.png

The resulting gif files are much lower quality than the png’s, but at least IE6 users can see the site. Besides, they’re used to the Internet looking like crap.

Posted in Solutions | Tagged | Leave a comment

Novacut in the press!

By Ammon | September 28 2010

We only have 3 days to go on Kickstarter, so if you haven’t already, gimmee a dollar! The more people who back us in any amount the higher ranked we are and the more attention we get, which leads to more dollars!

The Ostatic blog did a short piece on Novacut, awesomely titled Novacut: A Video Editor for the Next Joss Whedon. That’s right Joss, you paying attention!? This is for you buddy. Great work out there.

Flaaaaaaame Waaaaaar!

Edit

Check it: the Ostatic post about Novacut got mentioned on the Joss Whedon fan site WHEDONesque – which I promptly bookmarked for future reading – and started an awesome little flame war about Novacut and our, um, unusual business model. Its way more of a polite discussion than a war, but I assure you the whole Novacut team is tickled pink that people are talking about our project. And also? Joss Whedon rules.

Posted in Musings | Leave a comment

Browser testing with cloned virtual machines

By Ammon | September 25 2010

I’ve tried browser testing seven ways to Sunday and it has always proven to be the biggest pain in the ass. Until recently, I had a separate computer running Windows XP (bought and paid for), which in turn ran two or three “Microsoft Windows Compatibility Images” (Windows virtual machines that Microsoft distributes free for web developers to test on). One for IE6 on XP, one for IE7 on Vista, one for IE8… you get the idea. The computer was slow, it took up tons of space, and I just hated the idea that I had a Windows machine in my house.

Epiphany!

I think it was Jason who mentioned off-handedly that virtual machines can be cloned. Don’t know why I never thought of that, but it changed the whole way I do browser testing. Here’s my new way, I call it “The best browser testing setup ever”.

The Best Browser Testing Setup Ever

  1. Buy a copy of Windows XP (painful, but necessary)
  2. Install it in VirtualBox (or VMWare, or whatever), but turn off automatic updates and don’t update/upgrade anything. This will be your Internet Explorer 6 testing grounds
  3. Clone that virtual machine
    • $ cd ~/.VirtualBox/HardDisks
    • $ vboxmanage clonevdi source.vdi target.vdi
    • Then in VirtualBox, select New and follow the wizard. Give your new virtual machine a name, and use the default memory settings. When it asks you to select a hard disk, choose “Use existing hard disk”. Your new .vdi will not be on the list, so click the folder icon, select add, and find your new disk manually. Choose your disk, click select, and finish.
  4. Open the clone (I called this one IE7 on XP) and install Internet Explorer 7, turn off automatic updates
  5. Clone IE7 on XP, call it IE8 on XP, open it up and install IE8. Turn off automatic updates
  6. Finally, clone IE8 on XP and update that clone all the way. This will be IE9 on XP
  7. Repeat for Vista and 7 if you want, but I don’t think its totally necessary.

Each virtual machine you create must have Guest Additions installed and must share an internet connection via NAT with your host machine. If you serve websites with Apache virtual hosts, all you have to do is edit the hosts file in your Windows XP guests just like you do in Ubuntu. In Windows XP, the hosts file is located at c:\windows\system32\drivers\etc\hosts.

Posted in Musings | Tagged , | 1 Comment

New Domain!

By Ammon | September 25 2010

I’ve been planning to do this for like a million years, but I finally took the time to change my domain name to the hilariously clever “likesalmon.net”. Get it?! Like salmon dot net?! I bet you are lol-ing your ass off right now.

Now about that porfolio…

Posted in Musings | Leave a comment

Esoteric PHP Knowledge

By Ammon | September 24 2010

I’m writing a WordPress plugin right now and I keep running into all these crazy PHP-specific operators and such that don’t seem to be in the manual. Or at least I can’t find them. I’ll make a little collection here.

Q and A

Q: What does the ampersand (‘&’) do when it precedes a variable? Like when you see $foo = &$bar?
A: According to Byron Bennett on Whypad, the ‘&’ sets up a reference to the original variable instead of copying it’s value. So if I start with:

$bar = 'bass';

And then pull one of these:

$foo = &$bar;

But then decide:

$bar = 'boo';

$foo will now also be assigned ‘boo’. If I had left off the ‘&’, $foo would still equal the original value of $bar, ‘bass’.

Q: What does the ‘@’ symbol do?
A: ‘@’ is the error suppression operator in PHP. You can use it on operators and functions like (this answer came from the comments in that very same Whypad post)
Q: $log = &new MockLog(); // Wha?!
Found this in the SimpleTest tutorial and it confused the heck out of me. Apparently its a typo! According to Steve on JustSkins, it should be:

$log =& new MockLog();

So =& is an “assignment operator that creates a reference”. Which also doesn’t make much sense. But then Hilarion breaks it down:

The difference is:

$MyObject = new Object();

does:
1. creates Object
2. makes a copy of it (not using the class standard constructor)
3. assigns the copy to $MyObject variable

$MyObject = & new Object();

does:
1. creates Object
2. assigns the object to $MyObject variable

Nice.

Q: Help! I have two colons in my function!
A: If you see one of these ‘::‘ or maybe parent::mymethod();, you have found yourself the Scope Resolution Operator™. This operator can call a method of a class, even if the class hasn’t been instantiated yet. I haven’t run across this in other languages and I find it totally fascinating. The PHP manual actually has a pretty good example of what’s going on here:


<?php
class A {
    function example() {
        echo "I am the original function A::example().\n";
    }
}

class B extends A {
    function example() {
        echo "I am the redefined function B::example().\n";
        A::example(); // could be written: parent::example();
    }
}

// there is no object of class A.
// this will print
//   I am the original function A::example().
A::example();

// create an object of class B.
$b = new B;

// this will print
//   I am the redefined function B::example().
//   I am the original function A::example().
$b->example();
?>

See?! See how A::example() yanked that method right out of the A class and used it before A was even assigned to to an object? Crazy.

Q: What’s the best way to remove a value from an array?

A: You could use array_slice() or array_splice(), but as this pithy and informative post points out, they’re not great. Fortunately, using unset($array[i]) to remove the value and $array = array_values($array) to re-index the array is fast and works great!

Posted in Solutions | Tagged | Leave a comment

Novacut is go!

By Ammon | September 2 2010

Our startup project, Novacut, got accepted to Kickstarter!

Were building an open source, distributed workflow video editor, player and marketplace. The idea is that with all the sweet new camera tech thats available to and affordable by normal humans, its possible to create pro video without the backing of a network. The missing pieces are (1) a reasonably priced video editor (ours will be free as in freedom) and (2) a way to make money off the product. The gravy? More awesome tv for everybody! So check out the website for more info and then contribute to the project!

Posted in Musings | Tagged | Leave a comment

Great new Gedit plugin find: Gedit File Search

By Ammon | August 23 2010

Its the only way

This saves me a ton of time when trying to find one teeny-tiny piece of code in a mountain of files. There are several similar plugins but this one struck me as the simplest and best. It searches all the files under a certain directory for a string you enter. You can get it here:

http://oliver.github.com/gedit-file-search/

Installation

To install, download and extract the compressed folder, then put the files file-search.gedit-plugin, file-search.glade, and file-search.py in your plugins directory. For local use, this will be in ~/.gnome2/gedit/plugins/, or if you want to install system-wide put them in /usr/lib/gedit-2/plugins/ (you have to be su to do this). Activate the plugin in Gedit by going to Edit > Preferences > Plugins and putting a check next to File Search. You will now have a new menu item under Search called Find in files… Have fun with that!

Posted in Gedit | Tagged , | Leave a comment

Imagemagick: use montage to proof images

By Ammon | June 14 2010

The following command will create an image called montage.png that is a collection of all the .png files in the current directory. Images larger than 150px on a side will be resized, but aspect ratio is preserved. The images are separated by a 2px offset.

$ montage *.png -geometry 150x150\>+2+2 montage.png

Posted in Solutions | Tagged | Leave a comment

Tile images in Imagemagick to create CSS sprites

By Ammon | June 3 2010

The Magick

This will stack two images to create a CSS sprite. Very handy for flicker-free image rollovers:

$ montage -background transparent -tile 1x2 -geometry +0+2 image1.gif image2.gif result.gif

You could create a taller or wider stack by adjusting the -tile option. For example -tile 2x10 would stack 2 images across and 10 images down. If you don’t have 20 images, Imagemagick will leave empty spaces.

Not sure why I had to set -geometry +0+2. That creates a 2 pixel vertical offset, which was necessary to align to two images. If you leave it at -geometry +0+0 the hover image is slightly off, which makes for a cool “pressed in” effect, but it’s not always what I need.

The CSS

The CSS you would use to make the rollover work would go something like this:


a.rollover {
background: url('Images/result.gif') no-repeat center top;
display: block; /* necessary to set the width and height of a tags */
text-indent: -99999px; /* get the link text out of the way if replaced by an image */
overflow: hidden; /* so you don't get the dotted outline when you click on the link */
width: 100px;
height: 100px;
}

a.rollover:hover {
background: url('Images/result.gif') no-repeat center bottom;
}

Bash bonus!

When I did this, I had a folder of images with the naming scheme menu_img1.gif, menu_img1_on.gif, menu_img2.gif, menu_img2_on.gif.. .etc.. I automated the sprite creation process from the command line like this:


$ array=( img1 img2 img3 )
$ for i in 0 1 2
$ do
$ montage -background transparent -tile 1x2 -geometry +0+2 menu_${array[i]}.gif menu_${array[i]}_on.gif menu_${array[i]}_sprite.gif
$ done

Posted in Musings | Tagged , | 1 Comment