Gabriel Jones

CodeIgniter ModRewrite for Dreamhost

Gabriel — Mon, 29 Mar 2010 17:16:06 +0000

Recently I began diving head first into CodeIgniter, a PHP MVC framework. During the installation process I ran into a major problem with URL rewriting within the CodeIgniter environment and Dreamhost.

CodeIgniter provides an .htaccess solution to create friendly URLs. Which in most cases works very well. However, with Dreamhost this solution does not work. The follow is what your .htaccess file should look like.

DirectoryIndex index.php
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ /index.php?/$1 [L,QSA]
IfModule>
<IfModule !mod_rewrite.c>
    ErrorDocument 404 /index.php
IfModule>

Chirp

Gabriel — Thu, 11 Mar 2010 17:08:58 +0000

Chirp is a Twitter inspired Wordpress Photoblog/Videoblog. Style specifically for the use of photos, videos, and brief descriptions of them.

Install Instructions

Download and Install Chirp
Go to Chirp Admin and fill in your Twitter information
Enjoy!

Chirp How-to

To post an image:
1. Add image to media library
2. Use Add an Image icon in Add New Post console
To post a video:
1. Use Add Video icon in Add New Post console
To add descriptions to image or video
1. Simply add your text to the excerpt field

Download

Download Chirp 0.9

Please read: If there is interest in Chirp, I will continue development and take any requests for upgrades.

TweetPress

Gabriel — Wed, 10 Feb 2010 04:48:28 +0000

TweetPress 2.5.5

TweetPress 2.5.5 is the newest revision of TweetPress. Now supporting WPMU! Simply fill in your Twitter & Feedburner information in the Twitter Admin Console under Appearance in your Wordpress admin console.

TweetPress has been downloaded 10,000+ times!

TweetPress 2.5.5 has cleaner code and is better for the environment (Twitter’s environment) with far fewer service calls, as much of the data is cached on your server.

Requirements

Wordpress 2.8+
cURL installed
PHP4, but PHP5 is recommended
Twitter account

Install Instructions

Upload Tweetpress to themes directory & activate
Go to ‘TweetPress Admin’ under Appearance
Fill in your information and save. Viola!

Download Current Release

Download TweetPress 2.5.5

Update Mar 6, 2010: Now supporting WPMU! Updated comments display, now shows most recent comments first, max 10, will display a Show all comments link if more than 10 comments. Added View all to followers sidebar section. Thoroughly cleaned up code.

TweetPress: Twitter Style Wordpress Theme

Gabriel — Wed, 27 Jan 2010 20:33:56 +0000

TweetPress 1 Alpha is no longer being supported, please go to http://gabrieljones.com/tweetpress and download the latest version.

Review: Maxtor Central Axis

Gabriel — Thu, 05 Nov 2009 19:30:46 +0000

My experience with this product is not pleasing. I purchased this NAS drive from Best Buy May 11, 2009, and it promptly died October 28, 2009. I had over 400 GB of music and movies that I had ripped from my DVD and CD collections.

When it worked, the streaming was relatively slow, partially blame that on my router, but the drive type is not RAID, thusly slower access and slower streaming. The file crawling and ‘caching’ was extremely slow, it took up to 30 minutes for the UPnP or DLNA servers to pick up new files. I would often convert my DVDs to 1GB mp4 videos, and Central Axis had a very hard time streaming it for anything longer than 2 minutes. I eventually would simply copy the video files over to my PS3 and watch them locally from there. If I tried to either read or write to/from Central Axis with more than one computer/peripheral, it would become extremely slow, and sometimes halt. And this was when it was working!

Now that Central Axis has died on me, in less than 6 months from the date of purchase, I am having to figure out ways to pull the data off the drive myself, without voiding warranty of course. Seagate wants $250+ to recover my data. Seriously? And Best Buy, they are useless, their motto is, “After 14 days when we sell it to you, we can’t help you, sorry.”

Listen, I’ll just get to the point. Do NOT buy the Maxtor Central Axis NAS drive. Do NOT purchase products from Seagate, unless you do thorough research before, their service and return policies are aweful! I have to pay to send the defective product back, so they can send me a refurbished model. Seriously?

As a side note: Best Buy employees are morons. Total utter morons. Do not seek their advice, they will likely point you in the wrong direction. And if they have in the past, they got lucky!

Order Posts by Meta Value Numbers in Wordpress

Gabriel — Wed, 09 Sep 2009 01:13:09 +0000

The following changes work on Wordpress version 2.8.*, prior version will need a slightly different change.

A brief background first. I needed to have a page in which my posts were ordered by the meta_values to a particular meta_key. By default meta_value is LONGTEXT data in mysql, therefore we are unable to order posts by meta_value NUMBERS. To force mysql to return the meta_value entry as a NUMBER, we must pass a query like this: ‘meta_value+0′.

I set my custom page up to run a query_posts.

1	query_posts('meta_key=views&orderby=meta_value_number&order=DESC');

Then use The Loop as normal.

Inside query.php I did the following:
Goto line ~2035, add below

1	$allowed_keys[] = 'meta_value_number';

Goto line ~2057, after case break, add below

1
2
3

'meta_value_number':
$orderby = "$wpdb->postmeta.meta_value+0";
break;

Thats it! You can now pull posts ordered by meta_value NUMBERS!!

Remember that this method only works in 2.8.*, if you have an earlier version and would like to figure it out, or have a solution, please feel free to comment.

Optimal Handbrake Settings For A Media Library

Gabriel — Fri, 27 Feb 2009 00:33:34 +0000

So let me start by stating that Handbrake settings are not an exact science, as perception of quality varies from person to person. Along with that, optimal Handbrake settings, using the term loosely, also varies from application to application. Settings for output to an iPhone or iPod will differ greatly with settings for output to AppleTV or PS3.

One quick note before we move on to the settings; if at all possible, use a Mac to convert or rip your videos, as the PC version of Handbrake is inferior. I must admit, this may be due to the processors my laptops possess, but in general I have noticed I get quicker and better quality conversions on my Mac. Ok, now on to the settings.

Specs:

IBM ThinkPad T60p, 2.16Ghz, 2GB RAM, Windows XP SP2
MacBook Pro, 2.5Ghz, 2GB RAM, OS X 10.5.6
MacBook, 2.2Ghz, 1GB RAM, OS X 10.5.6

Settings:

Video settings are as follows: extension is .mp4, video codec is H.264, framerate is usually same as source, unless I have to rip a double DVD, in which case I use 23.976, I use average bitrate of 1400 kbps, and I usually try to use Anamorphic Loose, but this totally depends on the source.

Audio settings are as follows: source is AC3 5.1 if possible, audio codec is AAC while mixdown is usually Dolby Pro Logic II, samplerate is either Auto or 48, and bitrate is 160, try to always use higher settings on the samplerate and bitrate, you wont regret it later.

Advanced settings are as follows: reference frames are set to 3 or 4, depending on source, mixed references is checked, b-frames is set to 4, (5+ for animations) and weighted b-frames is checked, subpixel motion estimation is 8 or 9, depending on source, analysis is set to all, deblocking is set to -2,-1, and trellis is set to 1 or 2, depending on source, all other settings are default.

These settings are great for my needs, which are: converting my 500+ DVD library to stored digital media on my NAS, which I play back through my PS3 on my 50″ Samsung 1080p plasma TV. Generally these settings produce a 1.5GB video from a 2 hour DVD. An example output: Braveheart was ripped in 2 hours 30 min on my MacBook Pro, and it produced a high quality video at 2.03GB file. I hardly see a difference on my TV.

What’s nice about these settings is that later on down the road when I want to convert these to iPod or iPhone compatible format, I will have little to modify, and my convert times will be cut dramatically.

And always remember, you can step down in quality, but never step up.

10 Essential Firefox Add-ons for Developers

Gabriel — Tue, 17 Jun 2008 06:34:46 +0000

It’s pretty clear by now what browser is most widely used by all web developers, Mozilla Firefox. Though it is far from the most widely used browser, that title is held by our friends at Microsoft and its Internet Explorer. It is definitely the first tool in a web developers toolbox. The Mozilla Foundation has done a fantastic job in creating a browser with the developers and technically savvy individuals in mind, keeping with W3 standards and providing a feature rich browser. Firefox by itself is a fantastic tool and, in recent years, a far superior browser, but we can make it so much more, and provide a more pleasing work environment for the everyday web developer. Here are a list of popular and essential Firefox add-ons that I recommend.

Firebug

This is pretty much the most widely used and most favored add-ons that is provided for Firefox and is absolutely essential for JavaScript development. Firebug’s HTML and CSS inspector is both clean and intuitive as well as interactive, giving the developer the ability to make temporary changes live in the browser.

Web Developer Toolbar

If Firebug is not the single most favored and most widely used add-on, WDT probably is. No web developer should be without it, in fact, most developers, quality assurance engineers, project managers, designers, and managers should not be without this tool. Combined with Firebug, WDT makes for a killer combination that can handle 99% of anything required in developing an application, besides the design and code of course.

Live HTTP Headers

This is another one of the essential tools highly recommended by developers, especially for those who require intimate knowledge of the header requests and responses. For those of you who develop client code for RESTful services this tool is a must have, giving you the ability to view details on requests and their responses without having to run traces or logs.

Aardvark

Now this add-on was part of my toolbox prior to the lethal combination I mentioned earlier, though I use it far less now, I still consider it an essential tool for many. It’s a little faster in getting to the information you need, providing a point and view experience. One could argue that this is no longer a favored tool amongst developers, I would say that it is still necessary, providing a faster way of interacting with the web page than Firebug or WDT.

Firefox Accessibility Extension

Prior to last year, I’ve never focused on accessibility for web applications outside the Flash/Flex environment. After working with an enterprise level portal application in which many thousands of individuals require access to information, with a percentage having disabilities making it more difficult to get to that information, I can easily say that accessibility conformity is one of those requirements very difficult to achieve. FAE makes it just a little easier to develop for those specifications.

Screengrab!

The name is self explanatory, it takes screen shots of web pages and can even provide timestamps. Especially useful for those who need to illustrate an explanation they are trying to convey. Ever since I gave up on Sametime, which had a built in screen grab, and moved over to Adium I required a tool that allowed me the same convenience of screen capture quickly and conveniently.

FlashTracer

When working in the Flash/Flex environments, I would say this is an essential tool, a must have, providing you with a trace output within the browser. Prior to this add-on, I used my own standalone Flash trace output which worked great, but now stick with a more condensed workspace.

IE Tab

I wish I could say I didn’t need this and that you don’t need this, but I can’t. IE is a fact of life all web developers are required to deal with. With this add-on however, you are able to take that IE icon from your quick link bar and your start menu bar so not further damage your eyes. (Sarcasm, I actually don’t hate IE, I just use it far less than Firefox and Chrome.) One draw back is that this is a Windows only add-on, unless you workaround the Linux and Mac environments.

FirePHP

FirePHP is not essential for all web developers, just those who work in PHP. If that is you, this add-on is essential, or at the very least, a convenient tool. It’s basically a logging tool for PHP, like Firebug is for JavaScript and FlashTracer is for Flash and Flex.

Greasemonkey

This is another add-on that is not essential for every developer, but many find it so. Greasemonkey gives the user the ability to change the look, feel, and function of web sites and application live. This is especially useful for those working in agile development environments.

JavaScript Optimization for Page Load Performance

Gabriel — Mon, 27 Aug 2007 14:41:02 +0000

Using techniques like validation, obfuscation, and compression can result in significant decreases in file size, sometimes 50 to 75 percent. Combine that with several other non-pragmatic methods, dramatic improvements in page load performance can be realized.

Care for JavaScript

Building and developing frameworks along with following web standards and some form of a design pattern will help combat against careless coding. Another artifact of building a framework will be more rapid development times and more cohesive packages. At the time of this writing the de facto example of a JavaScript framework is prototype which is protected under open source licenses; MIT and CC-SA (Creative Commons – Share Alike). Caring for the JavaScript also means caring for the HTML it will be run in. Avoid JavaScript only methods that cause the browser to render abnormally, have your code degrade gracefully, if a browser is not JavaScript enabled.

Be Patient with JavaScript

Sometimes it is not necessary to load all the JavaScript in the head of the document or the body onload event. Do not make it standard practice to place all code at the beginning; rather look closely at what code could be placed at the end of the document, at the beginning, or when the page has completely loaded. Delay loading of JavaScript whenever possible, being patient with it will make your browser very happy. And remember to load only what you need. Why load code that is not necessary for the page?

Put JavaScript on a Diet

Once the code is written and the unexpected features have been fixed, you are ready to place your JavaScript on a diet. Remove excess whitespace and comments, use semicolons to break lines in code, and abbreviate variable and object names. This process can be done manually or automatically with vendor packages. Two resources for automatically reducing the JavaScript file size are JavaScript Crunchinator and ESC. Remember to always backup your files before placing it on a diet. To potentially further reduce file size and keep prying eyes from easily reading the source, using an obfuscation tool is recommended. Here is an example of one such tool, you can find many more on the interweb.

Have JavaScript Files Carpool

Roughly 80% of the users’ response time is spent of the client-side. The greater number of JavaScript resources needed in turn produces a greater number of HTTP requests needed. A way to reduce the number of requests is to combine the JavaScript files to a single script. The fewer number of HTTP requests used, the better response time the user will observe.

Writing Good XHTML

Gabriel — Wed, 23 May 2007 02:29:45 +0000

A recent project has forced me to take a closer look at how valid HTML code really is. My task was to improve performance, validate, and standardize the code. In later articles I will discuss my research, development, and conclusions to improving the company’s site performance. But for now, I am going to focus on how to write the perfect XHTML document.

XHTML is a set of document types that reproduce and extend HTML 4, are XML based, and are designed to work with both XML-based and HTML-based user agents. That is, XHTML must conform not only to HTML standards, but conform strictly to XML standards as well.

The differences in HTML and XHTML are strict conformity. A best practice for both standard HTML and XHTML is to conform to one of three DTD’s, Strict, Transitional, or Frameset, and to declare the DOCTYPE. Which can be written as follows:

1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The root element of the document must be html, and must contain the XML namespace (xmlns) declaration.

1	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

According to W3C, its a good idea to have an xml declaration, but it is not required. I personally leave xml declarations for xml only documents.

As said earlier, the major difference between HTML and XHTML is strict conformity, the documents must be well-formed. Elements must be properly nested.

Correctly nested element:

1	<p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p>

Incorrecly nested element:

1	<p>Lorem ipsum dolor sit amet, <i>consectetuer adipiscing elit.</p></i>

Because XHTML is interpreted as XML documents, all tags must be lowercase, because XML is case-sensitive. This also pertains to tag attributes as well. It is best practice to create all markup language in lowercase whenever possible.

Correct

1	<strong>Hello World</strong>

Incorrect

1	<STRONG>Hello World</STRONG>

XML does not allow end tags to be omitted, thus, all non-empty tags must be closed. If an element is empty, it must be properly closed. The only tag that does not close is the DOCTYPE declaration as it is not part of the XHTML document.

Good

<br />

Bad

<br>

All attribute values must be contained in quotes and minimized attributes are unsupported.

Good

1	<input checked="checked" type="checkbox" />

Bad

1	<input checked type=checkbox />

It is best practice to wrap your script content in CDATA elements to avoid parsing of HTML markup such as < and &.

<script type="text/javascript">
< ![CDATA[
// script content here
]]>
</script>

The id attribute is replacing the name attribute in future versions of XHTML. Currently it is best practice to have both named attributes of the same value until future releases of XHTML where then it will be best practice to remove the name attribute all together.

1	<form id="commentform" name="commentform" method="post"></form>

Today it is standard to have alt tags for images, objects, and buttons. However, not all browsers support the alt attribute, so title is used instead.

1	<img src='image.jpg' title='My Image' />

As long as you follow these standards throughout your entire document you will have a valid XHTML document.