Category: Web design

  • TrackPerformer update

    I’ve added in some really exciting new features to my TrackPerformer project, as well as three new performances: We Three Kings, Carol of the Bells, and Joy to the World.

    Filters

    It’s now possible to add filters, or effects, into the processing chain. These filters can be applied before any performers (pre-filters) or after all performers (post-filters). At the moment, the included filters are:

    • FPS: Calculates the average framerate across the performance, optionally displaying it in a DOM element.
    • Grid: Draws a grid to the canvas. The grid may be a simple intersection grid (points), or lines. Both the X and Y axes may be independently configured.
    • Pick: Probably the most interesting (and processor-intensive) part of TrackPerformer. The Pick filter will randomly swap a pixel with one of its neighbours. It’s used at full intensity on both We three Kings and Joy to the World, and, when toned down a little for Carol of the Bells, provides a softening, organic effect.

    I’ve got some ideas for more filters down the track… The only difficulty is keeping performance acceptable: manipulation of the canvas pixel by pixel is quite slow in current browsers.

    Performers

    There are a couple of new performers, and some minor updates to some of the existing ones. The Oscillator performer, in particular, is rapidly becoming the most flexible and useful of the performers.

    • There’s a new ShimmerGrid performer, which is great for adding texture and movement to the entire canvas. You can see it in action particularly well on Joy to the World.
    • The Swarm performer can now draw its particles as knots (like the SignalTracker), as well as as dots.
    • The Oscillator now has the ability to draw sustained notes, and to increase the longevity of notes. Take a look at Carol of the Bells to see these new options in use.
    • Notes can now be filtered based not only on their pitch, but also their velocity (volume).

    There are a couple of other changes here and there, but these are the main ones.

    We Three Kings

    The three new example tracks are all taken from We Three Kings, my new Christmas remix album. Why not go and have a listen?

  • CSSMin updated

    I’ve updated my CSSMin project with a couple of new features and bugfixes. Download or fork it on GitHub!

    What is it?

    CSSMin takes your CSS file and strips out everything that’s not needed — spaces, extra semicolons, redundant units, and so on. That’s great, but there are loads of programs that do that. A shell script could do that! So what makes CSSMin different?

    When you deliver content over the web, best practice is to deliver it gzipped. CSSMin takes your CSS file, and optimises it for gzip compression. This means that there’s a smaller payload delivered over the wire, which results in a faster experience for your users. It does this optimisation by ensuring that the properties inside your selectors are ordered consistently (alphabetically) and in lower case. That way, the gzip algorithm can work at its best.

    What this means in practice is that your gzipped CSSMin-ed files are significantly smaller than plain gzipped CSS, and noticeably smaller than files that have been compressed by other means (say, YUI).

    In this update:

    Nested properties are now fully supported.

    This means that the following CSS:
    [sourcecode language=”css”]@-webkit-keyframes ‘fadeUp’ {
    from { opacity: 0; }
    to { opacity: 1; }
    }[/sourcecode]
    is compressed down to
    [sourcecode language=”css”]@-webkit-keyframes ‘fadeUp'{from{opacity:0}to{opacity:1}}[/sourcecode]
    Your nested properties will have their contents compressed with all of the other tricks in system, but their order will be retained.

    Thanks to bloveridge for reporting this bug and verifying the fix.

    Font weights are replaced by their numeric counterparts.

    [sourcecode language=”css”].alpha {
    font-weight: bold;
    }
    .beta {
    font-weight: normal;
    }[/sourcecode]
    becomes
    [sourcecode language=”css”].alpha{font-weight:700}.beta{font-weight:400}[/sourcecode]
    Values supported are “lighter”, “normal”, “bold”, and “bolder”.

    Quotes are stripped where possible.

    [sourcecode language=”css”].alpha {
    background: url(‘ponies.png’);
    font-family: ‘Times New Roman’, ‘Arial’;
    }[/sourcecode]
    becomes
    [sourcecode language=”css”].alpha{background:url(ponies.png);font-family:’Times New Roman’,arial}[/sourcecode]

    As much text as possible is changed to lower-case.

    Only selectors, quoted strings (such as ‘Times New Roman’) and url() values are left intact.

    Note that this means that if you mix the case of your selectors (for example, SPAN and span), your compression will be sub-optimal.

    Thanks

    Some of the ideas for this update were inspired by Lottery Post’s CSS Compressor.

    Start using it!

    Requirements

    You will need a recent version of Java and the Java compiler.

    Download

    Download or fork it on GitHub.

    Usage

    1. Compile the Java: [sourcecode]# javac CSSMin.java[/sourcecode]
    2. Run your CSS through it: [sourcecode]# java CSSMin [input] [output][/sourcecode]

    If you don’t specify an output file, the result will be dumped to stdout. Warnings and errors are written to stderr.

    Results

    These are the results of compressing the main CSS file for one of the webapps I develop at work. Note that many of these compressors only offer an online service, which means that they can’t easily be used as part of your general build process.

     Original size (bytes)Gzipped size (bytes)
    Plain8193812291
    YUI6443410198
    LotteryPost6360910165
    CSS Drive6927510795
    CSSMin637919896

    Feedback

    Let me know how you go with it — bug reports and feature requests are always welcome!

  • Theme update (again!)

    And so, for the third time this year, I’ve completely re-themed this site. Taking a very different tack from the last theme, I’ve tried to keep this one as simple as possible, with just a few subtle touches here and there to add interest. The palette is more subdued, which hopefully means that reading the text is a more pleasant experience. I’ve also done away with the multi-column body text in favour of a fixed-width design.

    At the same time, though, I have endeavoured to use some of the new features available in modern web browsers — gradients, shadows, transitions, generated content, and so on. I’m fairly happy with the result — I think it’s a clean, unobtrusive theme that’s not too in your face. Feedback and criticism welcome! 😀

  • Generative Music

    Continuing my HTML5 and canvas experiments, I’ve put together a generative music system. Essentially, a series of particles move across a field, occasionally triggering sounds — the sound triggered depends on their location in the field.

    There is, of course, a little bit more to it than that. Under the hood, I’ve got a series of HTML5 Audio objects that are used to provide polyphonic audio using a simple round-robin algorithm (I encoded the audio in OGG, so you’ll need to use an OGG-friendly browser, like Firefox). The particles are much simpler than those in my previous canvas dalliance, in that they don’t swarm, and their motion is more linear.

  • Canvas Swarms

    I’ve been meaning to start playing with the HTML5 <canvas> element for a while now, and yesterday I took the opportunity. I translated a Processing sketch I made a while ago into JavaScript (with a few minor enhancements).

    Essentially, 1 to 3 swarms of particles move around the canvas, reproducing when the conditions are just right, and dying of old age. Quite simple, but the patterns produced can be really quite pretty.

    One interesting thing that I discovered whilst doing this is that you can’t pass around a canvas’ context at the instantiation of a MooTools class — it complains about wrapped natives. That’s why, if you like in the source JavaScript, you’ll see me pass the actual context around to various functions. I’d be interested in hearing if anyone has a workaround for this, because this is, well, a bit clunky.

  • HTML: IE file submission

    I’ve been bumping up against an interesting bug in Internet Explorer recently, and, having just found the solution, thought I’d share it with you.

    The problem is that in Internet Explorer (tested 7 & 8), when your document is in quirks mode, uploading a file sometimes just sends through the file name, without the actual body of the request. Put the document into standards mode, and it all works. It should be noted that this is when you’re dynamically setting up the elements used with JavaScript.

    The cause? In quirks mode, the enctype attribute isn’t supported. So whilst setting “encType” on the form element to the correct “multipart/form-data” will indeed set this attribute, it won’t actually cause the upload to include the file. Instead, you need to set the encoding attribute to this value, too. It certainly doesn’t help that the MSDN article on the <input type=”file”> element tells you to set “enctype”, but makes no mention of “encoding”.

    I couldn’t find any reference to this problem on the intertubes (although maybe I just didn’t look hard enough), so hopefully this will help someone.

  • Javascript: Print a single element

    Sometimes, you’ll want to allow users the ability to print only a part of your page; for example, a table but not the various links around the page. It’s possible to use a printing stylesheet, but this can cause severe headaches when you need different parts printed at different times. Really, we want to be able to just say element.printElement(), and have it just work. That’s what the MooTools function below does. It’s loosely based around the concepts outlined at this website.

    [sourcecode language=”javascript”]Element.implement({
    printElement: function(docTitle) {
    var strName = ‘printer-‘ + (new Date()).getTime();
    var styles = [];
    $$(‘link[type=text/css]’).each(function(style) {
    styles.push(‘‘);
    });
    var title = docTitle || document.title;
    var that = this.getParent();
    var iframe = new IFrame({
    name: strName,
    styles: {
    width: 1,
    height: 1,
    position: ‘absolute’,
    left: -9999
    },
    events: {
    load: function() {
    var doc = window.frames[strName].document,
    win = window.frames[strName];
    var f = function() {
    if (!doc.head) {
    f.delay(10);
    return;
    }
    // We need to delay printing so that styles are applied.
    (function() {
    doc.title = title;
    // IE7 won’t let us adopt() here for some reason, and we can’t do anything to the head.
    doc.body.innerHTML = styles.join(”) + that.innerHTML;
    (function() {
    win.focus(); // IE needs the window to be focused.
    win.print();
    }).delay(100);
    }).delay(200);
    };
    f();
    }
    }
    }).inject($(document.body));
    (function() {
    iframe.dispose();
    }).delay(30000);
    }
    });[/sourcecode]

  • Input elements that fill their container

    Previously, this post advocated the use of “text-indent” on a padding-less, border-less, 100% width input. This works, but it’s quite clunky, and old versions of IE don’t support text-indent, so it just looks bad. A much better solution is to

    Just use box-sizing.

    As pointed out in the comments, the simplest solution is to simply change the box-sizing model of the input element to “border-box”, rather than the default “content-box”. In the example below, I’ve given the containing div a 4px whiteborder.

    [sourcecode language=”xhtml”]

    [/sourcecode]

    Note that for Firefox, you still need to use the -moz- prefix; it’s supported unprefixed in all the other major browsers, though.

    Updated 2012-08-03.

  • Google Wave & iPhone

    I just tried out Google Wave on the iPhone. Interestingly, despite an initial “your browser is not supported” message, the actual system sports a rather snazzy app-like interface on the iPhone.

    I’ll be interested to see what kind of support Wave will ‘officially’ have on mobile platforms, and perhaps even more interested in what ‘unofficial’ support there’ll be.

  • CSS Columns

    In this post, I will walk through the new columns specification that arrived in CSS 3. I will show you the current implementation state of columns in the four major rendering engines: Gecko (Firefox), Webkit (Safari & Chrome), Trident (Internet Explorer), and Presto (Opera).

    Before we get on to platform-specific issues and workarounds, though, we’ll look at the various CSS properties available for working with columns.

    For more in-depth information on columns, you should check out the W3C working draft and Mozilla’s MDC page on columns. The Webkit blog also has an article, but it’s not particularly informative.

    Contents

    I will add more to this entry as I discover more about columns — the goal is to make it an easy-to-understand reference.

    Browser capabilities

    PropertyGeckoWebkitTridentPresto
    column-count-moz-column-count-webkit-column-count
    column-width-moz-column-width-webkit-column-width
    columns-webkit-columns
    column-gap-moz-column-gap-webkit-column-gap
    column-rule-color-moz-column-rule-color-webkit-column-rule-color
    column-rule-style-moz-column-rule-style-webkit-column-rule-style
    column-rule-width-moz-column-rule-width-webkit-column-rule-width
    column-rule-moz-column-rulecolumn-rule
    column-span
    column-fill
    break-before
    break-inside

    Browsers used for testing: Firefox 3.5.4 (Windows), Safari 4.0.2 (Windows), Internet Explorer 8.0.6001, Opera 10.00 (Windows)

    Please let me know if this table is inaccurate, and I will update it.

    Browser bugs

    These are the bugs that I have encountered using CSS columns — if you know of more, please let me know, and I’ll add them to these lists.

    Gecko bugs

    • Specifying an “overflow” (or “overflow-x” or “overflow-y”) property on an element with columns prevents the column rule from being rendered at all.
    • Column rules occasionally don’t render, regardless of the “overflow” property.
    • There is no way to break columns.

    Webkit bugs

    • Pixel creep: Pixels from a later column can creep back to the bottom of the previous column. This can happen with plain text, but it is much more noticeable when you use a non-layout altering effect like text-shadow or box-shadow.
    • Text that overflows the column horizontally is chopped off
    • There is no way to break columns.

    Properties

    column-count

    Value: | auto
    Initial value: auto

    If you don’t set the column-width property, column-count specifies the number of columns into which the content should be flowed.

    If you specify column-width, column-count imposes a limit on the maximum number of columns to be rendered if you supply a numeric value.

    column-width

    Value: | auto
    Initial value: auto

    This property indicates the optimal column width — columns may be rendered narrower or wider by the UA, according to the available space.

    If column-width has the value “auto”, then the width of the columns is determined by other means (for example, column-count).

    columns

    Value: column-width && column-count

    The columns property is a short-hand property, used to set both column-width and column-count simultaneously.

    column-gap

    Value: | normal
    Initial value: normal

    Use column-gap to specify the size of the gutter that lies between columns. Most UAs will render “normal” as 1em.

    column-rule-color

    Value:

    When a column-rule is specified, you may use column-rule-color to set the colour for the line drawn between columns. This property is approximately equivalent to the various border-(?)-color properties.

    column-rule-style

    Value:

    By using column-rule-style, you may determine how the line between columns is to be rendered, if at all. Similar to border-(?)-style.

    column-rule-width

    Value:
    Initial value: medium

    column-rule-width sets the width of the line rendered in the gutter between columns. Basically, it’s the same as the border-(?)-width properties.

    column-rule

    Value: column-rule-width && column-rule-style & & column-rule-color

    Shorthand for setting all three column-rule properties.

    column-span

    Value: 1 | all
    Initial value: 1

    By using column-span, you can allow an element to span either the entire set of columns, or none at all.

    Note that you cannot set an arbitrary number of columns to span — this property essentially ‘interrupts’ the column flow and restarts it below the spanned element.

    column-fill

    Value: auto | balance
    Initial value: balance

    If you have set a height for your columnified element, setting column-fill to ‘auto’ will cause the columns to be ‘filled’ in turn, rather than have the content balanced equally between them.

  • New theme!

    Well, I spent the weekend quickly working up a new theme for my site. I wanted something was a) a lot simpler, and b) showed off some of the cool new CSS 3 features available.

    Cool CSS features used:

    • Columns (Gecko, Webkit, Presto)
    • Web fonts (Gecko, Webkit, Presto, Trident)
    • CSS gradients (Webkit)
    • CSS transforms (Gecko, Webkit)
    • Text shadow (Gecko, Webkit, Presto)
    • Assorted CSS3 selectors and pseudo-selectors (Gecko, Webkit, Presto)

    In case you’re wondering, Gecko is Firefox’s rendering engine, Webkit is Chrome & Safari, Presto is Opera, and Trident is Internet Explorer. Now you know. Tell your friends!

    All in all, lots of fun stuff to play with.

    Rendering bugs

    Of course, the fun thing about playing with cutting edge features is that you get to find all sorts of bizarre glitches and rendering issues. Here are a few that I’ve noticed during development.

    Missing letters (Presto)

    Letters just seem to go missing randomly from words — “you” becomes “yo”, for example. I think that this is caused either wholly by the downloaded font, the use of columns, or a combination of the two. Quite annoying.

    Pixel creep in columns (Webkit)

    Every now and then, pixels from a word in column B will find their way to the very bottom of column A. It’s even worse when you set a box-shadow on an element — the top of the shadow is rendered in the previous column. I’m guessing that Webkit’s column-rendering algorithm basically renders the entire area in a long strip, then cuts it into chunks and shoves them on the page. Annoying.

    Disappearing column rules (Gecko)

    Apparently, setting the “overflow” property (or “overflow-x” or “overflow-y”) on an element that is rendered in columns prevents the column rule from being rendered in Gecko. I really have no idea why this should be the case — it’s a very strange behaviour.

    HTML 5 element styling (Trident)

    Internet Explorer can’t style elements that aren’t bog-standard HTML. Unless you use “document.createElement(‘elemName’)” on them first. Ridiculous.

  • CSS minifier and alphabetiser

    Update: This project is now hosted on GitHub: https://github.com/barryvan/CSSMin/

    There are quite a few CSS minifiers out there, which can bring the raw size of your CSS files down substantially. There are, however, significant gains to be made if the CSS is minified so that it gzips better. To that end, I’ve written a small Java application that will read in a CSS file and output its contents to stdout or another file in a format that’s optimised for gzipping.

    The problem

    A gzipped file will be stored most efficiently when there are many recurring strings in the file. This means that when writing CSS files, this code:
    [sourcecode language=”css”].pony {
    border: solid red 1px;
    font-weight: bold;
    }
    .lemur {
    border: solid red 1px;
    font-weight: normal;
    }[/sourcecode]
    will be better-compressed than this:
    [sourcecode language=”css”].pony {
    border: solid red 1px;
    font-weight: bold;
    }
    .lemur {
    font-weight: normal;
    border: red solid 1px;
    }[/sourcecode]
    In the first sample, notice that we have a very long string that occurs twice:

     {
    border-style: solid red 1px;
    font-weight: 

    In the second sample, there are strings that occur more than once, but they’re much shorter. The gzip algorithm can, in the first case, replace that entire long string with a much shorter placeholder.

    What it does

    So, how can we optimise CSS for gzipping, then? A file that’s minified using this CSS Minifier will have these operations applied:

    • All comments removed.
    • The properties within all selectors ordered alphabetically.
    • The values for all properties ordered alphabetically.
    • All unnecessary whitespace removed.
    • Font weights replaced by their numeric counterparts (which are shorter).
    • Quotes stripped wherever possible.
    • As much text as possible transformed to lowercase.
    • Prefixed properties (for example, -moz-box-sizing) placed before the unprefixed variant (box-sizing).
    • Colours simplified from rgb() to six- or three-digit hex values, or simple names.
    • Units on values of 0 stripped.
    • Multi-parameter items simplified to as few parameters as possible.
    • Various other small tweaks and adjustments made.

    By way of example, the following CSS snippet:
    [sourcecode language=”css”]body {
    padding: 8px;
    margin: 0;
    background-color: blue;
    color: white;
    font-family: “Trebuchet MS”, sans-serif;
    }

    h1 {
    margin: 0;
    padding: 0;
    font-size: 200%;
    color: #0F0;
    font-weight: bold;
    }

    p {
    margin: 0 0 2em;
    line-height: 2em;
    }[/sourcecode]
    would be formatted to the following (note that line breaks have been added for legibility — no line breaks appear in the final output):

    body{background-color:blue;color:#fff;font-family:"trebuchet ms",sans-serif;
    margin:0;padding:8px}h1{color:#0f0;font-size:200%;font-weight:700;margin:0;
    padding:0}p{line-height:2em;margin:0 0 2em}

    Compression results

    These are the results of compressing the main CSS file for one of the webapps I develop at work.

     Original size (bytes)Gzipped size (bytes)
    Plain8193812291
    YUI6443410198
    LotteryPost6360910165
    CSS Drive6927510795
    CSSMin637919896

    Download

    Head over to GitHub to download the source.

    Usage

    First, if you haven’t done so yet, compile the code:
    [sourcecode]# javac CSSMin.java[/sourcecode]
    Then, you can call the minifier by running
    [sourcecode]# java CSSMin in.css [out.css][/sourcecode]
    If you do not specify an output file, the resultant CSS will be printed to stdout (and can then be redirected as you wish).

    Contact

    If you have any questions or comments about this app, or if you find a bug or some weird behaviour, just comment on this post, and I’ll see what I can do.

    You can also raise issues on GitHub, fork the project, commit changes, and more.

    If you find this utility useful, let me know!