Front View

May Roundup

2014-06-02T00:00:00-04:00

May 2014 heralds the inaugural edition of the Front End Team Newsletter, part of a drive to better share our collective wisdom, training resources, presentations and make them available with the rest of the company.

This month, we have the following content for your consumption:

Introducing the Testing Suite

As some of you may have noticed, the Batcaves’ Testing Suite has been implemented, and thanks to some volunteers, beta tested. So what is it, and how does it work?

Read: Introducing the Testing Suite

Make your website accessible

There are lots of disabilities out there, but accessing your website should not pose an obstacle to any user. We, as web developers, should do all we can to make sure we can make our site as accessible as possible.

Read: Make your website accessible

Cache Busting: Part 1

Caching busting stops browsers from using a cached file when an new updated version is available. So, how do you ‘cache bust’?

Read: Cache Busting: Part 1

Carousels – Which are the good ones out there?

How do you pick your Carousel plugin?
Which ones are worth your time, and which aren’t?

Read: Carousels – Which are the good ones out there?

Responsive Images

What’s the correct approach to the responsive images conundrum? Is it the fabled picture element? What about srcset? How about just doing it with Javascript, or does the solution lie somewhere else entirely?

Read: Responsive images (in 10 minutes)

Automation For The Win

Great Developers are often also Lazy Developers. It’s not a criticism, it’s a good thing. If you’re going to have to repeat the same tasks all the time, you might as well automate them…

Read: Automation For The Win

Until next time – The Front End Team

May Roundup was originally published by MMT Digital at Front View on June 02, 2014.

Carousels – Which are the good ones out there?

2014-06-02T00:00:00-04:00

Introduction

I’ve got to be honest, when I’m usually hunting for a Carousel plug-in I usually just use the first one I come and then use that continuously until I come across a problem with it, I’ll then usually browse till the next one I come across. This is done for convenience and to keep a project on target to reach its deadline but then when thinking it through, this might not meet all the requirements that I need from a carousel.

For this reason I thought this might be a good topic to write about because I’m sure there are people who feel the same as me, and it might also help when it comes to the next project I start on, which needs a Carousel.

Summary

So what are we looking for in a carousel plug-in?

The ability to have more than one carousel on a page, especially useful when a client is ‘carousel thirsty’
Works responsively
Works well with both text and images
Flexibility when it comes to the carousel itself (don’t want to be writing additional lines of code to customise the carousel, as the plug-in should be doing this for you)
Easy to implement
Compatible with other jQuery tools on your website
Supports major browsers

So what’s out there on a glance that may help out with the above: -

Royal 3D Carousel in JavaScript & CSS3 (Do have to pay for a licence)
Slick:jQuery Fully Responsive Carousel Plugin
Everslider: Responsive jQuery Carousel Plugin (Do have to pay for a licence)
Bx Slider
Wow Slider
Tiny Carousel

The majority of the above, handle the requirements (from the bullet point list), that’s not to say they are the definitive list and there’s nothing to stop you building your own Jquery Carousel plug-in, but the above should help you on your way.

Cache Busting

2014-06-02T00:00:00-04:00

Introduction

Caching busting stops browsers from using a cached file when an new updated version is available.

If you are following best practices for caching your assets (Google - Optimize Caching) you might find that browsers will used the cached version of a file even when a new updated version is available.

This issue becomes worse when proxies, load balancers and other helpful machines are taken into consideration.

To get around problem you need to cache bust meaning that the browser and anything in between knows to request the latest version of the file. There are a number of ways this can be done, best practice is to rename the whole file by appending a version number, date/time or hash to the end of the file name.

This process can be done a number of ways including: Build process, Grunt or Web server configuration.

Summary

Browsers, proxies and other servers can cache files even when they have changed.
Giving a file a unique filename will help break any caching occurring on file updates.
Renaming the file is better than adding a query string.
Multiple ways of automating this process. Build Process, Grunt, Web Server configuration.

Introducing the Testing Suite

2014-05-30T00:00:00-04:00

Introduction

As some of you may have noticed, the Batcaves’ Testing Suite has been implemented, and thanks to some volunteers, beta tested.

What is it?

The Testing Suite is simply a collection of mobile devices connected to a proxy server (the Mac Mini), that allows a user to manipulate a single device and see those replicate across each of the other devices, which means you can quickly see your site across multiple browsers in their native environments.

Summary

Download the "Testing Suite Instructions" document.

How does it work?

What devices/browsers are supported in the Testing Suite?

iOS
- iPod (non-retina)
- iPhone 4s (retina)
- iPad Air
Windows
- Microsoft Surface RT
Android
- Samsung Galaxy S3
- Samsung Nexus 7
- Google Nexus One
Browsers
- IE 6, 7, 8, 9, 10, 11 (Via Virtual Images)
- Chrome
- Firefox
- Safari

Make your website accessible

2014-04-13T00:00:00-04:00

Do you know what problems disabled users are faced with when accessing a website?

Common problems faced are:

Accessing a page without using your mouse.
Screen readers read out unwanted information left on the site.
Media on the site without a transcript.
Audio on a site, but no alternative for deaf or hard of hearing users.
Graphical media with no alternative text.
Links with no reference to where they go to.
Can’t click on something without a mouse.
I just want to read the article not the whole site HTML.
I can’t read that text properly.
Did something just happen?

These are just some examples of the common problems disabled users face when accessing websites. There are many more. Most of these problems listed are something we, as developers, should be covering as standard best practices for website builds.

How can I change my current website development and make it accessible?

Well, I have the slides below from a recent presentation, which will get you thinking about Website Development Accessibility and get you started with some of the standard procedures we should all be following.

Website development accessibility from Ilesh Mistry

As you can see, this is something that could be incorporated into every web developer’s processes to follow and will help towards making your site accessible.

Useful links

Page Checking tools
Screen readers
- Thunder Screenreader
- NVDA

Make your website accessible was originally published by MMT Digital at Front View on April 13, 2014.

Responsive Images (in 10 minutes)

2014-03-27T00:00:00-04:00

Introduction

What’s the correct approach to the responsive images conundrum? Is it the fabled <picture> element? What about srcset? How about just doing it with Javascript, or does the solution lie somewhere else entirely?

In this presentation we looked at all of these, their limitations and their strengths, and examined which of these can actually be used today.

Summary

Javascript-based solutions give us the best cross-browser support.
SVG and the ‘Clown Car’ technique gives us the most complete feature set for todays’ browsers, works in practically all browsers, but it’s difficult to generate and manage those files.
srcset is available in the latest version of Chrome, but it doesn’t cover all of the possible ‘responsive image’ definitions.
The Picture element is touted as the future, but the spec is not settled and no browsers implement it yet.

All of these techniques have their benefits, and there’s decent polyfill libraries available for them, so a lot of the choices come down to evaluating the manageability of the solution and the importance of the element.

Automation For The Win

2014-03-05T00:00:00-05:00

Introduction

Great Developers are often also Lazy Developers. It’s not a criticism, it’s a good thing. As the saying goes:

Lazy programmers hate doing grunt work, and will, whenever possible, find ways to automate or scriptify the work, instead of doing it by hand.

If you’re going to have to repeat the same tasks all the time, you might as well automate them and start finding better uses for all of that free time you’ll be having in the near future.

Automation itself is not a new concept, but it’s relatively recently - with the rise of tools like Grunt - that it’s crossed the threshold of being accessible to, and designed for those that work in the realm of the “Front End”. One of the key benefits of Grunt is that it’s a tool that’s extensible and built in a language which we’re all familiar with - JavaScript.

Summary

What can we automate?

Often the most common elements that we need to automate are:

JavaScript minification, combining lots of separate javascript files into one single, optimised file.
CSS minification, and more importantly, using preprocessors such as SASS to generate our output CSS files.
Spritesheet generation, because that’s an absolute nightmare to create and maintain by human hands.
Optimisation, generation or processing of images.

There’s much more besides - such as uploading or downloading files, compressing archives, checking code quality or executing command-line actions - and all of which can easily be boring, repetitive, complex and error prone all at the same time.

An introduction to Grunt

Grunt is our current weapon of choice for automating our repetitive local workflow tasks. In December 2013 we had a “Brown Bag Session” introducing Grunt, and since then we’ve had some initiatives such as Automate ALL THE THINGS as a knowledge sharing exercise and to push Grunt’s adoption across a range of internal projects.

Introducing Grunt - a JavaScript-syntax tool for automating your build processes. Better than batch files, better than rakefiles, better than ANT or anything else out there. I’m going to show you some magic, and then show you how to make that magic happen yourself, and then your existing processes will look bleak, dull and boring in comparison.

(Naturally a presentation like this loses a bit of its ‘wow’ factor when it’s not actually being presented, so feel free to talk to a Training Champion, James F or another member of the Front End Team for a personal recap.)

The benefits of having these monotonous tasks scripted should be as obvious as using source control. And just like source control, once you’re on the bandwagon you’ll wonder why you ever tried to live without it.

Front View

May Roundup

Introducing the Testing Suite

Make your website accessible

Cache Busting: Part 1

Carousels – Which are the good ones out there?

Responsive Images

Automation For The Win

Carousels – Which are the good ones out there?

Introduction

Summary

Further Reading

Cache Busting

Introduction

Summary

Further Reading

Introducing the Testing Suite

Introduction

What is it?

Summary

How does it work?

What devices/browsers are supported in the Testing Suite?

Further Reading

Make your website accessible

Do you know what problems disabled users are faced with when accessing a website?

How can I change my current website development and make it accessible?

Useful links

Responsive Images (in 10 minutes)

Introduction

Summary

Further Reading

Automation For The Win

Introduction

Summary

What can we automate?

An introduction to Grunt

Further Reading