I'm one of those web devs that likes to make both my source code and the output look at pretty as possible. Pretty output to me is with as much whitespace and bloat removed so a recent update to Liquid makes this simple! Let's explore it.

The merged magic

Head over to github to see the merge. 

Example

This is a pretty simple update and so easy to use. If you want to remove the whitespace around a Liquid tag just throw in a minus character. For example instead of {{ 'foo' }} you'll do this instead: {{- 'foo' -}}. {%- foo -%} tags are included as well.

This matters when doing things like this:

{{ 'foo' }}

{{ 'bar' }}

The output source of the above is going to look like this:

foo

bar

If we use the new method:

{{- 'foo' -}}

{{- 'bar' -}}

The output will be a neat:

foobar

Try it out in your code and see just how nicely it reduces the whitespace. Every bit of whitespace saved is less data the Customer has to download. Google will also love you more since you've kept your page HTML nice and compact.

Shout out to Evulse for doing the hard yards on this.

Old methods

I'm guilty of adding in various string replacement and strip_newline hacks to reduce the html footprint, but this nicely makes all of those largely redundant. Not sad about that at all.

This also makes my simple inline-block css grid framework even easier to implement since I can remove the whitespace between elements automatically. This grid and whitespace control tags will be featured in an upcoming post on adding a grid system to content added within the RTE.

If you're curious about those older methods just give me a shout and I'll throw up a quick gist link with example code.

Cat tax?

Is the cat a good analogy for what we're talking about here? Who knows, but that whitespace sure if filled nicely by that cat...