Archive for the ‘Programming’ Category

Badge Poser

Sunday, May 29th, 2016 | Programming

badge-poser

Badge Poser is an online tool that generates badges your PHP projects’ readmes. There is zero setup: it integrates with Packagist, so once you have your package setup you simply go to the website, enter your package name, and it generates the badges for you.

It then generates a series of Markdown for you to insert into your readme. This will then display anywhere where your readme is rendered: GitHub and Packagist for example.

Currently, it can generate badges for:

  • Stable and dev branch names
  • Total downloads
  • Monthly and daily downloads
  • License

Myth CSS preprocessor

Wednesday, January 20th, 2016 | Programming, Tech

myth-css-preprocessor

Myth is a CSS preprocessor that allows you to write easier-to-manage CSS, similar to LESS and SASS. The difference with Myth though is that you are writing “pure CSS” while still using features that will be available in the future (such as variables and maths). It then acts as a polyfill for browsers that do not support it.

You can see the full spec on the Myth website.

Should you use it instead of LESS and SASS? In my opinion, no. Not yet anyway. While it does offer some of the features, it does not offer the really useful ones yet. Nested roles and mixins are the big winners for me. Myth does not have these. Nor does it support includes.

It’s one advantage is that it does fill in prefixes. So if you are using flexbox, you can just have a flexbox entry, rather than the endless series of browser-targetted prefixed flexbox commands you currently have to use. You can do this using mixins in LESS and SASS, but it is messier than the way Myth implements it, where you just type the standardised CSS property.

While possibly not that useful right now, Myth is one to watch for the future.

Modernizing Legacy Applications In PHP

Tuesday, December 8th, 2015 | Books, Programming

Modernizing Legacy Applications In PHP is a book by Paul M. Jones on how to bring legacy codebases up to date. Jones is a relatively big-whig in the PHP community, being involved in most of the PSR standards and a contributor to the Zend Framework.

For me, the book was both excellent and uninformative. What I mean by that is that I do not think I learnt anything from reading it. However, I flatter myself that I am pretty good at PHP and have spent many years working with legacy codebases. It was always been an interest of mine, and I have previously submitted conference papers on the subject. I have been doing just what this book describes with my current client.

That in itself shows the quality of the book though. It describes every step I have been going through in a logical and clear order. It explains introducing autoloading, separating out the concerns, adding unit testing and injecting your dependencies. It says you from the tangled mess to a clean and modern application in an easy-to-follow manner. In short, it is pretty much everything I would recommend to someone starting to clean up a legacy application.

It has code examples and some tips and tricks in it, but for the most part it is quite high level. It also deals with PHP 5.0 and onwards. There is perhaps room to expand here. At Buzz I had to come up with techniques to support ancient problems like register globals, and at the NHS I ran into PHP 4.6 installed on their servers. Solving these kind of problems, and the little code tricks you can do, might have been a useful additional also.

Overall, I would recommend this book to anyone who feels the least bit daunted by the idea of modernising a legacy PHP codebase. It is clear, easy-to-follow and takes you through exactly the steps you should follow.

modernizing-legacy-applications-in-php

SHOUTCLOUD WORDPRESS PLUGIN

Wednesday, July 1st, 2015 | Programming

HAVE YOU EVER WANTED TO CONVERT ALL YOUR BLOG CONTENT TO UPPERCASE? IF SO, I HAVE THE PLUGIN FOR YOU! I HAVE PUBLISHED A SHOUTCLOUD WORDPRESS PLUGIN THAT AUTOMATICALLY INTEGERGRATES YOUR BLOG WITH SHOUTCLOUD.

ADVANTAGES

  • AUTOMATICALLY CONVERTS ALL OF YOUR TITLES, CONTENT AND TAGS TO UPPERCASE
  • ZERO CONFIGURATION
  • ALL STRING MANIPULATION IS DONE IN THE CLOUD
  • INCREASES ANTIPCIPATION BY DRASTICALLY INCREASING LOAD TIME

DISADVANTAGES

  • NONE, EVERYTHING IS BETTER WHEN IT IS DONE IN THE CLOUD!

screenshot-1

Xenu’s Link Sleuth

Tuesday, June 23rd, 2015 | Programming

It is super easy to miss broken links on your website. Even if you test it rigorously, it can be difficult to catch them all. That is where an automated crawler can come in useful. Xenu’s Link Sleuth is one such tool.

It only runs on Windows, so I had to run it in a VM. It is also rather a blunt instrument – it crawls everything even though you can be pretty certain that if you have checked one article ID page, they are all going to work. But those few points aside, it is very useful.

It rapidly spiders all of your pages and reports back on both broken links and redirects. It checks CSS, JavaScript and images resources too, and you have the option to check external URLs as well so you get full coverage. It then spits out a HTML report. It is amazing how many little links you find that need fixing when you run it. Well worth spending a bit of time on.

Autop

Monday, June 22nd, 2015 | Programming

PHP has a function called nl2br that converts line breaks into <br> tags. This is really useful if you have content in a database and want to ensure the line breaks are in encoded in HTML without actually having to specify them in the content.

It is a bit of a clumsy tool though. It does not take into account that you might want to use paragraphs, or that you do not want br tags adding inside block elements such as pre or hidden elements such as script and style.

The programmers over at WordPress have done a great job of coming up with their own version that resolves all of these issues and many of us already benefit from it on our sites. Matt Mullenweg has written about it.

However, it is buried in the WordPress codebase, so if you want to use it in a non-Wordpress project, you have to mess about pulling it out of the codebase and inserting it into your own. To save myself from having to do this, I’ve created a project on Github that moves it to a standalone library. You can then drop this into your project using Composer and use away.

Speeding up Leeds Restaurant Guide

Friday, June 12th, 2015 | Limited, Programming, Tech

restaurant-guide-website

Leeds Restaurant Guide is incredibly detailed covering so many restaurants with high quality content and imagery. So it seemed only fitting that I should pay as much attention to the presentation as I do the content.

I’ve been using Google’s PageSpeed Insights tool to debug it. Ironically, PageSpeed Insights spends a lot of time complaining about the Google AdSense code that they provide to me. It does however provide some useful tips too.

Compression

Gzip compression costs almost nothing and can drastically reduce the file size you are sending to the client. The server compresses it and the client uncompresses it all of which is done transparently to the user.

It is pretty easy to configure using Apache’s mod_deflate module, and I’ve blogged about how to get it working on cPanel on Hardware Tutorials.

Expiry headers

If you have Apache’s mod_expires, and you almost certainly do, you can set default expiry headers for content using your .htaccess file.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 60 minutes"
    ExpiresByType image/jpeg "access plus 1 day"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/png "access plus 3 months"
</IfModule>

This will tell the client it can safely cache the content for a while. Put whatever values in that you think are sensible.

Minify your CSS

Recently I wrote about how to use Gulp to set up a task to compile your SASS/LESS stylesheets. This included instructions on how to minify your CSS. Even if you are just using plain old CSS, you could still create a task to create a minified version.

Minification takes out all the spaces, comments and other unrequired characters so that you have less data that needs to be transferred to the client.

Using Gulp to compile stylesheets

Thursday, June 11th, 2015 | Limited, Programming, Tech

gulp

If you’re doing a lot of CSS in your web development, you may have taken to using SASS or LESS to allow you to better organise, code and maintain your stylesheets. These are both great tools. However, the one thing that annoys me is having to remember the command to compile them, given it is often different for each project.

Luckily Gulp, a Node-based task runner, can come to the rescue.

This has the added advantage that you can also pipe it through other tools, allowing you to create maps and minify the CSS all in one command that makes it super easy.

Firstly, you need to add the dependencies so that NPM knows what to install.

{
    "devDependencies" : {
        "gulp" : "*",
        "gulp-sass" : "*",
        "gulp-minify-css" : "*",
        "gulp-sourcemaps" : "*"
    }
}

You can then run NPM install to get all the modules you need. If these are the only modules you are using you will probably need to modify your .gitignore file to ignore the node modules directory.

node_modules/

Now we can create a gulpfile.js in the root of our project directory that will define the tasks we want to run.

'use strict';
 
var gulp       = require('gulp');
var sass       = require('gulp-sass');
var minifyCss  = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
 
gulp.task('sass', function () {
    gulp.src('./sass-files/*.scss')
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(sourcemaps.write('./sass-maps'))
        .pipe(gulp.dest('./stylesheets'));
});
 
gulp.task('sass:watch', function () {
    gulp.watch('./style/*.scss', ['sass']);
});

The first task creates a “gulp sass” command that takes the SASS file, converts it to CSS, minifies it, builds the source map and then writes it out. I’ve set the compatibility to ie8, though it could also be ie7, and defaults to ie9.

The second task creates a “gulp sass:watch” which watches the files for changes and then calls the first task whenever it detects a change.

If you are using LESS you will need a slightly different set of dependencies.

{
    "devDependencies" : {
        "gulp" : "*",
        "gulp-less" : "*"
    }
}

The tasks are slightly different too, but basically do the same thing.

'use strict';
 
var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less', function () {
  return gulp.src('./app/resources/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./app/webroot/css'));
});

gulp.task('less:watch', function () {
    gulp.watch('./app/resources/less/*.less', ['less']);
});

The end result of this is that rather than remembering what the specific paths for any project I want to work on, I can create a Gulp task and simply run “gulp sass” or “gulp less”. I could even just rename them to “gulp css” to use the same name on every project I work on.

Tools for validating your website

Wednesday, May 27th, 2015 | Programming, Tech

There are some great online tools for validating that your website is looking and working well. Of course there are loads of these and many of them we’ve been using for years. Below though, I’ve listed a few I’ve been using the most in recent times or that are often overlooked.

W3C validator

An oldie but a goodie. The W3C validator ensures that your mark-up is valid. This is good for two reasons. One, it will find any problems, missing closing, tags, etc, that may be causing weird problems. Two, it will also point out stuff that you could be doing better like semantic tags and relevant meta tags.

http://validator.w3.org/

w3c-validator

Mobile friendly checker

Google are starting to crack down on websites that do not consider mobile users. Of course we all know we should be building mobile friendly websites, indeed, it should be mobile first these days! But it is hard to debug sometimes, especially given the fragmentation of devices.

Luckily Google now provides a tool that will give you a pass and fail, as well as showing you a preview of the site on an Android device. It’s not perfect, sometimes it fails to load assets and you have to come back later, but it is still an awesome tool.

https://www.google.co.uk/webmasters/tools/mobile-friendly/

Google Developers testing tool

Over on the Leeds Restaurant Guide we expose our reviews using the hreview schema. This means that sites like Google can see what ratings we give restaurants and put them direct in the search results. To check it is working correctly, you can use Google’s testing tool.

https://developers.google.com/structured-data/testing-tool/

Facebook Debugger

Recently I wrote about the Open Graph protocol which allows you to tell social networks (mostly Facebook) what titles, images and descriptions you want it to use when sharing a web page.

Facebook have a debugging tool to test your tags are working.

https://developers.facebook.com/tools/debug/

Making use of the Open Graph Protocol

Monday, April 6th, 2015 | Programming

When you paste a link into Facebook or other social networks (which in theory you could use) it generates a preview of the website including a title, image and description.

Webmasters actually have the power to suggest content for these items. This is something I recently implemented on the Leeds Restaurant Guide.

For example, the page is structured with the site name in the title and various images on the pages. However, when you post it into Facebook, it is pretty obvious to a human what information you actually want in there. You want the name of the restaurant and the image of the restaurant itself.

To suggest to the client what information I think would be best in there, I added some meta tags based on the Open Graph Protocol. For example, here is an example from Bibis.

<meta property="og:type" content="article" />
<meta property="og:article:author" conent="Leeds Restaurant Guide" />
<meta property="og:title" content="Bibis Italianissimo review" />
<meta property="og:image" content="http://www.leedsrestaurantguide.com/images/restaurants/Bibis%20Italianissimo.jpg" />

This provides helpful information to the client, usually Facebook, as to what information it should display where, making your site more sharable. Sites like BuzzFeed are all other these sorts of tags – just view their source code to see. This is why they are always so well presented and perhaps one of the reasons why they are so successful.

open-graph