philgyford/daily-paper

For viewing a daily issue of the Guardian and Observer newspapers. `main` branch should be stable, current work is in `dev` branch.

daily-paper's Issues

Open 'See original' links in pop-up?

See if we can make the 'See original' link on articles that don't have redistribution rights open in a pop-up window rather than a page reload.

Use print version of original article.

Next/prev swipe not working in iOS 7?

On iPhone, left/right swipe works fine... but if you scroll down the page, it no longer detects the swipe until you scroll back to the top.

Fix 'previous' arrow when page is narrow

If the window width is reduced a lot, the left arrow overlaps the main content.

Page too wide on iPhone

On iPhone, the page is slightly too wide, and text disappears off the right hand side.

Glitch in forward/back on iPhone

http://www.gyford.com/phil/writing/2010/07/06/web-page-iphone.php#c316806

"There’s a small anomaly I’ve found when using “Today’s Guardian” in either the Home Screen or in Safari on the iPhone 4 (IOS 4.2.1): sometimes when I swipe to go to the next article the page appears to slide twice into position and it looks like an article has been skipped, but it’s just reloaded itself instantly with the sliding motion. It doesn’t happen every time but it’s a bit disconcerting when it does because I imagine I have missed an article and swipe back only to find I haven’t.

I can’t find any consistency in the problem; at one point it looked like it was only happening when I just wanted to skip an article without scrolling down it, but that doesn’t happen each time it seems, and it occasionally happens when I’ve get to the bottom of an article and am swiping to the next page. It sometimes also appears to double load when swiping backwards.

I have wondered it if could be connected to Guardian ads being loaded at the bottom of the page, as I’ve noticed them changing while the article is already there?"

Supporting non-UK-specific content

Hi 👋

I love the idea of this, but I'm not from the UK. There's only so much Boris Johnson I can handle, before wanting to retreat to the calm, serene waters of Scott Morisson. cough.

As the Guardian also offers AU/US (digital) editions, sdo you think it'd be possible to amend this to support different content?

I'm guessing it's not easily supported, as this script seems to rely on the articles to part of the physical "book" newspaper edition, which isn't made in AU/US. Subsequently, we don't get the newspaperPageNumber value in the response (nor the newspaper-book[-section] tags), so it'd make for a poor experience.

Nuts. 🥜

But a side-quest might still be possible. We can filter on the production-office param when hitting the API. Doing so for yesterday (4th October, 2020), gives us:

• without production-office: 188 articles
• production-office=aus: 16 articles
• production-office=uk: 153 articles
• production-office=us: 19 articles

I could imagine a world in which the AU/US articles could form a sort of "supplement" (hidden by default, but available if you tap thru). It wouldn't read/categorise/etc quite as nicely, but given how (relatively) few articles there are, I don't think it's a huge burden to thumb through them.

(I imagine some of the AU/US articles occasionally make it into the print issue, so it's hardly bulletproof)

Or, do you know of any API/params that could more effectively do the job?

Add preferences to hide (sub-)sections

Check (sub-)sections that you want hidden. Save in cookies.

Add link to read yesterday's paper

So user can switch between 'today' and 'yesterday'.

Tweak iPad/iPhone font sizes

iPad: Byline (maybe more) should be bigger.
iPhone: Standard text smaller.

Adjust height of short next/prev articles

On iPad (maybe others?), when moving to a next (and prev?) article that is very short, the expansion of it to fill the full screen happens after reaching the page. A very noticeable jump of the .footer. So, in resizePage() we should re-size the next/prev articles, if they're short, as well as the current one.

Protocol mismatch on youtube embeds

Blocked a frame with origin "http://guardian.gyford.com" from accessing a frame with origin "https://www.youtube.com". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

Not working in Android Chrome and Firefox

I use Android 9 and in both Firefox and Chrome, it simply doesn't seem to work properly for me. The animations and 'button'/article length things work, and I can swipe between pages, but only the first article loads. Nothing else. It's really weird. I made a short screen recording in case it is any help to you. It shows the website in (as far as I can tell) vanilla, up to date Chrome. I use Firefox by default,and run an ad blocker, so I thought I'd demo the problem in Chrome as it's close to standard installation. The problem can be replicated in Firefox on Android as well though.

The only tip I can offer is that the subsequent blank pages always seem to be the same 'length' (height) as the first. It's like the subsequent pages do not get reloaded and the scrollbar and page height remains the same as it was for the first, correctly loading page.

One final tip: if I ask Chrome to force load the desktop version of the website, the issue goes away - but also the navigation works completely differently to the mobile version, as you would expect.

Maybe related to the way the old JS detects features and devices, so related to #33?

Quick Guide section shown truncated (hidden)

In eg https://www.theguardian.com/environment/2018/mar/27/bottle-and-can-deposit-return-scheme-gets-green-light-in-england there's a Quick Guide section with expandable text.

The section starts with 'Why is plastic being demonised?' but doesn't show the 'Quick Guide' or the title so is slightly confusing and misleading, but the main problem is that the text is truncated (actually hidden).

Maybe the section should be removed altogether unless it is easy to reproduce the expanding box, or delineate it with a box?

Page height being set before images are loaded

Sometimes the height of an article appears to be set before the images have loaded, so the end of the article is cut off once the image has loaded and pushed the subsequent content down.

Try to put articles into sub-sections

Do we have the data from the API?

National
International
Financial
etc

Add user preferences

eg:
Hide Sport/other sections.
Change font?
Change colours?

Different margins on right and left

e.g. Safari on macOS, more margin on right:

Modernize CSS

• Stop relying on iphone/ipad classes (except where they indicate feature changes) and instead use media widths
• Drop IE6 support(!)
• Generally modernise things
• Use Sass?

About window doesn't resize if window size changes

Add JS hyphenation?

Look at:

• http://code.google.com/p/hyphenator/
• https://github.com/bramstein/Hypher

Rotating on iPhone results in wrong widths

Rotating the phone doesn't resize the width of the articles as it should.

Freezing on iPad

Sometimes, often after using it for a while, it's impossible to move to previous/next articles. A reload fixes the problem.

Possibly something to do with swiping left/right while the page is scrolling up/down? Maybe?

Use the sparkline to navigate articles more finely?

eg, make individual articles navigable by using the sparkline, rather than just sections.
http://gist.github.com/431278 via http://twitter.com/tomstuart/status/15771012883

Enable zooming images

Would be good to be able to click/tap an image and have it zoom to be as wide/tall as the viewport allows. Maybe disable on small screens? Or allow zooming in further.

https://github.com/kingdido999/zooming is nice because it does one thing. Doesn't create a "Lightbox" in which you can scroll through several images.

But it doesn't work for us because of the overflow:hidden on #window. The image zooms, but only within the confines of the central article "window". I tried disabling/enabling the overflow when an image opens/closes using onBeforeOpen() and onClose() callbacks… which seemed to work, but closing an image resulted in it bouncing open again, except this time with the overflow in place.

Maybe we can look at how that plugin does things and create our own simplified version that works for our one use case.

I think we can target all img.gu-image images to get the ones in the body of articles. Could do the same for the "thumbnail" images, but note that they're only 500px instead of 1000px. Looks like you can change the 500.jpg filename to 1000.jpg for them and get the big version though.

Video embeds are too wide

They stretch off the right hand side of page.

Some captions have linebreaks

Some captions under photos have extra linebreaks. Particularly where forward slashes appear.

iPad: Make swipeable area full height

Extend the swipeable area to the full height of the screen, so the footer is at the bottom of the screen when the article is short.

Display content of figures

Some maps, charts, etc are included as iframes, but by default we only get a link to the content https://groups.google.com/g/guardian-api-talk/c/itDN2nDkXQo

<figure class="element element-interactive interactive" data-interactive="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js" data-canonical-url="https://interactive.guim.co.uk/charts/embed/nov/2022-11-29-06:01:12/embed.html" data-alt="Chart of religions in England and Wales"> <a href="https://interactive.guim.co.uk/charts/embed/nov/2022-11-29-06:01:12/embed.html">Interactive</a> </figure>

That's from this article in the API: https://content.guardianapis.com//uk-news/2022/nov/29/calls-grow-to-disestablish-church-of-england-as-christians-become-minority?show-fields=body&api-key=test
Rendered here on the website: https://www.theguardian.com/uk-news/2022/nov/29/calls-grow-to-disestablish-church-of-england-as-christians-become-minority

Use something like this method for iframes? https://gomakethings.com/4-ways-to-include-external-content-in-your-html/
Or https://gomakethings.com/html-includes-with-web-components/
Or https://gomakethings.com/html-includes-using-web-components-and-iframes/
Or probably do it when generating the content https://gomakethings.com/html-includes-with-compilers-and-static-site-generators-ssgs/

Fix size of video embeds

Video figures are often the wrong size for the iframes they contain. Maybe need to catch them during python processing and add extra HTML classes/elements?

Examples:

<figure class="element element-video" data-canonical-url="http://www.youtube.com/watch?v=xRjvmVaFHkk">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/xRjvmVaFHkk?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=xRjvmVaFHkk">Watch the trailer for Joker.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="http://www.youtube.com/watch?v=0oePXZdY75o">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/0oePXZdY75o?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=0oePXZdY75o">Watch a trailer for Good Posture.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="https://www.youtube.com/watch?v=lekmh2KLvM4">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/lekmh2KLvM4?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=lekmh2KLvM4">Watch a trailer for Judy.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="http://www.youtube.com/watch?v=MwD0uete7f8">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/MwD0uete7f8?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=MwD0uete7f8">Watch a trailer for Werewolf.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="http://www.youtube.com/watch?v=EC3GH3acHvs">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/EC3GH3acHvs?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=EC3GH3acHvs">Watch the trailer for Harry Birrell Presents Films of Love and War.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="https://www.youtube.com/watch?v=aXmGpLYiFWU">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/aXmGpLYiFWU?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=aXmGpLYiFWU">Watch Judy Garland and Gene Kelly’s Be a Clown routine.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="http://www.youtube.com/watch?v=6uaN60k0-zY">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/6uaN60k0-zY?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=6uaN60k0-zY">Watch the video for Lark by Angel Olsen.</a></figcaption>
</figure>

<figure class="element element-video" data-canonical-url="http://www.youtube.com/watch?v=P2Gbbd6pVMg">
    <iframe height="259" width="460" src="https://www.youtube-nocookie.com/embed/P2Gbbd6pVMg?wmode=opaque&amp;feature=oembed" frameborder="0" allowfullscreen="" style="height: 259px;"></iframe>
    <figcaption><a href="https://www.youtube.com/watch?v=P2Gbbd6pVMg">Watch the video for Everyone Hides by Wilco.</a></figcaption>
</figure>

Use API to fetch list of articles, instead of scraping page

Mark "Letters" and "Obituaries"

Both letters and obituaries are coloured for sections like Society or Environment. Can we use their location within Journal combined with URL or title to recognise them and instead mark them as Letters or Obituaries?

Add iPhone caching

eg, http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

Ensure sparkline nav doesn't stretch onto two rows

See if it looks OK if each bar is only 1px wide if 2px would make the row wrap around.

Can't scroll down in Kindle browser

Apparently.

Add guide to keystrokes when mousing over left/right nav?

Maybe?

Fix scrolling

For some reason, when going to the next article, it no longer scrolls to the top.

Add left/right clickable areas on touch devices

So you don't need to swipe all the time.

Add ability to read offline

Not sure how feasible it is, or how difficult. Not sure I'll ever get round to it, but noting it as a nice-to-have feature.

Suggested by Jeff Cole.

New next/prev controls move on scroll

Because there's no position:fixed. Grrr.

Fix in Opera

Version 10.54
Build 3423
Platform Win32
System Windows NT 6.0 (that's Vista)

[Phil: Email from VT, 2010-06-22]

Make sparkline graphs correct height for non-rights stories

Stories which the API doesn't have rights for show up in the sparkline/nav as very short, because we don't have the text. Could we instead scrape the original article page to get the correct number of words?