bestofjs

Fix

• Fix About page bug introduced by 0.4.1 release

Improvement

• Add some tooltips (in the Hall of Famer card, in the colored bar displayed at the bottom of the projects)
• Track page view events using React Router onUpdate event to trigger pageview events

Performance check

Google PageSpeed Insight Mobile 86/100 (=)

• 22 http requests (including 4 requests from Google Analytics), 278 KB (+2)
• bundle-app.js: 140 KB (=)
• app.css: 7.3 KB (+0.8)

New features

• Add a sort filter in tag pages, to sort by:
  • total number of stars
  • stars added yesterday
  • stars added since last week (see screenshot)
• Include Hall of Famers in search results

Improvements

• On mobiles, close the sidebar after navigation occurs
• Trigger search when enter key is pressed in the search box
• Display alert after login and logout

Screenshot

Performance check

Google PageSpeed Insight Mobile 86/100
19 http requests, 276 KB (+5)
bundle-app.js: 140 KB (+3)

New Features

• New "Hall of Fame" feature displaying 80 important people (#12)
• Daily/Weekly filter in the top page.

Performance check

Google PageSpeed Insight Mobile 86/100
19 http requests (+1), 271 kB

2.js files:

• bundle-vendor.js 137 kB (+ 3)
• analytics.js 11 kB

4 xhr requests:

• projects.json 44.4 kB
• reviews 1.5 kB
• links 4.6 kB
• hof.json 5.3 kB

3 css files

• app.css 6.5 kB

document: 8.3 kB

• Add logo in the sidebar
• Fix hot reloading for style files
• use isomorphic-fetch for http requests
• improve search box algorithm, checking the tags and sorting by relevance
• remove react-router-redux dependency to avoid double rendering when navigation occurs

Performance check

Google PageSpeed Insight Mobile 86/100
18 http requests, 262 kB

2.js files:

• bundle-vendor.js 134 kB (- 3)
• analytics.js 11 kB

3 xhr requests:

• projects.json 43.4 kB
• reviews
• links

3 css files

• app.css 6.2 kB

document: 8.2 kB

• Add Links view in the sidebar
• Add manifest.json
• Avoid http OPTIONS requests (#14)
• Upgrade redux-form to 5.1.3
• "Github corner" icon (only on big screens, see screenshot)

Performance check

Google PageSpeed Insight Mobile 86/100
17 http requests ( - 2, no more "OPTIONS" requests! ), 263 kB ( + 4 )

2.js files:

• bundle-vendor.js 137 kB (+ 2)
• analytics.js 11 kB

3 xhr requests:

• projects.json 43.1 kB
• reviews
• links

3 css files

• app.css 5.4 kB

document: 8.4 kB

• Github login using auth0 authentication service
• Authenticated users can create "reviews" and links related to projects #2
• Use React 0.15.1
• Server-side rendering: index.html page is builts on CI server (SemaphoreCI) every morning by npm run daily script, 30 minutes after project json data generation #11
• Fix some issues in the layout #13
• Only one JavaScript file, merging vendor and app bundles

Performance check

Google PageSpeed Insight Mobile 86/100 ( + 17 % )
19 http requests ( + 5 ), 259 kB ( + 57 )

2.js files:

• bundle-vendor.js 135 kB
• analytics.js 11 kB

3 xhr requests:

• projects.json 43.1 kB
• reviews
• links

3 css files

• app.css 5.2 kB

document: 7.8 kB

• Cache README.md data, only fetch it from Github if needed
• Fix issue #9, that occurs when a tag page URL (http://bestof.js.org/#/tags/test for example) is directly loaded in the browser.

• Redux optimization, use middleware for tracking and navigation side effects (scroll to top, close the side menu on mobiles), create containers connected to Redux state
• Redirect to homepage for unknown URLs
• Write some tests using the brand new enzyme library
• New "Popular tag" menu in the sidebar

Performance check

Google PageSpeed Insight Mobile 69/100 ( = )
14 http requests ( = ), 202 kB ( - 1)

3.js files and 1 xhr request:

• bundle-vendor.js 79.1 kB (- 3 )
• bundle-app.js 15.3 kB (+ 1)
• analytics.js 11 kB
• projects.json 33.3 kB

document: 3 kB ( =)

• Get projects.json from Firebase instead of Divshot (issue #7)
• Use the new logo in the splash screen
• Add data (last commit, daily star variation) in <ProjectPage>
• Display "hot projects" first in the homepage

Performance check

• Google PageSpeed Insight Mobile score: 69/100 ( = )
• 14 http requests ( +1 => new logo in the splash screen, 6.7 kB )
• 203 kB ( + 8 kB)

• New sidebar using slideout JavaScript component instead of pure CSS, it is so smooth on mobiles!
• More colors displayed in the Delta bar, inside project blocks.
• Use topbar library instead of pace for the loading indicator (kB optimization)
• Use vague-time module instead of moment to display (kB optimization, again!)

Performance check

Google PageSpeed Insight Mobile 69/100 ( = )
13 http requests ( = ), 195 kB ( - 14 kB)

3.js files and 1 xhr request:

• bundle-vendor.js 82.2 kB (- 11 kB)
• bundle-app.js 14.2 kB
• analytics.js 11 kB
• projects.json 30.4 kB

document: 3 kB ( - 3.9)

• Font icons: use Github octicons instead of fontawesome
• Add repository pushed_at information
• Shorter URLs for project pages, no more database _id, github repository name used instead
• Adjustments for the new API that returns Github full_name instead of the Github repository full URL
• Upgrade to Babel v6

Performance check

Google PageSpeed Insight Mobile 69/100 ( = )
13 http requests ( = ), 209 kB ( - 50 kB yeah, thank to octicons font file !)

3.js files and 1 xhr request:

• bundle-vendor.js 93.3 kB (- 6 kB)
• bundle-app.js 14.5 kB
• analytics.js 11 kB
• projects.json 30.3 kB

document: 6.9 kB

• Create some unit tests for React components, using tape, jsdom
• www/index.html optimization, built from src/index.html file, by npm run minify, using html-minify module.
• www/index.html removed from git index using git rm --cached www/index.html command.
• Image optimization for bestof.js.org logo and js.org logo (done with imagemin module, outside the project)

Performance check

Google PageSpeed Insight Mobile 69/100 ( + 1%, despite all my efforts!)
13 http requests (-2), 261 kB ( + 10 kB why ???)

3.js files (-1) and 1 xhr request:

• bundle-vendor.js 99.3 kB
• bundle-app.js 14.4 kB
• analytics.js 11 kB
• projects.json 30.9 kB

document: 6.9 kB

• Redux is used instead of Reflux to manage application state
• React upgraded to 0.14, react-router upgraded to 1.0
• Use Promise (with axios library) for xhr requests
• Some speed improvements (remove Moment locales files, import only some functions from Lodash instead of everything...)

Performance check

Google PageSpeed Insight Mobile 68/100 ( + 6%, yeah!)
15 http requests, 251 kB ( - 60 kB)

4.js files and 1 xhr request:

• bundle-vendor.js 99.2 kB ( - 45 kB!)
• bundle-app.js 14.4 kB
• analytics.js 11 kB
• pace.js 5.1 kB
• projects.json 30.9 kB

Features:

• Splash screen upgrade
• Use tag code instead of database _id for tag links
• Remove marked dependency because the web task "get-github-readme" now returns html content instead of markdown.

Add Analytic tracking code (page load + 2 events 'Filter tag' and 'View project')

Performance check

Google PageSpeed Insight Mobile 62/100
15 http requests, 310 kB

4.js files and 1 xhr request:

• bundle-vendor.js 144 kB
• bundle-app.js 14.4 kB
• analytics.js 11 kB
• pace.js 5.1 kB
• projects.json 31.2 kB

New feature: the "About" page explains why the application was created and how it works.

moment, numeral and marked libraries have been included in the vendor-bundle file but the performance have not really been improved (the bundle file has increased by 47 kB whereas the 3 libraries filesize is, all together 22 kB (from the CDN)... gzip problem ?)

The first release on js.org domain!

I tried to focus on 2 simple features:

• search by tags (the side column)
• search by keyword (the text search box)

I want the app to be as easy and fast to use as "devdocs.io" for example, a kind of "super bookmark" app you will use instead of using google every time you want to check a given project.

Searching by keyword updates the URL history every time you enter something (well almost every time, there is a debounce function), I don't know if it is a good feature or an awful idea.

There is no more web application listening for requests, the project data comes from a static JSON file I upload every morning using https://semaphoreci.com (a Continuous Integration service I chose because of the "daily build" feature).
And there is a micro service made with webtask.io that returns project readme.md data from Github.

First version released using netlify.com static hosting service.