Late 2016 Website Update


Over the past few months I've been leaning a lot about modern PHP and its benefits. I graduated in June and thought I had a good understanding of PHP, but when demonstrating my final year project, I realised that I had a lot to learn.

The project was a travel website written in PHP, able to dynamically present and tailor travel content in an MVC pattern. I soon realised that my code was legacy PHP. It wasn't true OO, it didn't make the most of namespaces.

I wasn't using popular tools like Composer or PHPUnit or even a framework like Symfony which could've written more than 90% of the code for me. I was using legacy procedural PHP.

Now I have much experience with the modern ways, and it's made me take a huge look at how I handle my work as a freelancer. I've dabbled in Craft CMS and Bolt CMS as an alternative to WordPress.

Modernising WordPress

WordPress isn't a problem for the people that use it, it's great and friendly and simple. It's backend is unrivalled. But it's written using these legacy methods that I had myself caught up in. WordPress doesn't even officially support Composer.

I took it on to try and modernise my WordPress process. WordPress isn't going anywhere, and whilst I could move my sites over to something like Craft CMS, the alternatives have constraints that I'm not yet happy to tackle.

My new process as it is currently on GitHub involves using a slightly awry method of managing WordPress and plugins through Composer.

I followed Scott Walkinshaw's excellent post on how to set it up, including all the repositories needed to get going.

I haven't looked at Bedrock yet, which does the whole thing for you, as I have my own specific requirements. But if you're looking to bootstrap the process, it comes highly recommended.

Modernising the Development Process

Another thing I had to modernise was my development environment. I had recently switched to a Windows machine, which was a great pain initially. Using Apache and PHP on Windows was a struggle, mainly because of big differences between it and POSIX OSs.

My new environment uses Vagrant and Ansible. I'm also using Ubuntu instead of CentOS, which is a bit dangerous because I'm running CentOS on my server. My reasons where because of how popular Ubuntu now is. I thought I better get learning it.

I still use Node natively for frontend dependencies. Node works fine on Windows so far, and integrates beautifully with PhpStorm.

And that's another change. Sublime Text has been a great editor for web development, and I'd managed to customise it with linters and tools, but it wasn't easy. PhpStorm is greatly popular in the community, so I thought I'd give it a go. And I've fallen in love.

PhpStorm it's a fully fledged IDE. It can traverse code and provide inline inspections on such a high level, and integrates with many tools out of the box, including WordPress and Gulp. I provides so much support for development, I'm not sure how I coped before.

How it's Built

For templating, I use Pug formally called Jade. You can see the templates in my source code. I'm in love with it, and have been for years. It makes writing ugly HTML a joy and easy to read. The problem I have is that WordPress relies on procedural templates with PHP functions inline, so I'm using Gulp-Jade-PHP to compile to Jade-PHP, which enables inline PHP code.

The problem as you can probably see, is that it's not the most active set of dependencies, having not been touched for over a year. What I really need is a way to pass objects to a proper PHP-Pug compiler, and cache the output. That's something I've yet to spend time on, but would allow me to write in pure Pug instead of using inline PHP functions in the old version.

And that's another reason why I'm not using Craft CMS or Bolt CMS. Development is done using Twig, which I'm not against, but I'd rather use Pug. I'll look in to getting them integrated, but it's a long shot for now.

Also on the frontend is use of Sass and a variety of PostCSS plugins.

Livereload is built into the development process, along with sourcemaps. These are great tools, allowing me to see my changes in real-time. By the time I've finished writing a line, PhpStorm autosaves it, Gulp calls the processors, Node Sass instantly compiles it, and Livereload injects it into the browser. All done in a fraction of a second. Sourcemaps tell me which SCSS files my the rules come from. It's a joy.

Gulp also clears the themes directory of PHP files, and replaces them by compiling Jade. Any bespoke PHP is written in the functions directory, which isn't touched by the frontend tools. The caveat to this is I need a functions Jade file to include these, but that's not very taxing.

Overall I'm happy with this slightly modernised process, and it allows me to develop well. There are still problems. I have to suppress a lot in PhpStorm because functions aren't recognised. When editing the theme for instance, WordPress isn't present, so PhpStorm can't resolve the dependencies. It also complains about Sass functions. And it doesn't support Jade-PHP (it does a great job with Pug though, but doesn't know what I'm doing in code statements).

My goals are to get a proper Pug development process set up, one where I'm using the language almost natively. Pug has great PHP support, but the same can't be said for WordPress in that sense. That would possibly require PHP tooling on the frontend, which I don't currently have.

As I'm so in love with Pug I should consider a move to a Node backend, but I wouldn't know where to start. That's a different kettle of fish.

As for changes to the design of my site, well I've made a few. I'm pushing it towards the visual direction I want it to go. Little and often.

I'll be looking into what more can be done to simplify the process. But for now, I'm happy with where it is.

All the code can be found on my GitHub profile. I'd greatly welcome any comments or thoughts.