Lei Wu, Web Developer

Keeping simple things simple.

How to Read the Toronto Star on Your Phone... As a Web Developer

The Toronto Star is one of my favourite web sites that I visit daily. Unfortunately their mobile site http://m.thestar.com is probably one of the slowest in the world. It takes at least 5 seconds for my Android phone to load the home page. Worse yet, after you finish reading an article and hit the back button to return to the home page, it takes another 5 seconds, and this time without the Please-Wait spining icon. I often find myself hitting the back button twice and leave their site altogether.

They’re current rolling out a beta of a new design. But the load time doesn’t improve much.

Looking at the source, I notice the home page has a lot of fancy stuff in Angular. The bad news is that until my Android phone has the power of a desktop computer, it will never be able to load at a decent speed.

So I decided to tackle this myself, and deployed the following Sinatra site on Heroku at http://mstar.herokuapp.com/ :-)

thestar.rb 
1
2
3
4
5
6
7
8

require 'sinatra'
require 'httpclient'
require 'json'

get '/' do
  @items = JSON.parse(HTTPClient.new.get_content 'http://m.thestar.com/content/TheStarMobile/home.jsonp.html')['items']
  haml :index
end

And here’s the HAML template:

index.haml 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

!!!
%html{:lang => "en"}
  %head
    %meta{:charset => "utf-8"}/
    %meta{:name => "viewport", :content => "width=device-width, initial-scale=1"}/
    %title Toronto Star
    %link{:href => "//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css", :rel => "stylesheet"}/
    %base{:href => "//m.thestar.com"}/
  %body
    .container
      - @items.each do |i|
        .bg-primary
          =i['sectiontitle']
        %hr
          - i['assets'].each do |as|
            %a{:href => "/#/article/#{as['asset']['url']}"}
              = as['asset']['headline']
            %br
            %img{:src => "https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&resize_w=250&refresh=3600&url=http%3A%2F%2Fm.thestar.com#{as['asset']['image']['url']}"}
            %div
              = as['asset']['abstract']
            %hr
      %footer
        %p © The Toronto Star 2016

Note I use GoogleUserContent.com server to resize the images. More details can be found here.