Zero to Mojolicious with Zurb Foundation in Five Minutes

A short tutorial.

Let’s run through creating a Perl web application with Mojolicious and styling by Zurb Foundation.

Assuming a brand new machine (possibly a Linode virtual machine), first we install the latest Mojolicious under /local/bin … if you don’t do this as root this way, you probably get a cpanminus version somewhere in your user home directory.  I prefer a single global installation.

sudo sh -c "curl get.mojolici.us | sh"

OK now we can go into a working directory somewhere and type:

mojo generate app Test

which will create an entire tree of default files under the subdirectory ‘test’ for a program called ‘Test.’

At this point you should be able to start your example program:

morbo script/test

and view the default text at http://localhost:3000

Next we get the latest Foundation distribution from their website. At the time of writing, this gave me foundation-5.2.2.zip. Create a subdirectory called foundation under the public directory and unzip into there. This will create subdirectories css and js among a few others.

We are going to leave those files in a pristine tree so we can replace them later, and create symbolics links to them. Note the slightly curious use of relative paths in the symbolic links below. The ../ and ../../ are needed because symlinks are relative to the destination file, not the directory where our shell happens to be when they are created. Also, if only the destination directory and not a filename is given, the destination filename is copied from the source (linked-to) file.

# Assuming the latest Foundation framework code
# is downloaded into the 'foundation' directory,
# and that we are currently in the 'public'
# directory in your generated mojo application,
# here we make symlinks from our document root
# into there, only for the files we actually use.
mkdir css
mkdir js
ln -s ../foundation/css/normalize.css         css/
ln -s ../foundation/css/foundation.min.css    css/
ln -s ../foundation/js/foundation.min.js      js/
mkdir js/vendor
ln -s ../../foundation/js/vendor/jquery.js    js/vendor/
ln -s ../../foundation/js/vendor/modernizr.js js/vendor/

It is worth a reminder that the syntax here is:

ln -s {source (real file)} {destination (new link name)}

Starting with the basic HTML from here:

http://foundation.zurb.com/docs/css.html

We copy some of the code from the original default.html.ep and create the new templates/layouts/zurbish.html.ep as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- Zurb Foundation stuff -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/foundation.min.css">
    <script src="js/vendor/modernizr.js"></script>
    <!-- end Zurb -->
    <title><%= title %></title>
  </head>
  <body>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
<%= content %>
  </body>
</html>

Then in templates/example/welcome.html.ep we change the content to be as follows:

% layout 'zurbish';
% title 'Welcome';
<h2><%= $msg %></h2>
This page was generated from the template "templates/example/welcome.html.ep"
and the layout "templates/layouts/zurbish.html.ep",
<a href="<%== url_for %>">click here</a> to reload the page or
<a href="/index.html">here</a> to move forward to a static page.
<div>
  <div>2 columns</div>
  <div>10 columns</div>
</div>
<div>
  <div>3 columns</div>
  <div>9 columns</div>
</div>

Now, http://localhost:3000 should give you the example text in a very, very basic Foundation based layout. From here, you might want to follow one of the excellent Mojolicious tutorials out there.

Additional Resources

Glen Hinkle’s introduction to Mojolicious.

A (very) Late Debriefing

What I learned at Digital Techniques, Inc.
Burlington, MA 1984-1989

From 1984 to 1988, I was a co-op student at DTI of Burlington, Mass., whilst I attended Northeastern University.  This was an excellent little company that made software and hardware well ahead of the industry, but which suffered from a marketplace that changed faster than anticipated and not in the way that was envisioned.  This resulted in a bankruptcy and reorganization. The company’s excellent technical legacy was carried through the Touchcom line which was acquired by today’s G4S in 2008 (2012 press release).

The below commentary is my personal perspective, a quarter century later.

Back to 1984

The Touchcom system had an over-engineered chassis, suitable for practically military grade. This might have been an asset at Kappy’s installations, but everywhere else it pushed expense and limited flexibility. Industrial-strength CPU and controller cards were used with a custom-built graphics display card (GDC) and other custom components. The use of the industrial STD bus, while possibly an asset in the early 1980s, became an albatross even by 1985.

Software was based on industry-standard MS-DOS but not commodity IBM PC compatible, slowing development and also limiting increased capability. Low-level software was wisely (for the time) separated into an assembly-language coded “TCOS” but coding in a higher level language like C would have offered 90%+ of the speed and much better expansion potential at faster/lower cost. TCOS was poorly documented even to internal systems coders, greatly diminishing the utility of the approach. Many high-level applications reworked TCOS functionality in far slower scripting code.

Mid-level software used the innovative Magic/L language from Loki Engineering. Magic/L was a threaded language (like FORTH) inside, with a coding style reminiscent of Pascal and the later Perl language. Upon this base was built “TNT” (The New Touchtext) which interacted with TCOS to provide interactive graphics with an event-driven interaction handler loop, presaging Microsoft Windows and JavaScript by many years.

When opportunity to redesign the hardware came, instead of using standard components and building just a custom GDC, which could have been an opportunity to expand market for DTI’s advanced graphics … instead, a single, massive, all-in-one CPU/I-O-controller/video card was built as an expansion card (!) for the IBM PC system bus. This then necessitated an even more ununusal chassis. The amount of money and time spent on this curious exercise, which did little to make the system more functional or marketable, astonishes me even today.

To be sure, by the time I graduated Northeastern in 1988 and left DTI as a contractor in 1989, all these shortcomings were in the process of being rectified, but the window of opportunity had been lost.

Some Lessons:

In both hardware and software, follow the UNIX, and LEGO, philosophy of building modules. Build and make money on the smallest possible unique element where you add value (“As small as possible, but no smaller” — [after] Einstein). Leverage other people’s investment wherever you can, by following and building onto standards, and by creative re-use of common components.

The 5-in-1 Network Admin’s Cable

Michael Ossman brings us the handiest little set of network administrator tools you can fit in your mini-screwdriver set. With one standard Ethernet cable, a straight-through coupler, and a few homebrew adapters, you will have:

  1. straight-through ethernet cable:ethernet cable photo
  2. crossover ethernet cable:crossover cable photo

    ethernet – coupler – crossover

  3. modem cable:modem cable photo

    DB9/RJ45 – ethernet – DB9/RJ45

  4. null modem cable:null modem cable photo

    DB9/RJ45 – ethernet – coupler – crossover – DB9/RJ45

  5. Cisco console cable:Cisco console cable photo

    DB9/RJ45 – ethernet – coupler – Cisco adapter

This set is easily expandable with a loopback (which will work on both Ethernet and RS-232, also useful for testing distant connectors) and one-way sniffers.

Read the rest of the story.

March Musings

Message passing.

Investigate 0mq as a light(er-) weight alternative to rabbitmq.

Configuration Management

Slaughter. It’s pure Perl so there’s no new microlanguage to learn.

A Perl Web framework

http://mojolicio.us/ looks worthy of exploring.

Perlbrew

I was amazed at how well perlbrew works for maintaining user-specific copies of Perl. No more worrying that a system upgrade will break your application… no more problems with different versions of a module between users.

Disable Shotwell on Fedora + Gnome

Found the answer to this conundrum with a little help from the Ubuntu forum but this answer works in Fedora with Gnome, too. Here’s my remix of their answer:

To enable or disable automount open a terminal and type dconf-editor followed by the [Enter] key.

Browse to org.gnome.desktop.media-handling.  A quick way to do this is to press Ctrl+F (for Find) and then type automount.

The automount key controls whether to automatically mount media. If set to true, then Nautilus will automatically mount media such as user-visible hard disks and removable media on start-up and media insertion. You probably want this on.

There is another key org.gnome.desktop.media-handling.automount-never. By checking this, you will disable Shotwell, and everything else, from running when devices are automounted. So check this to turn Shotwell off.

Perl Catalyst on a base Debian system

This turns out to be amazingly easy, at least with Debian 7.3.

First, instead of MySQL, I followed instructions at the MariaDB site: Setting Up MariaDB Repositories. Then:

$ sudo apt-get install libcatalyst-modules-perl

which installed over 200 modules, but what do you know:

$ catalyst.pl Foo

creates a Foo Catalyst application under the current directory.  Everything Just Works. Thanks to Debian and the folks who bring you Catalyst.

Further reading:

UPDATE (April 2014): Catalyst seems a bit heavy for most of my needs.  I’m exploring mojolicious.

Recovering eth0 on Debian after VM clone

After cloning a working Debian virtual machine, the new system would not bring up its Ethernet interface. This is because I checked VirtualBox’s dialog, “Reset MAC address for network card” and got a new hardware Ethernet address.

Trying “ifup eth0″ didn’t work.  I did an “ip addr” and saw that the only configured interface was now called eth1.

This is simple to solve.  Edit the file /etc/udev/rules.d/70-persistent-net.rules and move the new MAC address (like “00-0F-35-01…” and so on) from the eth1 line back to eth0, erasing the previous address in the eth0 line.  Then delete the remainder of the eth1 line, save, and reboot.

You should now have your eth0 back.

 

Setting up VOIP on a DigitalOcean VPS

The best way to get started with VoIP (Voice over Internet Protocol) is to set up a sandbox Asterisk server on a public IP address. To begin you can use your Gmail/Google Voice account for outgoing calls, and then attach your Asterisk to a full SIP connection for incoming and outging calls. For this I’m using a VPS (virtual private server) from Digital Ocean, running Ubuntu 13.10.

For complete control, we can download, compile, and install the latest version of Asterisk directly from the source (here). Generally we’ll put this on more-or-less a standalone system, so let’s to download and unpack into /usr/src:

cd /usr/src
wget http://downloads.asterisk.org/pub/telephony/asterisk/asterisk 11-current.tar.gz
tar xfz asterisk-11-current.tar.gz
cd asterisk-11.6.0

(The last will change according to your version.)

Before continuing, install required packages:

# apt-get install make libncurses-dev libxml2-dev sqlite3 libsqlite3-dev
# apt-get install libiksemel-dev  (for gtalk, jingle below)
# apt-get install libssl-dev  (for chan_sip)
# apt-get install subversion (for the mp3 addon)

Now, run the configure program to check dependencies.

./configure

Now, select the options and make sure we will have the required channel drivers, sip and gtalk:

make menuselect

Make sure that chan_sip, chan_gtalk and chan_jingle are available and selected. These are marked as “deprecated” but still work.

 **************************************************
 Asterisk Module and Build Option Selection
 **************************************************
      Press 'h' for help.

      Add-ons (See README-addons.txt)
      Applications
      Bridging Modules
      Call Detail Recording
      Channel Event Logging
--->  Channel Drivers
      Codec Translators
      Format Interpreters
      Dialplan Functions
      PBX Modules
      Resource Modules
      Test Modules
      Compiler Flags
      Voicemail Build Options
      Utilities
      AGI Samples
      Module Embedding
      Core Sound Packages
      Music On Hold File Packages
      Extras Sound Packages

The final step is to compile everything:

make
make install
make samples

Now the fun part — configure the sip.conf and extensions.conf files in your working Asterisk system: these are found in /etc/asterisk. To get an Asterisk command-line, use the shell command asterisk -r:

# asterisk -r
Asterisk 11.6.0, Copyright (C) 1999 - 2013 Digium, Inc. and others.
Created by Mark Spencer <markster@digium.com>
Asterisk comes with ABSOLUTELY NO WARRANTY; type 'core show warranty' for details.
This is free software, with components licensed under the GNU General Public
License version 2 and other licenses; you are welcome to redistribute it under
certain conditions. Type 'core show license' for details.
=========================================================================
Connected to Asterisk 11.6.0 currently running on server (pid = 57157)
www2*CLI>

An excellent place to start is the Asterisk Wiki, under “Beginning Asterisk.”

A Proposal for Phoenix’s Transit Network

Proposed System Map

Proposal for a Valley-wide Phoenix Transit System, showing expanded METRO, heritage streetcars, and commuter and regional rail. Also available in PDF format for printing

Shortly after the December 2008 opening of METRO, Phoenix Arizona’s new trolley system, I wrote several documents in an effort to raise awareness of the need for better station names, and better Valley-wide transit planning.  I have updated these after several requests following an article in the Arizona Republic (“Next stop: Better light-rail station descriptions” by Amy B Wang, Tuesday Aug 20, 2013).

The diagram above shows a complete proposed eventual build-out of the Phoenix transit system, commuter rail, regional rail, and Amtrak services — showing proper station names, streetcar (“light rail”) lines with color-names, and heritage streetcar (“trolley”) service in Phoenix. The Tempe streetcar (“Trolley”) is not shown, but is suggested to be built south along Rural Rd. to Southern Ave, thence east via Fiesta Mall to Country Club, connecting at its east end to the Red Line to downtown Chandler.

These recommendations are based on my experience using transit all over America and Europe since the 1970s.  I would be pleased if you get these to whoever would benefit.  I would be happy to answer any questions.  Please email me or telephone (+1) 480-947-6100.

"Si datur citrea, sucus faciunt" (When life gives you lemons, make lemonade)