Local development environment

Posted on by
1

This post was last updated on 22 August 2011.

Related to my recent “restart,” I want to talk a little bit about my local development environment. I apologize; this is kind of a long, boring post that is basically “listy.” However, I both wanted to document the things that I have, don’t have and do and share them with other developers. I’m also very interested in hearing about other developers’ local environments.

My new computer is a 15-inch MacBook Pro running Snow Leopard (10.6.8) with a 2 GHz processor and 4 GB of RAM.

The core of my local development environment is MAMP (2.0.1), which includes:

  • Apache 2.0.63
  • MySQL 5.1.44
  • PHP 5.2.13 & 5.3.2
  • APC 3.1.3
  • eAccelerator 0.9.6
  • XCache 1.2.2 & 1.3.0
  • phpMyAdmin 3.2.5
  • Zend Optimizer 3.3.9
  • SQLiteManager 1.2.4
  • Freetype 2.3.9
  • t1lib 5.1.2
  • curl 7.20.0
  • jpeg 8
  • libpng-1.2.42
  • gd 2.0.34
  • libxml 2.7.6
  • libxslt 1.1.26
  • gettext 0.17
  • libidn 1.15
  • iconv 1.13
  • mcrypt 2.6.8
  • YAZ 4.0.1 & PHP/YAZ 1.0.14

In the next few days, I plan to revisit the previous how-tos I’ve written on MAMP to see if they’re still valid.

TextMate (1.5.10 (1631)) is my text editor of choice and I use Transmit (4.17) as an FTP client.

Subversion is the VCS I use for all of my sites, and it turns out the MacBook Pro (either) comes with (or was installed with the developer tools) Subversion 1.6.26 and Git 1.7.3.4. Since I use both from the command line, I haven’t installed a GUI for either.

My primary browser for development purposes is still Firefox (I know, I know… So old-fashioned! :p). I have version 6.0 installed and I use the following extensions:

For testing/development, I also have Chrome 13.0.782.215, Safari 5.1 and Opera 11.50 installed. All ship with good developer tools, so I haven’t installed any extensions for any of them.

I have the latest version of the following browser plugins installed:

  • Flash
  • Java
  • QuickTime
  • Silverlight

On my previous laptop (also a MacBook Pro), I was running Parallels with four virtual machines installed:

  • Windows XP with Internet Explorer (IE) 6 and various old versions of other browsers.
  • Windows Vista with IE 7 and various old versions of other browsers.
  • Windows 7 with IE 9 and various new versions of other browsers.
  • Ubuntu. Primarily to test Konqueror. (I did a job for the BBC and they require it. Srsly!)

At the moment, I haz none. :(

I also don’t have a graphics editor (or, at least a good one I know about) installed. I’m debating whether I should install GIMP or just shell out for Photoshop. And there’s no diagramming software installed either (I used to run Omnigraffle).

As I change my local development environment (or, in the event I forgot anything!), I plan to update this post. If you have any comments about my setup or would like to share your environment (either a long “post” in the comments or a link in the comments to a post on your blog), I’d love to hear them/about it!

Tabula rasa

Posted on by
Reply

Tabula rasa: The term in Latin equates to the English “blank slate” (or, more accurately, “erased slate”) (which refers to writing on a slate sheet in chalk) but comes from the Roman tabula or wax tablet, used for notes, which was blanked by heating the wax and then smoothing it to give a tabula rasa.

Well, sort of… If you’re a’tall familiar with this blog/site, you’ll have noticed that two significant things have changed:

  1. A majority of the content is gone.
  2. It’s using the (now) default WordPress theme Twenty Eleven.

The reason for this was the confluence of three situations (the third being dispositive):

  1. I haven’t written a post since 13 January 2011 (Whut?!?)
  2. I’ve been meaning to do (and have started on twice) a redesign of this blog (including IA, markup and visual design) for the past year and a half. A lot of that work was done, but…
  3. My personal (and only) computer was stolen two and a half weeks ago. And my backup turned out to be spotty (more on this later), so a lot of personal work was lost.

After purchasing a new computer, restoring what I could, resetting passwords and realizing that some things were just irretrievably lost, I decided to look at this as an opportunity to clean up my production server and completely redo my blog. So I backed it up, whacked it and did a vanilla install of WordPress 3.2.1.

Originally, I planned to remove everything and just start with this post and an updated “about” page. However, I decided to import the few posts that it seems people still find useful and the dag bio isn’t done yet (believe it or not, I hate writing about myself!).

From this point forward, if you’re interested, I plan to do daily posts and talk about my local and production environments, WordPress and how I plan to redo the theme according to current best practices (both markup and performance). After that, I’ll eventually bring all of my archives back online and continue blogging about web development in general.

Since I haven’t settled on the categories or tags I ultimately plan to use, the only thing that is certain is that all posts related to my redesign/rebuild will be tagged .

Hopefully, you’ll join me as I publicly work through re-doing this site. I look forward to hearing your feedback, and, more importantly, it should be fun!

—Jeffrey

WordPress permalinks, directory structure and 403 forbidden response codes

Posted on by
Reply

So, full disclosure: I probably set JeffreyBarke.net up wrong. Or, at least not in a “typical” way. However, it’s been the way it is for a long time now and I never thought there was a problem until yesterday, when I was checking Google Webmaster Tools for crawl errors. It turns out I was getting two 403 Forbidden error codes on two pages: Code and Tools. At first, I didn’t believe the results because the pages render fine, but I checked the actual headers and, yerp, there was the 403.

Before I talk about how I got the pages to return proper 200 response codes, I want to give a little background on how JeffreyBarke.net is structured and how it got the way it is. The site is primarily powered by WordPress, which is installed in the web root. However, there are a number of directories (some legacy, some not) that are also in the web root. I have WordPress set up to use “clean URL” permalinks (achieved via mod_rewrite). Sometimes, the WordPress mod_rewrite URLs overlap with existing directories, and this is causing the 403 response codes.

JeffreyBarke.net got this way because I used to have WordPress installed in a /blog/ subdirectory and the site root was custom-powered by a mix of flat and dynamic files. I got tired of this arrangement and decided to run everything through WordPress by doing a clean install at the web root. However, I also wanted certain demos, tutorials, code and tools which couldn’t be integrated with WordPress to remain at their current URLs.

This means I have a physical directory that looks like the following excerpt:

/
	index.php
	tools
		codeigniter-encryption-key-generator
			index.php
	wp-admin
	wp-content
	wp-includes

Since there’s no index.php file in the tools directory, when you navigate to http://jeffreybarke.net/tools/, mod_rewrite routes you to the WordPress page with the tools slug. When you navigate to http://jeffreybarke.net/tools/codeigniter-encryption-key-generator/, the actual index.php file is returned.

Here’s the interesting part, though: since I disabled directory browsing in the root .htaccess file and there’s no index.php, a request for /tools/ should return a 403 Forbidden response code. I’m kind of surprised that the page renders a’tall.. If I enable directory browsing, the page doesn’t render and I get the standard Apache directory view.

Ok, enough background—how do I have my cake and eat it too?

These are the mod_rewrite rules WordPress automatically generates for my permalink structure:

# BEGIN WordPress
<IfModule mod_rewrite.c>
	RewriteBase /
	RewriteRule ^index\.php$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /index.php [L]
</IfModule>
# END WordPress

The second RewriteCond checks that the URL isn’t referring to an existing directory, which, in the case of both /code/ and /tools/, it is. It’s this second RewriteCond I want to disable, but only for specific directories.

This can be achieved by adding the following lines to the .htaccess file that contains the WordPress permalink structure:

# Fix 403 errors on existing directories; WordPress overrides.
RewriteCond %{REQUEST_URI} ^/(code|tools)/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /index.php [L]

New York JavaScript Meetup: A sneak preview of the Cujo.js MVC framework

Posted on by
Reply

My live notes from John Hann’s 25 August 2010 presentation on modern JavaScript frameworks to the New York JavaScript meetup.

Modern JavaScript frameworks rock! Dojo, jQuery, MooTools, Prototype… alleviate us from browser quirks so we can concentrate on coding awesome web sites. But none of these offer any guidance whatsoever—and hardly any tools—for building enterprise-worthy, ultra-rich web applications. It’s just too easy to create inflexible, unmaintainable spaghetti code.

A few Javascript-based, in-browser Model-View-Controller endeavors have popped up to help provide solutions. Most of these are simply rehashed server-side MVC frameworks. They just don’t get it. MVC sucks for web development. The bigger the project, the worse it gets.

Cujo.js was specifically designed to eliminate these inter-dependencies. Yes, it’s an MVC framework, but it’s different…

The above slides are from a presentation on Cujo.js, but are not the slides to this presentation.

cujo.js: A sneak preview

John Hann
@unscriptable
lifeIMAGE, Inc.

cujo is about building ultra-rich web applications.

What is an ultra-rich web app?

  • Feature-rich
  • Single-page app (“spa”)
  • Desktop-like
  • You “live” in the app

Examples: lila™ Inbox, meebo, Gmail, Google Docs, Facebook

Why would anybody want to build a spa?

  • Responsiveness
  • Mobile (HTML5 apps, Phonegap)
  • Cross-platform
  • Vendor-agnostic
  • Auto-update
  • Offline
  • More responsiblity to client (more clients), less for server (fewer)

The rise of the JS libraries

  • Prototype
  • Dojo
  • jQuery
  • Mootools
  • Mochikit

Why JS libraries?

  • Browser abstraction
  • Language abstraction
  • Plugins, components, widgets

All the node-wrangling tools to build all ultra-rich applications.

However, 5,000 lines of tangled JavaScript later, what the heck happened?

It’s your nodes, dumb-ass. Stop fiddling with your nodes! Building an ultra-rich app requires software engineering.

We’re building desktop applications on the web.

Why can’t I just fiddle with my nodes?

  • Bigger app
    • More complexity
    • More code
    • More coders
  • Complicating factors:
    • Customization
    • il8n/L10n
    • Authorization
    • Animation

How to uncomplexify?

  • Modularization: “Think tiny”
  • Encapsulation: Don’t touch my coadz
  • Loose coupling: I won’t touch your coadz
  • Reuse: Don’t repeat yourself
  • Separation of labor: Mind your own biz

Does $() help?

It doesn’t

3rd-party solutions help Dojo and YUI do more than jQuery, but not enough.

Don’t believe me?

Does $().fn help modularize my CSS?
Does dojo.connect() protect my code?
Does $().live respect my widget’s personal space?
Does $.extend help me reuse HTML?
Does $.animate coordinate nicely with my CSS designer’s CSS files?

Animation is not behavior—belongs with designer (CSS3 transitions)

Cujo is built on Dojo.

Dojo MVC?

models, views, controllers…

Why is cujo.js moar?

Data flows magically between nodes & server.
Template languages disappear (and so does the ID attribute!)
Views invoke the …

Dojo 1.6 data stores are hawt!

Data stores are data models. Most handle client-server communication so you don’t:

  • json
  • json-rest
  • couchdb
  • flickr
  • google
  • csv
  • xml
  • atom
  • etc

Data binding provides the “last mile.” (Dojo 1.6 will provide data binding). The end result: “live” data. As live as you want it, anyway.

What template language?

Why use a {{template language}}? HTML5 data-* attrs FTW!

inheritance: data-cujo-override
loop*: data-cujo-iter
conditional*: data-cujo-if

“oohtml,” anyone?

The “holey” web trinity

oojs + oohtml + oocss => cujo.mvc. View complete module, yet still overridable.
my/HawtWidget.js (aka “view-controller”):
dojo.provie(‘my.HawtWidget)
cujo.requireCss()…

Ancient browsers grok CSS2.1 & CSS3

Once you take control of the stylesheets, the sky is the limit.

Ever wish this worked in IE6?

  • Two selectors (chained) on an element: .myWidget.selected
  • child selectors
  • Transitions

Moar modularization

JS, CSS and HTML as a single unit is easier to create, test, maintain and extend.

dojo.provide('mgp.view.logo');
cujo.requireCSS('mgp.view.Logo');
cujo.requireHtml('mgp.view.Logo');
dojo.require('cujo.mvc.View');
dojo.declare('mgp.view.Logo', cujo.mvc.View, {…

Moar encapsulation

Self-contained, “black boxes”

Minimize cross-dependencies.
cujo.js mixins FTW!
cujo._Connectable limits dojo.connect()
cujo._Settable limits dijit’s set()

Moar loose coupling

It’s good to be loose and ignorant of your own parents! Cujo emphasizes:

  • doj.connect
  • dojo.publish/dojo.subscribe

Moar reuse

Just say no to copy-and-past coding practices.
Increase maintenance
cujo.js embraces OOJS and OOCSS.
Adds OOHTML
OOHTML enables OOCSS (automatically applies inherited classes)

Jon Hann gives a strong endorsement of OOCSS. Learn it

Moar separation of labor

$.css() and $.animate are the CSS designer’s job. Layout is also the CSS designer’s job.

Get over it.

Moar about view state

Classical OO inheritance: Descendant classes inherit attributes and behavior.

Pure prototypal inheritance: Descendant objects inherit attributes and behavior.

OOCSS: Descendant objects inherit attributes and run-time state.

When can I haz Cujo.js?

Cujo.js is in stealth mode while we test moar browsers, finish features, document and clean-up code. Release 0.1 on Github around 15 September 2010

http://cujojs.com/
http://twitter.com/cujujs

Q&A

Q: Some people think these frameworks proscribe too much.

A:Possibly went too far the other way. Can define and extend. Theming. Don’t want to use the templating language, can pull in your own.

Q: What is the performance overhead?

A: Two aspects: load-time. Actually processing CSS at load-time. Do a lot of feature detection, not browser-sniffing, so difficult to do that build time.

Q: You mentioned how Facebook was different in the beginning?

A: FB only loads 3KB of JS and that 3BK is responsible for loading and running the rest.

Internet Explorer 8: The X-UA-Compatible meta element and conditional comments

Posted on by
Reply

I woke up this morning to discover that Paul Irish had left a comment on one of my GitHub commits:

A user reported that this actually didnt work.. the ie=edge never jumped ie8 into standards mode..

did you see it succeed?

Hmm… this didn’t sound good. The error in question was on our HTML5 template for The Knot. We had wrapped the X-UA-compatible meta element with an IE conditional comment. I don’t remember exactly why we did this, but I think it had something to do with HTML validation.

Now, I know that HTML validation doesn’t matter (see also “The value of HTML validation”), but I do like using it as a lint tool (and yes, I prefer to just see a green favicon in the title bar). However, I also understand that pages don’t have to validate in the wild and I had never actually tested wrapping the X-UA-Compatible meta element with a conditional comment. I just assumed it would work, because, well, why shouldn’t it?

Damn. Once again, I learn the value of assumptions. It turns out that the way it’s coded doesn’t work. IE8 completely ignores the X-UA-Compatible meta element. Since I recently read about conditional comments blocking downloads, I was curious if this had anything to do with it and if the solution I had settled on for that problem would also help with this one. Voilà!

Since the download blocking also affects conditional comments around the body element and I wanted to avoid putting an empty conditional comment in the head, I moved the conditional comments to the html element. This solution also causes the conditional X-UA-Compatible meta element to be seen by IE!

UPDATE: There is one problem with this technique: it breaks Google Chrome Frame. Chrome Frame ignores IE conditional comments, so it never gets invoked. If you want your page to work with Chrome Frame and you want it to validate, send an HTTP header. If you can’t set the header, don’t wrap the meta element with conditional comments. Besides, validation doesn’t matter anyway, ;) .

<!--[if lte IE 6 ]><html lang="en-us" class="ie ie6"><![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie ie7"><![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie ie8"><![endif]-->
<!--[if !IE]>--><html lang="en-us"><!--<![endif]-->
<head>
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
</head>
</body>
</body>
</html>

Tests

  1. IE=7. Works!
  2. IE=edge. Works!
  3. IE=edge wrapped in conditional comment. Does not work!
  4. IE=edge wrapped in conditional comment with conditional comments around the html element. Works!

NY Web Performance Meetup: dynaTrace AJAX Edition

Posted on by
1

Notes from Andreas Grabner’s (dynaTrace evangelist) presentation on the new features of the upcoming dynaTrace AJAX Edition (DAE) 2.0. dynaTrace AJAX Edition is a free tool that provides full JavaScript, network, rendering, DOM and XHR tracing for Internet Explorer 6, 7 & 8. With the latest version, the Ajax Edition automatically analyzes best practices in the areas of browser caching, network resources, server-side activity, JavaScript/Ajax and also provides additional key performance metrics that are essential for tracking the end-user perceived performance of a web site such as time to first impression, time to onload or time to fully loaded.

NY Web Performance Meetup page

Please note these are my live notes and were published immediately after the presentation. Hopefully I’ll have a chance to clean up them up at some point in the future.

Presentation bottom-line: Coming ASAP.

dynaTrace was founded in Austria five years ago. Headquarters in Boston. Started on the server-side. Large clients moving to Web 2.0, so developed dynaTrace Ajax Edition as a free tool. Version 2.0 is in beta, but that is the one that should be downloaded.

Currently works with IE 6, 7 and 8 exclusively. Will hopefully support FF by the end of the year.

Eclipse RPC application. Can set run-time configurations. DAE will launch browser for you. Will replace IE logo in upper left corner. This is how you know it’s the session window. Installs two add-ons to IE.

Everything that is done on the page is recorded. Network activity, JavaScript execution, rendering. Does add overhead to page. If the JS is very heavy, will add more overhead. Variance to overhead: 5-20%. Can turn down the overhead by collecting less data.

Jeans page for Sears took 13-14 seconds from Keynote. Sears unable to reproduce (4 secs). Keynotes uses IE 7 for monitoring, Sears uses IE 8 internally. Accounted for the discrepancy.

blog.dynatrace.com, where Andreas collects these stories.

After collecting data, can switch back to DAE. At top left (under browsers) is the live session. DAE shows all the URLs. Also does ranking like PageSpeed.. Can upload your rankings to ShowSlow

  • Browser caching performance rank
  • Network request performance rank
  • Server-Side performance rank
  • JavaScript/Ajax performance rank

Tabbed interface to each of these ranks. Rank pages provide suggestions similar to PageSpeed and links to dynaTrace’s best practices techniques (also Google and Yahoo!). These are the standard things that most of the service providers do.

The JS tab is where the magic is. Profiler. Shows JS calls, invocations and total time (in ms).

The jQuery class selector is really bad in IE 6 and 7. A little bit better in IE 8. Profile highlights jQuery calls with yellow arrow. Most of the time is spent using jQuery class lookups. If have to do jQuery class selectors, faster to use a tag qualifier: element.className instead of .className.

The more DOM elements and the deeper the nesting, the more expensive the call. If there will be multiple look-ups for the same selector, cache the nodelist in a variable.

These are the keys to IE performance.

The profiler also includes back traces and forward traces. Can really dig down and see what exact calls and the actual JS script that is taking the most time.

The DAE timeline isn’t a network waterfall, but it shows you how long the JS execution took and how long the rendering took. Timeline is color-coded and has nice zoom features. If you double click on a timeline block, will get the pure execution path (“purepaths”). DAE captures the entire trace, which is far more than most profilers.

Everything yellow is DOM. Arrow to left, retrieving property. Arrow down is a method call. To keep the overhead low, doesn’t capture the method arguments and return values by default. If need it, can be turned on.

Various times: duration, JS, total, exec. Duration is the total time in asynchronous path, JS ???, total time is time spent in synchronous path, exec time that was exclusively spent executing. If the time is large, but the exec is low, then need to drill down into the sub-methods called by the original method.

Turns out that manually drilling down is doable, but the tedious way. When click on a node, the contributor node window will show all the contributing methods and can sort by most expensive of calls (sometimes 1,000s of calls). When you get low enough, will probably hit jQuery. The middle window shows the entire stack trace, so easy to move back up to find the call you made that caused the bad performance.

Cannot see into Flash, but can get the network time, rendering time and CPU usage. When you start to use the Flash object, though, it’s invisible unless it downloads more network content or interacts with the HTML page/JS.

In question and answer, turns out that to run DAE for IE and Firefox and to compare them, you’ll have to pay for it. Otherwise it will only support one browser.

Integration with Selenium.

To do a side-by-side comparison, either copy (easy to do) and paste into Excel or else open two performance report tabs and manually bounce between them. To automate it, there’s the commercial solution.

When the browser closes, the live session is moved to the stored sessions. Session name will default to the runtime config, but can re renamed via a right-click.

Can right-click on the timeline and easily access a number of different drill-downs.

Due to limited number of network connections, there can be a wait time before an asset can be downloaded. DAE shows that as well.

By default, doesn’t capture images. Captures the URL and uses a browser component to go out and retrieve it from the web. Captures all HTML, JS and CSS. However, can specify additional MIME types you want captured.

How were they able to capture all this information? A lot of reverse engineering of IE. The rendering information isn’t as detailed as the JS; more difficult to reverse engineer.

Uses a high-precision timer (also used on their server-side product).

In code view, the code is automatically un-minimized.

Resources

How to install PHPUnit with MAMP

Posted on by
10

Installing PHPUnit with MAMP’s PEAR installer is pretty straightforward, but there are a few things to note:

  1. Everything will be done through Terminal, so go ahead and launch it now. All of the commands I provide can be copied and pasted as they are.
  2. Make sure you’re using the version of PEAR that came with MAMP, not the version that came with your Mac. This means you have to use /Applications/MAMP/bin/php5/bin/pear at the prompt, not pear.
  3. PHPUnit 3.4 requires PHP 5.1.4 or later, but PHP 5.3.2 or later is recommended. MAMP 1.8.2 (the version I have installed) is running version 5.2.10. The latest version of MAMP includes version 5.3.2. So far, I haven’t noticed any problems running PHPUnit under 5.2.10.
  4. PHPUnit also requires PEAR 1.8.1. MAMP 1.8.2 ships with version 1.8.0. To check which version you have installed, type /Applications/MAMP/bin/php5/bin/pear -V.

If you need to upgrade PEAR, first use the following two commands: /Applications/MAMP/bin/php5/bin/pear channel-update pear.php.net
/Applications/MAMP/bin/php5/bin/pear upgrade pear

Now, it’s time to install PHPUnit. The PEAR channel used to distribute PHPUnit needs to be registered with the local PEAR environment and a component that PHPUnit depends upon is hosted on the Symfony Components PEAR channel. To register the channels and install, simply type: /Applications/MAMP/bin/php5/bin/pear channel-discover pear.phpunit.de
/Applications/MAMP/bin/php5/bin/pear channel-discover pear.symfony-project.com
/Applications/MAMP/bin/php5/bin/pear install phpunit/PHPUnit

PHPUnit is now installed, but to get it to run from Terminal, we need to move it into our $PATH. To do so, type: mv /Applications/MAMP/bin/php5/bin/phpunit /usr/local/bin/phpunit.

To test your install, type: phpunit --version.

You should see something like PHPUnit 3.4.15 by Sebastian Bergmann. And that’s it!

How to make MAMP recognize the .shtml extension and read server-side includes

Posted on by
6

Update (24 August 2011): Due to my recent “restart,” I wanted to see if these instructions still work with MAMP 2.0.1. I followed them as written and was able to get server-side includes working the first time with no issue.

Making MAMP recognize server-side includes is simple:

  1. Stop the MAMP servers.
  2. Open MAMP's httpd.conf (located at /Applications/MAMP/conf/apache/httpd.conf) in a plain text editor.
  3. Find the line DirectoryIndex index.html index.php and change it to DirectoryIndex index.shtml index.html index.php
  4. Uncomment the following two lines: AddType text/html .shtml
    AddOutputFilter INCLUDES .shtml
  5. Find the lines <Directory />
    Options Indexes FollowSymLinks
    AllowOverride All
    </Directory>     and change to <Directory />
    Options Indexes FollowSymLinks
    Options +Includes
    AllowOverride All
    </Directory>
  6. Restart the MAMP servers.