Testing Prop Changes in React

6th October 2015

Fundamental to React is the concept of props. Components can contain other components and pass down properties to them in the form of props. These components can then behave differently depending on the values of these props which makes a good case for writing unit tests to make sure that your components are handling changes in the values of these props correctly.

However, testing in isolation means that a child component in your app will be tested on it’s own and not within it’s usual parent so any changes to props will have to be managed manually within your tests. This article will show you how props can be tested for components created with both React.createClass() and React.Component.

Read Full Post…

Comparison of JPEG Lossless Compression Tools

27th June 2014

Losslessly compressing JPEG files is a great but often overlooked way to reduce file sizes on your website or application without losing image quality. Smaller file sizes mean less bandwidth usage for you, and faster page load speeds for your users. What’s not to like about that?

So you want to losslessly compress all your lovely JPEGs but what tool should you use to get the maximum benefit? In this article I compare four tools (jpegoptim, jpegtran, jpegrescan and mozjpeg) and use them to losslessly compress a few different JPEG files to see which gives the best reduction in file size.

Read Full Post…

How to Install mozjpeg

3rd April 2014

About a month ago Mozilla announced their ‘mozjpeg’ project with the aim of improving lossless jpeg compression and making the web a faster place. Forked from libjpeg-turbo, mozjpeg is more concerned with reducing filesize than doing it quickly. It uses the same compression process written in a perl script by Loren Merritt called jpegcrush and claims to be able to reduce jpeg size by 10% on average.

So, it sounds pretty good and you want to save some bandwidth and give mozjpeg a go. With a lack of an auto-install option using a repository like APT you will need to build it from source which sounds complicated but is actually pretty easy as I show.

Read Full Post…

Recursively Optimize PNG Files

28th March 2014

One way to improve performance and reduce bandwidth for your website is to make sure your image files are properly optimised. It’s an easy win for not much work so there’s no excuse for not doing it - especially when it can all be done losslessly with the end result will looking exactly the same as the original with no loss of quality.

If you are looking at doing this for the first time you probably have a great big folder of images which also contains sub-folders and sub-sub-folders of even more images and will want to optimize them all. In this article I look at using OptiPNG and PNGCrush, two of the most commonly used png optimizers, and see how you can use them to quickly optimize all of the images recursively in a directory.

Read Full Post…

Javascript Date Formats

14th March 2014

A recent project I was working on required me to build a custom dynamic calendar in Javascript using a dataset from MySQL. All was working fine as I built it using my browser of choice, Google Chrome, but once it came to testing in other browsers everything came crashing down as soon as I tried it using Internet Explorer. The problem I had run into was creating my Date objects directly using the MySQL date format of YYYY-mm-dd in the following way:

new Date('2014-02-10');

After a bit of testing I discovered that all modern browsers can accept and parse this date format but IE9 and below don't understand it and return an Invalid Date. This got me wondering what date formats do different browsers understand and which ones are valid in all browsers so I wrote a script to test Date objects created using different combinations of date strings and these are the results.

Read Full Post…