iOS Newcastle: Optimising Objective-C and North East App Showcase

The rare UK heatwave meant that most people were outside enjoying the sun. However, a dedicated few chose air-conditioned entertainment at Clavering House for iOS Newcastle for talks about Objective C and a showcase of locally-made apps.

Objective-C Best Practices

Alan Morris

With a long background in programming (he started at age 7!), Morris worked for Orange and Accenture (he admits he stayed at both “far too long”) before co-founding(?) Little Red Door. While over the years he’s learnt a number of languages, he admits that Objective-C “is the first I’ve learnt in depth”. He gave the following tips:

  • Know how to use #include, #import (stops recursion), and @class (e.g. don’t use #include in headers, instead use it to look for functions rather than constantly calling header files at compile time)
  • Beware premature optimisation. The developments in Objective-C mean that there are various ways to optimise your code (e.g. a numerical iterator loop is slow, a for in object loop is faster but doesn’t give an index, the scary looking but fastest and index giving enumerateobjectsinblock function). However, he used the great phrase “premature optimisation” for the scenario where you believe that one function will be faster whereas in real life the difference is minimal. He advises just to write how you know, test, and check if there are bottlenecks.
  • Coding standards: while these are needed for big teams, they’re just as useful for smaller or even single person teams. Set up practices so you know whether you use YES or TRUE for booleans.
  • Style guides: Little Red Door are now pretty strict on getting well structured style guide PSDs from their designers right down to properly named layers. While it does have an initial time outlay, Moore believes that it pays off in terms of less back-and-forth for missing or ambiguous elements when it comes to implementation (There’s actually been a big push for good style guides recently, such as the Style Guide Boilerplate).
  • Code comments: think about time spent vs time saved, and add comments as per why the code is doing something rather than what to do. (A recent article on comments for commits emphasises the same thing.
  • Reduce asset sizes with 9 slice images and related techniques. In a recent project, his team managed to reduce UI assets from 40Mb to 10 using this technique (which is akin to the akin to the sliding doors/CSS clips methods in HTML), and then to 6 with ImageOptim (though a tip from Morris: turn off the XCode caching!) .

For me as a PHP (and occasional Python) developer, Objective C has always been a bit of a mystery to me. However, the new number and array literals as of XCode 4.4 means that it’s a lot closer to other languages (no need to end arrays with ‘nil’ anymore). Similarly, Dict now has a key:value format far more similar to python.

His tips on carious shortcuts reminded me of David Pogue’s suggestion that everyone knows 80% of various computer actions, but a different 80%.

Local App Showcase

There was also a showcase of local apps:

  • Balance Guide (£0.69) is a guide for personal money management by Mindwarp Consultancies (represented by Julian Moorehouse).
  • Scouting for Boys (free) is a repository for UK Boy Scout archives (in soft launch) by Matt Glover. Matt used UIPageView Controller, CocoaPods (a technlogy that created strong debate!), iCarousel, and LBYouView (a scraper for Youtube) for it.
  • Slumber (normally £1.29, £0.69 for this week) an app by Little Red Door that plays white noise, maternal and fetal heartbeats etc). It was based on a toy sheep that did a similar thing. (It also uses iCarousel). Bizarrely, it has a good following in Tel Aviv and Iran!
  • Booths (free) is a shopping/groceries network by Hedgehog Lab that allows for shopping lists etc. It’s based on standard core data (though he admits the dev admits now use magical ones),  Mapping stack, and Pixate (a stylesheet for apps using CSS, thus getting around having to roll out iOS updates for style changes). He also mentioned the data is piped from WordPress, which wasn’t their choice (normally they’d use Python and Django).
  • The Tyneside Speakers Club app (free) represents a group that has been meeting twice a week in Whitley Bay for 42 years. The app is a way to get younger people interested in the meetup through videos. “There have been loads of downloads, but unfortunately the people in Turkmenistan haven’t shown up.”

There are a number of apps in review stage as well, such as one on the art of the Metro.

In terms of older but still interesting apps, one attendee released an app that shows you how sudoku can be solved as well as an acclaimed version of The Game of Life!

On the non-iOS front, some devs are expimenting with Launchpad and internet of things.

Other things

  • Organiser Matt Glover took part in the Middlesbrough Hack Day and came second, using the FB SDK and cameras. The winning app used twitter search terms and libraries to measure whether the tweets were positive or negative, for reputation management.
  • There are speaker calls for iOS Dev UK.
  • Finally, if you’re interested in a Macbook Air, there’s one for sale. (Who needs Craiglist when you have meetups?)

WordPress North East

As a queue of people waited with umbrellas outside the nearby City Hall to watch young Gosforth performers, a small band of people made their way through the maze of Northumbria University’s Sutherland Building for the inaugural WordPress North East.

Building a Better WordPress Application

Regular NE developer event speaker Phil Brown extended his speaker repertoire to WordPress. He pointed out a lot of bad practice in WordPress such as content logic in the theme, repeated (i.e. sloppy code), and difficulty in portability.

His rules:

1. Do not write your application in functions.php

Do it in a custom plugin instead, and keep your theme for presentation! Otherwise, any custom post types etc will disappear should you change your theme. It could be that Themeforest practices are to blame for this being so widespread. For an example of how to do this well, see Woocommerce.

2. Every action should be hooked

function my_plugin_start(){
//fire up app
} 
//wrong 
my_plugin_start(); 
//Right add_action('plugins_loaded', 'my_plugin_start'

3. Use WordPress

Look at options API and posts for not only storing content but as a generic data store for anything that has multiple items, as it’s a powerful API.
Other ones of interest are

  • Custom post types and post meta
  • roles/capabilities, user meta
  • Options and transients
  • Scheduler
  • Remote HTTP

4. Use plugin dependencies

Unlike a lot of plugins (e.g .Drupal), WordPress unfortunately doesn’t allow for plugin dependencies out of a box.

However, there are ways around it, check out Scribu e.g .

if ( !class_exists ('plugin_x') )){
wp_die ('Plugin Y requires plugin x');
}

5. Standardise code

While this isn’t a given, it helps with building on the site (and more employable!)
Check out the WordPress Coding Standards (and it doesn’t hurt to peruse the PHPDoc either!)

6. Choose your PHP version

Decide this early, as it can be a pain to change, particularly if you want to sell a theme or plugin. The standard right now is 5.1.1 but most people are now on more recent versions of PHP. Phil uses 5.3 as most have it (and allows for namespacing etc), though 5.3 also looks interesting with an inherit-like ‘trait’ class.

7. Avoid global scoping

A bad habit of WP coding is that a lot of code has global scope, which can lead to conflicts.
One way to get around it if you have PHP 5.3 is closures (as per jQuery)

add_action('init', function() {
 // do something
});

or with older versions, namespacing.

8. Activation hooks

Activation hooks are useful for once-only (and be able to be ported)

9. define( ‘WP_DEBUG’, true)

This will show you issues that wouldn’t come up usually.
Other good debuggers are DebugBot(?).

10. Release your code

It gives you an oppportunity to show your stuff, and even get feedback. Good plugins to look at include WordPress SEO by Yoast, and Advanced Custom Fields.

Optimising WordPress Images

WordPress Northeast event organiser Stephen Jones spoke of many of the issues for image uploads. They are:

  • File sizes: restrict image size (WP Image Size Limit), reduce baseline (Imsanity), or optimise (WP Smush.it). For theme images: use the right image types (easier for devs than users!) and optimise them e.g. with Codekit “the best $25 I ever spent”
  • Getting images at the right size for slideshows etc: can be done with commands (add_image_size—though needs the Regenerate Thumbnails plugin for any changes!) or a plugin (WPThumb which unlike the beleaguered TimThumb, should be secure!)
  • Per device: can be done with media-queries, or the Hammy plugin. Zurb Foundation is also playing in the space for solutions.
  • Delivery method: get it faster with a CDN e.g. CloudFront, MaxCDN; use sprites e.g. SpriteCow (but don’t go overboard on them!). Also think about using Lazyload, icon fonts.

There was an interesting discussion about the WordPress CDN that is available via Jetpack’s Photon: while it has some advantages (particularly if you’re on shared hosting), it is quite slow.

The next event is TBC but will feature Richard Carter talking about responsive theming (and other talks are welcome). In the interim, over at Lancaster they’re holding a WordCamp on July 13-14 2013.

Aaaaaah! The Twitter Jetpack for WordPress plugin doesn’t work anymore!

Earlier today, I got an email from a client. The twitter widget on their site wasn’t working anymore and was just showing ‘twitter does not respond’. At first blush, I thought it was just a standard twitter issue. It’s the Twitter Jetpack for WordPress (namely wordpress.com) plugin, it must work! But when I refreshed the site, I found that there was a message telling me that the widget was depreciated thanks to Twitter retiring its 1.0 API and to switch to the Twitter Timeline Widget.

Image of Depreciated Twitter Jetpack Widget

Do Not Pass Go. Do Not Collect $200.

OK. I remembered those messages about Twitter unrolling a new 1.1 API, and even that it was shutting down the 1.0 API. But I hadn’t thought of the effect it might have on the embeds in sites. Silly me.

So, I set about doing the upgrade….

All twitter embeds now require authorisation

I quickly realised that gone are the days of lackadaisically dropping a twitter feed on your site. As of the 1.1 API, every twitter feed—profile, list, or even search—requires an authorisation of some point, at the very least through an embed from your account, or more trickily through an app connection.

What this means is that if you’re working on a client’s site, you’ll probably require their password, or, if they’re the paranoid type, to at least do the authorisations from the WordPress backend for you.

Jetpack Twitter timeline: the old twitter embed you hated the look of, just as a shortcode

What I found when I attempted to use the Twitter timeline tool was that, rather than the fully customisable tool of past, it was basically a shortcode for a twitter embed. Which you have to create on your twitter account. I couldn’t even get the plugin to work for some reason, but it’s based on height and width rather than number of tweets, and is generally much more like having a Facebook box on your site. Admittedly, there are some styling options, but it’s certainly a lot more limited than it was in the past, particularly if you like to do a lot of CSS customisation.

Twitter Widget Pro: finicky to set up, but worth the effort

After doing some investigation, I came across Twitter Widget Pro. It’s much more like the previous Twitter Jetpack app in that it gives a lot of options for number of tweets, whether you see the follow button and so on. And is fully themable!

The process is a little more involved though. When you install the plugin, you have to create an application on dev.twitter.com (this will be familiar to people who have worked with APIs in the past), add the generated keys to your setting page, and then authorise your twitter account using OAuth.

Happily, I found that the theme naming system used by Twitter Widget Pro was so close to the old Twitter Jetpack widget (or was it the other way around?) that almost all of my custom CSS immediately worked on it, saving me a fair amount of time.

Twitter Widget Pro in use

Twitter Widget Pro in use

Is twitter turning into a walled garden?

I couldn’t help but remember the outcry a couple of years ago when Twitter announced it would stop actively supporting developers through its framework. While I can understand that they need to keep an eye on their database calls and security, it does certainly feel that the days of a freely hackable twitter are further and further away.

Update June 24 2013: I got another email alerting me to the twitter widget not updating. Unfortunately there’s no obvious fix, but the best hack is to show three updates and hide the older two with CSS.

Sparks North East Hackday

Last Saturday, a dozen developers and designers were crazy enough dedicated enough to ignore the blue Toon skies to spend the day in the Ignite Loft playing with transport data at the Sparks NE hack day. Graham Grant of Tyne and Wear transport was also on hand to give out the data and information.

I teamed up with Matt Glover, Alec Berry and Dave Husdon. Together we probably made up 90% of the noise in the room (sorry). We decided to use the parking data to show patterns relating to car parking and made CarToon (thanks Paul Smith for the name).

Having an Icon and Name by build #3 ... that's the awesomeness of 'Team CarToon' #sparksne #notProTip

Alec’s prezi is below:

A timelapse of a day is below:

carToon demo video

We were very happy to get third for our efforts!

In first place equal was Peter Nielsen and Sanjeev Pratinidhi who visualised the quality of segments of road so that residents could be compelled to get change as per Fix My Street; and Alistair McDonald who used the website and Twillio to create a mobile and SMS service for checking carparks.
Joanna Montgomery won an award for visualisation with her graphing of 2011 census data relating to transport use in the area.

All up, some interesting trends came up. Graham noted that a lot of people worked with the parking data—perhaps as it was the most easy to understand—and that for the purpose of a short hack day it’s important to have easy to understand data. Alistair and teams had stories of attempting to wrangle bus datasets only to realise they couldn’t find something! While it was nice to take part in a 12 hour hackday (10am to 10pm), which isn’t as gruelling as an all-weekend one, it does allow less time to mess around with data or make mistakes.

To check out what happened on the day, see the #sparksne twitterstream or the @sparksnortheast account.

And, if in doubt: *always* try the John Dobson carpark.

Refresh Teesside April 2013 and Middlesbrough’s Captain James Cook

I’ve been meaning to get down to Refresh Teesside for a while, partly because it’s always sounded interesting, and partly as an excuse to actually see Middlesbrough. Last Thursday I finally made it.

Middlesbrough

My query about what was worth seeing in Middlebrough got some, er, interesting responses (one included “nothing”). However, I did get pointed towards the Captain Cook Birthplace Museum, which I got to via a rickety train ride. Brits may not realise that Cook is an important name in the Pacific. He was the first person to chart New Zealand (which aside from a few mistakes such as thinking Banks Peninsula was an island is incredibly accurate) and his ship Endeavour is on the New Zealand 50 cent coin. And my father is a Cook Islander, named after … well, you can guess. I hadn’t been aware that he was from Middlebrough.

Old New Zealand 50 cent coins featuring the Endeavour

Old New Zealand 50 cent coins featuring the Endeavour. The newer smaller version does too.

The museum has been recently upgraded with lots of new exhibits. While as a designer there are some bits I’m not entirely sure about, I was intrigued by the Middlesbrough haka, and impressed with their video of differing opinions of Cook across the Pacific (which are usually: impressed by him; hate the diseases he bought; or that someone was going to invade us, better it was the English rather than the French or Spanish).

Refresh Teeside

There was a buzzing atmopshere at Sassari. The free first drink didn’t hurt, of course.

Refresh Teesside April 2013

I got snapped juggling devices.

Vicky Teinaki at Refresh Teesside April 2013

The night was made up of flash talks, with speakers kept to their 5 minutes via dramatic alarms.

  • Adam Parkin debuted as a public speaker with a discussion of his photography practice, and his upcoming photography exhibition for charity.
  • Matt Kirwan discussed the good, bad and ugly of working at home as a developer. It can be a huge timesaver and the lure of flexible work can be motivating, but it can get lonely. More dangerously, you can risk burnout from working too much.
  • Bobby Robertson spoke about the startup inclubator Searchcamp that it about to open in Teessdie.
  • Jay Moussa reflected on her work as a filmmaker: is a music video she was paid to do, doesn’t like but got some traction in the media classify as being more successful than one she didn’t get paid for but had complete creative control?
  • Finally Paul Smith shared how his startup Appysnap started, failed, and is now rising from the ashes based on what his team learned. He stressed that press is a bad thing when you have a minimum viable product, to test and release, and to above all GIFRO:

For more on the talks, check out the storify of the night.

 

 

Making The Fastcodesign Title Generator ‘The Co.designinator’

Like many people, I couldn’t help but get annoyed at those “what X can teach you about Y” blog posts in the design and UX industry. While quite a few of them do it, in my eyes the worst offender was Fast Company’s CoDesign.

I’ve also been a fan of how Jessica Hische quickly knocks up websites whenever she has a message she wants to get across e.g. http://shouldiworkforfree.com and http://quotesandaccents.com. So, in a post-supervision meeting lull (at Northumbria we meet with our supervisors every two weeks, for me it’s a Tuesday), I decided to embrace what she calls ‘procrasti-working’ and make a Fastcodesign-style “What X can teach us about Y” generator.

Lean Validation, right?

Basic research

Of course, the first thing I did was googled. To my relief (and suprise), no one had done it yet. There were other generators in a similar vein though. My favourite is the Daily-Mail-oMatic which creates Daily Mail scaremongering titles.

The comments on the Greasemonkey script for that generator are also the funniest thing I’d seen on the internet for ages (though admittedly hilarity does circle around the Daily Mail like vultures to carrion).

Greasemonkey Script for Daily Mail o Matic

Greasemonkey Script for Daily Mail o Matic

The main other one of interest was the UX job generator, but I wasn’t so keen on showing all the options in this instance.

Setting it up

While the Dailymail-o-matic has a script that I could use, I decided to go with PHP, partly to avoid client side load, and mainly in case the javascript conflicted with any other scripts.

The text

I decided that truth was stranger than fiction, and that I should start with the existing articles. There were 27 that came up on the search (and another one that got added when I had already done it.

For the purists, here they are:

  1. 5 Things Toddlers Can Teach You About Marketing
  2. What Astronauts And Toddlers Can Teach You About Consumers
  3. What Film Crews Can Teach You About Running A Business
  4. What Fashion Can Teach You About Innovation
  5. What Smart Politicians Can Teach You About Crafting A Message
  6. What The Red Baron Can Teach You About Hiring Creative Talent
  7. 4 Things That Ninth-Graders Can Teach You About Risk-Taking Design
  8. What “Jack And The Beanstalk” Can Teach You About Pitching Clients
  9. What The Wacky Sport Of Chessboxing Teaches You About Creativity
  10. What A Toaster Teaches You About The Future Of User Interfaces
  11. What The 3 Stages Of Love Teach You About Crafting Great Experiences
  12. The Jawbone UP Fails, But Teaches 3 Golden Rules For Experience Design
  13. What Google’s Cafeterias Can Teach Us About School Lunches
  14. What Any Parent Can Teach A CMO
  15. What Bluegrass Musicians Can Teach Business About Innovation
  16. What the Atlanta Beltline Can Teach Us About Urban Revitalisation
  17. What Wayne Gretzky Can Teach Us About Fixing Our Health-Care System
  18. What Oompa Loompas Can Teach Us About Color
  19. Eight Things Stand-Up Comedy Teaches Us About Innovation
  20. What Starbucks Taught Us About Redesigning College Campuses
  21. Method: 4 Things Video Games Teach Us About Motivating People
  22. 3 Things Wile E. Coyote Teaches Us About Creative Intelligence
  23. Five Things IDEO Taught The Feds About Design Thinking
  24. What Designing The New Girl Scouts Innovation Badges Taught Us About Raising Leaders
  25. Five Things Hollywood Teaches Us About Product Design
  26. What “Jack And The Beanstalk” Can Teach You About Pitching Clients
  27. What Schools Can Learn From Google, IDEO, and Pixar
  28. What Digital Designers Can Learn From A Master Motorcycle Builder
  29. What Gandhi (Yes, Gandhi) Taught Me About Design, Leadership, And Technology

So, now, what to do with them?

Just getting it to work

I’d messed around with side projects like this before (like a Kiwi Generator—which probably should have been on Tumblr—which got no traffic so I abandoned). Still, as I didn’t know how this was going to work I wanted to keep it as light as possible. Given I’d have to do matching up of two variables, a CMS like WordPress or Drupal seemed too onerous. So, I decided to hardcode it on vickyteinaki.com/codesigninator.

HTML Theming

I’d recently done a hard-coded responsive site so started from the Initializer HTML Boilerplate (though this time used Bootstrap to begin). The actual Co.Design site has a very specific look. While I’m not attempting to replicate the site, I did bring over:

  • the large images that crop at larger sizes,
  • the striped background
  • an open-source approximation of the slab serif headlines with the Google Font Josefin Slab

Good front-end developer, crappy back-end developer

While I’d done pretty well up to this point, when it came to the PHP, I realised something … I’m a pretty crap PHP developer. While I’m happy working with the frameworks in WordPress and Drupal, they have established frameworks to work within. Going from nothing was an entirely different matter.

After making the HTML accept PHP, I created a set of arrays to pull information from.

Each level of the array holds the following data:

  • What random thing will be inspiration e.g. “5 Things Toddlers”
  • The subject e.g. “Marketing
  • The URL of a related article
  • The title of the original article (in some cases I’d had to change the wording to make it fit the “X Can Teach You About Y” format
  • The image URL (I sourced and cropped them)
  • The image Creative Commons (CC) details from Flickr where necessary (as a former editor I’m careful about using images legally)

Once I had the array sorted (it took a bit of checking to remember how array keys worked, I had an array:

$fastco = array(
    array(
        "first" => "5 Things Toddlers", 
        "second" => "Marketing " , 
        "reference" => "http://www.fastcodesign.com/1670565/5-things-toddlers-can-teach-you-about-marketing", 
        "original" => "5 Things Toddlers Can Teach You About Marketing", 
        "image" => "img/toddler.jpg", 
        "imagecredit" => 
        "Image NC-BY-CC by <a href='http://www.flickr.com/photos/mikebaird/2257231978/sizes/o/in/photostream/'>Mike Bard</a>"),
…
    array("first" => "What Astronauts And Toddlers", 
        "second" => "Consumers", 
        "reference" => "http://www.fastcodesign.com/1671100/what-astronauts-and-toddlers-can-teach-you-about-consumers", 
        "original" => "What Astronauts And Toddlers Can Teach You About Consumers", 
        "image" => "img/astronaut.jpg", 
        "imagecredit" => "Image NC-BY-CC by <a href='http://www.flickr.com/photos/dolmansaxlil/4815003971/sizes/o/in/photostream/'>dolmansaxlil</a>")
);

etc etc.

Using two variables, I then set up random generators for every page refresh. (For those who are curious, there are if conditions for the related articles based on whether the story is an actual headline, a composite, or completely made up).

Ready to Launch

I added a specialist javascript function to make the button reload the page, but apart from that, after about 8 hours of work the title generator was ready to go!

Top Gun Generator

Top Gun Generator. Also, all the clicks before I lost them by moving the domain.

Addendum: Going (semi)viral

On the Wednesday, having got most of it working, I shared it amongst a private group on Facebook (who picked up one bug) and on Twitter. Not much happened. After spending a couple more hours fixing up the bugs and adding a few fake profiles on Friday, I then tweeted about it again on early Friday afternoon UK time.

Then it took off.

https://twitter.com/enquiringdesign/status/322677700517060608

I do have a suspicion that I hit the best time to publicise a semi-snarky joke site, as UK people got it at lunch while US people saw it at the start of their Friday workday. Certainly it was fun at the end of the day to see over 500 people had viewed the site. While I know that’s nothing for a number of tech people, for me it’s huge.

Next stages

I’ve already begun moving the site to its own domain (partly as it doesn’t come up on google for any useful search terms at the minute) and will keep adding extra entries. At some point if I have too many entries to easily managed I may dip my feet into moving the arrays into a database
proper.

I’m also moving the site to its own domain (I had it on my own site mostly as I couldn’t think of a good name, but thanks to Louise Taylor’s suggestion of Fauxcodesign, it’ll now live at http://fauxcodesign.com. Though I’ve now lost all my clicks from the share bar. Social media fail.)

I’d like to point out that this wasn’t a massive project. I’ve probably spent about 12 hours on it (or about a day and a half) actually working on it, and then a bit of time getting distracted by the social media. If I knew more about plain PHP it would have probably been a bit faster.

If anyone has suggestions as to what I should do with it next, please let me know.

(Oh, and if anyone at Fastcodesign does read this, imitation is the highest form of flattery, right? Please don’t send me a takedown notice!)

EDIT JUNE 2013: Nothing like tweaking away at a site! I decided to create permalinks for the posts so that it was possible to share specific combinations (at present there are over 1100 of them and counting). This required setting a $_GET PHP post. As the values were being calculated using PHP variable anyway, that was a fairly easy task to accomplish after investigating Stack Overflow:

$url = $_SERVER['QUERY_STRING'];
$query = array();
parse_str( $url, $query );
$preset = FALSE; /*Used for testing whether there are variables, to be used for title and meta tags */

if (array_key_exists('first', $query)) {
$preset = TRUE; /*Pre-set from URL*/
$random1 = $query['first'];
} else {
$random1 = floor(rand(0,count($fastco)-1));
};
if (array_key_exists('second', $query)) {
$random2 =  $query['second'];
} else {
$random2 = floor(rand(0,count($fastco)-1)); 
}

I could have had the option of pulling in the actual variables e.g. “Tony Soprano” and “Schools” but decided (for better or for worse) that it was more interesting to keep the variable out of the URL so it wasn’t obvious.

The one thing I noticed attempting to share the site on different media was that the title and description tags (which come up on FB links) were generic, which wasn’t of much use. So I also amended the header tags to show the specific results should it be coming from a prepended URL.

<title><?php if ($preset==TRUE){ echo $fastco[$random1]["first"] . " Can Teach Us About " . $fastco[$random2]["second"] . " | " ;}?> The Co.DESIGNinator | Make your own Co.DESIGN titles</title>
<meta name="description"content="
<?php if ($preset==TRUE){ echo $fastco[$random2]["second"] . " is hard. That's why you should be inspired by " . $fastco[$random1]["first"] . " can teach you.";
} else { 
echo "Uninspired for a design or business blog post? Try the Fastcodesign title generator, for an easy 'What X can teach us about Y'. (Though occasionally the articles might already exist).";}?>">

Moving from Drupal to WordPress

This website began as a blog. And probably a badly made one as well. Hey, it was 2008, and I was trying to get my head around Drupal 6! Since then, I’ve moved half-way across the world, become a better Drupal and WordPress developer, and generally got into the habit of blogging a lot more.

Which is why it was time to move away from blogging on Drupal. After some consideration, I decided to migrate from Drupal to WordPress.

Why the Move?

Drupal is great for many things. Blogging isn’t one of them. I got sick of the extra time it took to upload images (WSYWIG and IMCE, sigh) and the horrible options for formatting in general. Ever since I’d been using WordPress as part of Johnny Holland, I’d been jealous. The final straw was setting up another domain on WP and live-blogging an event on it as the thought of doing it in Drupal terrified me.

Why WordPress?

There are a lot of options out there these days for writing. A lot of devs like file based systems such as Jekyll and Octopress. However, for me, the importance was ease of writing and adding media. WordPress is obviously streets ahead in this respect. While I’m really getting into Markdown, I can do without it for now as a payoff for easy media integration.

Migrating from Drupal to WordPress

A few points on the setup. I’m on Drupal 7 and migrating to WordPress 3.6.

Content

Not surprisingly, there’s a lot of ways to move content from WordPress to Drupal, but not much the other way around. After getting freaked out reading a number of posts which involved editing databases, I realised the easiest option was just to suck in the content on RSS.

I created a RSS file using the Feed view on Drupal. I then used the Multi-importer to link this to a post.

Note: in hindsight, I’d try to download the file, run bulk changes on image locations etc, and then upload it using the importer.

Images 

Images involved a bit of cleaning up on the Drupal server, as imagecache created multiple versions. To play it safe, I copied all the original size files into one folder which I then moved into WordPress. I then used the Add from Server plugin to make them all be picked up in the Media Library.

But there’s a problem! Of course, the old images have the wrong links. I went into PHPMyAdmin and search replaced all old links.

SEO

As this was a slow transition, I moved the blog site from a folder to a subdomain. Once the site was working I used .htaccess redirects to match all old urls with the new ones (the mapping is pretty close anyhow).

Comments

I’d got annoyed with spam a while back on the Drupal blog so had already moved my comments to Disqus. Luckily, there are fairly easy ways to migrate the content over. Once I installed the Disqus plugin, it was a matter of choosing the best means to migrate. As my top level mapping system had changed slightly (from http://vickyteinaki.com/blog to http://blog.vickyteinaki.com), I could use auto-mapping, but as I’d attempted to map all old URLs to new ones, I could use the option of letting Disqus sniff out the 301 redirects.

Gotchas

URL mapping

I assumed that my simple naming system would mean that the URLs would easily map. I didn’t account for one thing. Drupal’s auto-naming URL system strips out a number of small words (‘the’, ‘of’), which WordPress leaves in. This unfortunately meant that I had to go through all of the posts and check for changes. I suspect that for a large amount of posts you would just have to do bulk changes or accept a drop in SEO.

Cleaning up the WSYWIG cruft

The only real disadvantage of pulling from RSS is that you get all the formatting that comes with it. For me that was the original Disqus scripts, and numerous divs from the original feed (though this probably could have been avoided if I checked my Drupal templates).

Linking it all Back

My original all-in-Drupal site included the latest blog posts on the home page as a View. How to do that now? Again, RSS. The Drupal 7 core Aggregator module includes a block for showing feeds (though I had to add a template extra, and suspect I’ll need to make a new view so as not to end up with content duplication/SEO issues).

Theming With WordPress Multisite

I was recently asked to do some WordPress development on a set of two sub-sites that would nest under a main site. It seemed like a good chance to try out WordPress multi-site. However, as per everything, there are gotchas that you find out when actually implementing a new feature.

Why use Multisite?

There are a lot of good reasons why not to use WordPress Multisite, mainly if the functionality is going to change a lot between sites, or there aren’t many common users. However, these sites were a good opportunity to do it: shared domain (though you can map to different domains if need be), a custom theme that would only change in colours any minor imagery between the sites (though this wasn’t quite as simple as I assumed), and a combination of people working on only one site, or needing access across the board.

Range of sites

 

Setting it all up

The Multisite installation is well documented and relatively painless (once you’ve enabled wp-config.php to allow for multisite, you can even make new sites from the WordPress Dashboard!) . The main difference is that when logging in, you become the Super Administrator able to switch between sites and able to activate plugins and themes (see below).

Multisite

However, there are some annoying quirks of the system probably stemming from the functionality originally being a plug-in.

Uploads don’t Share Across Sites

This is probably to be expected, but I mention it anyway. While it does mean in some cases you may have to upload a media asset several times, it also means that administrators on each site can delete files without fear of it breaking one of the other sites.

Custom Upload Paths? Er, No.

I was ecstatic when I found out earlier this year how to get uploads out of that obviously ‘made with wordpress’ wp-content file folder. (Yes, I get excited about strange things). However, if you try and do anything like this with Multisite, you’ll just end up with errors, as far as I can tell. (The files will save, but the media library won’t accept them). So, you’re stuck with paths looking like /wp-content/uploads/site-1/IMAGE.JPG. It’s not ideal for people who’d rather play down the WP aspect or try and safeguard file hacking by moving the folders out of the obvious places, but I guess that this is one of the teething issues for a website becoming a CMS.

Mapping Sub-sites: All Or Nothing

Similarly, the WP folder rewrites are pernickety. As far as I can tell, you can’t have a non-Wordpress top level along with non-WP subfolders.
I was hoping to have the multisite work as subdomains, but couldn’t due to hosting constraints. So, it came down to using subfolders. They actually work reasonably well (you just need to set them in network settings). However, my original plan to have two subfolder sites and a top level static page were quickly scuttled. In short: if you want a top level site and subfolder ones, make them all run as WP sites, even if the top level one is a single page.

The multi-site setup

Plugins and Themes Don’t Have to Be Network Activated to Be Available

Another weird thing to get your head around is the Network Activation settings. From what I can see, Multisite strips administrators of individual sites of the ability to add themes and plugins. However, from the Sites Settings as a super-administrator, you can allow these to be specifically available to a site. This is different from Network activate which makes a plugin/theme available to all sites.
Another interesting point is that you don’t have to activate a parent theme when you activate a child one (useful if you’re worried about people messing with the parent theme and causing all end of trouble).

Themes and Plugins

Theming

Child Theme or Roll Your Own?

In the past, I was inclined to use my own defaults when it came to theming. However, now, I’m more inclined to use child themes, particularly when it comes to WordPress. This is because WordPress changes incredibly quickly, so I assume that their themes should be more likely to make the most of new developments. (Also, to be honest, WordPress has always had great themes, far more so than Drupal, which could often be overkill).

Cancelling things out in functions.php

However, there are some gotchas involved with using these themes. One of the nefarious ones I noticed was the “powered by wordpress” footer appearing as an overlay on the page. These things are easily rectified in functions.php however.

No Grandchildren Allowed

Unfortunately, you can’t have a child theme of a child theme (which you can do in Drupal and is incredibly useful). So, if you want ways to get around this, you have one of three options:

  1. Duplicate themes and activate for each site only. This would be the most painless way, but obviously involves duplication, particularly if you’re making global changes to how the theme appears on both sites.
  2. Use the theme options for each site. To be honest, this is probably the official WordPress way, but I would rather not do it, as it means that your admins can change the colours (thanks to another annoying WP default, anyone who you need permission to be able to change widgets also gets permission to change themes and theme options). In this situation the sites were also highly designed down to the colours, so it made sense to be able to hard code the options.
  3. Use body classes to target specific sites. I preferred the idea in this case of being able to target different sites with CSS overrides and thereby use the single theme as a master theme. However, perhaps unsurprisingly, there is nothing in the body tags that lets you target a specific site on a multi-install. I ended up adding in a class through functions.php. function add_slug_body_class( $classes ) {
    global $post;
    if ( isset( $post ) ) {
    $classes[] = $post->post_type . ‘-’ . $post->post_name;
    }
    return $classes;
    }
    add_filter( ‘body_class’, ‘add_slug_body_class’ );

On hindsight, I’d probably change this to be ‘site-1′ etc as this is less likely to change than the site title (which is what I hacked it from at present).

Other thoughts

The risk of editing themes and other administrator power. As I mentioned earlier, it’s irritating that by default editing widgets also means that you can edit the theme. However, I’ve been helped out by an unexpected benefit: the hosting we use has strict settings when it comes to editing files on the server in that it has to be manually unlocked.

All up, it is pretty cool to see a single theme used in different ways on a multi-install site. And it’s handy to be able to tell clients that they can delete whatever they want on their subsite without worry of ruining everyone else’s. Still, I think it still is early days in regards to WordPress Multisite, and would be happy to see them both improve their upload file system, and allow grandchild themes.

Python Northeast: The Scientist-Programmer

In a new location at Clavering House (and in a weird scheduling quirk, on at the same time as the iPhone group—I walked into the wrong room before realising I’d misheard “iPhone” for “Python”!), this month’s Python North East went boldly where no meetup has gone before … the Python Song!

OK, this was in the leadup as there was a delay, but it cannot be unheard. (The lyrics are pretty clever though). There was also heated discussion as to whether MongoDB is a good framework to use (arguments against included that it doesn’t scale well and fails silently: “it’s good for messing around, but for proper stuff it is a pain”, and better frameworks exist for big projects such as Cassandra, Elastase Search or Solar/Sphinx).

No, this month’s meetup showed how coding can be used in the hard sciences, in this case, modeling neutron diffraction (not quite reversing the polarity but pretty close!). Talking to us about how python and particularly NumPy can help do this was Rowan Hargreaves.

Hargreaves is part of the ISIS project (not named after the river, but the Egyptian goddess, as they bring together various bits, as the goddess did when her husband was chopped into pieces by another god). Using enough electricity to power a medium sized town, the project in an impressive structure with massive chutes to allow experiments with splitting deuterium (heavily oxidised water) into particles. His work is involves a two way process of doing experiments, attempting to model the behaviour of the diffraction (how the particles bounce off), testing it and continuing the refining of the model. Each cycle can take six months, so this isn’t your high school science! (For the record, he also recommends Python Scripting for Computational Science as a good primer for his type of work.)

This is where NumPy comes in. When you’re doing hugely complex equations, time (and memory) savings are key. Hargreaves noticed huge improvements in speed with his modelling when using the framework, as noted by NASA and replicated below..

Packages/Compilers Elapsed Time (s)
Python 48.55
NumPy 0.96
Matlab 2.398
gfortran 0.540
gfortran with -O3 0.280
ifort 0.276
ifort with -O3 0.2600
Java 12.5518

Various processing speeds of programming languages, taken from NASA

Sure, Pascal and Fortran are faster … but then you have to write Pascal or Fortran.

He also gave a number of basic demos to show how it works.

Rowan Hargreaves giving a demo

He has noticed a few random quirks and inconsistencies (e.g. how you name things in one function may have to be different in another) but all in all has found it useful. He can also use it to pass in some of his boss’s FORTRAN data (yes, some people stick to what they were taught) or conversely, pass his data through to the nicer visual modellers around.

He also made some interesting points about science and coding. He had a great quote about scientist doing computing only ever experimenting with it (my Google-fu has failed to bring up the source, sadly). [EDIT: thanks Rowan for clearing this up, the quote is:

“In scientific computing, we typically don’t know what we’re doing.” —Fernando Pérez (founder of iPython)]

However, there is a more serious aspect of this: there’s no real reason for people in academia to investigate coding in any depth, let alone make any contributions in this respect, as it’s not recognised as valid contributions to research (or in English HE terms “contributing to the REF”). I’d point to the most startling example of this as the person who created the popular open source bibliographic software Zotero being denied tenure as he had not created enough ‘research outputs’.

On a happier note, this talk was a reminder of how much bleed there is between disciplines when it comes to coding. You might be a web designer, journalist, artist, or in this instance scientist-programmer, in all instances, coding has some use.

[UPDATE March 2013]

Data Community DC has put together a blog post on being a data scientist with Python that is well worth looking at (as is the related Hacker News Discussion).

Booting Up With Bootstrap

As one of my research projects (soon to be revealed), I’ve been considering how best to decide on a design aesthetic. Here are the interesting points to consider when designing an object in relation to research:

  • It needs to be designed enough to do the job. (I don’t believe that any of the default frameworks, be it WordPress’s Twenty Twelve, Drupal’s Garland or Bartik, or the Django default template really achieve this, particularly as for those in the know they anchor them to a delivery system).
  • Conversely, you don’t want to design it too much (it’s not the thing being measured!). And pragmatically, time spent working on the design is time taken away from actually doing work on the site.
  • It helps if it signifies a work in progress somewhat.

A good comparison to this is Tony Dunne’s Hertzian Tales projects. At least one academic how knows his work pointed out how the crazier elements are wrapped in an IKEA aesthetic (e.g. the table for the dreaming navigation), thus making it easy to tell what it designed and what it merely placeholder design.

With this in mind, I believe that Bootstrap (formerly Twitter Bootstrap) is a good means of achieving this balance.

Why Bootstrap? As a fully fledged framework, it’s well resolved to be nice enough to use. I used to use 960gs for a similar reason, but found that it was too bare bones at times to be useful (and thus a pain to deploy!)

The popularity of the framework is highlighted by a tumblr dedicated to sites using it. While there have been a number of posts feeling that it has become overused (and noting alternatives), others still believe it is useful (and that the sameness is merely from people not configuring the CSS, or using themes that do it for them).

However, the interesting thing is that for a site intended to not be judged on its aesthetic, that samey-ness can actually be very useful, as it says “hey, I’m using a common but platform agnostic way of showing my work.”