Display localtime

This bit of Javascript converts a time into the local timezone.

See the Pen Localtime by Andrew Pasquale (@apasquale) on CodePen.

The pertinent bit is this, which creates a new date from the UTC time and converts it to the current timezone:


var options = { timeZoneName: 'short' };

$('#date').html( new Date( Date.UTC(2015, 12, 11, 18, 0))
.toLocaleTimeString('en-US', options)
.replace(/:\d+ /, ' ') );

A Tool for Importing Tags from Squarespace into WordPress

I migrated a website from Squarespace into WordPress recently.  As part of that process, I used a tool to import blog posts into WordPress.  Unfortunately, Squarespace does not export tags in their export format.  With Scrapy, I was able to configure a tool that crawled the Squarespace website, matched tags using xpath selectors and dumped those into a json file containing a list of post titles and the tags associated with that post.

The key part this is the spider configuration. Running the tool results in a json lines file like this:

{"title": ["Roads"], "tags": "homeschooling,self discovery,self-directed learning,staff post,travel"}
{"title": ["Do Something\u00a0Projects"], "tags": "Social Issues,classes,learning,news"}

Then I used WP-CLI, a command line interface to WordPress, to generate a list of the posts containing their ID and title.

$ php ~/wp-cli.phar post list --fields=ID,post_title --format=json > ~/post_ids.json

The resulting file looks like:

[{"ID":1370,"post_title":"Talking to Teens and Parents When School Isn't Working"},{"ID":1369,"post_title":"Philanthropy at North Star"}]

A quick python script matches up the tags with the appropriate title and uses the wp-cli tool to update the post:

import json
from subprocess import call

ids = []
with open('post_ids.json') as f:
for line in f:
  ids.append(json.loads(line))

with open('items.jl') as f:
  for line in f:
    post = (json.loads(line))
    for item in ids[0]:
      # Replace unicode non-breaking spaces with ascii chars.
      if item["post_title"] == post["title"][0].replace(u"\u00a0", " "):
        call(["/usr/bin/php", "/path/to/wp-cli.phar", "--path=/to/wordpress/root", "post", "update", str(item["ID"]), "--tags_input=" + post["tags"]])

You can find this code on github here.

Sticky Menus with Waypoints.js

Sometimes navigation can be significantly improved by including context aware menus.  Waypoints is a jQuery plugin that makes it easy to execute a function whenever you scroll to an element.  On the North Star website, I used waypoints.js to add a menu that allows you to filter the class schedule:

Class Schedule Menu

The content for each day’s classes is contained in togglable tabs using the Bootstrap javascript component.

Initializing the sticky behavior is as simple as this:

$('#classes').waypoint( 'sticky', {
offset: 64
});

which attaches the class ‘stuck’ to the #classes list element when scrolls to 64 pixels from the top of the browser window.  Some CSS such as this fixes the menu so it doesn’t continue to scroll:

.stuck {
position: fixed;
top: 64px;
}

I wanted the menu to be accessible on mobile devices as well and added some code to scroll to the top of the tabbed content when a menu item is selected:

$('#classes a').click(function(event) {
$('html, body').animate({scrollTop: $('.tab-content').offset().top - 115}, 300);
});

You can see it live here or another similar example on the HealthLoop website where patients and physicians can find out more about how HealthLoop can benefit them.

HealthLoop Waypoints

Custom Tiles for Content Layout in Plone

Creating rich, interesting layouts for dynamic content through a web interface has recently been transformed in Plone by a product called Collective.Cover.  Content editors can now drag and drop content “tiles” into rows and columns, arranging things as they see fit in an intuitive process.  Screen Shot 2013-12-21 at 8.14.29 AM

While this makes for a nice experience and covers much of the content you might like to include in your layouts, it is possible to add your own custom “Tiles”.  The developer documentation for this process is currently being developed, but it’s not too difficult to create your own tiles from the basic tiles included in the package.

I created a package for a tile that queries courses from a the Talent LMS, listing courses a user is registered for and the current completion status.   Here’s what it looks like:

It incorporates the TalentLMS php API and uses Twitter Bootstrap components to generate the badges and progress bars.

The current best practice for creating plone products involves using templer.plone to generate the boilerplate structure.  The very short version of the creation process involves implementing the PersistentCoverTile interface from collective.cover.tiles.base and registering the new tile with the plone.app.tiles record in the plone registry.  The tile template calls a custom BrowserView that requests the course details using the currently authenticated user asynchronously.

For more details, please see the repository on Github (https://github.com/a-pasquale/cloudspring.lms) that implements this custom tile.

WordPress Optimization and Monitoring

I spent some time recently working on improving the performance of a WordPress installation.  I had set up a new server at Digital Ocean, a relative newcomer to the virtual server world. In general, I’ve been pleased with their product. The pricing is good, the interface is easy to use and intuitive and the uptime has been good.

The default install for WordPress has been to use the Apache webserver. WordPress comes with the .htaccess rewrite rules for making nice looking urls using Apache.  Unfortunately, Apache doesn’t come configured out of the box with reasonable memory usage parameters and can quickly suck up as much RAM as you throw at it.

Each Apache server process was using about 35M of RAM.  On a 512M virtual server, I’m going to allocate about 350M or about 65% of memory to the webserver.  The configuration looks like this:

# prefork MPM
# StartServers: number of server processes to start
# MinSpareServers: minimum number of server processes which are kept spare
# MaxSpareServers: maximum number of server processes which are kept spare
# MaxClients: maximum number of server processes allowed to start
# MaxRequestsPerChild: maximum number of requests a server process serves

    StartServers          5
    MinSpareServers       5
    StartServers          5
    MinSpareServers       5
    MaxSpareServers      10
    MaxClients           10
    MaxRequestsPerChild   0

This keeps things under control, but performance was still not great. Load testing using ApacheBench with 10 concurrent requests showed an average response time just over 2500ms.

ab -n 100 -c 10 http://healthloop.com/index.php

I’ve used Nginx with a lot of sites recently and thought I’d see if it helped with performance here. Configuring Nginx with WordPress isn’t too complicated, but is less widely known than the Apache configuration:

server {
        listen 80;
        server_name example.com;

        root /var/www/wordpress;
        index index.php index.html index.htm;

        access_log /var/log/nginx/example.com.access.log;
        error_log /var/log/nginx/example.com.error.log;

        # Use pretty permalinks.
        location / {
            try_files $uri $uri/ /index.php?q=$uri&$args;
        }

        error_page 404 /404.html;
        error_page 500 502 503 504 /50x.html;

        location = /50x.html {
            root /usr/share/nginx/www;
        }

        # pass the PHP scripts to php5-fpm
        location ~ \.php$ {
            try_files $uri =404;
            fastcgi_pass unix:/var/run/php5-fpm.sock;
            fastcgi_index index.php;
            include fastcgi_params;
        }

        # Set Expire for static assets.
        location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
           expires 365d;
        }

}

Unfortunately, I didn’t see any performance gains from switching to Nginx. I did have reduced RAM consumption, but testing showed an average of several hundred ms slower performance.

Enter Batcache and the APC Object Cache.  Batcache is a full-page caching plugin for WordPress and will cache the content of the WordPress site for anonymous users.  Authenticated visitors see the non-cached version, so this might not be the ideal solution for every WordPress site, but it was perfect for this scenario.  After installing Batcache and the WordPress plugin for APC support, testing showed the average response time had dropped to about 600ms per request.

Here’s the APC configuration I added to /etc/php5/fpm/php.ini. Initially, I had the shm_size at 32M, but noticed that the APC cache was getting highly fragmented. Since doubling the cache size, fragmentation has stayed low, in the 2-3% range.

[APC]
extension=apc.so
apc.enabled=1
apc.shm_segments=1

;size per WordPress install
apc.shm_size=64M

I’ve also been experimenting with monitoring both server and application status with New Relic. New Relic provides nice charts displaying application response time, CPU and RAM usage, and a number of other useful metrics. They also provide configurable notifications. Soon after installing the New Relic agent, I got an alert of high activity, checked the log file, and discovered an attack on /wp-login.php. Thwarted with iptables:

sudo /sbin/iptables -I INPUT -s 74.208.246.118 -j DROP

Here’s an example of their rather elegant charts:

Screen Shot 2013-12-20 at 9.02.37 PMAnother option I’ve been exploring recently is Cloudflare.com. They offer caching of static assets in their CDN at their free account level along with some basic threat protection. So far it seems to be working out well, though perhaps not with as drastic improvements as I saw in this case.

Front-End Frameworks

Front-End Frameworks are increasingly common in web development in the last few years.  They provide basic components for building a web presence in a standard way that can improve both the quality of experience of people’s interactions and the speed of development.  These are some projects that I’ve found useful.

Screen Shot 2013-11-21 at 10.38.32 AM

Foundation is probably the first front-end framework that supported building websites that were responsive to the device used to access them.  I used it in a project a few years ago and was very pleased with my experience.  Foundation 5 is planned for release imminently and continues to push the edge forward.  They offer, among other improvements, the ability to selectively include content based on media queries.

Screen Shot 2013-11-21 at 10.43.59 AMBootstrap is another great project that has really exploded in popularity.  Built by Twitter, this framework is ubiquitous across the web recently.  Bootstrap 3 offers an improved grid system and some semantic improvements.  I’ve built a number of projects using this framework and highly recommend it.

Screen Shot 2013-11-21 at 10.45.28 AMSemantic UI is another framework that has been gaining traction recently.  Semantic is structured around natural language conventions to make development more intuitive.  The code samples feel really intuitive and elegant.  This framework looks really promising and I’m excited to try it out in a project soon.

Using WordPress in multiple environments

figure1

When developing software, it’s important to have different environments so that modifications made by developers don’t affect others outside their own “sandbox” or the “production” server. Best practices generally dictate three tiers: a local development environment for each developer, a staging environment to integrate changes from multiple developers, and a production environment.

WordPress is one of the best blogging platforms available, but it isn’t really designed to be used in multiple environments. It isn’t too difficult to setup multiple environments, though. Configuration variables can be read in from environment variables that tell WordPress which environment it is in.

With Apache, add the environment variables to your .htaccess file:

SetEnv WP_DB your_database_name
SetEnv WP_USERNAME your_username
SetEnv WP_PASSWORD your_password

Then you can grab these settings in the WordPress configuration file, wp-config.php:

// The name of the database for WordPress
define('DB_NAME', $_ENV['WP_DB']);
// MySQL database username
define('DB_USER', $_ENV['WP_USERNAME']);
// MySQL database password
define('DB_PASSWORD', $_ENV['WP_PASSWORD']);
// For developers: WordPress debugging
define('WP_DEBUG', $_ENV['WP_DEBUG']);
// Override the wp_options and set the site
define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME']);
define('WP_HOME', 'http://' . $_SERVER['SERVER_NAME']);

You can also set these environment variables using nginx:

include fastcgi_params;
fastcgi_param WP_DB your_database;
fastcgi_param WP_USERNAME your_username;
fastcgi_param WP_PASSWORD your_password;

You probably also need to tell php to load your environment variables in php.ini:
variables_order = "EGPCS"

Now you can have multiple environments set up to use with your version control without any additional direct configuration of WordPress.

Plone for Social Networking

plone-logo-128-white-bg

I’ve been collaborating with Chronicle Technologies, a technology consulting firm, on a number of Plone projects recently.  Much of my work has focused on developing a social networking product written in python that provides the community with ability to share content, comment on each other’s posts, and maintain a profile.

In this site for the Fisk-Vanderbilt Bridge Program, you can see some of the highlights.  The directory allows you to browse through a list of community members.  When your mouse hovers over a member’s picture, a tooltip box appears with more information about the member.  The member profiles also take advantage of some cool jQuery tools, including overlays and tabs to present information in an easily accessible, aesthetically-pleasing way.

I also integrated an actionbar into the site to provide easy access to commonly used functions such as adding a new blog post and viewing and editing your profile.

Other interesting features of the site include a social networking addon to facilitate sharing content with other social networking sites and a lightbox photo gallery.

Multiplication

multiplication

Multipication puzzleI built this simple web application to generate multiplication worksheets and puzzles for my kids who have been busy memorizing their multiplication tables.  I looked for something similar, but couldn’t find anything that quite fit what I was looking for.  There is a form that allows you select with numbers to use when producing the tables and two different worksheet options.

Anyway, I threw this together using ruby, the Sinatra web framework, and the haml templating language.  This is a pretty powerful toolset and I was very pleased at the ease with which everything came together.   It’s deployed on heroku using git. You can browse the source code on github if you are curious.

Blackjack

Screen shot 2011-04-02 at 9.12.11 AM

I created this blackjack game as part of a tutorial to teach a student some basics of ruby programming and web development.

UPDATE: Here’s a link to Sam’s version of the game. It’s a little more polished then my initial implementation. I think he’s still planning to add more features. Anyway, nice work!

It has an object-oriented model that can be reused in other card games. Inheritance is used to add blackjack-specific logic to the basic deck and hand objects and implement the scoring method.

The Sinatra web framework was used to provide the underlying scaffolding to create the web application. I’ve used Sinatra for a few projects recently and been really pleased with it. It is lightweight and makes it possible to create web applications quickly and easily without making a lot of assumptions about how you are going to use it.

Sinatra supports the haml templating language, which is such a pleasure to use compared to most of the other templating languages I’ve used. It has a great asthetic and is clear and easy to understand, resulting in some beautiful code. It even lets you use regular Ruby code in a simple way.

I chose redis to persist the game data. Mostly, this decision was because I wanted to try out a new noSQL database, but redis seems a decent fit because it allows data to be stored as a list associated with a key. This is similar to the internal structure implemented in Ruby and operations like pop and push to move the cards from the deck to the player’s hand just work the way they should.

The source code for this game is managed using git and deployed with heroku and redis to go. I’ve been impressed with the heroku deployment platform. It fits right into the workflow, is free for small projects like this, and seems easily scalable once more capacity is needed.

hamlRuby

WordPress on OS X with Nginx, PHP, and mysql

wordpress-logo-notext-rgb

Recently, I wanted to do some WordPress development on my Mac.  I’ve got Ubuntu installed on a virtual machine, but I decided to get the stack running on OS X.

I’ve been using Nginx for a while now as a web server, caching proxy, and load balancer for some Plone sites.   It’s been fantastic – fast, reliable, easy to configure – greatly simplifying my life as a sysadmin.  I was interested to see how it would work for serving wordpress.

If you haven’t checked out homebrew, you should.   No, it’s not beer, but a package manager for OS X.  Homebrew is, they claim and I agree, the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X.

First, install and start the mysql server:

brew install mysql
/usr/local/bin/mysqld_safe --datadir=/usr/local/Cellar/mysql/5.5.10/data

Installing PHP is a little more complicated, since there isn’t an official homebrew formula. Instead, grab this formula:

wget https://github.com/ampt/homebrew/raw/php/Library/Formula/php.rb
mv php.rb `brew --prefix`/Library/Formula

Then, build PHP with mysql and fastcgi support:

brew install php --with-mysql --with-fpm

Tell PHP to listen on port 9000:

/usr/local/Cellar/php/5.3.6/bin/php-cgi -b 9000

Installing nginx is as simple as:

brew install nginx

You’ll need to modify the nginx.conf, which can be found in /usr/local/etc/nginx, and add this configuration:

server {
    listen       8080;
    server_name  localhost;

    location / {
        root   /path/to/wordpress;
        index  index.php index.html index.htm;
    }

    location ~ .php {
    include fastcgi_params;
    fastcgi_pass 127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME /path/to/wordpress/$fastcgi_script_name;
}

Start the Nginx server like this:

/usr/local/sbin/nginx -c /usr/local/etc/nginx/nginx.conf

There are more robust ways to start these services, but since this is just a development environment, I prefer not to have them running unless I am actively working with them. Now you should be ready to install WordPress.  Happy developing!