bestofjs

The homepage promotes the State of JavaScript 2018 survey.

Features / updates

• Add bundle size and package size data (#61)
• Update RSS feed URL, the feed is built from the weekly site https://weekly.bestofjs.org/rss/trends.xml
• Add commit hook, using pretty-quick

PSI

PageSpeed insights

• Speed: ?s FCP ?s DCL
• Optimization: Good 99/100

Requests

24 HTTP requests (1.02 KB) on the homepage, including:

• projects.json: 147 KB
• main.*.js: 114 KB
• octicons.woff: 16.3 KB
• main.*.css: 3.7 KB

• Move from bestof.js.org to bestofjs.org domain
• Use styled-components instead of stylus to style the application
• Use create-react-app instead of custom Webpack settings
• Server-Side-Rendering script disabled
• Load "Hall of Fame" data only from the relevant page, not when the application starts
• Add JavaScript Weekly subscription link

Screenshot

This is the last release before a lot of internal changes related to the application structure (we will be using create-react-app) and the styling system (styled-components).

PSI

PageSpeed insights

• Speed: 0.9s FCP 1.1s DCL
• Optimization: Good 94/100

PSI estimates this page requires 1 render-blocking round trips and ~24 resources (0.3MB) to load. The median page requires 4 render-blocking round trips and ~75 resources (1MB) to load. Fewer round trips and bytes results in faster pages.

Requests

23 HTTP requests (948 KB) on the homepage, including:

• projects.json: 132 KB
• bundle-app.js: 67 KB
• app.css: 10 KB

Screenshot

Optimizations

• Use code splitting to decrease the size of the JavaScript bundle loaded when the the application starts (#38)

Performance check

Google PageSpeed

• Mobile 81 / 100 (=)
• Desktop 89 / 100 (=)

http requests

26 requests, 354 transferred (- 37 KB)

• bundle-app.js: 84 KB (-38 KB)
• projects.json: 117 KB (+2)

New Features

• Add npm packages dependency list, commit count and contributor count #52
• Pagination for "All projects" and tag pages #54
• RSS Weekly feed #40

Optimizations

• Use formik instead of redux-form to manage user content forms
• Store some project icons locally

Screenshots

Performance check

Google PageSpeed

• Mobile 81 / 100 (+12)
• Desktop 89 / 100 (+5)

http requests

26 requests, 391 KB transferred

• bundle-app.js: 122 KB (-12)
• projects.json: 115 KB (+5)

New Features

• GitHub star heatmap added to project's page /project/:slug #33
• Still waiting for the publication of State of JS 2017 survey!

Screenshots

Performance check

Google PageSpeed

• Mobile 69 / 100 (-13)
• Desktop 84 / 100 (-4)

http requests

27 requests, 374 KB transferred

• bundle-app.js: 132 KB (+11)
• projects.json: 110 KB (+9)

New Features

• "My projects" feature #40
• Serve site over https #41
• Promote "State of JavaScript 2017" in the top page

Improvements

• Use prettier to format the code
• Fetch links and reviews related to projects using bestofjs-api #48
• Refactoring using reselect selectors and removing all shouldComponentUpdate statements

Screenshot

Performance check

Google PageSpeed

• Mobile 82 / 100 (-1)
• Desktop 88 / 100 (-2)

http requests

26 requests, 360 KB transferred

• bundle-app.js: 121 KB (-3)
• projects.json: 101 KB (+11)

Fix problem introduced by this commit.

The search engine was no working correctly because of too much optimization about the <ProjectList> component!

Updates

• Using Preact instead of React. Hot reload mode disabled in development mode
• Minify server-side rendered html pages
• Render more pages server-side
• Render only once the project list when the homepage loads

Performance check

PageSpeed Insights

• Mobile: 83/100 (+1)
• Desktop: 90/100 (+1)

Requests

• bundle-app: 124 KB (- 40 KB)
• projects.json: 89.5 KB (- 5 KB)

Package updates

• Upgrade to react-hot-loader v3
• Upgrade to redux-form v6, rewrite all forms using the new approach
• Upgrade to react-router v4, create new "routes" components, no more React.clone()
• Upgrade to react v15.5, replace all createClass instructions by class syntax

Performance check

• Mobile: 82/100 (=)
• Desktop: 89/100

Requests:

• bundle-app: 164 KB (+ 15 KB)
• projects.json: 95.9 KB

Improvement

No more _id in projects.json data, see #36

Performance check

• Mobile: 82/100 (+15)
• Desktop: 89/100

Requests:

• bundle-app: 149 KB
• projects.json: 94.7 KB

New Features

• Add a 'ALL PROJECT' view
• Add a link to Rising Stars 2016
• Update Tag page tabs layout, adding Trending / Last 12 months option. Requires project API v2.

Improvements

• Update homepage content, removing popular project list, using the ProjectCard components
• Use a svg file for the logo

Screenshot

Performance check

• Mobile: 67/100 (- 11... why ?)

• Desktop: 72/100 (-14)

  28 requests, 367 KB transferred

• bundle-app.js 149 KB

• app.css 10.9 KB

• projects.json 99.2 KB

• doc 13.8 KB

Fixes / improvements

• Improve project README.md styling using the stylesheet from https://github.com/sindresorhus/github-markdown-css project
• Fix #32
• Fix error about Hall of Fame "Suggest a new member" button.

Screenshot

Performance check

PageSpeed Insights

• Mobile: 78/100

• Desktop: 86/100

  36 requests, 410 KB transferred

• bundle-app.js 148 KB

• app.css 10.4 KB

• projects.json 79.9 KB

• doc 12.3 KB

Features

• Use micro-service hosted on now.sh to get project README.md (#23)
• Add URLs for direct access to trend filters, for example:
  • http://bestof.js.org/tags/react/trending/today
  • http://bestof.js.org/tags/react/trending/this-week
• Remove tabs from 'Hot projects' table in the homepage

Screenshot

Performance check

PageSpeed Insights

• Mobile: 80/100
• Desktop: 86/100

34 requests, 390 KB transferred

• bundle-app.js 148 KB
• app.css 8.4 KB
• projects.json 68.5 KB
• doc 10.9 KB

New feature:

Add 'Suggest a new Hall of Fame member' button

Fix/improvement:

Compute project slug field, used in project URLs, from the project name (defined in the application database).
Before the project URL was computed from the repository name but this was not the best choice because 2 projects from 2 different owners can have the same repo name (example: totaljs/framework and aurelia/framework projects)

Features

Project owner avatars are displayed inside project card (#23)

Screenshot

Performance check

Google PageSpeed Insight Mobile 78/100 (-9)

New problem: Github avatars (https://avatars.githubusercontent.com/u/139426?v=3&s=75) expire after 5 minutes

• 38 http requests, 400 KB (+112)
• bundle-app.js: 147 KB (+6)
• images: 22 requests, 110 KB
• app.css: 8.2 KB
• projects.json 61.7 KB

Features

• Add data from npm (package name and version number) and from http://packagequality.com/ in project card
• Make it compatible with Redux DevTools Chrome extension
• Show trends for the last month and the last 3 months using tabs to toggle sort order
• Add 'my requests' view and 'add project' feature, to let user suggest new Github projects (#22)
• New 2-column layout for tag and search result pages (#17)
• Truncate project description in the top page

Screenshot

Performance check

Google PageSpeed Insight Mobile 87/100 (+1)

• 21 http requests, 288 KB (+10)
• bundle-app.js: 146 KB (+6)
• app.css: 8 KB (+0.7)
• projects.json 55.9 KB

Improvements

• server-side rendering for Hall of Fame page
• Make URL nicer: use project "slugs" instead of database ids (#19)

Performance check

Google PageSpeed Insight Mobile 86/100
22 http requests (including 4 requests from Google Analytics), 278 KB (+1)
bundle-app.js: 139 KB (+1)

Improvements

• Get rid of hash bang URLs using browser history (https://github.com/michaelrambeau/bestofjs-webui/issues/18)
• use react-router 2.3 and react-router-scroll middleware
• Add emojis in description of project page

Screenshot

Performance check

Google PageSpeed Insight Mobile 86/100
22 http requests (including 4 requests from Google Analytics), 277 KB (-1)
bundle-app.js: 138 KB (-2)