Archive | Web Development

Technologies, techniques and neat stuff on the www

Three Lightning talks at Alphaloft: September 2012 Seacoast Web Dev Meetup

An excellent time as always at the Seacoast Web Developers Meetup held at AlphaLoft in Portsmouth on September 25th.

Josh Cyr presented his initial research on Google Drive. Josh worked with a client to develop a workflow process using events occurring in Google Drive to process documents. The API from Google allows you to iterate through files and folders, change properties. up- and down-load.

Paul Finn presented Vagrant, a shell around virtual machines that allows simple and easy download of pre-made images, spinning up the VM and talking to it (ssh) via Ruby scripts. Paul’s slides are here: http://slid.es/paulfinn/vagrant/fullscreen

Ted Pennings (@thesleepyvegan) talked about cryptography: the basic concepts, aspects of concern, best practices and more! A very informative 20 minutes from a man who’s obviously deeply involved and enthused about the subject. Slides are here: http://prezi.com/kplh0mz6ptjt/cryptography-in-20-fast-minutes/

Static versus dynamic web sites

I don’t think there are any static sites on the internet. They are either growing and changing, or rotting away. Decay is a dynamic process, too. Sites need to be refreshed. I have a eleven-year-old blog (next month), and have found most of the links in the first couple of years have rotted away, and need attention. I need to update the underlying OS, web server, runtime language and site application. Vendors and the community provide updates and security patches.

If I visit a site and it’s in HTML 4.01 with marquees and animated GIFs of envelopes flying into mailboxes, I make some (pretty severe) judgments about the proprietors. If the owners hard-coded their names, addresses and contact info into all the pages, they will always, always miss one of them when they update.

So, while your content, organization and basic layout may not change THAT OFTEN, they’ll need changing, so why not use a dynamic engine that will make it easy?

Calculate your BMI using Wolfram Alpha

Harness the power of the Wolfram Alpha computational engine to see how your height/weight ranks against the currently-accepted BMI calculations and populations:

[wolframalphawidget id=”bd2271d0eb320a2e2f27536bce47b91d” ]

Wolfram Alpha provides a WordPress plugin that allows the WordPress author to use a shortcode to place a widget in a post. There’s also (separate) support for putting a Wolfram Alpha widget inside a WordPress sidebar or widget. There’s a gallery with lots of pre-created widgets and an interface to create your own. Pretty cool.

Note that you need to specify the units (“lb” for pounds, “in” for inches, or 5′ 7.5″ for typical foot-inches height expressions) otherwise the widget seems to make some really poor choices, deciding that weight of 67 means aged 67 years.

The Web is about People, if we let it be

I was recently contacted by a company interested in having me consult on their development efforts. As I usually do, I did some background research to figure out who they are and what they do. I was appalled: their web site is one of tens of thousands of generic business sites, pretty but empty. All the buzzterms were there, the generic stock photos of the properly demographically-disparate team meetings, leaning over shiny laptops not wired to anything and pointing to pie charts with no labels. The ‘About Us’ page is filled with slogans and buzz words on how awesome “the team” was, without the single mention of who the team is.  The “Contact Us” page is a generic web-based form, with direct links to “sales@example.com” or “info@example.com.” Want a job? Jobs@example.com or hr@example.com.

What is it “About Us” you don’t understand? If you have a link saying “Who We Are,” you had better be ready to name names. Who are these people and what are they hiding? There’s no excuse for a web site like this. Are these people in the witness protection program? Do these people stand behind what they build? There’s no reputation to worry about losing because they never tell you who they are.

You can have the stiff corporate “Who We Are” of black and white pictures of the “Leadership Team” in suits, “Our Advisors” to name-drop your VCs or Directors, or a more playful site of caricatures and off-beat bios. Kudos go to the sites that include your Twitter and Github accounts, and let folks share their passion for mountain biking, marathons or matchbook collecting. But denying there are people behind your web storefront tells me you’re not proud of who you are, you’re uncomfortable putting yourself out there, or you’ve got something to hide.

And that’s the real problem with a “Who We Are” site like this: the publishers are telling us much more about themselves than they intend. In a customer-facing industry where personal service and attention is a key determinant in the success of the project, they’re stating they are not comfortable with that level of contact.

Food for thought.

Fixing shorttags in PHP source code

Short tags is a topic of some controversy in coding circles: wrapping your script in less-than, question-mark x 2, greater-than signs is easy to type and flows off the fingers but can be a source of confusion to some parsers. In PHP, it is not recommended, but there is a “shorttag” option available to override it globally or locally.

I recently was asked to edit some older PHP code and found it was littered with short tags, both the <? script goes here ?> variety and the shortcut output <?=”Print this string”?> variety, which need to be replaced by <?php script goes here ?> and <?php echo “Print this string” ?> respectively. A bit beyond my search-and-replace regex or sed skills, I found a fairly elegant solution on StackOverflow, which uses PHP to rewrite PHP:

#! /usr/bin/php
 <?php
 global $argv;
$contents = file_get_contents($argv[1]) or die;
 $tokens = token_get_all($contents);
 $tokens[] = array(0x7E0F7E0F,"",-1);
foreach($tokens as $ix => $token) {
 if(is_array($token)) {
 list($toktype, $src) = $token;
 if ($toktype == T_OPEN_TAG) {
 if (($src == "<?") && ($tokens[$ix+1][0] != T_STRING)) {
 $src = "<?php";
 if ($tokens[$ix+1][0] != T_WHITESPACE) {
 $src .= " ";
 }
 }
 }
 else if($toktype == T_OPEN_TAG_WITH_ECHO) {
 $src = "<?php echo";
 if($tokens[$ix+1][0] != T_WHITESPACE) {
 $src .= " ";
 }
 }
 print $src;
 }
 else {
 print $token;
 }
 }

It just needed a little shell wrapper to take in all the files (which I’d renamed *.php.old and archived and made a backup of) and put them out as *.php.old.new. Again, a quick rename and I was in business. I was astounded to find it ran the first time!

#! /bin/bash
FILES=./*.php.old
 for f in $FILES
 do
 echo "phpize $f >$f.new"
 ./phpize.php $f>$f.new
 done

Keeping up: theme changes

Astute readers (and I know who you two are!) will notice a change to a newer theme. I’ve switched over to the WordPress Twenty-Eleven base theme, with a few of my own tucks, nips and tweaks. I wanted to check out the new theme and test out the new functionality and keep up with the latest stuff.

Child themes are a piece of cake to create, and a child theme lets me override the original without messing with the original source, so updates will not erase the changes. While they are not so difficult to do manually if you are familiar with the command-line, they are even easier with the plugin One-Click Child Theme.

With the child theme in place, I was able to shorten the gap between the site description (the motto) and the header picture, just by adding CSS to the style.css in the child theme (that’s the cascading part of CSS). I added a paper-curl edge effect based on the work of Craig Buckler, published on Sitepoint.

I was disappointed that my site was not valid HTML5, according to the W3C’s validator site. Category tags used in REL links aren’t standard, so I deleted those. The Creative Commons plugins want to use Dublin Core XML namespaces, and there are issues there I’ve got to clean up. And the “generator” REL tag on the bottom of the page isn’t too standard, either. Overall, though, the pages are relatively clean of excessive markup or poorly-formed structures. Stay tuned as I tweak the last few elements into line.

HTML5 Boilerplate

Paul Irish started the idea of an HTML5 Boilerplate, a template to start the basic web application with the common features, and addressed problems, of HTML5 and CSS3.

Behold OpHTML5 logoen Source Power: “my” base CSS for next project, is v 2.0, with 209 well-reviewed commits from 49 practitioners.

There’s a dream team of coders and well-tested code I couldn’t imagine assembling in real life.

Now, there’s a web site that will generate and optionally customize the base templates for you: http://www.initializr.com/

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.