Bestofjs Webui Versions Save

Last release before Next.js migration

A brand new Best of JS, built on top of Next.j,s is coming soon!

Changes

• Introduce monorepo
• Switch to PNPM

Screenshot

0.36.0

Features

• Open GitHub and home page links in a new tab #153
• Improve monthly trends graph #154

Fixes

• Fix size of project logo in README sections #152

DX

• Upgrade to Vite 3 #148

Screenshot

This release is the result of the hard work of @nvh95 who redid the setup to improve the DX.

• Use Vite instead of Create React App to speed up dev server and build times! (#138)
• Add GitHub actions to run tests automatically
• All files converted to ts and tsx files
• Fix issue related to missing projects on the Timeline page
• Use Node.js 16 to build the project

Bundle size (/assets/index.3488150a.js): 174 kB

Features

• Add a link to 2021's Rising Stars
• Improve project details page, show NPM download graph right away #123
• Allow $ character in project slugs, removing slugify package #122
• Upgrade React 17 and TypeScript 4.4 dependencies
• Fix Windows dev setup

Performance

• main JS chunk: 162 kB

Features

• Dark mode #112
• Project logos have both a light logos/*.svg and a dark version logos/*.dark.svg
• Introduction of ChakraUI for core components (buttons, layout primitives...) and "styled system" approach
• Dropdown menu redone using Headless UI to avoid framer-motion

Performance

Desktop 84%

Mobile 51%

Screenshots

Dark mode

Light mode

Big changes are coming, as a dark mode feature and a new UI library will be introduced soon.

Main changes

The main change is about the application header that has been redesigned and includes now includes a link to the Discord server.

• #110 Discord link in the header
• #111 Font adjustments

Bundle sizes

• .323654fe.chunk.js: 111.25 kB
• main.f6a0f7af.chunk.js 27.57

Lighthouse score

Desktop

Mobile

Screenshots

Features

• Add dropdown navigation menu to the header #103
• Add "Related projects" and Best of JS logo to the footer #103
• Use Cloudflare Web Analytics instead of Google Analytics #105
• Add "Sponsors" button to the home page
• Add a link to the CHANGELOG document in the "Application Update" notification
• Show monthly rankings in the top page #102
• Add /rankings/monthly/:year/:month to show the monthly "full rankings"

Dependencies

• Use Emotion instead of Styled Components to prepare the potential integration of ChakraUI components

Bundles

• 2.44dcaf4e.chunk.js: 110.7 kB
• main.52fc5b38.chunk.js: 26.3 kB

Screenshots

Feature

Add quick links section to Project details page Remove (temporally?) the heatmap about the daily trends

Changes

Upgrade to Create React App v4.0

Screenshot

Performance check

• *.chunk.js: 113 kB
• main.*.chunk.js: 25.4 kB

Use react-icons package for all icons, instead of Octicons CDN link

JS bundle files:

• 105.59 KB build/static/js/2.0273c48b.chunk.js
• 23.11 KB build/static/js/main.72584a67.chunk.js

New feature

Timeline page #94

Our favorite newsletter JavaScript Weekly has just released its 500th issue. Let's celebrate this milestone by picking 20 significant projects, from 2006 to 2020.

Bundle size

• 101.24 KB build/static/js/2.45b85fde.chunk.js
• 24.07 KB build/static/js/main.412a1f4f.chunk.js
• 8.88 KB build/static/js/6.047d9adb.chunk.js

Screenshots