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+ /, ' ') );

Mycorrhizal Fungi

20150316_145717

We conducted an interesting experiment in our Mycology class recently. In one treatment, we inoculated potting soil with mycorrhizal fungi and planted seeds – cucumbers, beans, and corn. The control treatment was the same seeds planted in un-inoculated soil.

The results were dramatic – the inoculated soil resulted in earlier germination and much more rapid growth as you can see in the photographs below. The plants on the right were part of the group inoculated with mycorrhiza.

20150316_143139

The root growth was also dramatically different on these bean plants:

20150316_143449

Then we prepared slides from the different treatments to see if the differences could be traced to colonization by mycorrhizal fungi in plant root systems. Here is a root from the control treatment.  You can clearly see the cell walls and the vascular cylinder in the center of the root that transports water and nutrients to the rest of the plant.

20150316_150534

Mycorrhizal fungi have a symbiotic relationship with plants. The fungal hyphae form an underground network that absorbs nutrients, especially nitrogen and phosphorus from organic material in the soil. In exchange for providing access to these nutrients to to plants, the fungi receive energy that the plant produces by photosynthesis. The hyphae actually penetrate into the roots of plants, as you can see in the pictures we took.

This picture shows a root from the soil inoculated with mycorrhiza. The dark areas between the cells are the mycorrhizal hyphae:

20150316_145717

The following slideshow explains some of the science behind the mycorrhizal relationship that is found in most plant species and is believed to have played an important role in the initial colonization of land by plants.

Here are some more pictures of mycorrhizal hyphae:

20150316_150110

 

20150316_145159

20150316_144826

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

Holyoke Codes

holyoke codes

holyoke-codes-2104IMAGINE, CODE & SHARE

Code is everywhere.  Come learn to create your own code with Holyoke Codes, part of the national Computer Science Education Week during December 8-13th, 2014.

We are offering free workshops for kids ages 5-99 at the Massachusetts Green High-Performance Computing Center in Holyoke.  We will have computers and food. Just bring yourself and an adult.

SCHEDULE

MONDAY // 4:30 – 6:00
HOUR OF CODE; Join millions of people around the world to build your own code.

TUESDAY // 4:30 – 6:00  Ages 5-7
SCRATCHJR; Coding for young kids to make their own stories and games with characters that move, jump, dance, and sing.

WEDNESDAY // 4:30 – 6:00
ARTBOTICS; Combine art and computer science to create robots that move and interact.

THURSDAY // 4:30 – 6:00
SCRATCH; Program your own interactive stories, games, and animations — and share your creations with others in the online community.

FRIDAY // 4:30 – 6:00 Family Night
HOUR OF CODE; Join millions of people around the world to build your
own code.

SATURDAY // 10:30 – 12:30 Girls Only
MADE WITH CODE; A Google coding party for girls. Code is in everything from your favorite music to your dream career. Cool tech giveaways. Limited to 30 girls, ages 12 -17. Parents must be present at Saturday registration/drop-off.

SATURDAY // 12:30 – 2:30
SHARE YOUR CODE; Come have lunch, share what you created with the group, and be inspired by other people’s creations.

LOCATION

Massachusetts Green High-Performance Computing Center
100 Bigelow Street, Holyoke, MA 01040

REGISTRATION
If you register, you will be sure to get a t-shirt!

MORE INFORMATION
See the flier, find us on Facebook, or email Sarah Dunton.

Looking forward to seeing you there

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.

Maker Community Gathering

I’ve heard that there will be a gathering of maker folk in Amherst the weekend of January 17th.  A presentation about maker culture will be followed by an introduction to the open-source microcontroller platform Arduino.  On Saturday, participants will build a structured project and Sunday is planned to be more open-ended exploration.  They are offering registered participants a free Arduino!

Arduino
Arduino

More details are available here.  It’s a join project put together by the UMass Biology Computer Resource CenterAmherst Media, and Pioneer Valley Open Science.  Hope to see you there!

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.

Hack for Western Mass

H4WM-full-logo

H4WM-full-logo
Tonight is the kick off event for Hack for Western Mass. This weekend, web and software developers, designers, community organizers, and other folks from all over Western Mass will gather to tackle local challenges with technology.

Hack for Western Mass is one of 96 events happening nationwide as part of the National Day of Civic Hacking. The National Day of Civic Hacking is an event during which citizens from around the country will work together with local, state and federal governments as well as private sector organizations with the common goal of improving their community. Hack for Western Mass is also licensed under Random Hacks of Kindness.

Listen to Becky Sweger from National Priorities Project, another organizer, describe the event in an interview with Monte on 93.9.

Should you come help out?

H4WM-flowchart

I’ve been involved in organizing this event for the past six weeks. It’s been a great experience, and it promises to be an amazing event. We’ve collected a great array of challenges to help local organizations. For example:

  • Mapping Safety Net Service Needs: create a map for Community Action in Greenfield that compares the location of people receiving safety net services with Census demographic data that shows where the services are most needed.
  • Benefits of Banking Locally: Compare our deposits in local banks and credit unions vs national banks and create a visual way to show how banking locally benefits area residents and businesses. Lots of people know the benefits of eating locally and shopping locally, but many don’t know why banking locally makes so much sense.
  • Mapping Wells and Water Quality: Massachusetts doesn’t track the location of private wells, a problem that can lead to water contamination. A database of private wells can help planning, reduce costs, and estimate water quality.
  • Seed Swap Database: Develop an online seed library to share information about locally available seeds, strengthen food sovereignty, self-reliance, local resiliency and adaptability of crops, and empower community building.

We’ve found some great local sponsors to help feed people as they work through the weekend. If you haven’t registered to come yet, there are still a couple spots available. Sign up now!

Treehouse Community

Screen Shot 2013-02-08 at 3.05.49 PM

This site was built for the Treehouse Community and Foundation.

Treehouse Website

This website is intended to communicate about the intergenerational foster care community in Easthampton. The organization also would like to spread the word about re-envisioning foster care, creating an extended network that can replicate this model around the country.

The site features a blog, a news area, information about living in the community, the national network, and allows donors to give money.  The design is responsive to the viewers screen size, allowing it to be easily viewed on many different devices.  Among other things, a calendar allows events to be posted easily:

Treehouse Calendar

Images and videos can be viewed in galleries and also in a lightbox without leaving the current page:

Screen Shot 2013-02-08 at 3.12.35 PM

Plone

plone-logo-128-white-bg

PlonePlone is a powerful, polished and user-friendly content management system.  It excels at providing dynamic, content-rich web presence for a community and as an intranet/portal system.

Plone lets non-technical people create and maintain information for a public website or an intranet using only a web browser. Plone is easy to understand and use — allowing users to be productive in just half an hour — yet offers a wealth of community-developed add-ons and extensibility to keep meeting your needs for years to come.

Blending the creativity and speed of open source with a technologically advanced Python back-end, Plone offers superior security without sacrificing power or extensibility.

Check out some of my Plone projects.