The exported svg's that the designers supply us from Adobe based products contains a lot of cruft meta data we do not need, and in turn this bloats the data/uri's and css we serve.

I intend to build this node.js svg cleaner into the spricon.js build process to clean all svg's before base64 encoding them.

https://github.com/svg/svgo

Monkey patch EventEmitter to console.log() all the on/emit events happening on the page.

Would also be nice to be able to assign the mediator to window.mediator for debugging.

Here is a list of some minor styling issues the designers and I have noticed:

• In-body inline images need a margin-bottom example
• profile page bio standfirst has wrong type size: [example](http://m.guardian.co.uk/profile/phillipinman is type-4 should be type-7)
• Football stats auto-update component needs box-indent : example

The purpose of the phantom box is to collect waterfall charts so that we can track quality of service over time.

• A phantom box cloudformation with phantomjs dependencies
• A scheduled job to hit a list of URLs via phantomjs netsniff and write the HAR our to disk
• Flume the HAR logs to S3 for post-event analysis
• Write some reports to show quality of service (Eg, wait time per host over the last 24 hours, js/css/html file size ratio etc.)
• There may be some advantage in running this from both (or alternately) US and EU zones
• Look at VPN options for testing via UK, USA, and other important areas
• Think about bandwidth throttling to simulate 3g connections

Write a service to compress images.

Regularly we are publishing 100kb images that could be 8kb.

http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/10/29/1351531721072/0f292cae-3f68-4107-a283-875bbdb6fde0-620.jpeg

Or 11kb images that could be 2kb

http://static.guim.co.uk/sys-images/Observer/Pix/pictures/2012/11/2/1351886325865/salis-005.jpg

STR

Publish trail on a front, which includes a <p> within the trailtext

Actual Results

Text inside the <p> gets a larger font size

Expected Results

Styling is consistent within the trail regardless of presence of <p>

We need to simplify the generated CSS to produce oneliners for SVG support. cc @phamann

Add touch event support for front hide/show links to improve interaction responsiveness.

http://requirejs.org/docs/api.html#pageload

Sometimes we are seeing the JavaScript app fail to bootstrap. Our first guess is it's firing before the DOM is loaded.

Make something that checks all the links on the page resolve to a HTTP 200 when visited.

The desktop link football fixtures section resolves to a HTTP 404.

This article has some issues with image weirdness - note that the primary photo is the cave/lens flare, but when viewed on gucode we see the initial image of a pirate ship replaced with the correct one.

This seems to be because article.scala.html looks for an image with a width of 220px, and of all of the images (insert your own valid API key...) returned by the API for this article, only one (the pirate ship one) is sized at 220px. The pirate ship image itself is just an in-body image.

Not sure if this particular article is an anomaly, but worth double checking? API doesn't make it easy to tell when images are 'the same'.

Ideally on mobile it stretches all the way to the top right of the screen, to allow for inaccurate thumbs.

Documenting planned and possible performance improvements.

Move the script and font loader code to the bottom of the page.

We execute JS in the head to apply fonts before painting the page. In Chrome the HTML pre-parser doesn't download images. Canary does, Safari (including mobile) does, Firefox does, IE9 does. If Chrome doesn't catch-up before we take desktop traffic we might want to look at this, so that Chrome downloaded images in parallel with CSS.

Load app JS with standard script element and async defer attributes.

Gets modern browsers downloading app JS in parallel with CSS, and takes JS download time out of the critical path. Problem here is that browsers will download the app JS even if they don't cut the mustard. Unless... we cut the mustard on the server-side.

Defer load of auxiliary images

Fronts have a lot of images that load upfront, which are not core content. Remove some from the HTML and defer their load until they are required or other appropriate time.

Split gallery CSS/JS out of main CSS/JS file

Test the impact on file sizes.

Based on a discussion here, I have been thinking about our general bootstrapping of modules.

Currently found in :common/app/assets/bootstraps/article.js

This seems to now be global rather than just article bootstraping (which I agree with), but am worried that its going to become a very large file, with lots of if/switch statements testing which type of page you are on.

We have a set of common modules that need to be init'd on every page, but as the application grows we will find we only want to load specific modules for specific page types. For example the TrailblockToggle on the netwrok front or Autoupdate on live-blogging.

One possible solution that I have used in the past is to add the controllers name as a data attribute on the body tag and route/fork the init functions based on that:

Something similar to this:
http://viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution

What are peoples thoughts on this?
@commuterjoy @ahume @mattandrews @ironsidevsquincy

Sharath's Android phone is buggy on the swipes (chrome 24 beta)

He suggests adding a large click target on the left/right of the images so people can prod their way through them.

/cc @mattandrews

STR

Go to front: http://beta.guardian.co.uk/
or article with main image: http://beta.guardian.co.uk/football/2012/oct/24/dougie-freedman-bolton-crystal-palace
Inspect top promo image

Actual

No alt text

Expected

Alt text as specified in R2

Any change to an asset file (css, javascripts) requires a full compilation of all the assets, which isn't conducive to fast development, and makes debugging harder

Preferably compilation (minification, concatenation) would not occur at development. References to JS files will need to lose the hash, and less.js should handle our css

There's a desire to enable fonts by default (within the constraints of connection speed, and other things we want to respond to).

The prefs module is used to enable fonts on a per user basis. We need a mechanism to decide whether it's on or off by default. Currently it's disabled simply because localStorage returning null translates to off.

At the moment, the test checks for fonts enabled on the app server switches AND the user pref. Does this need to be an OR check. There will likely be other user prefs that need this treatment.

Will think further.

This is so newcomers to the project understand that this shortcut is similar to but not exactly like jQuery's $ object.

Sometimes we use vendor/module.js (Eg, bean) and sometimes we alias with paths (Eg, reqwest). We should normalise this to always use just the name.

Likewise, Bean is referenced as a specific version number in the define() statements, whereas we should be using the require.path object to alias the module name with the version we are using.

Other vendor/*.js modules are not version stamped at the moment, so we should find out the version of each module and rename the file.

• Install the nginx SPDY module
• See what consequences it has on load speed etc.

Today the Content API sent an empty list of 'most viewed' content for a short period of time, and we sent the following to the end user, which was cached for 15 minutes.

http://m.guardian.co.uk/most-popular?callback=showMostPopular

showMostPopular({"html":"<div class=\"\" id=\"popular-trails\" data-link-name=\"most popular\"> <h2 class=\"type-2 article-zone\">Most read</h2> <div id=\"tabs-popular-1\" class=\" headline-list\" data-link-name=\"The Guardian\"> <ul class=\"unstyled\"> </ul> </div> </div>","refreshStatus":true});

We should probably send an HTTP 204 instead.

Sometimes it's caching 50% of requests, sometimes less. If we are going to use Akamai we should understand why it works in this way. IMHO we need a hard cache for the specified time in Cache-Control.

The logo jumps by 1-2px's when the svg replacement kicks in after a few hundred milliseconds. This is mostly likely to do with the way the browser is handling the svg scaling or the svg width is sub-pixeled.

Therefore, we need to eliminate any issues by ensuring both the .png and .svg files are the exact same dimensions as each other, and that ratio is the same as the dom container.

I have asked Ben to re-supply the assets for us.

Ad module does this to test if ads are on screen.

We seem to just have "single" title tags -- eg, just the article headline (whereas on desktop we do "headline | Section | guardian.co.uk". This has SEO implications so I'd advise we follow the format on guardian.co.uk.

Same goes for sections/tags: We just have "Video".

There's a jshint branch with a lot of errors in. We should divide them up between ourselves and fix them.

Notes

• Current app is here, git clone @git.gudev.gnl:/git/tools/dashboards-dev.git
• Job of dashboard is to accentuate interesting things to us
• There's nice lib's than PHP, https://github.com/jondot/graphene

We don't use any of the config meta tags in the page, so the need removing

<meta name="page-id" ...>

We want to modernise the www/r2 redirect list with a list of mobile and tablet user agents.

MOBILE_PATTERNS.add(".*Android.*");
MOBILE_PATTERNS.add(".*Blackberry.*");
MOBILE_PATTERNS.add(".*BlackBerry.*");
MOBILE_PATTERNS.add(".*Blazer.*");
MOBILE_PATTERNS.add(".*Ericsson.*");
MOBILE_PATTERNS.add(".*htc.*");
MOBILE_PATTERNS.add(".*HTC.*");
MOBILE_PATTERNS.add(".*Huawei.*");
MOBILE_PATTERNS.add(".*HUAWEI.*");
MOBILE_PATTERNS.add(".*iPhone.*");
MOBILE_PATTERNS.add(".*iPod.*");
MOBILE_PATTERNS.add(".*MobilePhone.*");
MOBILE_PATTERNS.add(".*mot.*");
MOBILE_PATTERNS.add(".*MOT.*");
MOBILE_PATTERNS.add(".*Motorola.*");
MOBILE_PATTERNS.add(".*MSN Mobile Proxy.*");
MOBILE_PATTERNS.add(".*NEC.*");
MOBILE_PATTERNS.add(".*nokia.*");
MOBILE_PATTERNS.add(".*Nokia.*");
MOBILE_PATTERNS.add(".*NOKIA.*");
MOBILE_PATTERNS.add(".*Novarra.*");
MOBILE_PATTERNS.add(".*O2.*");
MOBILE_PATTERNS.add(".*Opera Mobi.*");
MOBILE_PATTERNS.add(".*Palm.*");
MOBILE_PATTERNS.add(".*Samsung.*");
MOBILE_PATTERNS.add(".*SAMSUNG.*");
MOBILE_PATTERNS.add(".*Sanyo.*");
MOBILE_PATTERNS.add(".*SANYO.*");
MOBILE_PATTERNS.add(".*Smartphone.*");
MOBILE_PATTERNS.add(".*SonyEricsson.*");
MOBILE_PATTERNS.add(".*Symbian.*");
MOBILE_PATTERNS.add(".*Toshiba.*");
MOBILE_PATTERNS.add(".*Treo.*");
MOBILE_PATTERNS.add(".*vodafone.*");
MOBILE_PATTERNS.add(".*Vodafone.*");
MOBILE_PATTERNS.add(".*Windows CE.*");
MOBILE_PATTERNS.add(".*Xda.*");

A new version of less was released last week: 1.3.1

A major reason to upgrade is a reported big speed increase on compilation in Rhino environments. Also some nice new color mixins and greater @media support.

https://github.com/cloudhead/less.js/blob/master/CHANGELOG.md

The First item in the section list looks slightly weird now we have no padding within the list. We either need to add padding to top of list, or make the arrow blue when first item is selected.

Currently when a story has a LIVE blog article pulled into it, the LIVE icon is shown in the Timeline and obscures the Time stamp.

The purpose of the diagnostics box is to collect client-side errors and events and feed them in to our reporting systems.

• A diagnostics box cloudformation to log javascript errors & events - DONE
• Catch window.onerror event and report to the box - DONE
• Flume the logs to S3 for analysis - DONE
• Expose metrics to Ganglia [1]
• Refactor AMD modules to report errors & undesirable events [2]
• Write some reports to show common errors, browser/os combinations etc. and make this information easily accessible

[1] Speak to Nick about gmond, ganglia and access_logs. Also need to figure out what we key the error on.
[2] The font loading module does this already for reporting slow localStorage rendering speeds

https://github.com/guardian/requirejs-optimiser-bug

This makes the code less portable across other AMD loaders.

Especially while developing, it's a bind having to clear the browser cache for xmlhttp requests etc.

Below are some minor observations gathered during refactoring our JS bootstraping and modules. Some of which are consistent and others which need to be decided upon and then normalised across the modules and we can create a document or github page by which we can reference for future development.

Discussion on these conventions is encouraged ;) and please feel free to add more to the list!

Module initialising:

• If module requires multiple parameter/arguments to initialise, a single object with named keys is prefered i.e:

new AutoUpdate({
     path: window.location.pathname,
     delay: 10000,
     attachTo: qwery(".matches-container")[0],
     switches: switches
}).init();

over

new AutoUpdate(indow.location.pathname, 10000, qwery(".matches-container")[0], switches);

• All methods of a modules should be private unless methods that are required externally such as init().
  *Some of are modules return classes some of them don't. A modules should only be called using the 'new' constructor if there needs to be multiple instances on the page such tabs.

Naming conventions:

• All file and method names should be camelCased with no hyphens or underscores.
• Shorter abbreviated names are prefered for common actions, such as:
  init over initialise
• Show and Hide action names are preferred if manipulating the DOM such as:
  showFrontFixtures();
• Load is preferred over transclude if module is handling ajax requests.

Events:

This is a controversial one:

• EventEmitter pub/sub is expensive, and makes modules harder to read. Therefore, a module should only emit and event if it is required for cross app/module communication or testing, and not for internal communication.
• EventEmitter itself even warns if we go over a certain amount of events globally.

Logging:

• All defensive error situation should be logged using the error module:

common.mediator('module:error', 'Failed to load more matches', 'more-matches.js');

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=189077

Agent name link currently pages up when clicked

STR

Go to: http://beta.gucode.co.uk/football/tables
Click 'All Tables'
Click 'Capital One Cup'

Actual

404

Expected

Capital One Cup is removed from listing, as it does not have a table (it is a knockout competition.)

We need one of these

On the desktop site, live blog blocks have anchor links like:
http://www.guardian.co.uk/world/2012/nov/06/election-day-obama-romney-live#block-5099508495cb1506d24449d1 linked from the timestamp.

However, these same anchors are not present on the responsive site, so these anchors (often used internally on the site), do not jump to the correct location on the page.

video pages do not currently have story package components

It's great, but it makes lots of HTTP requests every 60 seconds that aren't cached.

• This will provide a questionable user experience of low bandwidth connections.
• Even my iPhone 4S is struggling to render & scroll while the http stuff is going on.
• Lets get some stat's on how many people use these things.

Eg, http://beta.guardian.co.uk/world/middle-east-live/2012/oct/19/syria-brahimi-ceasefire-plan-damascus-live

@gklopper @phamann
The trail on the network front for the article: http://m.guardian.co.uk/world/2013/feb/13/christopher-dorner-charred-remains-cabin is missing Alt Text. This appears to be due to missing certain image asset sizes which are looked for to populate the alt text. However, alt text should always be populated as it is mandatory to populate it in R2/ESD tools. In the worst case we should populate an empty alt text, rather than none.

Trail image HTML is:
<img itemprop="contentURL" data-thumb-width="140" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/2/13/1360748001458/Christopher-Dorner-005.jpg" class="maxed">

This was reported by my screenreader using friend Damon.

We have some boilerplate icons such as quotes and the review star.

Convert these into a sprite

The latest version has some performance improvements. Probably not much benefit on desktop where hundreds of thousands of ops/sec, but more significant on mobile. Particularly as we are making heavy use of pubsub event driven style.

http://jsperf.com/eventemitter-3-vs-4/4

A.

Binding only to click results in a 300ms delay before executing handler. Bind to touchstart as well and see the massive difference in responsiveness:

Theory here: https://developers.google.com/mobile/articles/fast_buttons

I'm thinking specifically on the sections dropdown control.

• Will save a few kb
• Curl has neater javascript fail handling -Eg require([], successCallback, failCallback)
• Curl can also load jsonp, so could remove the need for reqwest

https://github.com/cujojs/curl/blob/master/dist/curl/curl.js

Gallery pages do not currently have story package components