My excellent adventure in MAMP and XAMPP lands

Building a WordPress sandbox

Use these to jump around or read it all:

Intro
Working with MAMP
Working with XAMPP

Intro

I needed a break from writing fiction and I also wanted to get WordPress.org running on my Mac (note: this post is about life with WordPress running in Apple Macintosh OS X; if you’re into Microsoft Windows hacking, stop reading now), so that’s what I did. In other words, I want a WordPress sandbox where I can experiment without hosing my site, the public parts that all the world (hopefully) can see. There are at least three ways to do this:

I don’t recommend brute force unless you are thoroughly familiar with building open source applications from source code. Trust me, if you can blog successfully at WordPress.com and you rtfm, you can learn how to do this but if you’re in a hurry to get WordPress running on your personal computer, stick with either of the first two. I did both because…

  • I am an anal nerd at heart (a software engineer in another life)
  • I started with MAMP and was disappointed (good but not great for what I want to do)
  • I wanted mod_perl compiled into httpd. Brute force anyone or XAMPP.

MAMP stands for Macintosh, Apache, MySQL and PHP. XAMPP assumes the X is a wildcard. It could be Linux, Windows, Macintosh or Solaris. The second P is for Perl. Before PHP became popular as a web framework, there was/is Perl, and Mason is a very PHP-like Perl module. Back then, in the ancient past, mid to late nineties, there was only LAMP, which we called the LAMP stack. They say imitation is the sincerest form of flattery. I guess that dates me, doesn’t it? You pick your poison but if you want Perl, it’s either XAMPP or brute force. Your mileage may vary.

To top of page

Working with MAMP

MAMP (version downloaded: 2.1.4) is very easy and straight forward to use. There is even a reasonably complete and current tutorial at WordPress.org support. You simply download MAMP (you could try MAMP PRO but for me it wasn’t worth paying for a license) and WordPress.org. Start MAMP, get it installed in your Applications folder or wherever you install applications on your Mac. Then use phpMyAdmin to create a wordpress database in MySQL. Also create a database user, the same one you will use in WordPress and grant this user all rights. In other words, make this user a MySQL administrator. Then, after unpacking WordPress to a folder, drag that folder into the htdocs folder (htdocs is Apache’s document root, where all web applications it will run live) and that’s it. You can begin building your WordPress.org blog.

For me there was only one minor gotcha. I wanted my .org site to look exactly like my .com site, at least initially, so of course, I exported in .com and imported into .org. This worked but only partially. The Twenty-eleven theme is not selected by default. Even after I chose it there still were plug-ins missing that are present in the .com version of that theme by default. Specifically Jetpack.

I wanted my Contact page in .org to look, taste, smell and behave exactly as it does in .com (remember, my goal is to have a WordPress sandbox on my Mac). That requires Jetpack. I posted a support question and esmi, the Theme Diva answered. Thank you esmi. Once I added Jetpack to my .org site my Contact page was still broken. The trick to making it work as advertised is to validate it. That required me to define in the .org site an administrative user with the same name as the one I defined in the .com version. Jetpack relies on a behind-the-scenes connection to .com or some of its features don’t work. Mystery solved.

BTW: using phpMyAdmin to study the tables and data in the wordpress MySQL database is worth the price of admission all by itself, for the insights gained into WordPress.

Author’s Update: 1/31/2014

I just learned from MAMP developers version 3.0, now in beta, will contain mod_perl compiled into Apache httpd. Looks like Python too. This is very welcome news.

To top of page

Working with XAMPP

After downloading and unpacking XAMPP (version downloaded: 1.8.3) you are more on your own than you will be with MAMP. This is primarily because XAMPP is configured more for the do-it-yourself-er, someone comfortable with OS X and willing (when necessary) and able to use root. It is owned by root after installation. It also assumes you know more about administering the MAMP stack (the individual pieces that make up the software that hosts WordPress) and want total control of the environment. That means the root user must be enabled. After it is you may use sudo to provide command line administration of MySQL, such as creating the wordpress database from the command line: (sudo mysql -p -u my-MySQL-admin-user-name gets you into MySQL; substitute your name. If that sudo expression is too cryptic for you, brush up on MySQL.) I had to do this because XAMPP shipped with an annoying bug.

PHP and MySQL sessions are stored in a temporary directory in Linux and OS X, usually /tmp, unless the developer/administrator prefers another location. Sessions are somewhat like browser cookies except they are server-side rather than in your client (Firefox, Safari, Opera, or whatever). Putting them in /tmp on a shared server is bad joss. They can be hacked… so, better to make them private. There are a myriad of ways to do this beyond the scope of this post but know that PHP provides a simple mechanism for doing this. In php.ini, PHP’s initialization script can be found the definition of a global variable: session.save_path. In the copy included in the version I downloaded session.save_path was commented out:

; session.save_path=”/tmp”

This prevented phpMyAdmin from starting. Worse, the red-banner error message isn’t very helpful unless you understand the concept of sessions. I un-commented this line by removing the ; and reported the bug to the XAMPP developers. I intend to change mine to something like:

session.save_path=”/Applications/XAMPP/xamppfiles/temp”

to contain it privately within the XAMPP directory/folder tree structure, except I need to do a little more XAMPP research. I discovered perusing the XAMPP files that “/tmp” is referenced in a number of places. Better to define a global variable, such as:

$php_tmpdir=”/Some/private/directory”

and then say:

session.save_path=”$php_tmpdir”

and use it consistently wherever else a path to temporary disk storage is needed, to define it exactly once. There are several ways to do this and until I decide which is best, to avoid excessive conflicts with future upgrades, I’ll leave that one instance defined as “/tmp”.

Whether the XAMPP developers fix it or not remains to be seen. Interestingly, 66 forum readers, at last count (in less than 48 hours), have read my broken sessions post. Boy would I be ecstatic if that many readers of my blog read this or any other of my posts.

XAMPP is developed in Germany as an open-source project. The support board is also located in Germany and many of its members only speak German. I post in both English and German as a courtesy to native speakers and to get the widest distribution. The only annoying aspect of that support site is the spam cruft they don’t routinely remove.

Once past this obstruction, all is well with XAMPP, and now, in addition to PHP in Apache, I have Perl. Installing WordPress in XAMPP is a piece of cake. That last link is the WordPress codex pertaining to XAMPP but it is written for Windows users. Apparently the folks at WordPress think MAMP is the better tool for Mac users. It is, only if you can live without Perl. I can’t.

One caveat should be borne in mind with either of these two products. Both MAMP and XAMPP are containers that host the entire software stack, including the Apache web server. Typically, this approach is ideal for running WordPress on a personal computer but it’s unlikely anyone would do this on a public server. A computer running either MAMP or XAMPP would most likely be installed behind a firewall on a private LAN, thus not inwardly accessible from the Internet. This poses a problem in that the JetPack plugin, written by Automattic, the organization that hosts WordPress.com, requires access from the cloud to the server running WordPress.org.

JetPack incorporates in one plugin many of the most desirable blog-specific features available at WordPress.com by default. Since I installed WordPress on my Mac to provide a sandbox, I wanted to run JetPack but alas, many of its modules require Internet connectivity via XML-RPC, so they don’t work. Specifically, I wanted to use JetPack \LaTeX to render math equations and be able to copy and paste posts containing \LaTeX expressions between my sandbox and my public website. This is not possible unless the WordPress.org instance is visible to the cloud.

What’s really going on here? If you inspect the JetPack code you will see in latex.php that JetPack uses XML-RPC to send the \LaTeX expression to WordPress.com where it is converted to a .png image file. WordPress.com then connects via XML-RPC to send this image file back to your WordPress.org instance. This approach stems from a time when one could not assume popular browsers knew what to do with \LaTeX expressions.

So, what to do? I installed JetPack but I also installed another plugin, MathJax-LateX. With it I can include expressions such as:

\sum\limits_{i=0}^{n} i^2 = \frac{n^2+n} {2}

and:

\text{MSD} \simeq \sum\limits_{i=1}^{m} (x_i – \overline{X})^2 \left(\frac{f_i} {n} \right)

which display in a \LaTeX enabled browser as:

\sum\limits_{i=0}^{n} i^2 = \frac{n^2+n} {2}

\text{MSD} \simeq \sum\limits_{i=1}^{m} (x_i - \overline{X})^2 \left(\frac{f_i} {n} \right)

Most modern browsers contain a \LaTeX rendering engine and for those that don’t MathJax-LateX downloads in the page containing \LaTeX expressions JavaScript \LaTeX rendering functions.

When I paste expressions such as this into a WordPress.com post I may have to change the syntax slightly, depending on which \LaTeX features not supported in JetPack I use. I’m sufficiently \LaTeX-literate but it’s a pain to have to do it. Don’t say you weren’t warned if you too need \LaTeX support in your MAMP or XAMPP instance of WordPress. I complained about this on the JetPack support forum and was told the developers plan to replace JetPack’s \LaTeX functionality, known as Beautiful Math, which is derived from the plugin WP LaTeX, with MathJax-LateX. When they will not say.

Finally, in my opinion everyone who blogs at WordPress.com and is not afraid to get there hands a little dirty installing a local copy of WordPress.org, and of course, has a Mac (doesn’t every sentient being want a Mac? Mac on your lap and Linux on your server; yah team; rah, rah; why not get the best :-) ) should own a sandbox.

Enjoy.

Thomas

Author’s note: Just the trivial use of copy and paste between sandbox and live blog is worth setting up MAMP.

To top of page

3 thoughts on “My excellent adventure in MAMP and XAMPP lands

  1. Hello Thomas,

    This is a voice from the past, Kate Beckw… We worked together at the heavy truck company in Portland in the mid-nineties when you consulted. We kinda lost touch when you left Oregon. I’m back teaching math you know where, still adjunct faculty although I’ve been assured, not for the first time, that my appointment will be made permanent; famous last words. Oh well, this fall I’m teaching several sections of undergraduate Introductory Statistics and Probability in the business school and if my students’ comments are of any value, I’ll get that appointment. Then I’ll be able to teach upper division courses and S & P in the MBA program. :-)

    How I found you, I still have in my files a white paper you wrote on hashing. I was impressed with the elegance and simplicity of that algorithm and the examples you gave of how it could be used. Did you ever implement any of those ideas in an actual application? When I found your MAMP-XAMPP post on Google I reread that paper. Sure enough, I recognized your writing style. If I’m wrong and you’re not the T.D. I knew, just delete this comment and no one will be the wiser.

    That MAMP post came at just the right time. I was using MS Word with MS Equation to develop my lesson plans and talk about a painful experience. I read your post and immediately switched to Mathjax in WordPress.org in MAMP. In class I plug my Mac into an AV system and go to town. I particularly like the hover function to blow the equation up so everyone, no matter where they sit, can see it.

    However, there is an issue and I thought you might be able to help. My classes want discussion access to my math blog, to post comments, questions and to discuss the course. I’d love to do that but I’m not going to turn my Pro into a server (don’t know how and wouldn’t even if I did) and I’m leery of putting my course materials on a university computer and then being dismissed. It’s happened before. The school has ferocious fiscal problems and I could get cut, again, at the next budget crunch. So, I could put up a math blog on WordPress.com that would protect my content. That’s sort of what you do, isn’t it; do your post-writing in your sandbox and then copy it to your public website? What do you think?

    BTW: I’m struggling with a couple of annoying LaTeX issues. I know I can align my equations vertically, so that all of the ‘=’ signs are stacked but I can’t find the LaTeX rule to do that. Also, when I include f sub i in a fraction, as in \left( \frac{f_i } {n} \right), which is as common as dirt in statistics, the upper curl of the italic f is clipped. This happens whether I use serif or a sans serif font. Any ideas?

    Thanks and regards,
    Kate

    • \(
      \newcommand{\fi}{f\,\!_i}
      \newcommand{\SS}[2]{#1\:\!_#2}
      \newcommand{\SUBx}[1]{\:\!_#1}
      \newcommand{\EXPx}[1]{\;\!^#1}

      \newcommand{\Ss}[2]{#1\,\!_#2}
      \newcommand{\subx}[1]{\,\!_#1}
      \)

      Hey Kate!

      What a pleasure to hear from you. Of course I remember you. We worked on that EDI project together. You did the IMS stuff, preparing and staging the transactions and I did the SNA and Unix parts that implemented the transport. I don’t think we ever exchanged personal email addresses so when the project was finished we went our separate ways. That was the last major project I worked on for the truck company before I moved to Chicago. Now that I have your email address I’ll send you a personal and we can then catch up.

      Developing math course-ware is a splendid idea and WordPress.org is a very suitable platform but I can’t say the same for WordPress.com, with one minor exception which I will discuss in a moment. I think you will be disappointed with the limited \LaTeX support in .com. That is because the .com developers are using a package called WP LaTeX in a functional library they call Jetpack. You can get a Jetpack plugin in .org where \LaTeX is called Beautiful Math, but there are better alternatives including the WP LaTeX plugin itself. Unfortunately, WP LaTeX sends \LaTeX markup to an external server where it is converted to a PNG image and returned to you as a .png graphics file. This is barely adequate for casual math use but misses the mark for math course-ware. This approach harkens back to a time when browsers did not know what to do with \LaTeX markup. You will be happier if you rely on an implementation that uses Javascript \LaTeX rendering functions now present in all popular browsers.

      Trying to get \LaTeX functionality in .org with Beautiful Math won’t work in MAMP. Beautiful Math uses RPC to pass markup and PNG files back and forth and requires an inbound cloud connection to your WordPress instance, something you wouldn’t want to do on your Mac even if you know how to do it.

      Briefly, WordPress.com fails as a math course-ware platform because:

      • It renders \LaTeX markup into PNG image files;
      • Each equation is passed separately to the PNG server for processing, which will be painfully slow for pages containing many equations;
      • Because each equation is a stand-alone image file, it is problematic (but see my discussion of an alignment hack) to align them by the ‘=’ sign, typical of all professional math presentation;
      • There is no provision for using \LaTeX macros;
      • There is zero support for \LaTeX usage at WordPress.com, other than peer forums. That means you must hack your way to knowledge of what idiosyncracies are present in the implementation;
      • You will never know if and when the developers change the software in a way that may affect the appearance of your equations (as they did recently that affected mine). They don’t announce changes before they make them, don’t publish a bug list and don’t discuss their development plans.

      If I were you I would stick with Mathjax-Latex in your .org instance of WordPress and find a hosting service, either one of your university’s intranet servers or an outside service. By running MAMP on your Mac, you already know how to admin this stuff; now you just need to get it deployed at a suitable ISP. Your Mac will always be your reference platform.

      Now, if you absolutely insist on putting your math blog up on WordPress.com, I’d write the course-ware with Libre Office. Like WordPress.org, it’s open-source. It uses math markup different from but similar to \LaTeX, not PNG images or that proprietary format that Microsoft uses in Word. I’ll show a comparative example later but it’s easy to learn, Libre Office has a great help system, a split-screen math editor and most important, you can export .ODF files to .PDF. I’d upload these .PDF files to WordPress.com and use its blog facilities for exposition and discussion. However, your students won’t like not being able to use \LaTeX and the write-and-upload-revise-and-upload cycle will get very old very fast. You asked for my opinion, so, there it is.

      Now as to your questions, here is an example of \LaTeX markup that shows alignment. Since I’m writing this in WordPress.com, I can’t show the aligned rendered images but I have tested this markup in WP in MAMP and in HTML and it works correctly in both. Copy and paste it into WP.org or into HTML.

      $latex \begin{align}
        \sum_{i=0}^n i^2 & = \frac{n^2+n} {2} \\
        x & = \frac{-b \pm \sqrt{b^2 - 4ac}} {2a} \\
        \text{MSD} & \simeq \sum\limits_{i=1}^m (x_i - \overline{X})^2 \left(\frac{f_i} {n} \right) \\
      \end{align}$

      Notice the ‘&’ before the ‘=’. The ‘&’ forces alignment but such expressions must be wrapped by \begin{align} and \end{align} macros.

      Now I’ve been carping about how inadequate WP.com is for math course-ware development compared to WP.org but to be fair, if your only issue is ‘=’ sign alignment, there is a hack available from a plug-in developer named Michael Adams that comes pretty close, especially with my hack (\quad spacers) to his hack. BTW: that \strut in the quadratic equation creates a little more headroom under the root symbol for exponents or fractions. Consider this \LaTeX markup for WP.com, alas, without macros:

      \begin{matrix}
        \sum\limits_{i=0}^n i^2 & = & \frac{n^2+n} {2}\quad\quad\quad\quad\quad \\
        x & = & \frac{-b \pm \sqrt{\strut b^2 - 4ac}} {2a}\quad\quad \\
        \text{MSD} & \simeq & \sum\limits_{i=1}^m (x_i - \overline{X})^2 \left(\frac{f\,\!_i} {n} \right)
      \end{matrix}

      Try it first Michael’s way, without those \quad macros to see how the PNG server renders this markup. The server centers the short equations under the long. The \quad lengthens the short ones so you can force alignment. It’s an ugly hack but it works, as in:

      \begin{matrix}   \sum\limits_{i=0}^n i^2 & = & \frac{n^2+n} {2}\quad\quad\quad\quad\quad \\   x & = & \frac{-b \pm \sqrt{\strut b^2 - 4ac}} {2a}\quad\quad \\   \text{MSD} & \simeq & \sum\limits_{i=1}^m (x_i - \overline{X})^2 \left(\frac{f\,\!_i} {n} \right) \end{matrix}

      I too noticed my f sub i clipped; also J sub α. Not all the time, not in every \LaTeX environment, apparently not in WP but definitely in HTML files opened in all versions of Mozilla, also Safari in OS X. Opera in WindowsXP is ugly even with the STIX fonts installed but at least the f is complete. Haven’t yet tried it in Chrome and probably won’t, since I no longer trust anything written by Google.

      I’m not yet sure I understand exactly why; some font conflict or perhaps the way the ‘_’ subscript macro is implemented in \TeX. In typesetting kerning is the process of adjusting the space between glyphs in a proportional font. The default kerning in the ‘_’ macro may be the culprit, but that is just a guess. I’ve tried the CSS property text-rendering: optimizeLegibility; but that does not fix the problem. I got tired of fighting with it so I came up with a hack that does work 100% of the time. It uses the \quad macro and its macro children: { \, \: \; \! }.

      A \quad is a horizontal spacing macro that is the equivalent of your font size. By that I mean if you are using a 12 pt font, then \quad is exactly 12 pts wide. The child macros are:

      \,  small space  3/18 of a quad
      \:  medium   "   4/18  " "  "
      \;  large    "   5/18  " "  "
      \!  negative "  -3/18  " "  "

      So, if you write:

      \left(\frac{f\,\!_i} {n}\right)

      your f will not be clipped, as in:

      \left(\frac{f\,\!_i} {n}\right)

      If you are writing HTML, then you can define a \LaTeX macro and include it in the <head> part of the document. Here is how I do that to create several variations on that theme:

      <head>
      <title>LateX examples</title>
      <script type="text/x-mathjax-config">
         MathJax.Hub.Config({tex2jax: {
            inlineMath: [['$latex','$'], ['\\(','\\)']],
            processEnvironments: true
         }
         });
         MathJax.Hub.Config({TeX: {
            Macros: {
               fi:    "{f\\,\\!_i}",        <!-- static f sub i, spread: \fi -->
               SS:    ["{#1\\:\\!_#2}",2],  <!-- 2-parms, variable and subscript, spread: \SS{f}{i} -->
               SUBx:  ["{\\:\\!_#1}",1],    <!-- Spread variable and its subscript: \SUBx{i} -->
               EXPx:  ["{\\;\\!^#1}",1],    <!-- Spread variable and its exponent: \EXPx{2} -->
      
               Ss:    ["{#1\\,\\!_#2}",2],  <!--Same as SS, less spread: \Ss{f}{i} -->
               subx:  ["{\\,\\!_#1}",1]     <!--Same as SUBx, less spread: \subx{i} -->
            }
         }
         });
      </script>
      <script type="text/javascript"
         src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
      </script>
      </head>
      

      Note how two \\ must be entered in the HTML version to get one. Remember to add a comma at the end of all but the last macro definition.

      Then, when I want f sub i over n I can say any of:

         \left(\frac{\fi} {n}\right)       or,
         \left(\frac{\SS{f}{i} {n}\right)  or,
         \left(\frac{f\SUBx{i} {n}\right)  or... you get the idea.
      

      Of course, the only approach that works in WP.com is:

      \left(\frac{f\,\!_i} {n}\right)

      or some explicit spacing variation because it does not allow macro definitions. I spread exponents too, when I think they are too crowded. Pick your poison. There’s nothing magic about those macro names. Choose names that you will remember, since you’ll probably use them a lot.

      Speaking of macro definitions, it is impossible even in WP.org to configure Mathjax as above. However, and this fact alone may convince you to stick with the .org version, you may place at the top of every WP page and post an alternative way to define \LaTeX macros. Once defined, they may be used anywhere in the page, even in comments and replies. Here are those same macros using \TeX syntax. The block is enclosed in a DIV that does not display.

      <div style="display:none">
      \(
          \newcommand{\fi}{f\,\!_i}
          \newcommand{\SS}[2]{#1\:\!_#2}
          \newcommand{\SUBx}[1]{\:\!_#1}
          \newcommand{\EXPx}[1]{\;\!^#1}
      
          \newcommand{\Ss}[2]{#1\,\!_#2}
          \newcommand{\subx}[1]{\,\!_#1}
      \)
      </div>

      Lastly, I mentioned Libre Office as an alternative math course-ware editor. Here are \LaTeX and Libre Office markup of the same Mean Squared Deviation equation:

      Libre Off: "MSD " simeq size*1.25 sum from i=0 to {m}(x_i - bar X)^2`left(f_i over n right)
      LaTeX:     \text{MSD} \simeq \sum\limits_{i=1}^m (x_i - \overline{X})^2 \left(\frac{f_i} {n} \right)
      

      The tilda in the Libre Office version is a spacer.

      I hope I answered your questions. Please keep me informed of your progress and if I can help in any way I will.

      Thomas

      • Thanks Thomas, for the candid discussion of WordPress software, the good, bad and ugly. No system is perfect but WP, especially WP.org works for me. I particularly liked your discussion of LaTeX macros and the examples and that DIV expression. That one really got my attention.

        After much thought I’ve asked the U for space on one of its Linux servers for my WP.org math blog, one with VPN/student access from the outside. They said ‘yes’ but I heard that as ‘maybe’, since computer system admin is pretty short-handed right now. I also asked my students to request access so that might light a fire under someone. In the meantime, I’m developing my teaching materials (course-ware? what a marvelous term) in MAMP.

        BTW: you didn’t say whether you ever used that hashing stuff in a real application. Did you? The elegance of that algorithm speaks for itself re your technical chops. Oh, and you may hear from a colleague of mine, Lou F. by name. He teaches English Lit and creative writing at the hoity-toity private college across the river. You obviously need constructive readers and he leads a writers’ workshop and book club. He didn’t say he would and he didn’t say he wouldn’t (recommend your work to the club), but he did say he would take a peek at your stuff. I particularly like the short story, but the other stuff about Jonathan Tyne is not my thing, sorry. Except I am interested in Catherine Duvall. I’d like to read more about her and discover whether you can write a believable woman. The way she handled Tyne/Ware was pretty cool. Perhaps another post…

        Kate

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s