Archive for the ‘Programming’ Category

You are making an awesome new JavaScript-based app in React. However, it needs to live inside an existing framework, such as Symfony for PHP. You want the hot-reloading function that you get with Webpack Dev Server, but you also need the content to be served from your LAMP stack because it creates the HTML wrapper page.

What do you do?

The answer is to run two servers: both Webpack Dev Server and your existing Stack. Here is how…

Start by installing Webpack Dev Server as usual.

npm install --save-dev webpack-dev-server

Create a script entry in package.json to run it:

We also need to make one change to our webpack.config.js file. We need to tell the output to point back at the Webpack Dev Server. Otherwise, it will point at your LAMP stack.

output: {
publicPath: 'http://localhost:8080/scripts/'
}

Super. Next, let’s configure the LAMP stack.

Configuring your existing server

This step is easy. All we need to do is to point the JavaScript at the Webpack Dev Server.

Let’s say you have this at the moment:

<script src="/scripts/app.js"></script>

Change it to:

<script src="http://localhost:8080/scripts/app.js"></script>

Remember that when you are building for production, you will want to take the changes out. The easiest way to do this is to have a dev webpack.config.js file, and a production one, and have your build tool use the correct one depending on the context.

Worfolk Anxiety recently launched its web store. We build this for a number of reasons. One is that it gives the customer a better experience because they can buy one eBook and get it in every format. Another is that it makes it a lot easier for us to offer upsells and tripwires.

Payment processor

We’re using Stripe as the payment processor. Stripe has become very popular over the past few years because it allows you to build an entirely integrated checkout process without any mention that Stripe is behind it.

How do they do this without requiring you to have PCI compliance on your server? It is all done client-side. You include their JavaScript library. This hashes the credit card details the customer enters and sends it off to stripe’s servers. Stripe then send you back a hash that you can then use to make server-side credit card charges.

Using React

Given so much of the work has to be done in JavaScript, React was a good choice for building the checkout. This allowed me to make it interactive and give the user clear and speedy feedback.

In the case of our checkout process, you are asked to enter your credit card details. Once you have done this, further fields are revealed asking you to enter your name and email address. This step by step approach is a better experience for the customer because they do not get overloaded.

Deploying with Webpack

The finally step is Webpack. This takes the JavaScript and packages it up for the browser. Because the JavaScript is written in ES6, and web browsers only support ES5, it first uses Babel to transpile it back to ES5, before loading everything into one single module and compressing it.

I use Google Analytics to report on most my websites. It is free and they have a lot of Google-only knowledge so it makes sense to make use of them. Recently, I have also started using Google Tags Manager to make things even simpler.

Tags Manager allows you to insert code into your place once, and manage all of your analytics from a central dashboard. So instead of inserting the Google Analytics code into your page, you insert the Google Tags Manager code into your page and then you use Google Tags Manager to add the analytics code in dynamically.

What is the benefit of this? For me personally, the gain is not a huge one. For a marketer, it is a wonder. Previously, they would have to involve a developer every time they wanted to change the tags on a page. This was slow and complicated. I see this process being a problem for a lot of the clients I work with.

However, in my case, I am the developer, so the benefit is less pronounced. Even then though, less messing around with the code can be a welcome feature. Take the Leeds Restaurant Guide for example. I have Google Analytics in there. Then we started running some Facebook Ads for it, so I had to add the Facebook Pixel code in. Then we wanted to track what page features people were interested in, so I had to add some Hotjar code. By this point there are three snippets of JavaScript code in the page.

Using Google Tags Manager means I only need to insert one piece of code and can add and remove these tags without having to do a code release. I can also set up specific triggers for the tags, such as certain URLs, to easily include and exclude tags from different pages.

Recently I launched a new website, Rena Men. It is deployed onto the Heroku platform and does quite a bit of cool stuff, so I thought I would document what I have done here.

Code

It is implemented in PHP, using the Rauma framework. Rauma is a project I developed for Learn Finnish and subsequently open-sourced.

Rena Men is built in several modules. There is a website, a content management system (CMS) and an image server. Because they use common functionality like the entity classes, there is also a shared library which is brought in as a Composer dependency.

The website itself is fairly straight forward. Beyond the PHP, there is only the CSS, pre-processed with SASS, and a tiny amount of JavaScript loaded in with require. The CMS is a bit more complicated, using Babel to transpile the ES6 JavaScript, and styled up with Bootstrap.

Deployment

Each module is deployed onto the Heroku platform. This makes it really easy to do as I can roll out an update just using git push. The code itself is stored in a series of private repos on BitBucket, and the Heroku build process fetches them from there.

In the case of the CMS, it also uses the Node build pack to run a Bower install. Third-party additions such as Bootstrap are pulled in on-the-fly just like we do with Composer dependencies. Heroku does not have SSH key integration for Bitbucket (it does for Github) so I’m using a ready-only account with Basic HTTP auth access.

The database is provided by one of the Heroku app add-ons. The storage is provided by Amazon S3. Heroku is built in AWS, so that fits nicely. We store originals in the file system and then crop them on-demand using the image server.

Delivery

Because cropping images is expensive, the image server originally had a local file cache where it would store each crop. However, as Heroku has an ephemeral file system, you cannot write to it, so I had to turn that off in production.

Instead, we’re using the AWS CloudFront CDN. This was super easy to implement. I just created the settings in AWS, pointed CDN subdomain at AWS and it started working. Like other web proxies, it caches your content based on the headers you send it.

If you need to combine two arrays in PHP, you first thought might be to use the + operator. However, this is unlikely to do what you want it to to. If we look at the following example, you might expect it to output an array with all three elements.

However, what you will actually get back is an array containing two elements: banana and pear. This is because when you use the + operator in PHP it combines it using array keys. Even though these are non-indexed arrays, PHP looks at them like this:

[0 => 'banana']
[0 => 'apple', 1 => 'pear']

Therefore when you add them together, it combines the keys, taking the earliest. In this case, to get the result you want, you want to use the array_merge function. For other scenarios, PHP has a range of different functions to combine arrays in different ways.

Have you ever been working on a PHP project and found yourself thinking “what I really need is a way to quickly and easily drop a word search in to this code”? The answer is almost certainly, no.

However, while working on Learn Finnish I found myself in exactly this situation. Being unable to find a good library, I wrote one and published it on GitHub. It is freely available under the MIT license and registered with Composer:

composer require xmeltrut/WordSearch "^1.0"

All you have to do is pass in some words and it will generate a puzzle. It supports horizontal and vertical words, intersecting words and comes with two alphabets by default: English and Finnish.

Web browsers come in various shapes and sizes: different users will have different ones, and inevitably different versions of the same one. When CSS3 arrived browsers began adding support for it before the specification had been finalised and so used vendor prefixes.

The result, now we have a standardised CSS3, is that some users have proper CSS3 support and some have the support, but only behind a complicated series of vendor names. Therefore, if you want to use flexbox for example, you cannot just rely on display: fiex; as for some users it will only work with the appropriate vendor prefix.

This means you have to tediously insert all of these vendor prefix statements to get cross-browser compatibility. However, there is a tool called Autoprefixer that takes this hassle away. It is an NPM module that converts your regular CSS into CSS with vendor prefixes. You write:

display: flex;

And you get:

display: -webkit-flex;
display: -ms-flexbox;
display: flex;

This means you have to compile your CSS. However, if you are already compiling from LESS or SASS, it’s really easy to integrate it. On one of my current projects I already had Gulp compiling SASS, so it was one-liner to add the step in. SitePoint have a tutorial on how to set it up.

Travis CI is a cloud-based continuous integration tool. Notably, it is also free for open source projects. They do paid subscriptions as well if there is a private repo you want to test. If you just want to test a public GitHub project though, it’s free and really easy to set up.

You can log in with your GitHub account. Once you have done this, you are given a list of your projects and you can turn on Travis CI for each one individually. Using the GitHub hook, you can configure Travis CI to automatically run a build every time code is pushed to the repo.

It supports an array of different languages and platforms. To get up-and-running, you need to add a config file into your repo. This is pretty simple. Here one I am using for a PHP project:

language: php

php:
– ‘5.5’
– ‘5.6’
– ‘7.0’

install: composer install

This configures it to run it on three different versions of PHP, and install the dependencies before starting the test. It comes with many of the common PHP extensions already enabled, and an additional list of ones you can enable if you need them.

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 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.

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.