Archive for the ‘Tech’ Category

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.

You may find that all the images you commit to a git repo are corrupting. This is especially true if you are using Windows and then pushing to a Linux origin.

One possible fix is to ensure the images are being treated as binary files. Of course everything is a binary file when it comes down to it, but this differentiates it from text. To do this, add the following lines to a .gitattributes file in the root of the repo.

*.jpg binary
*.png binary
*.gif binary

If you have images in there already, you will probably need to remove them and then re-commit them.

If you try and connect over HTTPS/SSL with cURL you may get an error similar to:

sslv3 alert handshake failure

Or:

Unknown SSL protocol error in connection

If you cannot see a descriptive error message, use –verbose to report everything.

The cause of this often that hosts have disabled SSLv3 because it has now been compromised. The solution is to use TLS, which is a newer more secure protocol.

curl --tlsv1 --verbose hostname

If you are using cURL in PHP you can change the SSL version to use TLSv1.2.

CURLOPT_SSLVERSION => 6

You should then be able to make the cURL request over SSL successfully.

Hooks are scripts that you can use to run additional code when running Git commands. They are not stored in the repository so need to be set up on each computer individually.

You can create templates for your hooks that will be used whenever you create a new repository. To do this, put your scripts into the template folders on your local machine.

On Linux:

/usr/share/git-core/templates

On Windows:

Program Files (x86)\Git\share\git-core\templates

When you next run git init you will then have these templates installed by default. Additionally, you can run git init in existing repositories to update the templates (it will not do any damage to the repo itself).

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.

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.

Xdebug can be used to profile your PHP applications. However, it can be difficult to configure and get working. There are a number of gotchas to look out for.

Enabling

To enable the profiler on every request you can use the setting:

xdebug.profiler_enable = 1

If you want to just enable it for certain requests you can use:

xdebug.profiler_enable_trigger_value

This will allow you to use ?XDEBUG_PROFILE=1 in your query string. However, if you are using mod_rewrite to rewrite your URLs in Apache, you need to make sure the rule has the [QSA] flag in it to pass the query string through or this will not work.

Output direcotry

You can set the output directory to whatever directory you wish using the output dir setting:

xdebug.profiler_output_dir = '/tmp/xdebug'

However, xdebug will not create this directory for you. You need to manually create the directory and give write permissions to the web server too.

Using gzip compression allows you to deliver website content faster as it can be gzipped on the server and uncompressed on the client, reducing the file size you need to transfer.

Unfortunately mod_deflate, the Apache module required to do this, is not enabled on all cPanel installs. However, if it is, or you have access to the server, you can easily enable it.

Enabling mod_deflate

If you do not have mod_deflate, you need to use EasyApache to add it. Log in to Web Host Manager and go to EasyApache (only server admins will be able to do this). Select build from the previous configuration and customise it until you get to the exhaustive options list.

Check the box next to mod_deflate and then re-build Apache.

Enabling compression

Once you have mod_deflate enabled, cPanel will have a new option. Under “software and services” in the x3 skin you fill find an option called “optimise website”. Click through to that page.

Compress content will probably be set to “disabled”.

Select “Compress the specified MIME types” instead. You could enable it for all content but I would not recommend this as some content you will not want to compress and much of it (images for example) is pretty pointless. The third option allows you to customise.

By default it should have the following options:

text/html text/plain text/xml

I recommend adding some more:

text/html text/plain text/xml text/css text/javascript

Hit “update settings” and you are done!

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/

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 directly 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/

These days cPanel comes with Git. However, it is not available as a command by default but is instead hidden away in cPanel’s usual obscure location.

However, you can make it accessible using a symlink.

ln -s /usr/local/cpanel/3rdparty/bin/git /usr/local/bin/git

That will allow you to use the git command as normal. The version you get is likely to behind the current version of Git though.