Skip to content

Instantly share code, notes, and snippets.

@tmaslen
Last active March 30, 2016 17:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tmaslen/b3cc24f406dc0c7d14adc7671d1fc151 to your computer and use it in GitHub Desktop.
Save tmaslen/b3cc24f406dc0c7d14adc7671d1fc151 to your computer and use it in GitHub Desktop.

# BBC News JavaScript Standard v0.0

Contents:

  • Introduction
  • Ensuring availability of JavaScript content for all users
  • JavaScript coding strategies
  • Legal requirements
  • Implementation and optimisation
  • XML HTTP Requests (AJAX)
  • Appendix A: Why
  • Appendix B: How

1. Introduction

1.1 This document describes the standards for use of JavaScript on BBC News pages. It is intended to be read in conjunction with the BBC News Browser Support Standard and BBC News Semantic HTML Integrity Standards. Please also see the global BBC Accessibility Guidelines.

2. Ensuring availability of JavaScript content for all users

2.1 Scripts MUST NOT cause errors or warnings in level 1 and 2 browsers (see Browser Support Standard).

2.2 The core editorial proposition of the page and core navigation MUST be available to users with JavaScript disabled.

2.3 Users with JavaScript disabled MUST NOT be presented with elements which are non-functioning or appear broken, due to the lack of JavaScript. For example, the user MUST NOT be presented with links that do nothing when clicked. To avoid this, elements which require JavaScript SHOULD always be added to the page via JavaScript.

2.4 Level 2 browser users MUST be given a non JavaScript experience. For example, if your richest experience uses 'AJAX', ensure that browsers without 'AJAX' support are catered for, e.g. by providing the same functionality as with JavaScript disabled.

2.5 Scripted content MUST adhere to the Accessibility Guidelines.

3. JavaScript coding strategies

3.1. JavaScript MUST be built using progressive enhancement. A basic example of this:

HTML:

<a href=”fullimage.jpg” id=”fullImageLink”>Full size image</a>

JavaScript:

document.getElementById(‘fullImageLink’).onclick = function() {
// show image in lightbox
return false;
}

In the above code the link points to the full image, so if JavaScript is disabled the link still works.

3.2 Sometimes the same functionality needs to be coded in multiple ways to support all browsers. Detecting the browser via the user-agent string MUST be avoided. Instead, feature detection SHOULD be used. For example:

if (document.querySelectorAll) {
// get element(s) via querySelectorAll
}
else {
// get the elements using older more supported methods
}

3.3 If you do need to use a browser-detect, you MUST seek approval from your development lead.

4. Legal requirements

4.1 Any JavaScript that deals with personal information MUST comply with the requirements of the Data Protection Act (DPA). See the Information Security and Privacy Standard.

5. Implementation and optimisation

5.1 JavaScript MUST be held in a .js file and embedded using the <script src="..."></script> notation UNLESS the script is only used on a single page.

5.2 If parts of a script requires server parsing, you SHOULD separate it from the rest of the script. For example:

<script type=”text/javascript”>
var myApplicationConfig = {
userId: <?php echo $userId ?>
};
</script>
<script type=”text/javascript” src=”myapplication.js></script>

5.3 All <script> tags SHOULD be placed in the end of the HTML document. A1

5.4 If the required functionality is already available in site-wide frameworks/tools such as BBC iVote or EMP, you MUST use it, rather than duplicate the functionality.

5.5 You MUST NOT link to JavaScript on non bbc.co.uk servers, UNLESS you have ensured your compliance with Third Party Hosting Requirements AND cleared this with your product lead. This includes analytics and survey scripts. A2

5.5.1 You MUST NOT link to scripts on other BBC sites unless that script is part of a site-wide framework/library (eg EMP, BBC iVote). A3

5.5.2 If you include scripts developed outside the BBC, you MUST adhere to the script's licence and ensure that it complies with BBC standards and guidelines.

5.5.3 If a copyrighted script is used you MUST include an aknowledgement to the author and copyright holder of code.

5.6 JavaScript files MUST be compressed and gzipped to reduce file size and download time. B1

5.7 An uncompressed version MUST be stored somewhere within your codebase.

6. XML/ HTTP Requests (AJAX)

6.1 Synchronous requests MUST NOT be used. A4

6.2 Polling requests MUST use the polling.bbc.co.uk sub domain.

6.3 Polling requests cadence MUST be able configurable via a command from the server.

6.4 Polling requests MUST be able to be disabled via a command from the server.

6.5. Requests MUST include error checking for failed requests.

6.6 When making a request you MUST indicate to the user that there is a server call taking place, UNLESS this call is not the result of user interaction.

6.7 To ensure security, data from non-BBC servers MUST NOT be loaded from within JavaScript code.

Appendix A: Why

A1. Scripts block the rendering of subsequent HTML elements while they load. Placing scripts at the end of the document prevents this.

A2. Even if you believe the other host to be trustworthy, their domain may be taken over and their scripts changed to deface sites and steal sensitive user data.

A3. Another site may contain a script you need, but that script may be altered or deleted without warning. Instead, take a copy of the script.

A4. Synchronous requests freeze the browser until the request is complete. This makes the page feel slow and unresponsive.

Appendix B: How

B1. Yahoo's YUI Compressor and Google's Closure Compiler are examples of JavaScript compressors.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment