Crystalh

BBC News - Politics - Front-end developer role

Ever wanted to work on a high profile project that will serve millions of users? BBC News' Politics team is looking for an experienced developer to join their US Elections project.

The role requires strong front-end skills as well as some server-side experience. The role will involve creating a highly visual US Elections proposition: graphs, data tables, live updates and other components and you will be responsible for the entire build and deployment lifecycle.

Required

• HTML

Crystalh

data:

locator: urn:asset:a1e2d1df-a741-6547-93e2-e84692c8e981
locator: urn:bbc:cps:asset:27510321

script:

#!/bin/bash

Crystalh

  var localDateStr = new Date('02.04.2014').toLocaleDateString('en-GB');  //4/2/2014
  var test = new Date(dateStr).toISOString(); //2014-04-01T23:00:00.000Z 
  
  EXPECTED RESULT:
  2014-04-02T00:00:00.000Z
  

Crystalh

#TDD Practices

##Bad Practices Patterns that can be improved, or simply bad practices spotted within unit tests.

##PHP

###1) Repetition in all tests. Create a setUp() to handle this:

Crystalh

Topics

• Sandbox, Virtualisation, Vagrant, and other tools
• Efficient code reviews (including useful tools)
• Grunt & Rake. The Make-tool ecosystem
• Responsive images
• Remote debugging and emulation in Chrome DevTools

Crystalh

Background

The BBC Responsive codebase has developed many robust tools and libraries that could easily be reused, extended and improved upon within the developer community. The codebase has matured from a prototypal project into a fully fledged solution to making BBC News a responsive site. However, all that great work that could be shared is currently locked away in private repos on Github. Briefly we'll cover both the Pros and Cons of Open Sourcing our code.

Pros

• Collaboration from the community to produce the best tools and libraries we can
• Heighten the profile of the BBC as a leading edge, innovative, and creative organisation
• Generate useful feedback from developer community
• Good advert for potential developers considering working for us
• Reignites developer passion in what we're building / producing.
• Exposes the BBC as leaders in the responsive web development field

Crystalh

Requirements & Features

• provide a metadata template which meta producers must follow
• easy to update: update entire components or specific properties of a component
• There is a set of generic meta for each region. New meta should ONLY include unique keys/properties. i.e.
• Radio has generic key of name, and unique keys of radio URL & sid. So meta producer would only provide URL & sid.
• namespace properties of a particular component, i.e.: weatherLocations, radioSid, radioUrl, sportTeams, travelSearchTerm
• Region URL is the key for each node
• script WILL NOT modify metadata provided. Must be in correct format.
• script can be provided either json or yaml, outputs TBC

Crystalh

function Jsonloader(options) {
  var defaults = {
    callbackInterval: 15000 //15 seconds
    callbackString: "jsoncallback",
    success = options.success || function() { },
    url = options.url || ""
  };

  this.defaults = jQuery.extend(true, defaults, options || {})
}

Crystalh

			var bbcimages = this;
			if(glow('img.show').length){				
				glow('img.show').anim(1, {
					'opacity': 0
				}).on('complete', function() {
					glow('img.show').removeClass("show").css("display", "none");
					glow('#'+bbcimages.pages[bbcimages.currentPage].assets[itemIndex%bbcimages.pageSize].id)
					.fadeIn()
						.data('glow_fadeIn').on('complete', function(){
							alert("fadeIn completed");

Crystalh

//fadeIn() not working properly in below example.  Next image suddenly appears without easing in.  Slowing down the transition to 3sec made no difference.
var that = this;
	if(glow('img.show').length){				
		glow('img.show').anim(1, {
			'opacity': 0
			}).on('complete', function(){
				glow('img.show').removeClass("show").css("display", "none");
				glow('#'+that.pages[that.currentPage].assets[itemIndex%that.pageSize].id).addClass("show").fadeIn(3);
			});
	}