WCAG colour checker

About five years ago I created a small PHP class that would check the contrast of a foreground and background colour and give a report on whether it was accessible in accordance with the WCAG recommendations (so either AA or AAA compliant).

I’ve recently had cause to dig out that script which gave me the opportunity to also create a version in javascript.

Usage is very simple… Say I have these two colours:

vivid red – rgb(207, 46, 46) – #cf2e2e

and

cyan blueish grey – rgb(171, 184, 195) – #abb8c3

If I used then in combination, with say the red being the background colour and the grey being the text colour, the PHP code would look something like:

var_dump(WCAG::accessibility('abb8c3', 'cf2e2e'));

The result of which would show the contrast ration and if it passes WCAG 2.0 for AA, AA with large fonts, AAA, and AAA with large fonts… No surprise really that the combination above would fail!

array(2) {
'ratio' => string(4) "2.54"
'2.0' => array(4) {
'aa' => bool(false)
'aa-18pt' => bool(false)
'aaa' => bool(false)
'aaa-18pt' => bool(false)
}
}

But try that with the red background and white text and we’d see a different result:

// var_dump(WCAG::accessibility('fff', [207, 46, 46]));

array(2) {
'ratio' => string(4) "5.14"
'2.0' => array(4) {
'aa' => bool(true)
'aa-18pt' => bool(true)
'aaa' => bool(false)
'aaa-18pt' => bool(true)
}
}

You can supply the colours in full or short hex format – with or without the # – or as a RGB array.

The javascript version is just as simple to use. So why not check out the repository with the code, fork is and contribute if you’d like – examples are included in the repo.

Did you like this? Share it:

Converting JSX to JS on the command line

Yesterday I was starting a small, very stand-alone project that required a pretty dynamic interface. I decided to put together the components using ReactJS but as it was essentially just one JSX file that I had I didn’t want to have to set up a gulp file, babelrc file, and whatever new-fangled build process the young kids are in to these days.

I thought about not using JSX syntax, but I think it adds a level of readability to the code and will make it easier for myself and others to maintain longer term, and besides which, I had already writing the JSX part and didn’t want to redo the work. Thankfully, though, it’s really easy to use Babel from the command line to do the conversion,.

First, install the required npm modules (I did this globally so that I could use it anywhere on the cli, not just in the specific project):

Continue reading “Converting JSX to JS on the command line”

Did you like this? Share it:

Same height for elements

A while ago I wrote a jquery plug-in that allows you to easily make selected elements all the same height. Well, it turns out that it could be a little better because it didn’t take in to consideration margins, padding and such. So here’s a slightly more robust version.

/**
 * Same Height, jQuery plug-in.
 *
 * This plug-in allows you to automatically have all of the elements marked
 * with a particular class to be the same height, either by smallest or
 * largest.
 * 
 * By default, 'samemaxheight' and 'sameminheight' will be used.
 *
 * Examples of use:
 *
 *     $(function() {
 *         $('body').sameheight();
 *     });
 *
 *     $(function() {
 *         $('#mainContent').sameheight({
 *             max: 'mymaxclass',
 *             min: 'myminclass'
 *         });
 *     });
 *     
 *     $.fn.sameheight.defaults.max = 'mymaxclass';
 *     $.fn.sameheight.defaults.min = 'myminclass';
 *     $('body').sameheight();
 *
 * @copyright Copyright (c) 2013 Andrew Collington <andy@amnuts.com>
 */
(function($) {
    $.fn.sameheight = function(userOptions) {
        var options = $.extend({}, $.fn.sameheight.defaults, userOptions);
        if ($('.' + options.max).length) {
            var maxH = 0;
            $('.' + options.max).each(function(){
                var to = $(this).css('overflow');
                var th = $(this).css('height');
                $(this).css({'overflow':'auto','height':'auto'});
                if ((($(this).innerHeight() > maxH) || !maxH)) {
                    maxH = $(this).innerHeight();
                }
            });
            $('.' + options.max).each(function(){
                $(this).css({
                    'height': maxH + 'px',
                    'overflow':'auto'
                });
            });
        }
        if ($('.' + options.min).length) {
            var minH = 0;
            $('.' + options.min).each(function(){
                var to = $(this).css('overflow');
                var th = $(this).css('height');
                $(this).css({'overflow':'auto','height':'auto'});
                if ((($(this).innerHeight() < minH) || !minH)) {
                    minH = $(this).innerHeight();
                }
            });
            $('.' + options.min).each(function(){
                $(this).css({
                    'height': minH + 'px',
                    'overflow':'auto'
                });
            });
        }
    };
 
    $.fn.sameheight.defaults = {
        max: 'samemaxheight',
        min: 'sameminheight'
    };
})(jQuery);

Did you like this? Share it:

My CodeMagic fork (a TinyMCE plugin for code editing)

I’ve used TinyMCE for a while – it’s an excellent WYSIWYG editor for web applications. However, the code editor in it is really simplistic. Enter CodeMagic, a plugin that allows you to replace the standard code editor with one that used the excellent CodeMirror library for syntax highlighting. So I started to use CodeMagic but found a number of issues with it. For example, it used CodeMirror 2 and not 3, had issues with using IE and the word wrapping functionality and the window resizing was never great. But with the joy of things being on GitHub and up for a bit of a forking, that’s exactly what I did.

Check out my CodeMagic fork on GitHub and feel free to give me any feedback, or fork it yourself and make it better.

Did you like this? Share it:

Text box ‘hint’ values with jQuery

On creating a rather large form recently, I was in the need to have some kind of hint to the user about what format the content should take on several input boxes. I could have done this with a description under the form element, but a more accepted way to do this, it seems, is to have a ‘hint’ in the element itself. You know the kind of thing I mean; a value, usually quite a light grey colour, that is present until you click in to the form element and then is disappears. I also wanted to do this as a jQuery plug-in because, well, why not? 🙂

Continue reading “Text box ‘hint’ values with jQuery”

Did you like this? Share it:

Easy table sorting with jQuery

I came across a jQuery plug-in the other day to sort tables, and it works great and is exceptionally simple to implement (and as anyone who’s flicked through this blog knows, I like the simple things in life… Don’t need any more gray hairs popping up, you know!).

The plug-in is called tablesorter (found at tablesorter.com), by Christian Bach.
Continue reading “Easy table sorting with jQuery”

Did you like this? Share it:

Highlight external links with jQuery

A little while ago I posted a quick jQuery plug-in that allows you to easily indicate an external link. Then I posted an updated version that had a few optimizations. Well, it turns out that I had missed out a rather important portion of the code when I posted it up. D’oh! So here’s the full and working version.

Continue reading “Highlight external links with jQuery”

Did you like this? Share it:

Simple pleasures with jQuery

Somethings it’s the simple things in life that make you really happy.  For me yesterday, that was thanks to jQuery.  Have you ever wanted to have a check box that, when the user checks it it also checks a lot of other checkboxes?  Yeah, of course you have!  I wanted to do that yesterday.  Now, it’s not the first time I’ve had to do that kind of functionality, but it always came with a bunch of javascript that seemed over the top for what was wanted.  With jQuery it just took a line or two of code!

    $(document).ready(function() {
        $('#selectall').click(function() {
        	$(":checkbox", $('#checkboxlist')).attr('checked', $(this).is(':checked')); 
        });
    });

And with that, on and off go the other checkboxes.

Marvelous!

Did you like this? Share it:

jQuery plug-in – highlight external links

I’m pretty new to the whole jQuery game, having really only started to look at in a number of weeks ago. Until then I have been happily using Prototype and Scriptaculous, and as I knew them I didn’t see a point to move to another library. However, the more examples I saw of jQuery the more elegant I thought it was, and so now am in the process of learning it more, converting some code over and trying my hand at plug-ins. So here’s introducing my first jQuery plug-in!

This plug-in allows you to automatically append a class and title to any external resources. You can pass in multiple domains that are thought of as ‘local’, and anything else with a protocol that doesn’t belong on the passed local domains will be flagged as external. If no domains are passed then the current domain in the url will be used as-is (with the www., etc., if present).

That probably doesn’t make much sense, but I’m sure it will when using it…

So here’s the code:

Continue reading “jQuery plug-in – highlight external links”

Did you like this? Share it: