guardian / frontend Goto Github PK
View Code? Open in Web Editor NEWThe Guardian DotCom.
Home Page: https://theguardian.com
License: Other
The Guardian DotCom.
Home Page: https://theguardian.com
License: Other
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.
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
Write a service to compress images.
Regularly we are publishing 100kb images that could be 8kb.
Or 11kb images that could be 2kb
http://static.guim.co.uk/sys-images/Observer/Pix/pictures/2012/11/2/1351886325865/salis-005.jpg
Here is a list of some minor styling issues the designers and I have noticed:
type-4
should be type-7
)box-indent
: example@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.
Notes
We need to simplify the generated CSS to produce oneliners for SVG support. cc @phamann
We need one of these
Ideally on mobile it stretches all the way to the top right of the screen, to allow for inaccurate thumbs.
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".
We don't use any of the config meta tags in the page, so the need removing
<meta name="page-id" ...>
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
Especially while developing, it's a bind having to clear the browser cache for xmlhttp requests etc.
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
Add touch event support for front hide/show links to improve interaction responsiveness.
Gallery pages do not currently have story package components
https://github.com/guardian/requirejs-optimiser-bug
This makes the code less portable across other AMD loaders.
video pages do not currently have story package components
https://github.com/cujojs/curl/blob/master/dist/curl/curl.js
This is so newcomers to the project understand that this shortcut is similar to but not exactly like jQuery's $ object.
There's a jshint branch with a lot of errors in. We should divide them up between ourselves and fix them.
The purpose of the phantom box is to collect waterfall charts so that we can track quality of service over time.
We have some boilerplate icons such as quotes and the review star.
Convert these into a sprite
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.
The purpose of the diagnostics box is to collect client-side errors and events and feed them in to our reporting systems.
[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
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
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.
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!
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);
This is a controversial one:
common.mediator('module:error', 'Failed to load more matches', 'more-matches.js');
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.
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'.
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.
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.*");
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.
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.
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.
Ad module does this to test if ads are on screen.
Documenting planned and possible performance improvements.
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.
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.
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.
Test the impact on file sizes.
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
No alt text
Alt text as specified in R2
It's great, but it makes lots of HTTP requests every 60 seconds that aren't cached.
Go to: http://beta.gucode.co.uk/football/tables
Click 'All Tables'
Click 'Capital One Cup'
404
Capital One Cup is removed from listing, as it does not have a table (it is a knockout competition.)
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.
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.
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.
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.
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.
Agent name link currently pages up when clicked
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.