Journal of David Turner

Setting Up Vagrant in OS X 10.11 El Capitan

David Turner — Fri, 19 Jun 2015 16:00:00 +0100

With Apple having made OS X 10.11’s first Developer Preview available to developers, and my addiction to using new and shiny things, I’ve just finished setting up a new partition using the Developer Preview. Getting it set up was pretty simple. With the exception of Vagrant.

OS X Security - Rootless

Apple’s rolled out a few new security features to try and limit the damage that malicious code can do to the operating system. Part of this includes locking down the ability to access/edit certain folders. One of those folders seems to be /usr/bin, one of several folders that Terminal programs include in their $PATH for use by us as users. Vagrant’s installer currently symlinks a a reference to their vagrant command in this folder and, in 10.11… that no longer works. Everything gets installed, but the command itself isn’t made available to the terminal because the symlink silently fails to be created.

Fortunately, it’s not a terribly difficult thing to work around, once you know what’s going on. The folder /usr/local/bin isn’t restricted in the same way as /usr/bin and it’s another folder that should be included in your $PATH. The relevant command we want is installed into the /opt/vagrant/bin/ folder. We can use the following command to create a symlink for the vagrant command:

ln -s /opt/vagrant/bin/vagrant /usr/local/bin/vagrant

A quick restart of terminal and voila, Vagrant should be working once more!

gulp-mailgun

David Turner — Fri, 02 Jan 2015 20:45:00 +0000

I’m a big fan of gulp.js for automating tasks when it comes to design and front-end development. I use it for my own personal work, any freelance work I’ve undertaken, and we make heavy use of it at Get Invited. It makes our lives easier and I plan to write a bit more about that, and share how we use gulp.js day-to-day, in a future post.

Today I wanted to write a little bit about my contribution to gulp.js in the form of a package I released several months ago. I haven’t written anything about it until today.

Building Upon Gulp.js

Gulp.js is built upon packages, and there are quite a few available to users. It doesn’t have as comprehensive a list of packages as other tools like Grunt.js does, but it covers what I’ve found to be my standard needs.

Except one.

Sending emails.

Fucking emails.

One of the areas that we need to test at Get Invited is cross-service email client consistency. We send a lot of emails out to customers so it’s important that we test all email layouts thoroughly to make sure that everything works. Services like Litmus are great for testing how an email looks but we needed to get the email through to the service before we could test things.

Gulp didn’t have anything that fit our needs, but Grunt.js did. Both gulp.js and grunt.js are powered by JavaScript, so at their core they’re the same thing. If there’s one thing that I’ve always been good at, it’s breaking one thing and reassembling it as something else. It’s how I taught myself to code in my teens, and I applied that approach to learning here.

Much confusion and frustration later, and I had a working implementation of mailgun for sending emails directly from gulp.js. I could send emails quickly and easily as a part of my build process, rather than having to manually submit the markup via a web interface.

It was bliss.

Released into the Wild

I quickly put it up on Github, but I’ve published the package on NPM, as it makes installing gulp-mailgun a lot easier. It’s been seeing usage since I released it but I’d love to hear what people think of it.

More to Come

I’m planning to write more about how we use gulp.js at Get Invited in the future, and hope to share some of the tools and approaches we use with things over the coming weeks and months.

I’m also hoping to inflict more of my own thoughts and processes on you all too. Running a startup really eats into my time but this year I plan to set aside the time to share my thoughts more often. I hope that it’ll be as beneficial to those who read my articles as it is for me to write them.

Manners Maketh the Man

David Turner — Mon, 08 Sep 2014 19:00:00 +0100

I can’t remember when I first heard the phrase “Manners Maketh the Man”, but it has always stuck with me. Being polite to one another is an all too uncommon trait in people these days, especially for how little it costs us as people to be polite to one another. It’s something that one of my mentors, and my good friend, Chris Murphy goes to great lengths to try and instill in his students, that being polite costs us nothing but can make someone’s day so much better.

It’s the Little Things

I recently saw this tweet by David Heinemeier Hansson, on the topic of how conversations tend to start in the US:

Lived in the US a decade. Still can't get over the bizarre hello protocol: "Hey, how are you? Great, thanks. How about you? Good, thanks!"

— DHH (@dhh) August 28, 2014

Last month I spent a couple of weeks in the US visiting friends, and I saw this a lot but I didn’t stick to the standard script. I replied sincerely, and it showed in the responses that I received from people. Staff at stores who had gone through the motions with countless people, almost as automatons, were suddenly smiling and conversing, where they’d been quiet with every other customer. They seemed a little bit happier, a little bit more alive, whilst we were talking.

The same is true here in Northern Ireland as well. Chris Murphy talks about the importance of saying “thank you” to people. It doesn’t cost us anything to say, but to a bus driver who has been sat behind the wheel for hours it can truly brighten their day. This politeness can lead to recognition, and when you become a regular customer you would be amazed at what can happen.

Business Applications

Being nice to people goes beyond being polite in our personal lives. We’ve all, at some point or another, had to deal with customer or technical support from a company we’ve bought something from. How many good experiences have you had during these interactions? Few to none in most cases.

At Get Invited I tend to serve as our first point of contact for people experiencing problems using Get Invited. 90% of these requests are easily dealt with, amending a customer invoice or directing people to contact an event organiser. Sometimes, though, things require a little bit more effort, and paying attention at these times can be really beneficial.

Supporting Customers

Some time ago I received a support request from a customer who had purchased a ticket to an event. The support ticket came in with the title “Please Help Me” and there was no content in the ticket. How could I help in this situation?

We have a rather comprehensive set of tools that tracks what’s going on with our systems, and I was able to confirm that a similar email address had been used to purchase a ticket, but that the email containing the ticket had been Hard Bounced when being received. It was a case of a typo’d email address. I was also able to see that the company in question had also recently rebranded itself, taking on a new name and, along with it, a new domain name.

I could have replied asking this person how I was able to help them but, after investing 5 minutes of my time, I was able to reply to them explaining the situation, offer a solution, and ask them where they would like their ticket email sent to. The result was a much happier customer. It was also an easy thing for me to do, and dramatically sped up the resolution of the issue for this customer. Everybody won.

Client Invoicing

I also deal with sending invoices to our customers. This puts me in direct contact with the people who make our business a success. It’s one of the opportunities that allows us to directly interact with our customers, and to show them that we care about them.

When I’m sending out invoices I take the time to add a custom message to each email I send. When it’s my first time sending them an invoice I make sure to explain how our system works, and reassure them that no money is owed, as we charge our commission when a sale is made. I also always try and include a message that is tailored to the customer.

Sometimes these messages are simply hoping that the weather where the customer is is better than here in Belfast, but I have also congratulated people on recent announcements they have made or asked if they were able to enjoy a recent holiday. This has helped establish relationships with several of our customers, all for the investment of a couple of minutes of my time. This investment helps me to get to know our customers a little bit better, but also lets our customers know that we care about them and that they can approach us at any point should they feel the need.

Manners are Easy, and the Benefits are Substantial

A barista in a coffee shop that can remember your order, and have it ready for you when you call in is great. A barista who can remember your order for a year and recall what it is when you happen to call in… that will stick with you. It’s the rare kind of exceptional experience that helps foster loyalty.

In the grand scheme of things, it doesn’t take a great amount of effort to be polite to others, to provide a memorable experience, and it can help to turn around the worst of days. It can help us in our personal lives, but it can help make our professional lives better, too. Isn’t that worth the investment of a few minutes of our day?

Industry Conference 2013

David Turner — Sun, 28 Apr 2013 12:14:00 +0100

The last few days have been quite the journey for me. It was my first time in Newcastle, my first time attending any conference aside from Build, and the first time being involved with sponsoring an event. So many new experiences for me in such a short period of time, with high quality talks over the course of the day, but it was great to spend time talking with people about Get Invited. I loved it.

Sponsoring - Get Invited

The real highlight of the day was to be an official sponsor for the event, complete with our own exhibit that allowed Kyle Gawley and myself could demo Get Invited for attendees. We’ve spoken to people about Get Invited before, but never as a sponsor. We had a few minor kinks in the run up to Industry Conference, but things went smoothly on the day, and it was great to spend time speaking with people interested in using what we’ve built, catching up with friends working in the same area as ourselves, and talking with a represantive from a local accelerator programme.

Getting to talk with people about Get Invited was a real joy for me, and the feedback we got from people was positive. We also got input on how to work through some of the issues we’re currently experiencing. It’s one of the truly great things about our industry, the openness we have and our willingness to share what we know with others. Something that Industry Conference attendees and speakers really demonstrated over the course of the day.

The Talks

There was a lot to learn at Industry Conference, and I’m sure that others picked up on things that I didn’t pick up on. Below you will find my thoughts on each of the talks.

Rachel Andrew - Things Learned While Supporting Perch

Rachel was the first speaker of the day, and spoke about how supporting a product that can really help that product to grow and evolve. Interacting with customers is a way to see what they like about a service, but it also lets you see where things could be better, and where they could grow. In a world of free products it is this attention to customer needs that allows a paid-for product to stand out, simply making a good product that you charge for isn’t enough.

This has really opened my eyes to some of the things that I, and my fellows at Get Invited, really need to start thinking about now. Having a great product isn’t enough if people running into issues then have a bad experience. Everyone had bad experiences, and almost everyone talks about those experiences. The number of people who talk about the good experiences is much smaller, and in my own experience they also don’t talk about them for as long.

In her talk she also spoke about the importance of getting the structure of supporting customers right from as early on as possible. As a product grows in popularity, the number of issues you get contacted about will too. A support structure that can’t grow with your popularity is going to be a bad experience not just for the people giving support, but for those needing it. That’s not a pleasant experience for anybody.

Harry Roberts - Architecting Scalable CSS

In my notes for this talk I jokingly referred to it as “Fixing Kyle’s CSS”. Kyle writes good code and good CSS, but I know from reading a lot of the things Harry writes that there is still a lot that both Kyle and myself could do to streamline things further. The talk didn’t disappoint me. Some of what he wrote about were topics I’d already read from his site, but there was a great deal that I still picked up from listening to him.

I loved the idea of viewing CSS as similar to Lego. You can do so much with a single Lego set. You can make the set, but you can ignore the instructions and make a limitless amount of things with the bricks you get. And that is without mixing multiple kits together. You can achieve similar results with CSS. You could follow a guide/tutorial and make a specific thing but you could then turn around and, with that same knowledge, make something completely different.

Harry also spoke about the idea of breaking things down into components, and about the idea of having bits of CSS that do only one thing, but that do that one thing very well. You can mix and match these comonents together to make things, all without repeating a vast amount of style rules in your CSS. It’s something that I try and do when I’m writing CSS but there is still room for me to improve. I think I need to focus on the idea of a Minimum Viable Component. If I have to write a few more components in my CSS, that I can then use as needed elsewhere, I don’t think I’ll mind. At all.

Finally he spoke about the importance of having a structure for the styles behind a site, and sticking to it. Having a structure, and a flow, to things is important. He also spoke about the idea of having a shame.css file that is where you put in temporary hacks that need to be sorted when an opportunity presents itself. I’d heard of it before, but still love the idea of it. We’ve got something similar working with Get Invited at the moment, as you can see in the admin panel’s source code:

<link rel="stylesheet" href="/themes/getinvited/css/last-minute-fixes-by-dave.css" />

I plan to have that file gone within the next week.

Chris Murphy - We are Navigators

After a short break we had Chris Murphy, one of the founders of Get Invited and generally awesome guy, speaking about education in our industry. As someone who is involved, in a small capacity, with education for the web, much of what he spoke about resonates with me. His talk started with a five minute clip from the final moments of Dead Poets Society, using it to highlight the different approaches some people take to education.

The clip highlights that a good educator is able to truly help their students to grow as a person, to transform into something more. That this is something that education should be doing as, ultimately, education helps to shape the mind… an important thing to get right. Something that, sadly, hasn’t been the case through much of my pre-university education. Even there it was only certain individuals who cared, or seemed interested, in the material they cover.

Chris spoke about how education isn’t just about teaching, but about the ability to teach students how to learn, rather than how to do. Teaching a person how to do one thing is very limited, teaching people how to learn more about what they are doing lets that person develop, grow, and ultimately do what it is they want to do, rather than doing the one thing that they were taught to do. Education should create good people, not people good at one techincial skill.

I’ve studied under Chris for the last year and a half and, during this time, he has been someone who has helped me turn something that I am good at, and that I enjoy, into the beginnings of a business that allows me to get paid for doing the things I love to do. Educators could, and should, be more like this, and having gone through at least some of what he covered in his talk it serves as a further motivation for me to do what I can to help in the field of education.

I wouldn’t be doing what I am doing now without help from people like Chris. Education needs more of the things that he is doing and I’m more committed than ever to doing what I can to help in that sector.

Ashley Baxter - Changing a Stagnant Industry

I’d heard that this was Ashley’s first speaking engagement but there was no evidence of it from where I was sitting. Speaking of her journey from her education to running a business she had no understanding of, she delivered one hell of a talk about how she’s accomplished everything she has. I can only imagine trying to get to grips with insurance, but the idea that achieving small things allows the bigger things to happen is something I have found to be very much true.

There are so many industries that have issues in them. Education was mentioned in the previous talk, and Ashley works in another: insurance. It’s an industry that seems so archaic, using ancient software to operate, but that seems to be continually pushing to find the smallest price possible. Technology provides an opportunity to produce a better experience to customers, an experience worth more than the “lowest price possible” that others stive for. Good things are worth paying for.

Insurance isn’t the only industry that suffers from these kinds of techonology-related issues, and an application of technology can give a new edge to comptetitors. I’d love to see more people or businesses harnessing technology to improve some of the most tedious of industries to make them better for the people working in them, and the people that use them.

I’d also like to take my hat off to Ashley for her ability to pick up Ruby so quickly. I’ve tried doing the same, as a developer of multiple things, and I simply cannot wrap my head around it so I have a great deal of respect for people that can make it work for them.

Noah Stokes - $50,000 Mistakes

Noah’s talk covered his journey from Apple engineer through to setting up his own design studio, something that came from his lack of passion for what he was doing. A lot of what he talked about resonated with my own experiences in certain aspects of my professional life, experiences which have helped guide to to what I’m now doing professionally.

He also spoke about some of the other aspects of professional life, including something that I’ve heard multiple times before, that you will only get better by working at things and that you’ll only ever get to do the work you want to do if you start doing the work you want to do.

Rasika Krishna - Cross-Cultural UX

Rasika’s talk was an impressive talk for me, not just because of the content, but because of the fact she’d just flown in from Singapore. Her talk took a look at how different cultures can perceive a design. Many designers will, of course, be familiar with the impact of colour in a design, but her talk went a bit deeper taking a look into the principles of psychology, cultural groups, symbols, and the need for things to be a conversation when working with people.

I really liked hearing someone talk about things being more of a conversation when dealing with clients. Communication is an important aspect of things to get right, but it’s also important to listen and to understand what is being said. I often find myself failing to do this. What a customer says is often worded in a way that we as designers don’t get, but that makes perfect sense to people talking to us. We should learn to communicate better with customers and clients, and to guide them in ways that benefit both of us.

Oh, and the convention of naming icons in a manner such as “hamburger icon” is absurd. Can we stop that doing that kind of nonsense?

Josh Brewer - Redesigning Twitter

Josh spoke about the process used in designing the #newnewtwitter, a large scale design project encompassing all of twitter’s public facing designs. He covered some of the problems they had, and some of the methods they used to solve them. He also empahsised the importance of not letting people fall into the trap of thinking design is magic. This is something I need to do a better job of handling with my own development work.

He also spoke about the importance of standardising the design tools used on a project. In my freelancing I often work with people using different tools, which is fine, but it can understandably become an issue when working with a team of people continually. Having a consistent design tool makes life a lot easier.

He also has me convinced that I need a plotter/printer so that I can attack all of Kyle’s deisgn work with a red sharpie.

Jeremy Keith - What We Talk About When We Talk About The Web

Jeremy was a last minute speaker who stepped in to replace John Allsopp. Jeremy himself was the first to admit that his talk wouldn’t be the same as one by Jeremy, but it was a talk that I greatly enjoyed. He broke the web down into the components that make the web work, and upon the importance of understanding how links and forms should work. It’s already making me rethink a significant chunk of the functionality in the work I have been doing recently.

Whilst I agreed with a great deal of what Jeremy spoke about with regards to how links worked, that they should never perform an action instead serving to connect pages together, I really loved how he spoke with regards to making things work in the responsive web With the shift from designer-enforced dimensions to a fully fluid experience, with the rise of the smartphone, and with mobile data connections, optimising sites is even more important than ever. Some of what he pointed out I had heard about/read up on before, but some of the ideas were new, and I’ll definitely be putting them to use going forward.

Community

I really enjoyed the talks and being there representing Get Invited, but the thing that I loved most about Industry Conference was the people there. The industry we work in has a great community, and I loved catching up with friends, finally meeting people I’ve spoken with for months on twitter, and making new friends at the fringe events that were put on over the time I was in Newcastle. I can’t wait to do it again.

Symbolset Sass Functions

David Turner — Fri, 22 Mar 2013 15:03:00 +0000

Symbolset has a selection of, simply put, awesome icon fonts that make life easier when it comes to using icons on the web. Rather than creating static images of the icons, which can get unweildy and time consuming, you include a custom font and you’re good to go.

Which is great, but sadly it comes with two issues:

Loading multiple files for icons can get quite unweildy, especially if you only need one of two icons.
The default CSS can get quite lengthy if you use it as is.

Fortunately the people providing the fonts are working to fix the first issue. I thought I’d share one of the approaches I’ve been using for a while. I’ve written about another in the past. This one’s a bit more Sass-y.

I’ve put together a series of Sass functions that can be used to return the content you need based on keywords entered. I’ve managed to put together a series of mixins that cover the following fonts:

Symbolset Standard
Symbolset Social (and SS Social Circle)
Symbolset Pika
Symbolset Symbolicons Block (should work for Symbolicons Line too)
Symbolset Gizmo

How?

I’ve put together a Sass file on Github (link removed) that you can use in any Sass/Compass project. I’ve defaulted things to not include any fonts by default, you can enable fonts as you need them by changing any of the 0 values to 1. You can also change the default font location by changing '../fonts/' to a value that suits your own file structure.

Once you’ve got the file included you can start using the Sass functions in your code. Each function requires a keyword, and will return the characters used in their respective Symbolset Font CSS. The keywords you’d use are the exact ones you see in the documentation for the fonts.

Example usage:

.rss:before {
  content: ss-standard-icon ( 'mail' );
}

This would return the output the following CSS:

.rss:before {
  content: '✉';
}

The different functions currently available are:

ss-standard-icon ( 'keyword' ) for Symbolset Standard
ss-social-icon ( 'keyword' ) for Symbolset Social (and Social Circle)
ss-pika-icon ( 'keyword' ) for Symbolset Pika
ss-symbolicons-icon ( 'keyword' ) for Symbolset Symbolicons
ss-gizmo-icon ( 'keyword' ) for Symbolset Gizmo

Doesn’t Include

Please note that this code does not include any of the Symbolset fonts, this is merely something that allows you to cut down on the amount of CSS in your code, because unnecessary code is never a good thing.

Things to Note

I’ve found, whilst working out how best to automate this system, that Sass doesn’t seem to like if statements past a certain number of options. You’ll see that there are multiple functions called to return the right character. I found that these fonts simply had too many glyphs for Sass to be able to work their way through in a single function. If people are aware of any better way to implement this kind of thing (I’d love some kind of Sass switch function for this) then I’d love to hear it.

This is also a smaller part of a Sass toolbelt type framework I’m currently working on. If you find this useful and would like to play around with the more complete package let me know. I plan to release the full thing once I am happy with how it is structured and how it works.

Simple CSS Goodness

David Turner — Wed, 27 Feb 2013 11:09:00 +0000

I’ve been tinkering with my site over the last few days, and it’s resulted in a few under the hood improvements that I thought I’d share. None of it is especially mind-blowing, it may even be common sense to a some people, but when I mentioned it on twitter some people thought it was a neat idea, so here it is.

Styling Based on Attributes

This is something Chris Coyier has written about in the past in the past, styling elements that have certain attributes attached to them. This can work really well for providing styling defaults to mutliple classes at once, such as btn-large and btn-small by identifying that they both start with btn-.

It’s possible to do more though with CSS by using content of selectors using CSS. This is something that A List Apart has covered when talking about styling things for print, showing URLs after links as a user can’t click on a printed page. It’s also a fundamental part of the clearfix hack that anyone on the web is likely to be familiar with.

We can do some pretty clever stuff with these two things. I’ve recently put it to work with regards to using icon characters from the Symbolset fonts. The CSS that they provide requires adding a lot of CSS classes to both your markup and in your stylesheet. I switched away from that to a set of Sass mixins that return characters, but it still requires that I add a chunk of CSS to my site to handle individual characters.

Then it struck me, I could switch to using an attribute on the HTML elements that I wanted to have these characters appear on. Something like this:

<a href="/" data-icon-standard="⌂">Home</a>

The important part of this is the HTML5 data- attribute on the link. It’s got a standardised name for a specific type of character. I currently have two different attributes that I make use of:

data-icon-standard: I use this for characters from Symbolsets’s SS-Standard font
data-icon-social: I use this for characters from Symbolsets’s SS-Social font

This vastly simplifies the CSS I need to use to style these elements up. Previously each icon I wanted would have needed a new CSS class to add the right character for me. something like:

.home:before { content: "⌂"; }
.email:before { content: "✉"; }
.plus:before { content: "+"; }

Add more characters to this and you can see that it could, quite rapidly, become quite unweildy. Instead I can add the specific characters to my markup, and have them added using CSS:

<a href="/" data-icon-standard="⌂">Home</a>
<a href="/" data-icon-standard="✉">Email</a>
<a href="/" data-icon-standard="+">Add</a>

With this in place I can simplify my CSS to the following:

[data-icon-standard]:before {
  content: attr(data-icon-standard);
  font-family: SSStandard;
}

This takes care of the character and sets the correct font. It might be a bit over the top for just a single icon, but if you find yourself using multiple icons over the course of a project this simplifies the addition of characters to a site quite a bit.

Let Me Know What You Think

This is something I’ve just started experiementing with, and you can see it on the navigation above but also in the footer below. I’d love to hear about how other people put this kind of thing to use, either in the comments on below on on twitter.

Pronto

David Turner — Fri, 15 Feb 2013 13:38:00 +0000

Pronto is a rather awesome little jQuery plugin I’ve just implemented in my site. In the words of the plugin’s author, Ben Plum:

Using a “partial page load” technique, Pronto reduces the over all server load and font-end render time by only updating pieces of a page instead of the entire document.

The initial setup can be a bit fiddly, but I’ve found it to be pretty smooth sailing once it’s all set up. Well worth checking out.

Presto Chango

David Turner — Fri, 15 Feb 2013 10:18:00 +0000

This week marks another step forward for me. I’ve received my last mark for my Masters, it has been confirmed that I’ve passed. Excellent, but where to next? The answer, with me, is always onwards.

Yesterday marked a step forward for me, I’ve made some adjustments to the site. Some of them are quite noticeable, others are under the hood. All of it has been done with a goal in mind, that of getting me to be more active on the site.

Design

I’ve changed the overall design quite a bit as a part of the process of updating things, but I have maintained a consistent visual style. I look at it as more of an iteration than a redesign. What I had before wasn’t bad, but I was capable of producing something better.

Text is now larger, and fills out across a larger area, the full column rather than the previous half column. A lot of what I do is text heavy, and keeping things constrained in such a small column was proving troublesome for the writing that I do.

As a part of this I have rethought how I want certain elements to appear in the design. I don’t use graphics terribly often on my site, so when they do appear, I want them to stand out.

The same is true of certain other elements in my writing. In addition to images, code blocks and blockquotes are displayed across the full width of the site, though any written elements will be kept to the same width as other written content.

Development

I’ve also made a few adjustments to the site under the hood. I’ve stripped out my previous code syntax highlighter, PrettyPrint, and replaced it with the rather lovely prism syntax highlighter. It’s a lot lighter, and supports (after a little work) all of the languages I write in.

This helps make things just a little bit snappier, but I really wanted to speed things up when it comes to loading content. I already cache my site, so that you’re almost never loading something generated on the server side, but could I do better? Yes.

I already use jQuery on my site for certain things, which made implementing the pronto plugin an easy choice for me. Pronto allows a site to update just the main content of a site, rather than downloading the whole page each time. Smaller download, faster loading.

This required some tinkering with how my pages are generated. Pronto uses a JSON based structure to update the content, whilst the average page load will return a complete HTML page. Fortunately pronto makes the process of telling when JSON is needed quite easy.

Pronto attaches a GET variable of pronto when it’s requesting a specific page. Using this I was able to determine whether or not to return JSON or HTML. I’ve also been able to cache the returned JSON, so everything should be pretty smooth. You can check out the pronto data for this page if you’d like.

I’ve also put some thought into how I’m going to be handling images on the site going forward. I’m a big fan of the adaptive images approach to handling images. Set a cookie that tells a script how large the screen viewing the site is, and use a script to process images so that the image is at an optimal size.

I’ve also become quite the fan of compressive images, the idea of making an image larger in terms of dimensions, but dropping the image quality right down, and then letting the browser scale the image down. This results in an image of comparable quality that is much smaller than a higher quality image would be.

I cannot overstate my love of ImageOptim. If you use images on the web, and use a Mac, you should be using this.

I’ve combined both of these approaches on my site. Smaller devices get smaller versions of the image, but they’re still large images that get scaled down. The savings have been quite impressive. Each image on my portfolio was taken as a full screen image at 1920px by 1200px, cropped slightly, and then blown up to 200% of their original size to get a final size of 3840px by 2320px. They saved out at about 250kb, and when processed through ImageOptim this size was cut by about 50%. By contrast images saved at the original size, with a decent level fo quality, where coming in at sizes up to eight times this size. Madness!

I also managed to resolve a long standing issue with my site when dealing with the responsive versions of this site. The day before launching, ironically the day Opera announced it will be switching to webkit for their rendering engine, I managed to resolve an issue that I had been having with Opera displaying my responsive navigation.

Comments On

Finally, I’ve flipped the switch on site comments back over to on. I’m not sure that this will last, as spam bots seem to quite love harassing comment systems and I’m not sure that the hassle of dealing with them is worth the comment goodness I get. The quantiy of spam can get quite insane at times.

I’ll likely be tweaking things over the forseeable future, and I’ll be adding more content to the site as things progress. Feel free to sound off on things either on the comments below or hit me up on twitter.

jQuery Show of Slides Plugin

David Turner — Wed, 19 Dec 2012 15:21:00 +0000

When it comes to code for projects that I’m working on, nothing annoys me more than code bloat. All too often people will grab a plugin to complete a single task, which is in and of itself fine, until you realise that the codebase encompasses much more than the functionality that you need, and results in a bulky collection of files and code being tagged onto a site needlessly.

Increasingly I find myself writing my own plugins to accomplish goals, each being coded to achieve a single thing well, rather than trying to do many things at once. It’s easier to use multiple plugins than it is to rip code out of a single plugin. That is the reason that both my isEmpty and Select plugins exist. Today I am adding my Show of Slides Plugin to that list.

What is Show of Slides?

I’ve increasingly found myself having to code up image slideshows for clients. At first it was a challenge, coding things up to work quickly without using a plugin that did much more than was needed but, as with all things you do repeatedly, it lost it’s appeal. So I decided to create a plugin that I can use to quickly get slideshows working.

I have built Show of Slides from the ground up to be flexible. I didn’t want my work to be limited to just image slideshows, you can just as easily use HTML content inside of the slider. It’s all about keeping things both flexible and minimal.

I’ve also built it to afford you the maximum amount of control over how the various elements of the slideshow are laid out. This plugin adds classes to elements as needed, but ultimately leaves styling up to you. I’ll be providing some basic CSS in this article though, so that you’ll have some guidelines you can work with.

What Show of Slides isn’t?

In keeping this plugin flexible and light in the code base I’ve intentionally removed some things that are typically handled using jQuery as they can be handled using CSS3 in the majority of browsers these days and, for those that can’t, animation is a very minor piece of functionality in the grand scheme of things.

By removing the animation from the plugin and placing it in the hands of CSS it also affords a much greater control over how the slides move, along with how they are presented. You’re no longer constrained by the JavaScript powering your slider. How awesome is that?

Caveat

There is one small problem with moving the animation from the JavaScript to the CSS, in that it becomes a bit more fiddly to handle reorganising slides once they’ve been moved from view. I’ve coded in a little bit of JavaScript math to handle this, I’ll be covering it in a little more detail later.

Getting Started

Show of Slides is relatively painless to get set up. As with all jQuery plugins you’ll need to include jQuery for this plugin to work. If you’ve already included jQuery in your project you only need to add the plugin, ideally by adding the code to your a single, combined, JavaScript file:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/show-of-slides.min.js">

With the Slide of Shows plugin added to your project, it’s easy to start using it. The plugin does require a specific structure to it’s HTML though, in that it needs to look like this:

<div class="show-of-slide show1">
  <ul class="slides">
    <li><div class="slide-content">1</div></li>
    <li><div class="slide-content">2</div></li>
    <li><div class="slide-content">3</div></li>
    <li><div class="slide-content">4</div></li>
  </ul>
</div>

The important part of this is that there is a div wrapped around the slideshow. The list itself can be replaced with any elements you would like. I’ll cover this a little further down as well, when I dig into the settings for the application.

With all of this in place it’s simply a case of calling the plugin on the elements you want to become slideshows:

$(function() {
  $(".show1").showOfSlides();
});

You can, of course, list multiple selectors or add a specific selector to all of the slideshows you’re after.

Plugin Settings

There are, of course, multiple settings you can tweak with the plugin. The different aspects of the plugin that you can tweak are:

tag: This is uses as the basis of CSS classes added to slides (defaults to slide)
timer: The amount of time between slides changing (defaults to 5000, aka 5 seconds)
transition: The transition time, so that the plugin can clean things up after any CSS animations have finished (defaults to 500, aka 0.5 seconds)
pagination: true/false on enabling pagination (defaults to false)
arrows: true/false on enabling previous/next buttons (defaults to false)
slides: defines a default element that is used for slides (defaults to li)

This allows you a great deal of flexibility in how it’s laid out, and what features you have enabled and disabled. I spoke about being able to adjust a few settings previously, some of which need to be adjusted depending on your CSS and one that can be adjusted if you’re not using a list for your slides.

The first of these is that you will want to adjust the transition variable to match and CSS transition time you’ve set up. I’ve found 0.5 seconds, or 500 milliseconds, provides a suitable default. To change this you can do the following when setting up your slider:

$(function() {
  $(".show1").showOfSlides({
    transition: 1000
  });
});

This changes things from the default of half a second to a full second. This timer is used to call a function that reorders slides in the slider so that there is always a next slide. You can similarly adjust the timer variable to adjust the time between slide changes.

The second important piece of customisation that can be considered is that, in certain circumstances, you might not want to use a list for the slider. You can change this quite easily, by doing the following:

$(function() {
  $(".show1").showOfSlides({
    slides: "div"
  });
});

This will look for a selection of div elements and use them as the slides instead of list items. Ultimately the structure of the content will be the same, this allows you to define the HTML structure that suits your project/site.

The CSS is also kept pretty minimal. Below is the unminified CSS used for the examples you see on this site, but you can also view the minified source to see just how small it works out at:

.slide-pagination a, .slide-prev, .slide-next {
  text-indent:100%;
  white-space: nowrap;
  overflow: hidden;
}
.show-of-slide {
  background: #ececec;
  position: relative;
  padding: 0.5em;
  max-width: 100%;
  margin: 2em auto;
}
.slides {
  margin: 0;
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 100%;
  padding-bottom: 50%;
  overflow: hidden;
}
.slide {
  list-style: none;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}
.slide-current {
  z-index: 2;
  left: 0;
}
.slide-previous {
  left: -100%;
}
.slide-pagination {
  position: absolute;
  z-index: 5;
  bottom: 0.5em;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  pointer-events: none;
}
.slide-pagination li {
  display: inline;
}
.slide-pagination a {
  display: inline-block;
  background: #c00;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 0.25em;
  border: 2px solid #f9f9f9;
  pointer-events: auto;
}
.slide-pagination .slide-active {
  background: #940000;
  cursor: default;
}
.slide-content {
  width: 100%;
  height: 100%;
  font-size: 10em;
  line-height: 100%;
  color: #f9f9f9;
  background: #8080ff;
  text-align: center;
}
.layout-1 {
  background: #a00;
}
.layout-2 {
  background: #0a0;
}
.layout-3 {
  background: #00a;
}
.slide-prev, .slide-next {
  position: absolute;
  top: 50%;
  height: 4em;
  width: 4em;
  line-height: 4em;
  border-radius: 0 50% 50% 0;
  display: inline-block;
  margin-top: -2em;
  z-index: 6;
}
.slide-prev:hover, .slide-next:hover {
  background: rgba(0,0,0,0.4);
}
.slide-prev:after, .slide-next:after {
  text-indent: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
}
.slide-prev {
  left: 0;
}
.slide-prev:after {
  content: "◅";
}
.slide-next {
  border-radius: 50% 0 0 50%;
  right: 0;
}
.slide-next:after {
  content: "▻";
}

Support

This plugin should work well across pretty much any browser you care to throw at it. I’ve intentionally kept the code to a minimum which should prevent issues in older browsers. The only thing that will fall apart is that CSS animations won’t work across every browser. If this is something that concerns you I’d strongly suggest you reconsider your approach to web design to be a bit less rigid before you go insane.

Download

You can download isEmpty over at the Github Repository, but if you just want to download the latest version you can click here.

Simple Smart Quotes

David Turner — Fri, 14 Dec 2012 10:25:00 +0000

In a recent article I talked about shipping curly quotes in Get Invited, and that I’d then added it to my portfolio. I wanted to take a little time to talk about how I did this, as it turned out implementing it was a lot easier than I’d expected it to be.

Boiling Down Complexity

When trying to figure out how to get smart quotes working I spent a lot of time, probably too much looking back, in trying to find a PHP function, or library, to automagically convert quotations from the “standard” quotes to their curlier equivalents.

I couldn’t find one, and that forced me to think about how I’d go about doing it myself. Normally character replacement is easy, you would just call a str_replace() function in PHP and be done with it. The problem with quotes is that the characters I’d be searching for are the same on both sides when dealing with standard quotes, but different when you convert them to their curlier equivalent.

This caused me to consider the option of working out a way to convert every other match to the corresponding opening quote, and the remaining ones to the closing quote. This would work for double quotes, but would fail horrible when dealing with single quotes, courtesy of apostrophes.

In the end I was able to implement a solution courtesy of Tami Olsen who, as an author, had encountered similar issues in Microsoft Word. She suggested a solution that boiled down to looking for quotation marks with a space before or after them. A space before denotes that it is an opening quote. A space after denotes it is a closing one.

This, with a small number of edge cases that can also be processed, leaves remaining single quotes as apostrophes. I wrapped this up in a simple function and pushed it out to Get Invited. It worked perfectly. The code looked like:

function smartQuotes($str) {
  $search = array (
    " \"",
    "\" ",
    " "",
    "" ",
    " “\"",
    "\"” ",
    " ‘"",
    " "’",
    "..."
  );

  $replace = array (
    " ‘",
    "’ ",
    " “",
    "” ",
    " “‘",
    "’" ",
    " ‘“",
    " ”’",
    "…"
  );

  return str_replace("\"", "’", str_replace($search, $replace, $str));
}

Not Issue Free

After building this into Get Invited I was quite pleased with how it looked, and it vastly simplifies issues with getting smart quotes into written text, as the shortcuts for curly quotes aren’t nearly as easy to remember as the commands for the more commonly used characters. So I coded it into my portfolio.

It broke things. Pretty badly. What was causing it to mess up? There’s one difference between how Get Invited uses this function and how my portfolio does, and it’s a major one. Get Invited only processes text using the function, but my own site uses a basic templating system and the function made changes to the whole template.

This would include any HTML that was included, in particular HTML attributes, which would then cause certain important aspects of my site, such as classes, to stop registering correctly.

I was able to find a workaround for this, though I’m not as happy with it as I would like to be. In order to resolve this issue I needed to add two regular expression filters to find text inside of HTML tags, in order to find the attribute quotations. I was then able to replace any text that had been turned into curly quotes in error back into the intended quotes. The final function looks like this:

function smartQuotes($str) {
  $search = array (
    " \"",
    "\" ",
    " "",
    "" ",
    " “\"",
    "\"” ",
    " ‘"",
    " "’",
    "..."
  );

  $replace = array (
    " ‘",
    "’ ",
    " “",
    "” ",
    " “‘",
    "’" ",
    " ‘“",
    " ”’",
    "…"
  );

  $str = str_replace("\"", "’", str_replace($search, $replace, $str));
  $str = preg_replace("/<([^<>]+)>/e", "<" . str_replace("”", """, "$1") . ">", $str);
  $str = preg_replace("/<([^<>]+)>/e", "<" . str_replace("’", "\"", "$1") . ">", $str);
  return $str;
}

It works, but I feel that it could be better. I’d love to hear if anyone has any thoughts on how to improve this code, or alternatives that people have used in the past. You know where to find me.

Just Fucking Ship It

David Turner — Tue, 11 Dec 2012 14:46:00 +0000

Ideas are fundamental to the concept of change, but by themselves they are next to meaningless. An idea without some form of implementation doesn’t do anything. It doesn’t demonstrate how things could change, it doesn’t mean anything.

It doesn’t need to be this way, turning an idea into something tangible can be relatively quick, and the rewards for doing so can be immense. It allows you to test the idea, and determine its worth. It can weed out the bad ideas and help improve the good ones.

This is something that Chris Murphy, Kyle Gawley, and myself have done with Get Invited. We quickly built it up and used it earlier in the year for the University of Ulster’s Festival of Art & Design, encompassing a whopping 23 events.

It was something of a trial by fire for the service, and for us, but it ultimately demonstrated the viability of our product, and was a sign that we were onto something. The project was able to progress as a result, rather than remaining an idea.

Without pushing ourselves to take our idea and make it real, we wouldn’t have a product, and we wouldn’t be ticketing for next week’s Refresh Belfast. How did we get here? By not trying to be perfect before shipping.

Perfection is an Impossible Goal

It’s impossible to create the perfect product. Perfect for what? Perfect for who? You can’t please everybody, so you need to identify a market and work towards perfection for it. You aren’t working to achieve perfection, but it helps provide direction.

Get Invited is designed to bring ticketing back to its very core. Getting tickets from the hands of you, an event organiser, into the hands of people that want to attend your events. No clutter, and no barriers.

This allowed us to strip away a lot of what other event organisers seem to be building in today, and to focus on the core of making ticketing great. It’s simple, it’s fast, and it doesn’t ask for all of the personal details of your life. We started with the basics.

Good Enough is Good to Go

Get Invited isn’t finished, it’s not all we plan for it to be. It certainly wasn’t when we first shipped it. What we shipped was very much a Minimum Viable Product, but that comes with a couple of key benefits:

It makes the project real.
It gets you feedback.

The former is a psychological thing, it lets you know that you’ve made something, because it’s out there in the wild. The latter is much more important, it will let you know if what you’ve made is worth continuing. Having that conversation early can be a major time saver. If your project is a dud, you can stop there and invest your time in other projects.

Shipping a project will get you feedback that will help you improve what you’re working on. That’s right, improving. Once you’ve pushed a project live it doesn’t just sit idly, it adapts and grows. Sometimes this is based on user feedback, but often times it’s based upon internal decisions to improve or tweak aspects of what you are working on. These changes wouldn’t be possible without shipping for two reasons:

You’d have no feedback.
You’re guessing how your project will be used.

You can’t make changes based on user feedback if you don’t have any users. You simply can’t. If you’re working on a service, such as Get Invited, you also cannot know exactly how people will use your product.

An example of this happened with Refresh Belfast this week. Their event title made use of some quotes, and when it went live we all realised that it would be much nicer if they were converted to ‘Smart Quotes’ rather than the standard quotations around the text.

It is unlikely we would have encountered this issue without actual usage of Get Invited, and it has helped us to improve the service (and also my portfolio, expect a post on the code in the near future) as a result.

Shipping Makes It Tangible

This is all a long winded way of saying that if you don’t ship your idea, then the idea doesn’t mean anything. An idea is intangible, you can’t hold it and you can’t demonstrate it. It’s harder to improve something you can’t see. Pinning it down and building it makes it a tangible, real, thing.

There are people who are blessed with brilliant ideas, and gifted with the ability and the technology to be able share their ideas with a global audience. For some people it takes them a while to realise the benefits of getting things out there, but once they do they’re finally able to create their ideas, make them real, and share them with the world.

Don’t bottle your ideas up. Just. Fucking. Ship. It.

Credits

The image used at the beginning of this article is taken from Andrew Power’s Dribbble shot of a poster design, Real Artists Ship, which he made available as a wallpaper for download. His work is awesome, you should check it out.

FontPrep - The Missing Font Generator

David Turner — Tue, 11 Dec 2012 14:44:00 +0000

@font-face is an amazing tool for providing custom fonts on the web. There are a couple of ways to do add fonts to a site. The first is by usng a service like TypeKit to serve the fonts for you. The second is to use a service like FontSquirrel to convert them for you. FontPrep is a Mac App that lets you do this from the comfort of your computer, all for a mere $5. Sold.

jQuery Select Plugin

David Turner — Mon, 05 Nov 2012 17:12:00 +0000

CSS gives us a lot of control over how things look and feel in our projects, but I find time and again, that there is a single element that seems to consistently cause issues. The beloved <select> element.

It’s such a useful element to have on a site, yet it seems to have default styling in many browsers that limits what we can do. Bizarrely, I’ve found Internet Explorer to have the best implementation in terms of styling. That’s just wrong.

Working Around Things

Unfortunately there’s no way to change some default styling decisions made with this element, so instead we have to come up with creative ways to work around the issue. In a recent project I found myself needing to do exactly that.

It is something that I have attempted before, during my final year of my Interactive Multimedia Design degree. The solution I implemented there worked, but wasn’t very flexible. As this is something I find myself having to attempt ever more frequently, I wanted something that could work any time I needed it. I wanted to create an easy to use jQuery plugin for select styling.

Here it is.

What Does It Do?

This plugin takes a look at select boxes that match the selector you provide, and will add in a label after matching <select> boxes. It will also add some classes to these elements for the purposes of styling.

Usage

The plugin has been built with ease of use in mind, so that you can set it up and get straight to using it. Being a jQuery plugin you will want to load both jQuery and the plugin to ensure that it will actually run. If you’re already using jQuery then you just need to load the plugin script, there is no need to add jQuery multiple times:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.select.min.js">

With the plugin loaded, and jQuery running as well, it’s simple to get things running. Simply copy/paste the following code into your site, somewhere after the plugin:

$(function() {
  $("select").customStyle();
});

That’s it. The plugin will work its way through all the select boxes on the site and start adding in extra labels. There’s some styling that you’ll need to add. I’ll show the HTML & CSS that I’m using in the demo so you can see how I’ve implemented things. First, the HTML:

<label for="select-1">
  Pick a dinosaur, any dinosaur:
  <select name="select-1" id="select-1">
    <option value="Pterodactyl">Pterodactyl</option>
    <option value="Triceritops">Triceritops</option>
    <option value="Stegasaurus">Stegasaurus</option>
  </select>
</label>

And now the CSS:

.custom-select, .custom-select-label{
  height: 2em;
  line-height: 2em;
  position: relative;
  width: 100%;
  display: block;
}

.custom-select{
  margin-bottom: -2em;
  z-index: 2;
  opacity: 0;
  -webkit-appearance: none;
}

.custom-select-label{
  padding-left: 0.5em;
  background: #ddd;
  margin: 0;
  -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.4);
  box-shadow: 0px 1px 5px rgba(0,0,0,0.4);
}

.custom-select-label:after{
  content: "";
  display: block;
  border: 6px solid transparent;
  border-top-color: #222;
  position: absolute;
  top: 50%;
  right: 0.5em;
  margin-top: -3px;
}

That’s all it takes to get some rather nice looking <select> boxes going.

Extra Settings

There are a few pre-defined classes that are used that you might have noticed up above, .custom-select and .custom-select-label. These can be changed as you see fit, by defining some settings for the plugin, like so:

$(function() {
  $("select").customStyle({
    selClass: "custom-select",
    labelClass: "custom-select-label"
  });
});

This will give you complete control over the classes that are used, and over the classes applied to content on your site.

Support

In its current incarnation of things, I’ve chosen to support everything except Internet Explorer. In using this in site development I have found that there are certain oddities that liked to crop up that were counterproductive. This is also one of those instances where Internet Explorer actually handles styling of <select> elements pretty well, so it shouldn’t cause any issues.

Download

You can download isEmpty over at the Github Repository, but if you just want to download the latest version you can click here.

Building Simply Written

David Turner — Wed, 01 Aug 2012 19:18:00 +0100

A couple of weeks ago I publicly introduced Simply Written to the world. It’s been an idea in my head for some time now, and I’m really happy that it’s finally out where people can start using it.

In my original article on the project, I discussed the thought process behind it and how I took it from being an idea to being the web app that you can make use of today. I didn’t really talk about how I built it, or any of the technical aspects of it.

Let’s remedy that.

Goals

Every project has goals. The development of Simply Written was no different. The goals in this particular project were:

High quality output
Simplicity
Gets out of the way

Each of these goals impacts the work in some capacity.

High Quality Output

This goal serves as the bedrock of Simply Written. It’s why I started the project. Digital books were being mangled by automating the process of digital book creation. Simply Written needed to get this right, otherwise it just contributes to the problem.

Simplicity

Simplicity in a service is difficult to get right, and is one of the key principles I have identified that help my work make people happier. Simplifying a process doesn’t mean dumbing something down, it means removing complexity. I don’t want users to have to jump through hoops and perform tricks in order to create.

Gets Out of the Way

This goal goes hand in hand with Simplicity. I don’t want Simply Written to require hand-holding. I don’t want the service I built to get in the way. It shouldn’t be a tool that holds users back from creating. Microsoft Word can do that, I don’t need to.

Problems

Simply Written’s inspiration comes from a problem I encountered: Digital Books aren’t being generated in a manner that provides a quality product. That serves as an encompassing problem, but it’s not really a solvable problem as there are components that create it. To me, the problems are:

Content output quality sucks
Generating multiple formats

Content Output Quality Sucks

This is closely related to the original problem above. Digital books being generated quite often are sloppily done. They’re being created from content aimed at being printed, and the end result suffers for this¹.

In addition the best of the digital book formats, ePub, suffers from such automation as there is no way to identify break points that could be used to create high quality ePub files. I’ll talk about this later.

Generating Multiple Formats

As mentioned above, converting from a format meant for print to a digital format is messy. Doing the same for multiple formats isn’t going to be any better. It’s important to ensure that all the output formats are of a high quality. If it’s not something I would be proud of, I don’t want to make it available.

It’s also important, to me, that content isn’t converted between the different formats. The content should be slotted in to them. Conversion of content rarely ends well. I don’t want to see that happen to content in Simply Written.

Having a System

I didn’t just throw myself into building the current version of Simply Written. I did that for closed testing and, whilst it worked, it wasn’t as good as it could have been. I was able to build upon some of what I learned during closed testing, along with other work I have done. The key things for Simply Written were:

Use a Framework
User Authorisation and Security

Use a Framework

Having a framework in place allows me to get the ball rolling quickly. Over the last two years I have been using/developing my own framework, called the Wee_ Framework², that provides a basic shell for web apps. It also provides me with a great deal of flexibility.

It’s something of a Model & View framework, with a single file controlling what is loaded. I’ve tried many of the common MVC frameworks out there and the have always felt that they do more to get in my way than help me get things done.

User Authorisation and Security

Any service that handles user details should have this on the top of their “Get This Shit Right” list. Sadly it seems that not every service out there does. Ever since I started work on my first web app, ReferenceIt, I have worked to ensure that user information is secured.

The majority of information that I store is encrypted. Email addresses and passwords are stored in such a manner that if the system is somehow compromised that the information accessed is rendered useless. The only person who will ever know a user’s password is the user. The way it should be.

Building a System

As mentioned above I didn’t just build Simply Written, I thought things through to ensure that what I built would be of high quality. This required an understanding of what I wanted the site to have, and how I wanted the site to be.

The closed testing of Simply Written served as the first test for identifying the structure required for the service. Some of this was obvious, as there would have to be a user-only area. For the current version I was able to build on this to create a more fully formed structure.

Registration

I wanted to ensure that the process for registering for an account would let those who register immediately start writing. As a result the registration process asks for a decent amount of information, more than I would normally ask for. The information is important though, it is used in digital book publishing.

Every book has an author, every author has a name. Every digital book needs a method to create a unique identifier for a book, and the username allows this to be created with ease. Every account requires an email address and password to login, as email addresses are easier to remember than usernames.

Book Setup

With the information users provide on registration I am able to let them immediately start creating books. Digital books require a great deal of information, but getting started requires only one thing: a title. With that anyone can immediately start writing.

There is a collection of extra information available that is hidden from view. It’s important information but isn’t necessary for a book to be generated, and is all optional. Some of the more useful information is pre-populated at this point, but all of this information can be edited at any point.

Once a book has been created an extra piece of information can be added, a cover for the book. This isn’t available when initially creating a book for technical reasons, and book covers are organised based on information about both the author and the book. The information needed to save the cover isn’t available until the book has been created.

Users will also note that books are listed on this home section in order of most recently added. This sidebar allows users to re-order their books as they see fit. It can also be used to delete entire books if necessary. Obviously, deleting a book will delete all the chapters it contains.

Chapter Creation

Once you have created your book, you are taken to a book edit view. The structure is similar to that of the create book page, but with two notable differences:

A book cover can now be added
The sidebar now lists chapters, not books

The sidebar will adopt this view when you are handling a single book, allowing a user to quickly switch between chapters as necessary. As with the books, it is also possible to re-order and delete chapters as they desire.

Having just created a book, there will be no chapters created just yet. In place of a list of chapters will be a note letting the user know that there aren’t any chapters, asking them if they would like to create one.

Creating content for chapters is much like writing content using Microsoft Word, or popular Content Management Systems like WordPress. I want to provide the best experience possible and doing this can involve providing a familiar experience. Not everything needs to be re-invented to provide an improvement.

Providing a High Quality Structure

The goal of simplifying the process of digital book creation isn’t an easy one. Simplicity isn’t an easy thing to achieve, there needs to be a solid structure in place to ensure that simplicity doesn’t turn out to be a dumbed down process. It is important to ensure that you get this right from the start, as it can be very difficult to go back and fix this later without scrapping things.

To get books right there were two key areas that I needed to think about, and ensure that I handled them properly:

Content management
Output formats

Content is key to any form of book, printed or digital. If you handle content poorly or, worse, fail to store it properly then Simply Written would not be a service people would care for. Ensuring that content was handled appropriately formed one half of the puzzle I needed to solve.

The second half was the formats that digital books are typically formatted in. There’s a small collection of key areas to get right: ePub, mobi (Kindle), and PDF. To provide a service that does justice to users, I needed to build a system that would allow Simply Written to provide these formats.

These areas formed the basic issue that I felt needed to be solved, that of allowing users to write content once and be able to publish it in the multiple digital formats required. How did I go about solving them?

Content Management

Solving the issue of content was one I put a lot of time into. It forms the basic inspiration of creating Simply Written. Taking a book formatted for print and trying to create a digital edition wasn’t working.

Similarly I didn’t want to take a book formatted for ePub use and try to and wrap it up as a mobi file. It wouldn’t work, and if it did it would be poorly done and deliver a sub-par experience.

The solution to this problem came from looking at what these formats had in common. HTML is the underlying structure of the web, and digital books have a lot in common with the web. Content written in HTML would fit perfectly into both ePub and mobi formats, and PDF files can be easily created from HTML. I had a winner.

Formats

Handling digital book formats can be tricky. What works for ePub might, sometimes, work for mobi and PDF plays by a different set of rules entirely. As I mentioned in the original Simply Written Beta Launch, ePub and mobi files have a lot in common when it comes to building them.

An ePub file is essentially a zipped up collection of files and folders. The book’s content is saved as XHTML files, it’s styled using CSS and there are a collection of files that handle information about the book. It can be a bit messy when you dive into it, but as you progress things start to make a lot of sense.

To provide the best experience it is also important to properly separate content in the book. The most suitable manner to do this is by chapter. The reason for this is to provide a better experience for people reading the content.

To provide an example: If someone is reading a book that isn’t split, digital book readers need to load content from the start of the book. This is fine when someone is starting a book. It’s not so great if they’re five chapters in. Then they have to wait.

Splitting a book into multiple smaller chunks allows the reading software to start from a more suitable start point, such as the beginning of the chapter the person is trying to read, and then load in extra content as needed.

A finished mobi file is rather mysterious, as it’s a proprietary format owned by Amazon. There are tools you can use to extract the content from mobi files but don’t. It’s a terrifying and scary thing to look at³.

Fortunately you never need to look inside of these files, as the same structure you would use to create an ePub file can, with a few adjustments to some of the files that store information, be used to generate mobi files.

Some considerations need to be made for some files though, as all images are processed into mobi friendly content and, if you have any PNG files with transparent areas in them, the end result of this process is not a pretty one.

Generating Digital Books

Every part of Simply Written is important, but if any part serves as the cornerstone of the project it is the book generation process. Making it easy for users to register, create books, and write means nothing if the end result is of poor quality.

It should come as no surprise then that this is the part of Simply Written that took the longest to implement, and is the most tweaked part of the service as I continue to improve the quality of the content generated here.

To ensure that each format available (currently ePub and mobi) is of the highest quality, each has a separate book generation system. This means that I can optimise ePub files separate from mobi, and vice versa. The same will be true as additional formats (namely PDF) are added.

Each of these formats has slightly different structures and needs. Simply Written’s book generators cater to these. They also deal with some of the more fiddly aspects of content styling for the various formats. The mobi format isn’t nearly as flexible as ePub when it comes to CSS support, I do what I can to provide a consistent experience where it is suitable, and embrace difference when it’s appropriate.

Moving Forward

I have put a great amount of time and effort into Simply Written to date, but there is still room for growth. At the moment there are three key things I will be implementing in the future:

PDF format
Image support
Charging a Fee

PDF Support

Of the three key formats for digital books, I currently handle two. The third, PDF, has proven to be a bit trickier. It’s not that I have difficulty generating them, that part is surprisingly easy. The difficult part is generating PDF files with a quality of design that I expect from books my system will provide.

I’m a firm believer in not releasing a product until it is at a level you are happy with. PDF will happen, but only once it is of a high enough quality.

Image Support

So far I’ve added support for book covers to Simply Written. They’re a bit easier to implement than images in a book’s content, as I have more direct control over how a book cover is used. Graphics in the book’s content become trickier to manage, which is why they’re not included just yet.

Again this is a case of not wanting to implement something that isn’t ready for use. I want it to be usable when it’s implemented, not a mess.

Charging a Fee

Money makes the world go round. It pays for important things, like coffee, electricity, and internet connections. It also covers things like rent, travel, food, and hosting. I want to make things better for people, and that includes for myself.

By charging for the usage of Simply Written I am able to ensure that the service remains available, and it further motivates me to continue working on it. If I can’t afford to keep a service running I won’t, so it’s in the best interests of everyone that uses the service that it’s profitable.

Lots Done but More to Do

Simply Written has come a long way recently, but there is plenty more to be done. I hope to be able to dig a bit more into some aspects of what Simply Written does in the future, looking more closely at some of the technical aspects of the site.

Introducing Simply Written

David Turner — Wed, 18 Jul 2012 10:09:00 +0100

In the design community there is a lot of sharing. Information, ideas, concepts, and suggestions. Feedback, criticism, and Q&A sessions. There’s a lot of consumption. People wouldn’t share the things they do if nobody was noticing them.

Sharing things online is great, but putting content up online isn’t always the best medium for sharing. There are alternatives, most notably digital publications. They have a lot in common with online content, but creating the formats for them can be troublesome. I’d like to change that.

Meet Simply Written

Simply Written is a project I’ve been working on for quite some time now. The idea first appeared in the autumn of 2011, and the first real “demo” cropped up in January before it took a back seat to other projects. Last week I took the time to resolve this, and I feel it’s now ready for sharing with the world.

At its core, Simply Written exists as a service, a system, to allow authors and writers to create content that can be wrapped up into multiple book formats with ease. Right now it works with ePub and mobi (Kindle uses the format) but I intend to add PDF support once I figure out the best approach to doing so.

In my experience most digital books aren’t created, they are converted. This leads to sub-par books, as machines aren’t good enough to get the conversion process right. We could sit and wait for them to become good enough, or we could use something that works now. You.

Simply Written uses you, as the author of your content, to work out how content should be structured. It processes what you write into a format that can be used in any of the popular digital media readers. Rather than converting content, it processes it, wrapping it up in the relevant code to make an ePub file, or a mobi file.

How?

Simply Written takes a complex process and simplifies it. It’s actually not that difficult to create an ePub file from static HTML content. Working with mobi files is a bit trickier, there’s some extra bits needed and some that need removed, but the format can be generated from the same content as an ePub file.

It is, however, tedious, and it takes up time. That time could be better spent writing, or having fun. So Simply Written takes the tedious parts of book creation and leaves you with the most fundamental area of digital book authoring, the authoring part. You create your content, and Simply Written will handle the rest.

Why?

Over the course of this year I have really grown to enjoy writing content, content that I believe is good. I have always enjoyed sitting down with a good book and getting lost in it. With the shift towards digital, and being able to carry a whole collection of books in my iPad, I have embraced digital books quite happily.

Unfortunately not everyone creating content has embraced it as much as I have, and many that have embraced it create sub-par versions of their printed books. I witnessed a few tweets about books published by Penguin, showcasing how badly structured the content was. I witnessed it first hand with one of Tami Olsen’s books.

I owned a copy of her printed books, and really enjoyed them. Unfortunately the experience with the digital books wasn’t nearly as good. They weren’t responsive, I’d say they were sluggish. It made reading them less than enjoyable. A painful side effect of converting a PDF file into an ePub file. The result is sub-par, which frustrated me when trying to read them.

From Frustration to Prototype

Books deserve to be looked after regardless of the medium, and I decided to do something to prevent as many of these stories as I could. Over the months of November and December I pieced together a prototype that could be used for content authoring. It supported text-only content, and no covers could be added. It worked.

From the very start I knew that supporting the open format of ePub was vital to Simply Written. I also knew that supporting kindle devices would be important, as Amazon is a powerhouse in the sales department. I invested time in ensuring that these formats were crafted in a way that was valid, and provided a high quality of content.

With the structure in place I turned my attention to creating a platform for the actual authoring. Having a solid system for creating books means nothing if people don’t have an enjoyable writing experience, as they won’t use it. Sadly at this point my university studies, and work on Get Invited took over my life, and Simply Written became a lower priority in my work schedule.

From Prototype to Beta

This changed last week, when I decided I was going to undertake a solid week of development on a single project, and take it from where it was already to something I could share with the world. Simply Written was the obvious choice. It had sat neglected for too long, and I already had a solid idea for what I wanted to achieve.

The week consisted of a complete redesign of the site, and a major overhaul of the codebase. I’ve pieced together the key tweets I sent marking progress throughout the week in this storify story. All told, the week consisted of:

Site design overhaul
Site architecture overhaul
Better book details
Better authoring functionality
Support for WYSIWYG and markdown editing
Chapter and book organisation
Chapter and book deletion
Book cover support
Inclusion of important book pages:
- Title
- Copyright
- Dedication
- Epigraph
Improved book generation suporting new book features
Account settings
Allow chapters to have headings removed

Looking at that list is actually rather overwhelming, it’s amazing what can be achieved in a short space of time if you break things down into smaller parts. I wanted to work towards a solid goal, of allowing for book creation, and the above list matches nicely with that goal.

It’s not the final goal for Simply Written, as it doesn’t allow for the addition of images inside of chapters, something that is beneficial in many types of content. Thus far Simply Written also lacks PDF generation. I realise that this is something that is needed but I don’t want to add functionality until I am confident that it will meet user expectations. I will work it out though.

Beta Launch

I’ve had a few quieter launches of Simply Written, largely due to needing to show off progess during the last two semesters of university. Today marks a more public beta, as I feel that things have reached a level of stability and quality that I can open things up to a wider audience.

Today marks the public beta launch of Simply Written, and I invite you all to register and try it out. Try things out, make some books, and if you break things please let me know.

First Steps

Simply Written is only just starting out, but it is already being put to good use. I mentioned earlier that I encountered a sub-par experience with one of Tami Olsen’s books. As much as she is an author, I also view her as a friend, and I believed that her books deserved better than they had received.

As a result of this I have been working with her to provide copies of her books in both ePub and mobi format that she can sell online. Those books are now ready for her to sell, and she plans to via both the iBookstore and Amazon. The book is now available on Amazon, both in the United Kingdom and the United States. Once they’re available on the iBookstore I’ll update this post with links there too.

The Goal, The Future

The goal for Simply Written is to allow authors to follow in Tami’s steps, to author content that they can then sell online. To facilitate that there are some features that I want to add, but over time, so that I can get Simply Written out there. Iteration allows me to add new features as things progress and lets me get people using things now. Things I plan to add in the future:

Adding images to chapters
Multi-author support
Billing for the system
Book promotion system

I currently plan to charge for the service, but that’s it. You get your books from Simply Written and any profits you make are yours. I don’t have any plans to sell content directly from Simply Written, I believe that there are already services out there for handling that. I do want to provide a means to promote content authored using Simply Written.

Check It Out

To close, I’d love it if people would check out the beta. Write books, follow Simply Written or myself on twitter, and let me know what you think.

Gravatar

David Turner — Tue, 17 Jul 2012 14:52:00 +0100

Globally Recognized Avatars, AKA Gravatars, serve as a really easy way to implement avatars that are attached to your email address, not to an account on a site. It makes setting up avatars on sites simpler and gives people better control over what appears on sites. It’s pretty awesome and, if you’ve not already registered an account with them you really should.

Symbolset

David Turner — Fri, 06 Jul 2012 14:53:00 +0100

Symbolset is a rather awesome semantic font (soon to be collection of fonts) for use on the web and elsewhere. What’s so awesome about it? Write twitter and get the twitter icon. If a browser doesn’t support the font, then they get the word twitter, as opposed to a random character. Awesome stuff. $30. Sold. Get yours now.

isEmpty jQuery Plugin

David Turner — Wed, 04 Jul 2012 16:39:00 +0100

HTML5 form validation is pretty cool. I’m a big fan, even if it needs to be supported with some client-side magic and server side validation. What I don’t like is when a form tells users that they are doing something wrong… before they have even had a chance to do anything. So I made something to fix that.

The isEmpty jQuery Plugin is a simple little script that loops through specified elements, adding a specific class as necessary. It will also check to see if the field is being used, and will automagically add and remove classes as needed.

What Does it Do?

The isEmpty plugin is a simple jQuery plugin that works a little magic to hide error warnings from HTML form fields that are required until the user has interacted with them. It strikes me as rather poor form to tell someone they’re doing it wrong before they have actually done anything.

It does this by adding an extra class to required fields that don’t have any field that is completely empty. It also monitors for when people have started typing into fields, and removes the class. It can, optionally, readd the class if the user empties a field, but this is disabled by default.

This allows us to write a small amount of extra CSS that is more specific than the standard :invalid CSS, which hides the error styling from being displayed until the user interacts with elements.

Usage

The jQuery isEmpty plugin has been built with ease of use in mind, so that you can set it up and get straight to using it. Being a jQuery plugin you will want to load both jQuery and the plugin to ensure that it will actually run. If you’re already using jQuery then you just need to load the plugin script, there is no need to add jQuery multiple times:

<script src="//ajax.googleapis.com/ajax/libs/jquery/<!--[jQuery]-->/jquery.min.js"></script>
<script src="js/jquery.isEmpty.min.js">

With the plugin loaded, and jQuery running as well, it’s simple to get things running. Simply copy/paste the following code into your site, somewhere after the plugin:

$(function() {
  $('[required]').isEmpty();
});

That’s it. The isEmpty plugin is up and running, working it’s magic on any elements with a required attribute. There’s a little bit more that you’ll need to do in order to get any form of visual feedback though. You’ll need to write some CSS. By way of example, the CSS I use for my site is:

input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid {
  box-shadow: 0 0 0.5em rgba(255, 0, 0, 0.4) inset;
}

This flags errors with a slightly red glow around their edges. It’s subtle, but it’s noticeable. Leaving things like this would mean any empty required fields would get this glow. The isEmpty plugin adds a class on empty to these fields, and we can use that to get rid of the glow:

input, textarea, input:required:invalid.empty, input:focus:invalid.empty, textarea:required:invalid.empty, textarea:focus:invalid.empty {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2) inset;
}

Boom! Error styling is hidden on empty fields.

Some Extra Settings

The isEmpty plugin has a couple of settings you can change. They are:

theClass: This allows you to change the class that is added to better fit your tastes. The default, as mentioned above, is empty.
addOnEmpty: This allows the plugin to readd the class in the event that a user empties a field. By default this is set to 0.

The method for changing either of these settings is pretty easy. When you’re calling the plugin you can pass through your personal options, like the following:

$(function() {
  $('[required]').isEmpty({
    theClass: 'hiddenWarning',
    addOnEmpty: 1
  });
});

You can use as many or as few options as you’d like, as each option has a default defined.

Download

You can download isEmpty over at the Github Repository, but if you just want to download the latest version you can click here.

2012 So Far

David Turner — Tue, 03 Jul 2012 14:11:00 +0100

We are four days into the month of July, the month that marks the half way point of the year. On New Year’s eve I wrote a little regarding my plans for 2012. Six months in, how are things looking?

What Have I Done?

In the original topic laying out my plans for 2012, I covered several key areas that I wanted to focus on. In this post I thought it would make sense to maintain a similar structure. It makes things easier to measure against the original goals.

Education

2012 has been a year of split personalities on the education front, as I have found myself on both sides of the table. I have been a student on the MA course, but I have also been on the teaching side of things on the Interactive Multimedia Design Degree. It’s been weird. It’s been great.

On the student side of things I have received my marks for the first year of the course. I was pleasantly surprised with my marks, which placed me just shy of my goals for the year. This is in spite of a terrible apathy that swamped me in the week leading to deadlines for the year. This has obviously impacted my marks, but hasn’t thrown things off balance as much as I had expected.

On the teaching side of things I greatly enjoyed my time with the first year Interactive Multimedia Design students, and will be expecting great things from them over the course of the next three years.

I am still unsure of my future in a role as an educator. With the final semester of my time on the MA drawing near I will need to focus on my work for it, but in the future I could see myself returning to this role in some capacity if it were an option.

Professional

As with 2011, this year has proven to be pretty packed with work to get done. Being a full time MA student really pushes you to be the best that you can be. It’s helped me to really push forward with a web based ticketing system, Get Invited, alongside Mr Murphy and Mr Gawley.

This serves as the first step towards one of my goals for the year, to set up a business alongside Kyle. We have individual projects, ReferenceIt and Vizuali, but this is the first solid step towards meeting this goal.

The second key area I identified in my previous article was that I wanted to network more. I feel that I have, thus far, been modestly successful with this but I also feel I could do more. Baby steps.

I have also met my goal of starting to take a more active role in events, having spoken at Creative Camp 2012. Whilst it’s only a single event thus far, I really enjoyed it and want to do similar things more often in the future.

One final area I discussed back in December, though in a more general manner, is the topic of writing. I wanted to write more. This is a goal I have made progress on, but have only recently really settled into a rhythm with. I have set myself the goal of writing an article a week, with the aim of publishing a post every Wednesday.

Having settled into this rhythm I have decided that I wanted to up my game. I used to do sketchwork, and I greatly enjoyed it, but I don’t have the time for it that I used to. Now, with each article I write I have a secondary goal, that of producing a piece of artwork for each post. So far, so good.

Personal

Matters in my personal life have probably been the area in which things have least improved and, in some cases, have taken a turn for the worse. I have, to a limited extent, made progress regarding a balance between professional and personal lives. Unfortunately this currently seems to be an on/off switch, where I’m either working lots or not working at all. Not the best of situations, but it’s still a start.

Money hasn’t been as free flowing as it has in previous years, which has impacted my ability to travel. This is unforunate for a great many reasons, not the least of which because it served as an opportunity to get away from things and get some, almost always, much needed down time.

Exercise continues along at the same pace as it always has. It’s better than nothing, but I still feel that this could, and should, be improved on. A starting point would be to work the mornings elsewhere, and walking to/from the location. Simply increasing the quantity of excercise would serve to improve matters.

Reading has improved. I tend to go through bursts of reading, consuming a handful of books in a few nights before taking a break. It’s an enjoyable cycle, but I feel that I am still not reading enough.

Misc

Sadly nothing has changed with this aspect of things. The twitter handle @davidturner sits idle, three years of seeming inactivity and all. Which is slightly infuriating, but I’ll continue to keep an eye on things and, if it ever becomes available, you can bet I’ll be snapping it up.

Another Six Months

On the whole I think things have improved, but I dislike that some areas have stagnated or suffered in the first half of the year. It looks like I’ll be upping my game in the second half of the year.

Optimising Your Site: CSS & Javascript

David Turner — Thu, 28 Jun 2012 18:57:00 +0100

At the start of this series of posts I gave an overview of some of the best ways to start optimising a site. Last week I looked more in-depth at images and this week I want to turn my attention to the other files I brought up: CSS and JavaScript.

CSS & JavaScript

These are fundamental building blocks of the internet, alongside HTML and CSS adding visual effects to sites and JavaScript adding additional functionality and interaction to sites. As a result it isn’t all that hard to see them becoming quite large files. Which isn’t really ideal.

Whilst CSS and JavaScript are entirely different types of content, and are written differently, the approaches to optimising them overlap and, in some cases, are identical. The guidelines I follow are:

One CSS file, one JavaScript File
Always place CSS before JavaScript
CSS goes in the <head>, JavaScript before </body>
Compress and Minify content for deployment
CSS Preprocessors are awesome

As with all guidelines there are exceptions that I afford. I’ll cover them in the relevant areas below.

One CSS File, One JavaScript File

I default to using a single CSS file and a single JavaScript file. This provides a maximum level of efficiency when it comes to loading. One HTTP request for CSS, one HTTP request for JavaScript and then we’re good to go.

The big exception to this is when using a CDN (Content Delivery Network) to deliver JavaScript Libraries. These files generally aren’t that small, and by using a CDN you can help mitigate some file loading times.

How? A CDN is a way to deliver certain files quickly in a global manner. If you’re in Europe you get the file from Europe. The same is true in the Americas. But, better yet, these files are cached. So if someone else uses the same CDN as you to serve the same JavaScript file as you then the user doesn’t have to download the same file when they visit your site. They have it already.

In addition to that it also lightens the load on your own site, as you’re not having to serve a larger file that includes whichever library you’re using.

Always Place CSS before JavaScript

JavaScript files block the rest of a site from loading. Whilst there are instances where this is fine (I’ll touch on this in the next area) you always want to have the CSS ready to go when the body of a site is rendering. The alternative is that your site looks sloppy, as if you don’t care about your users. That’s never good.

Little things like this don’t seem important, but can have unforseen consequences if you don’t properly consider them. Which leads nicely to the next point.

CSS goes in the `<head>`, JavaScript before `</body>`

The order of files is important in terms of page loading and rendering times. JavaScript will, for the most part, block content beneath it from loading. This can cause pages to appear to be slower loading. So we want to ensure that doesn’t happen.

An example of this in action is a project I worked on over a year ago, called ReferenceIt. There are a few key things to note. The first is in this cut down version of the <head> element:

&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; media=&quot;screen&quot; href=&quot;https://referenceit.org/-assets/css/site.live.css&quot; /&gt;
  &lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

There are two things of note here. A single CSS file and, what’s that, JavaScript? In my <head> element? Well, yes. Which leads to my first exception to this guideline. HTML5Shiv and Modernizr need to be in the <head> in order to get Internet Explorer to understand HTML5 elements.

If we carry on down the site we’ll see that there’s some more JavaScript waiting for us:

&lt;script src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/-assets/js/site.live.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

This is the real JavaScript that’s running on the site, and it’s left until the very end of the site. This lets the rest of the content on the site load as quickly as possible before layering extra functionality on top of the site. This lets the user get straight to using the site, without waiting on things to finish downloading.

Compress and Minify Content for Deployment

There are really two different stages to a site. Development of the project and the live version of a project. Each has it’s own nuances that need to be taken into consideration. For instance, when developing something you want to be able to quickly identify what is causing problems if something goes wrong.

By the time you’re launching a project such problems shouldn’t exist, which affords us the ability to make some savings in terms of space. We do this using the wonderful technologies of compression and minification.

I’ll stick with the example I used above, ReferenceIt. You saw in the footer there was a reference to a file called site.live.js. You can view it here. As you can see, it’s pretty clustered together. I didn’t write this file. The file I wrote can be viewed here.

There’s quite the difference in looks, isn’t there? This is a principle I apply to both my JavaScript and my CSS, though it’s much more effective with JavaScript as when minifying variable names can be reloaded. What does my CSS look like then? It looks a lot like this, though it starts out quite differently.

Why do this? The savings in terms of file size can mount up. The JavaScript I use isn’t that large, but by serving it as a compressed and minified file, I make a saving of about 20-25%. Think about how much space could be saved with larger files.

Compressing and minifying JavaScript is simplified greatly using tools like CodeKit and LiveReload. CSS is a bit more fiddly. Compressing it, natively, usually requires a bit more in terms of manual effort. There’s an alternative though, which I’ll cover below.

CSS Preprocessors are Awesome

I mentioned above that the CSS for ReferenceIt starts out quite differently. That’s because I didn’t write it as CSS at all. Instead I used a language called LESS, a language that builds upon CSS but is compiled into the CSS that browsers know and love. Nowadays I use SASS/SCSS, but the principles remain the same.

Preprocessors allow you to us a load of fantastic things in addition to the CSS you know and love. The biggest features for me:

Automatic CSS Compression
Usage of Variables
Mixins

Automatic CSS Minification

This is probably the biggest win for me. I can write CSS that is perfectly human readable and have it compressed into the file I want to be served to browsers. This makes tweaking things nice and easy too. Save, upload, done.

Usage of Variables

Variables are handy for a lot of things. I mainly use them to store colours and dimensions, which allows me to quickly change the layout or design of a site by changing just a few elements of code.

Mixins

Think of mixins as functions and you’re pretty much there. Rather than writing multiple lines of border-radius CSS you can just call a function and have it work it all out for you. I use this with great results in 960-LESS, a flexible grid framework I now use in SCSS.

There’s More

I couldn’t do preprocessors justice in this post, there’s too much to cover for it to be just a part of a larger topic. Chris Coyier has done a great series of articles on this topic however, and they are well worth a read:

And That’s A Wrap

I wanted to take a bit of a more in-depth look at ensuring that everything that can be done to save in terms of file space has been done. It’s important to get this aspect of things right before I talk about the next area of how to optimise your site, which will be dealing with caching of files and a few other technical areas which go hand in hand with caching files.

As always your comments are appreciated, both below in the comments area and on twitter.