Backend has new data every intervalLength seconds. Would be nice if each page in the frontend requested data again every intervalLength seconds too so you do not have to refresh the page if you leave SentiSocial open.

https://facebook.github.io/jest/

• npm install --save-dev ts-jest

• Handling browser back event.

• We should also not delete the state of the AllTrends page so that users go back to where they were reading.

Small changes to the layout can improve the home page a lot.

Currently, content cards are chosen based on the trends from the bar graph. Starting from the left most, grabbing a couple of tweets and articles, progressing down the chart to the right most trend.

Before the start of an array of content specific to a trend, add:

• div with style

display: flex;
text-align: center;
width: 100%;
float: left;

Wrap it around the h3 and a

• Trend as an h3 with the style

display: inline-block;
flex-grow: 1;
font-size: 14px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;

• a wrapped around an img arrow SVG pointing to the right

a has style

margin-top: 20px;
margin-bottom: 10px;

img has style

width: 16px;

• h3 and a onClick changes the page to that trend's page.
• a href should link to the trend https://senti.social/{trend}, do not worry about this now. We shouldn't care about links and URL rewriting while the backend is deleting trend data.

Overall the heading should look something like this

<div class="trend-heading" onClick={...}>
    <h3 class="trend-heading--text">Trend Name</h3>
    <a class="trend-heading--link">
        <img class="trend-heading--link-icon" src="more.svg"/>
    </a>
</div>

This is a mockup.

https://docs.google.com/document/d/12Ay4s3NWake8Qd6xQeGiYimGJ_gCe0UMDZKwP9Ni4m8

http://output.jsbin.com/qofuwa/2/quiet

Write unit tests of the following tests

• NetworkBus by dependency injection.
• RequestChain set random timeouts for a chain of mocked requests. Expect oldest requests get released before newer requests.
• InfiniteScroll
• helper functions

• About SentiSocial

• GitHub Link

• GitHub Contributors fetched from GitHub API

  • https://api.github.com/repos/sentisocial/frontend/contributors
  • https://api.github.com/repos/sentisocial/backend/contributors

• NewsAPI Attribution #46

• TrendPage looks hideous on desktop

• Add desktop specific navigation bar

• Hide floating action button on desktop

What should it include? Let's discuss this here

License badge should link to the LICENSE file in the repo

If the website cannot reach the server for content, we should show a page that indicates that.

Unit test React components using enzyme

• Card
• ArticleCard
• TweetCard
• AllTrendsChart
• TrendChart
• GhostCard
• CardLayout
• Navigation
• cutMerge

AllTrendsPage and TrendPage are still not tested

Bower has flat dependency tree making it supersede NPM for managing frontend web dependencies.
https://bower.io

• Migrate frontend web dependencies from NPM to Bower
  npm install --save-dev bower

Make it look pretty 💁‍♀️

Notes for the future:

• https://github.com/GoogleChrome/sw-precache for WebPack

Using Firefox 45.7.0 ESR in private browsing mode causes tweets to not show up. Requests to Twitter for the tweets do not seem to be being made.

3kb alternative to React
https://github.com/developit/preact

It makes sense to be using Preact over React for our use case. Definitely worth investing some time in this in the future.

• title SentiSocial
• link for favicon and apple touch icons
• manifest.json for progressive web application
• meta description
• meta charset

• Site should return the user to where they were previously browsing upon clicking on a trend and then pressing the back button.

• Chart scrolling (swiping on mobile)

Users who block tracking from within their browser will not be able to view tweets (cannot load embedded tweets).

FIX: User should see a card (or on all twitter cards) that their browser is blocking social media connections (therefore twitter embeds)

Replacing our current wordcloud with this would be neat.

https://github.com/jasondavies/d3-cloud

• Relative time is calculated incorrectly. Server sends unix timestamp in seconds.

• Let's change the colors to match the logo. Green as #8DD97F and Red as #BC5757.

• Set the range to have a minimum and maximum equal to absolute maximum value in the datasets.

• Move all data processing outside the render function. We do not have to recompute most of the values we are computing every time we render. Handle processing in initialisation, or if the data is coming in through the network, process it after the response has been received.

• Change .chart--title in the homepage from an h1 to and h2.

• Add a description in a p tag which contains a brief introduction to what the chart is showing.

• Add happy face svg onto the top left corner of the all trends chart.

• Add sad face svg onto the bottom left corner of the all trends chart.
  OR

• Add a legend with indicating what the graph means.

• Time should not repeat itself on the specific trends chart.

I will provide you with the SVGs as soon as possible, just use an img tag without a src attribute, if you wanna work on it and I have yet to upload them.

https://palantir.github.io/tslint

npm install --save-dev tslint

• Finish the Google Adsense account signup when the site is pushed live.
• Create an AdvertisementCard Class that displays an advertisement.
  Should look something like this

<div class="advertisement">
    <div class="advertisement--space">...</div>
    <hr class="advertisement--seperator">
    <p class="advertisement--indicator">Advertisement</p>
</div>

.advertisement--space style

text-align: center;

.advertisement--seperator style

margin: 10px 0;

.advertisement--indicator style

text-align: center;
color: #aaaaaa;
margin: 0;

• Show an AdvertisementCard once every X number of content cards.

This is a mockup.

• Change Trend Gator to Senti Social
• Write an Overview paragraph that gives a brief outline of the frontend structure.
• Write Development section explaining how to jump into the codebase.
• Mention production build scripts build
• Mention development build scripts build-dev
• Change npm run server to npm run start
• Integrate Travis
• Fix README broken link to backend repository

On the next branch

• Switched to preact for smaller application size
• Started using redux for handling state
• Network requests are going out according to our new API specification
• Website design is complete according to plan

Attribution

Unless otherwise authorised, you shall agree to display an attribution to News API alongside any implementation or display of the News API Data to indicate that News API technology is being used. The attribution should preferrably be a hyperlink to https://newsapi.org with the text "Powered by News API".

https://newsapi.org/terms

In specific trends, the first article we get, should show up on a special card that displays it full width on desktop with it's description below it. When clicking on a trend, I would expect to know more about the trend, so this would solve this issue. Given that the top news sources are from credible sources, I think it will be very relevant to the trend.

In AllTrendsPage and TrendPage, we are making the same repeated computation when laying out cards.

• Create new CardLayout class that extends React.Component with:

• props:
  content which is an array of Cards passed in by AllTrendsPage and TrendPage

Migrate repeated logic to a new class.

• Mobile has one column of content while other devices two.

• Rerender when the browser gets resize past the two column threshold.

• Re-render when the browser is resized past the one-two column threshold.

Having a world map for a trend whereby participating countries are shaded in would be neat.

Something like this perhaps? https://bl.ocks.org/mbostock/4180634

Trends that have remarkably positive or negative sentiment should display an emoji next to them. So for example an extremely negative sentiment we could show an angry or sad face.

Emphasis should be used on trends that exceed a certain threshold and are the highest value.

So there can possibly be no emphasis at a given time if trends don't obviously leen towards positive or negative.

Also, at a given time there can be emphasis placed on two trends, one negative and one positive if they exceed the threshold.

If there is for instance, two positive trends and two negative trends that surpass the threshold, the maximum of the positive and the maximum of the negative should be emphasized more.

Optionally, maybe we can have a second degree of emphasis? (slightly happy face or slightly sad face)

Screen reader friendly. Adding role and aria attributes.

When the device goes offline. Currently, the requests that fail, just fail. There is no UI indication of disconnectivity nor is there a retry when the device comes back online.

Migrate bundling from Browserify to Webpack.

https://webpack.js.org

Preact

All it requires is aliasing 'react' and 'react-dom' with 'preact-compat'

It makes sense to be using Preact over React for our simplistic use case.
We will see a huge gain in page load.

3kb alternative to React
https://github.com/developit/preact

SW Precache

https://github.com/GoogleChrome/sw-precache

React-Router

https://github.com/ReactTraining/react-router

• Scrap our manual management of History, let react-router manage it instead.

preact-router is too minimal. I would stay away from it for now.

Something along the lines of