Web Developer - Dale Tan

Using custom ssh key with github

Wed, 27 Apr 2011 08:51 -0400

I recently started a new job at Dealer.com and needed to set up my laptop. However, since we are switching over to Git internally, I needed to set up multiple RSA keys.

First, go to where your ssh keys are stored. On my local, they are here (which i would imagine most devs have this similar set up):

cd ~/.ssh/

then in your config file, add the following:

Host github.com
    User user_name_goes_here
    Hostname github.com
    PreferredAuthentications publickey
    IdentityFile ~/.ssh/id_rsa_github

I used id_rsa_github since that was an easy name to associate it with my github account. I named my dealer one id_rsa_dealer and so forth.

Moving on

Mon, 04 Apr 2011 00:26 -0400

Here is a brief timeline of my life:

Seattle (well, sho'line) for my first 18
Drexel University in Philadelphia for 4
NYC for 6. While there, UGO.com for about 2.5 years then R/GA for the remainder
Burlington, VT

After working remotely for a little under two months with R/GA after moving up to Burlington, I will be moving onto the next part of my development career working for Dealer.com. I will start mid-April working as a frontend dev with their custom client work (though I do want to work on their platform, really, but we'll see how it all goes).

I was a little reluctant at first to accept the job offer with all the stuff I went through with R/GA and my circumstance, but surprisingly, R/GA was pretty cool about me leaving after all. Once I found that out, it was a weight lifted off my shoulders so I could look forward to my next venture. I was glad that I was at least able to see my last project with them out the door before I started with Dealer. I am not completely leaving R/GA just yet - I am going to be working for them on a part-time freelance basis so that I can at least still have some connection to the best project I've worked on this far in my career.

Setting up different development environments using Git (and Github)

Sun, 03 Apr 2011 22:02 -0400

It has taken me a while to get used to using Git and using it in my whole development workflow. Since Symphony CMS is on github and so are basically all of the contributing and extension developers, it only makes sense to get used to using git and github.

After reading this thread on the forums, it helped me figure out how to get my workflow going. Also, Jona's Getting Git for Symphony Development article and Rowan Lewis' *Using Git and Symphony CMS article helped me figure out how to separate the different git repos and upstreams.

For my local development, I use MAMP and wrote a brief article (NEED CORRECT URL) about setting this up the other day. Once that is up and running, and in terms of Symphony, you clone the official github repository:

$ cd site
$ git clone https://github.com/symphonycms/symphony-2.git v1

The v1 is the folder you would like to clone this repository into. This also goes for any other git remote repository you may be working with. Now, you should have site/v1 with the entire symphony repo in v1. Once that is done, you don't want to continue to work off of the symphony repository since you don't technically have push access (unless if you're a core developer) and like what Craig said, it's good practice to NOT use the default origin remote url. Instead, just remove and rename that remote:

$ cd v1
$ git remote rm origin
$ git remote add symphony git://github.com/symphonycms/symphony-2.git

Before adding your site's remote url, you need to create the repository from the github admin, which is pretty straight forward so I will not get into those instructions. After creating your new github repository, you can now add your remote url:

$ git remote add site git@github.com:username/site-repo.git

This remote url shows that you have push access to this repository. Now there should be two remote urls:

$ git remote -v
site    git@github.com:username/site-repo.git (fetch)
site    git@github.com:username/site-repo.git (push)
symphony    git://github.com/symphonycms/symphony-2.git (fetch)
symphony    git://github.com/symphonycms/symphony-2.git (push)

With your remotes setup, you should next set up your branches:

$ git branch -m master symphony
$ git checkout -b site-name

the -m flag changes the master branch name to symphony. This is done so that it's easier to know which branch to use when symphony needs to be updated. Now with the original master branch renamed, it's time to checkout and create and new branch named site-name.

If you run into merge issues when checking out from the symphony repo to the site-name (this could happen on setting up an already existing repo onto a new computer) then just simply resolve the conflicts because it is more than likely that they will differ from the base symphony build.

Once those conflicts are resolved, make sure to run

$ git submodule update --init

This command will then install any extensions associated as submodules in your build. If you do not do this step, then you will more than likely get an "extension not found" error when trying to load up the page.

If you do not have the Dump DB extension installed, I would highly recommend installing this extension to export your authors and data sql files to move around environments by committing it to Git. Obviously, this can pose a major security risk since you will be technically exposing user information and storing it in your version control history, but this seems to be the easiest way to manage your sql between environments. I haven't fully fleshed out this method, but for not it seems to work fine for me. I will, however, delete the sql files so they are not always just lingering there since they are saved onto your server.

Now, to get to the point of that tangent - after doing all the above steps, if you do not load in your database, simply put, you won't have a site. So since I am running MAMP as my localhost, I simply load up phpMyAdmin, create the db table, and then load in the associated sql files. Once I have done that, I git rm *.sql and push so my other environments can do a pull request.

At this point, you should have a running replica of your Production environment.

If you are using the multi-environment manifest mentioned on the Symphony CMS forums (which I can't seem to find a link for), you may need to create a symbolic link to your respective environment. If not, and you try to load up your page, you will be greeted with a missing manifest/config.php message (or something along those lines). To get around this, create your symbolic link (in this example using dev and on the site-name branch):

$ cd v1
$ ln -s ./manifest.dev ./manifest

Once you do create the symbolic link, and then load up the site, you'll be shown a cannot find database [name] message. To get around this, you will need to load in an existing database, usually pulled down from production site like mentioned above.

TO WRITE ABOUT: - how to handle branch pushes with different remotes - upstreams:

$ git branch --set-upstream site site-name
Branch site set up to track local branch site-name.

site is the remote name and site-name is the branch

Setting up MAMP for localhost development

Sat, 02 Apr 2011 18:03 -0400

I'm sure this topic has been beaten to death, but I just recently set up another computer with MAMP and took me probably an extra 20 minutes just to get a local dev domain to work correctly when it should have taken me less than five - which includes downloading the application. Ok, with the downloading, that might be an exaggeration because I already had it on my machine, so I can't really say how long the download takes, but I digress.

In order to get local dev domain, something like awesome-site to work in your MAMP environment, you will need the following:

10 minutes
Admin access
The latest MAMP / MAMP Pro install
Text editor for .conf files (really, extensions shouldn't matter for a text)

Once you have MAMP installed in your root /Applications folder (it must be root, otherwise you will get an error on boot up saying to install MAMP in your root /Applications folder), you will need to find your Apache httpd.conf file. Via the command line:

cd /Applications/MAMP/conf/apache
touch vhosts.conf (we'll get to this in a minute)
Open httpd.conf file and scroll to the very bottom of the file

You should see something like this:

#
# Use name-based virtual hosting.
#

# NameVirtualHost *

Now, since MAMP defaults to port 8888, I'm not really sure why they do not just put *:8888 for the NameVirtualHost since they do the same already for the localhost value (localhost:8888). Regardless, it is an easy change:

# NameVirtualHost *

should now become

NameVirtualHost *:8888

Ok, so this opens up port 8888 for your dev domains like awesome-site:8888.

So, how do you add domain aliases that your browser will recognize? You will need to use Apache's VirtualHost configuration. You can add this information directly into your httpd.conf file, but if you ever update that file via a script, it will wipe out all your configurations. Instead, this is where the vhosts.conf file comes into play. Yes, your changes with the NameVirtualHost and Include can also be wiped out, but at least by using an external vhosts.conf file, those changes will not be wiped out.

Before we get to editing the vhosts.conf file, we want to make sure MAMP will load up that file on boot. After the NameVirtualHost, add this Include:

Include /Applications/MAMP/conf/apache/vhosts.conf

Now, on to editing the vhosts.conf. Like I said earlier, you will need to use Apache's VirtualHost configuration:

<VirtualHost *:8888>
ServerName awesome-site
DocumentRoot /Applications/MAMP/htdocs/awesome-site/
<Directory /Applications/MAMP/htdocs/awesome-site/>
    Options Indexes FollowSymLinks MultiViews
    AllowOverride All
    Order allow,deny
    allow from all
</Directory>
</VirtualHost>

I'm not an Apache expert, so I really cannot say what everything up there means, I just know it has worked for me and so that is what I'm sticking to. These are the most important parts:

VirtualHost *:8888: This just tells the browser to use any url pointed to port 8888 to resolve to local domain and not one in the intertubes.
ServerName: this is what you want your URL (plus port 8888) to resolve to when you type it into the address bar. So effectively, awesome-site:8888 will resolve to your local MAMP instance.
DocumentRoot and Directory: This is the folder that will be used as your root.

The options within the Directory configuration is out of scope for this article so you will need to look those up yourself for more information.

Ok, once we save both the httpd.conf and vhosts.conf files, we will need to restart MAMP so that Apache will recognize these changes. After restarting, we can now go to awesome-site:8888 in the browser. But wait, the browser isn't resolving to anything...that's rather strange. It turns out, there is one more thing we need to configure to make this work: the system's host file which can be found here:

cd /private/etc/hosts

The hosts portion is an actual file, not a directory. Open up the hosts file in your text editor and add this line to the bottom of the file and then save:

127.0.0.1 awesome-site

Like editing the httpd.conf or vhosts.conf files, you will need to restart MAMP to recognize this change. This is also where you will need admin access in order to make save these changes. Once that is done, you will be up and running an aliased localhost url.

If you don't want to edit the hosts file yourself, there is a program that handles these changes: VirtualHostX. If your aren't doing anything more complicated than what I just described, i think this might be a little overkill to use, considering the paid version is $25 US.

You should now know how to set up your aliased localhost domain with MAMP.

testing multiple posts on one day

Tue, 14 Dec 2010 19:40 -0400

This is a test post. Will delete

Response to "Should web designers be learning HTML 5?"

Tue, 14 Dec 2010 02:15 -0400

Perusing the intertubes of the world, I was google something for html5 and came across this question/answer article about whether or not it's a good idea to learn HTML5 right now. I didn't think the author seemed to understand what the status of the current browser wars stood, but I don't think his advice should really be followed:

Yes, HTML 5 does have a lot of cool things it can do, and so it’s tempting to jump in and start learning. But that would largely be a waste of time … at least for now.

Granted, this article was written back in April 2010 so even by today's standards that is a bit dated. Also, the question was proposed to "web designers". Does that exclude developers? Anyways, rather than leaving a rather long comment, i decided to post this instead:

You can always use the html5 shiv (http://code.google.com/p/html5shiv/) to make IE7/8 more or less compatible with html5 syntax which in turn can then be styled with css. basically for ie7/8 to recognize html5 tags (i'm not saying all, like audio/video since you still need certain codec support), it just needs to have that particular element "created" once and it will be good to go. Also, a lot of html5 has to really do with semantics of the page. Hell, you can change just the doctype of your page and say you're supporting html5.

Hard-core nerds tend to ignore reality

this may have been true in the 1990s, but the web has matured a lot since then and a lot more people are on the standards trend. this means even today html5 will not suffer the same as early css adopters, as you mentioned.

Here’s the problem (now) with HTML 5 – most of the browsers being used today don’t support it AND it will take a few years before the majority of people out there will have HTML 5 equipped browsers.

Yes, with IE, that is very true. However, if you're using Webkit (chrome/safari) or Firefox 3.5, you will see benefits of html5 in action.

People that know the technology shouldn't be saying hold off on using it, but instead should be evangelizing it. This, of course, has its own boundaries. For example, Web3D is coming along and seems like it will be implemented in every browser. However, the only work that I have seen with it is in the Firefox 4 nightlies. So that's not to say, "Yes, work with Web3D," but that's something that could really be more akin to hold off on using it now. But with the more readily available technologies and standards out there, there is no point in telling people not to use it. If there are bandaids to get some new standard to work in all browsers, I'd say go for it. Push the boundaries of what the web can do and what you are currently capable of. Without people pushing boundaries, we could very well be stuck in deeply nested cross browser hacks with no real solution in sight. But thankfully we have working group to help get standards in place from once thought of bleeding edge technologies.

Video encoding for iPhone 3GS

Fri, 03 Dec 2010 04:12 -0400

Going away for the weekend on a ~5-6 hr flight, and not bringing my laptop (for once) on a trip, I wanted to get as much knowledge dump into my brain as possible. I set out to download as many videocasts as possible and load them onto my iphone. Easy and straightforward, I thought, but per usual with getting anything other type of media other than photos and music onto the iphone, i was wrong. In retrospect, yes it was easy, but not straightforward.

Just like loading up PDFs onto the iPhone, i thought, Ok, grab an mp4 encoded video, drag it onto my iphone. However, I was greeted with an unsightly warning message:

I thought it was just some weird issue with dragging directly onto my iphone from the Finder so next step was to drag it into my iTunes Library. Once doing that, I dragged the Library video onto my iPhone only to get the exact same message! I googled something along the lines of "load video on iphone" and I found a link to HandBrake. I downloaded HandBrake, added videos to my queue to be encoded and voila! they were encoded...into mp4s, which I thought were acceptable since I had encoded the video. Once again, my assumptions got the best of me and going through the same steps above, I was greeted once again with that unsightly error message. I think i toiled with this for at least an hour or two before I finally had the sense to google the error message which ultimately me to PEnGUIn .

The GUI is a little confusing at first because once installed (hell, i'm still learning how to use my iphone and i've had it for over a year and a half now), because you need to install one more binary before you can encode anything.

Woes of iTunes encoding and Movie library

Awfully slow. Felt really clunky at managing the videos and keeping them organized.

Issues with Symphony JIT Extension and symlinks

Sun, 28 Nov 2010 22:28 -0400

I am seeing this error in my log files:

Call to a member function Meta() on a non-object in /site.com/extensions/jitimagemanipulation/lib/image.php on line 231

I've done some back tracking and have traced it down to the class.image.php file (or at least i think). As i've been digging, I saw this method that seems to pull in a bunch of meta data for the image itself (around line 217):

$method = 'load' . ($param->external === true ? 'External' : NULL);
$image = calluserfuncarray(array('Image', $method), array($imagepath));

Not knowing PHP super well, I found that the first argument for the call_user_func_array built-in was a method and in order to use a static object and one of its methods is to make it an array with the class first, and then the method second. Now, with this in mind, I figured there was an Image class and in that class, there would be at least these two methods: load, and loadExternal, and sure enough, those two methods were there.

Now, if i take a look at where my original problem exists, I see that it will be using one of two things: Image::load or Image::loadExternal methods. With that little background, I saw that where my error is happening, it's happening on the $image instance of the class Image when trying to fetch the Meta method that returns the relavant meta information associated with that image.

Point is, it doesn't seem to be instantiating the Image class with the image information.

The issue turned out to be the path that the image was looking for was pointing to my base installation,[^install] which of course the image wouldn't be found in there. I add the following code after the first two define()s to the lib/image.php file used in the extension:

/**
 * Utility function to easily create a rtrimmed value
 * @param {STRING} $value String of value to modify
 * @returns value with whitespace and the / character removed from the end
 * @type STRING
 */
function rTrimmed($value) {
    return rtrim($value, '/');  
}

/**
 * Checks to see if the request is being sent from the base install
 * or if it is coming from a symlinked folder
 * If coming from a different folder, the WORKSPACE global is redefined with the correct path
 * Currently only tested on (mt) (dv) server
 * @author Dale Tan wtdtan@gmail.com
 */
function checkMultipleDomains() {
    $realDocRoot = rTrimmed($_SERVER['DOCUMENT_ROOT']);
    $httpHost = rTrimmed($_SERVER['HTTP_HOST']);
    if ($httpHost != DOMAIN) {
    $rootSubFolder = str_replace($httpHost, '', DOMAIN);
}
if ($realDocRoot != DOCROOT) {
        if (isset($rootSubFolder)) {
            $realWorkspace = $realDocRoot . $rootSubFolder . '/workspace';
            define('WORKSPACE', $realWorkspace);
        }
    }
}

// call method above
checkMultipleDomains();

This checks to see what the real root path is to the image called. if the image doesn't match the predefined DOMAIN value in the previously mentioned define() method, then the script knows it is in a different domain than the base build. Then the same goes with the DOCROOT (also in another define() method) and if all those checks pass, the WORKSPACE variable gets redefined to the correct domain's workspace.

[^install]: Hosted on a (mt) (dv) with one base symphony build spread across multiple domains

A primer to Symphony 2's default theme

, NaN -0400

Every theme in Symphony has an important mission: to introduce newcomers to Symphony by way of a working example. Spectrum, the name of this version's default theme, was designed and developed with such a mission in mind by following a set of constraints. A default theme is required to:

be presented in a format that is universally identified and intuitive.
have a clear and simple HTML structure.
demonstrate the fundamental concepts in Symphony - sections, fields, data sources and events and their interactions together.
avoid functionality that does not have any educational value.

The design

Our first rule states that a default theme needs to be in a format that is instantly recognisable to a user. As a result, all of the themes created in Symphony's history have emphasised a weblog structure. Spectrum continues this tradition.

Cubic, the name of a previous default theme, followed the teaching mandate very closely. However, the theme took it one step further and removed complex structure and colour in favour of a simplified look and feel. The main design goal for Spectrum is to introduce more colours but still follow the philosophy of a simplistic layout.

Features

Spectrum has a handful of additional features that you won't find in previous default themes. These new features are not only meant to demonstrate the capabilities of the system but also explain some fundamental philosophies in Symphony 2. Below is a list of features:

Logged in users will see Links to Symphony's admin to edit articles, manage comments and add notes.
Logged in users will see 3 protected menu items, article drafts, the debug page and a link to the Symphony admin.
Articles on the drafts page sports a button to publish the article.
Article images take advantage of Symphony's build-in image manipulation feature to crop and size the image automatically.
The contact form on the about page saves the content to the Messages section on the backend and emails the website's owner.

Philosophy

All of the above takes advantage of new features found in version 2. An important concept that is being advocated in Symphony is the practise of creating a tighter connection between the front-end and the backend. Developers are encouraged to take advantage of the simplified URL structure of the admin to create a more convenient environment for their users.

With the introduction of the Event editor, developers now have even more control when developing a website. For example, the Publish button on the article drafts page utilises the event editor to create an interaction between the frontend and the backend. This allows the Publish button to update the "Publish this article" checkbox field from the "Articles" section. This feature also compliments and encourages the philosophy of a more seamless environment between the website and the admin interface.