AntiguaPlaza.com website development

Over the past month or so I have been redeveloping the website for a small Spanish school in the city of Antigua, Guatemala – Antigua Plaza. I’ve known Ana the owner since the first time I visited Antigua four years ago, and while my wife and I were back in town Ana expressed her interest in having her site turned back into a WordPress site, where things would be easier for her to keep updated. I was only too happy to oblige & got to work taking her existing site content & massaging it into a WordPress theme (Ribosome) that suited well.

I’m super happy with result, and Ana loves the ease with which she can log in & make simple changes. Smiles all ’round!

Theme:

Ribosome – with a few CSS & JS tweaks. This is my first time using this theme, and it’s come out OK. I didn’t like the default colours that came with it, so did some CSS tweaking to overcome that. This is probably something that the pro version offers, but for first time usage I went with what I knew. It’s a pretty simple classic theme, header, body,  sidebar & footer but was pretty easy to customize & I had minimal work to do to make the site look nice (apart from the horrible default colours).

Plugins used:
  • Jetpack – I always use tons of goodies from Jetpack, including the CSS editor. I also link the site to my WordPress.com account for remote management
  • Easy Pricing Tables Lite – To display the pricing tables on the Prices page & in the sidebar on some pages. My first time using this one, but it seems pretty good & was definitely easy.
  • Easy Testimonials – Another first time plugin for me here. Basic custom post type addition going on here. Seems to be done well.
  • Google Maps Widget – I purchased a licence for this since it seems to be something I use on virtually all websites I make. Full featured, pretty easy to get the hang of. I think this is going to be money well spent.
  • Instagram Feed – Another great full featured plugin that I seem to be using a lot. Even without the Pro version, this thing seems to be extremely customizable. Will keep using
  • Meta Slider – Have used this for basic sliders a couple of times now & it is the best I’ve seen so far. A lot of similar plugins introduce a lot of flaky JS, but this one seems pretty solid. Usually needs some CSS tweaks, but it’s solid.
  • Custom CSS and Javascript – I like this super simple plugin for doing some basic page load operations, especially when I’m using an out of the box theme. It can be used to do anything you want in JS, but I seem to use it most for changing some simple content on page load, such as footer text, without having to go to the effort of creating a child theme, which is time consuming.
  • Yoast SEO – For all your SEO needs – I like the traffic light system.
  • User Switching – Not a user facing plugin, but good for admins to test how other users see the admin panel of a site. eg What does an ‘Editor’ see when they’re logged in. Simply go to the Users page & click ‘Switch To’ to see things from their perspective. I use it for all my client sites.

 

NHL.com redesign – First thoughts

Fresh off the All-star break and all of the feel-bad-then-good John Scott stories that came with it, I went searching for my next NHL fix. What game am I going to watch when the regular season continues tomorrow?

Low and behold, it looks like the NHL have been hard at work over the weekend to switch over to a brand new site today. So, here’s my thought timeline for my initial usage of the new site, remember, I’m a QA Analyst by day, and a UX enthusiast and hockey fan in my spare time all the time.

  1. Looks great!

    Things are clear, I like the predominant white color as opposed to the old black. The menu items are clearer. The current/upcoming games are highly visible. Gone are the seldom used team page links. All looks good so far!

  2. Am I logged in?

    Am I logged in?
    Much easier to fiind than before. But am I logged in?

    The account link is much easier to find, and it looks like me 🙂 But am I logged in? Hovering over it doesn’t do anything.

  3. I’d better log in

    I click the link and get taken to the login page, so I must not have been logged in, fair enough. On first load of the login page, the login button stayed disabled, so filling in my details and trying to click login doesn’t do anything. Hmmmm.
    I refresh and it’s good this time. I log in no problems now

  4. How do I go back?

    So now that I’ve logged in, I’m at my account profile page. Cool. I update my favourite teams which I didn’t know I hadn’t set and save that. Now what? How do I go back to NHL.com?

    How do I go back?
    How do I go back to NHL.com?


    There’s no link. That giant banner at the top? Not a link.

  5. OK, I’ll go back manually

    I throw the cursor up into the old address bar at hack away at it. Changing it from:

    https://account.nhl.com/ui/AccountProfile?lang=en

    to:

    https://nhl.com

     

    Should be good, right? Wrong

    https://NHL.com without the www
    Oops

    Apparently it has to be https://www.nhl.com, otherwise I don’t get anywhere

  6. OK, so now I’m back

    www.nhl.com gets me where I wanted, so now I’m back where I was before. But…. Am I logged in?

    Am I logged in?
    Much easier to fiind than before. But am I logged in?
  7. Am I logged in? (Part II)

    Once again, hovering over my account friend doesn’t tell me anything about whether or not I’m logged in. I click on his little head and….

  8. Return to step 4!

 

So… In summary I like the look of the new site, but it seems they have a bit of UX work to do over at NHL.com.

What have your experiences been like with the new site? Like it? Hate it? Somewhere in the middle? Tweet at me and let me know

 

Breaking things down

Daunted by the prospect of many projects sitting incomplete, I’ve found myself lately being pulled in a number of directions. My own personal website, a client project, WordPress plugins & themes that will be used on a number of client projects – although not immediately, helping my wife with our new business venture, and a number of personal hobby projects of mine, it’s safe to say that I’ve had a lot on my plate. All over this is on top of my regular day job!

In order to get anything done, I’ve been taking a new approach to my free time. Using lessons learned as part of the agile environment I work in day to day, I’ve been breaking things down into small manageable pieces. Really small. Once done, this has enabled me to start working on a really small task, and get it done quickly, building momentum in getting things done. For a long time I’ve known that I need to update and fix a few things on this here website. But what did that mean? ‘Fix website’ sitting in the back of my mind always felt like a behemoth task. I needed to break it down.

Trello has been a valuable tool for me. I generally have 4 lists for each project - Rejected ideas, Ideas, In Progress  & Done
Trello has been a valuable tool for me. I generally have 4 lists for each project – Rejected ideas, Ideas, In Progress & Done

When I sat down to think about it, analysed what it was that I liked and didn’t like about my site, it really just came down to a few things. Update some content here, fix some styling there, remove a page here, add a different menu over there and there. When broken down into small, well defined tasks, somethings could be knocked out of the park in under 5 minutes. Two days, and maybe 2 or 3 hours of actual work later, I had managed to ‘fix’ my site like I’d been thinking about for months.

The takeaway here is that taking 5-10 minutes per project to gather your thoughts and keep track of what you want to get done in the near future can be an invaluable exercise. Doing it often, at least weekly for each project, can be enough to keep you motivated and getting things checked off the list quickly. When you know that you can get 3 items cleared of your list in under an hour, it’s easy to jump right in and do it, creating momentum for more and more tasks to get done.

I’ve been using Trello to keep track of my tasks, but any system old or new can be used, the important part is taking the time to think about how your big scary projects can be broken down into manageable tasks. If you’ve been weighed down by the daunting prospect of having so much to get done, give it a shot and watch your productivity sky rocket as a result.

Centering a full screen background image with CSS

Something I’ve found myself doing a lot of lately is creating websites where I want a single image as the entire page background. All of the page content sits on top, and the image never moves, no matter how much content scrolls down the page. I need it to be responsive and always stay centered, no matter what size screen or type of device the site is being viewed on. It’s also important the the image doesn’t distort. Often the background has an opacity less than 1 to some degree, maybe depending on what the image is and how the content fits with it.

As it turns out, this was something that I found pretty difficult to get right, and not many working examples of it came up in my googling. An example of the end product can be seen at family.weavercrawford.com, and I’ve since used this method on Breagh.ca also.

All we need is a background div at the start of the body content, with a little magic CSS

<html>
    <head></head>
    <body>
        <div id="background-div"></div>
        <div id="content">
            ...
        </div>
    </body>
</html>
#background-div {
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-image: url(http://family.weavercrawford.com/wp-content/uploads/2014/10/AlexStevePrint-52.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 100%;
    opacity: 0.7;
}

Obviously, alter the image URL & opacity to suite your site!

Using the AUSteve-Gallery-preview plugin

To create a new Media Category for a project

  • Go to Media -> Media Categories
  • Use whatever name you like
  • Set a slug that makes sense, lower case letters and hyphens only
  • Add it to a parent category if applicable

To upload images for a project

  • Go to Media -> Library -> Add New
  • Select your image files (jpg, png or gif)
  • One-by-one click on each new image after it’s been uploaded
    • Set the media category by ticking the appropriate box (more than one can be selected)
    • Set relevant names, captions & alternative text for your images to help with search engine optimization (SEO), to get your site up the Google rankings
  • You can filter your media library by category to ensure all images have been put in the right category

To create a new project page

  • Go to Pages -> Add New
  • Give your page a title – the title of your project
  • Set the Parent page
  • Leave the template as ‘Default’
  • Set whatever content you like, you can use html tags for emphasis and layout if you know what you are doing in the Text (HTML) view, otherwise use the Visual view
  • To include the gallery for your project paste the following into the page, and update the slug to match your project
  • Save your changes and view the page using the ‘View page’ button towards the top of the screen

To add your project page to the parent page

  • This is done by modifying the sidebar specific to your parent page, you’ll need these values before proceeding
    • Check which sidebar to modify by opening up the parent page editor and checking which template is being used (Pages -> the parent page)
    • Find the URL of the image you want to use as a preview image by opening the image in your media library (Media -> Library)
    • Get the URL of your project page (Pages -> project page -> View page, then  copy the whole URL)
  • Once you know the above, go to Appearance -> Widgets
  • Drag the ‘AUSteve Gallery Widget’ from the list of available widgets onto the sidebar of choice
  • Once in the sidebar, edit the Title to reflect your project title.
  • Paste the URL of one of your project images into the Preview image field.
  • Paste the URL of your project page into the ‘Link URL’ field
  • Enter the text that you want to appear on the preview button in the ‘Link wording’ field
    • Generally, this should be the same for all of your sidebar widgets
  • Save each widget added

Displaying images using the AUSteve-Image-Gallery plugin

The austeve-image-gallery plugin is a custom made WordPress plugin I use on all of my portfolio type websites. I have taken special care in ensuring that the plugin is simple to use, but flexible enough to be used on any number of sites.

Prerequisite: The ‘Enhanced Media Library‘ plugin by wpUXsolutions is a prerequisite, in order to set up media categories in wordpress. Technically you could set these up yourself, or use a different plugin to do it, but this is my chosen prerequisite to support

Setting up your categories

Generally you will want one category for each project in your portfolio. Each category is defined by a unique ‘slug‘, which should be a simple descriptive word or abbreviation for the project.

Go to ‘Media Categories’, under the ‘Media’ menu

Accessing the Media Categories menu
Accessing the Media Categories menu

Add as many new categories as you like

Adding a new Category
Adding a new Category

  • The slug for each category must be unique, and contain no spaces. Recommended: Use a dash ‘-‘ to seperate words if necessary
  • Parent categories are not necessary, but may help keep your media files more organised. Set up parent categories first if you intend to use them
  • The name and description can be whatever you like, but should be descriptive and relevant

Adding your images

  • Go back to the Media page and click ‘Add New’
  • Select all of your image files or drag & drop them into the upload area
  • Once the uploads have completed, click to open each media file and select the Category that it belongs to
  • You can also set a title, caption, description and alternative test for each image

Inserting a gallery into a page or post

Once all of your images have been uploaded it’s time to make this gallery visible to the world by including it in a page or post of your website. Open up the editor for your chosen page, or create a new one, and the rest is simple.

  • Go to the ‘Text’ editor, rather than the ‘Visual’ one – look in the top right corner of the WordPress page editor
  • Use a WordPress shortcode that tells the plugin which category of images to include in this gallery. This is where the slug that we set for each category gets used. Make sure you use the exact format below, copy/paste for best results:

That’s it! Preview first to check that everything is working, and then Save/Publish the page or post

Any new images add to the category will automatically get included in any pages that reference the corresponding slug

Coming soon – Domain registration!

I’m excited to announce that pretty soon I will be set up as a domain name reseller! This will ease the process for setting up brand new clients, as they will be able to purchase their domain through me, and I will then be able to easily configure DNS settings to point to their new website.

Until now, this has been a hurdle when setting up new clients, as I’ve had to guide them through the process of how to do this on whatever domain name reseller website they may have decided to purchase through.

Note to self: Update the styling of the store to match my own website a little better!

Starter WordPress theme development including ZURB Foundation

I was happy to come across a tweet from @WPwatercooler the other day announcing a new starter theme produced by Zeek Interactive that incorporates ZURB Foundation. This is something that I’ve thought would be interesting to do, but I haven’t gotten around to trying to do it myself. I have only ever dealt with child themes, but have known for a while that to make things the way I want, full blown theme development is what I need. With ‘Heisenberg’, I now see a clear way to getting me started on my own themes.

To get going, start by following the directions laid out by Zeek in their introductory post about Heisenberg:

  • Ensure you have Node.js, Sass, bower and gulp installed.
  • Clone the heisenberg starter theme from github
  • Rename the parent directory to whatever your theme is called
  • Change references to ‘heisenberg’ in the gulpfile.js
  • Change all other references to heisenberg throughout the project, as outlined on the _s project (Heisenberg is based on _s, pronounced ‘underscores’)
  • Install all bower components (using bower)
  • Install required packages (using npm)

All of this has been neatly packed into a simple script which can be run with one argument – the name of your new theme.

 

Compiling the CSS

Compiling the Sass into CSS gave me an error out of the box

[22:48:21] gulp-ruby-sass stderr: OptionParser::InvalidOption: invalid option: --sourcemap=file Use --trace for backtrace.

To get around this I had to add the sourcemap parameter to the call to the sass library in my the styles task. It now reads as:

return sass('assets/sass/', {
  style: 'expanded',
  lineNumbers: true,
  container: 'stevetheme',
  sourcemap: true
})

After this addition, simply running gulp, or gulp styles compiles my Sass into CSS

Summary

Overall, this was a fairly simple and straightforward process, it only took me a couple of hours to get my head around things and iron out a few minor problems. I can see myself using this process from all of my themes, which has me pretty excited. Child themes can be simple, but inevitably need a fair bit of customization. When you have no control over the parent theme it just feels wrong to do this though. Full marks to Zeek for putting this starter theme together, I can’t wait to get my WordPress sites all Foundation-y

Oh, and stay tuned for AustralianSteve.com changing to a new theme shortly!

SeeThisSpot – March update (I love Node.js)

A couple of weeks after starting my remake of SeeThisSpot.com, and I think I can say that I’m so so so happy that I’ve done it, and am really excited about how it’s going to turn out.

The original see this spot was written in PHP, using the Cake framework, which was 100% new to me at the time. It’s clear now that I had no idea what I was doing implementing the site back then, and am now in love with the simplicity and ease of Node.js as a development language.

I love being able to use Javascript on both the client and server side. I always imagined SeeThisSpot being a very slick & smooth site that didn’t refresh the entire page, read: AJAX heavy. The ability to use the same language server side cuts down on what I need to learn to develop quickly. Previously I would have to look up how to convert a PHP object to JSON, and then back on the client side from JSON to a JS object, overcomplicated much?

I love callbacks. Once you get your head around the ‘disrupted’ flow of synchronous calls, ie that things don’t necessarily run one after the other, it make so much sense. Some (I) would argue actually flows much better!

I think I might love Jade. But I’m not sold 100% just yet. I have run into a couple of little hiccups which I found difficult to track down (trying to insert data that doesn’t exist). I will reserve judgement for now and see how it goes. One thing I definitely do love though is the ability to use a jade template to render a partial view for an AJAX call, I guess this is a pretty standard use case, but it was incredibly difficult to work out for CakePHP.

You can try out the new SeeThisSpot implementation at http://seethisspot.herokuapp.com/. It is still very raw, so be nice

Deploying a Node.js project with ZURB Foundation to Heroku

So many new things happening! Pretty stoked that I managed to get ZURB’s Foundation working on my Node.js application, my next step was to get the app deployed to Heroku. Until this point I’d only ever deployed a project to Heroku by following and mimicking the ‘Getting Started‘ tutorial. My seethisspot project was already very different to that example application so I had my work cut out for me. Here’s how I went about it…

1. Install bower and grunt as NPM dependencies, not just a devDependencies. My packages.json now looks like this…

  "dependencies": {
    "express": "~4.11.0",
    "serve-favicon": "~2.2.0",
    "morgan": "~1.5.0",
    "cookie-parser": "~1.3.3",
    "body-parser": "~1.10.0",
    "debug": "~2.1.0",
    "jade": "~1.9.1",
    "bower": "~1.3.12",
    "grunt": "~0.4.5",
    "grunt-develop": "~0.4.0",
    "grunt-sass": "~0.17.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-cli": "~0.1.13"
  },
  "devDependencies": {}

2. Create a post install script to install all bower components. As you can see in this post, Foundation is installed as a bower component, so how to get this deployed on heroku? Simple really, your bower.json should have a dependecies section already

  "dependencies": {
    "foundation": "zurb/bower-foundation#~5.5.1",
    "font-awesome": "~4.3.0"
  }

All that’s needed to install these components on whatever environment you deploy to is a simple script (mine’s call post_install.sh) in the root directory of your project

#!/bin/bash
./node_modules/bower/bin/bower install

Next, update the scripts section of your packages.npm to call this script using the ‘postinstall’ hook

"scripts": {
    "start": "node ./bin/www",
    "postinstall": "bash ./post_install.sh"
  }

3. Create a grunt task that compiles your SASS into CSS once deployed. Add this in your gruntfile.js, the task must be called ‘heroku:production’ or ‘heroku:development’, although I haven’t played around with both of these yet to work out when & how it determines which to run

  grunt.registerTask('heroku:production', [
    'sass'
  ]);

4. That should be it!Add a remote repository if you haven’t already, and push your project there!

> git push heroku master

And watch the magic unfold.