Ianfeather

Unfortunately one of our key front end developers decided to leave Lonely Planet at the end of last year to pursue new avenues. As a consequence we're on the lookout for a new Front End Developer.

We're looking for someone who:

understands the complexities of big websites.
wants sites to be fast. Like, really fast - and will keep pushing for it.
is agnostic about the technology stack and will use the right tool for the job.
cares about the user experience, whether that relates to visual design, the website speed, or ensuring we can deliver new features fast enough.
understands the core concepts and benefits of continuous delivery (you don't need to be an expert or indeed to have worked in such an environment before).

	div{
	display:inline-block;
	padding:5px;
	margin:10px;
	border:1px solid #ccc;
	transition: 0s background-color;
	}
	div:hover{
	background-color:red;
	transition-delay:1s;

	// When I specify our baseUrl as '/public/assets/javascripts'
	//
	// Grunt will fail to import any files from here ('public/assets/javascripts/lib/*/.js') into the require call, presumably becaus it is searching in ./lib/**/ which doesn't exist.
	// Obviously the specs won't run because there are no src files to test against


	jasmine: {
	avocado: {
	src: ['lib/*/.js'],
	options: {

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Jasmine Spec Runner</title>


	<link rel="stylesheet" type="text/css" href=".grunt/grunt-contrib-jasmine/jasmine.css">

	# Really this is just a proximity_sensor, it will fire whatever event you pass as an arg
	# It has nothing to do with loading, that's just how we've used it so far

	required = if window.lp.isMobile then 'jsmin' else 'jquery'

	define [required, 'lib/extends/events'], ($, EventEmitter) ->

	class ProximityLoader

	for key, value of EventEmitter

	// ----
	// Sass (v3.3.0.rc.1)
	// Compass (v0.13.alpha.10)
	// ----

	$is-ie: true

	@mixin respond-at($screen-width)
	@if $is-ie == false
	@media only screen and (min-width : #{$screen-width}px)

	// ----
	// Sass (v3.3.0.rc.5)
	// Compass (v1.0.0.alpha.18)
	// ----

	// ****
	// TOGGLE THIS VARIABLE TO SEE THE DIFFERENCE
	$is-ie: false

	@mixin respond-to($screen-width)

	// Is there a way to change a path for a specific module during the r.js build process?
	// So that a module with a dependency of 'jquery' can be used with two versions?
	// I have tried to show what I would be after with lines 16-18

	({
	baseUrl: "./",
	paths: {
	"jquery": "jquery/jquery-2.0"
	},
	modules: [

	require ['jquery'], ($) ->
	$(".js-colours .js-select").on "change", (e) ->
	sortBy(@value)

	$(".js-colours .styleguide-proximity__input").on "keyup", (event) ->
	return resetProximity() if (!event.target.value)
	event.keyCode is 13 and matchProximity()

	sortBy = (comparator) ->
	sections = document.querySelectorAll(".styleguide-block")

	<head>

	// If the user has a cookie don't render the critical css to the page
	// Ensure it matches the md5 hash of our critical css so we can cache bust

	- if cookies[:inline_css_cached] == critical_css_ref

	// Instead get the styles from local storage

	<script>