bestofjs / bestofjs-weekly

:email: Best of JavaScript weekly rankings and newsletter

Best of JavaScript Weekly

The weekly newsletter from Best of JavaScript, a curated list of the most popular open-source projects related to the web platform and node.js.

Available online at: https://weekly.bestofjs.org

The newsletter, sent every Sunday, is made of 2 parts:

• The story: a short comment about the the week's numbers.
• The rankings: the 10 trendiest projects over the last week

The online version is a static website made with react-static.

bestofjs-weekly's Issues

Introducing the new rankings based on the "relative growth"

From the issue 63 we are using a new system of ranking, based on the "relative growth" of the number of stars.

This is why we are publishing the 2 categories of rankings:

• “Growing Fast This Week”: the projects by relative growth of number of stars (in %)
• “Trending This Week”: the projects by number of stars added

Good idea? Confusing? Any comment is welcome!

Email preview

Launching Best of JavaScript Weekly

A few words about how we launched Best of JavaScript Weekly, the weekly newsletter from Best of JavaScript project.

The origin

Everything started with JavaScript Rising Stars, a site released in January 2018, that analyzed trends in the JavaScript world during the year 2017.

The homepage included a field to let users subscribe to the newsletter:

Get the latest JS rankings in your inbox every week

More than 2000 users subscribed.

Building the solution

In order to be able to send emails from our own domain, we moved from bestof.js.org domain to the brand new domain bestofjs.org.

We created a static website, built with react-static, to host the online version of the newsletter: https://weekly.bestofjs.org/

We had to find a solution to manage the list of email addresses and to send campaigns.

We started using Mailchimp to manage the lists of emails, but Mailchimp is free until 2000 contacts and very expensive after this limit!

I tried Mailjet too because I like their mjml project that lets developers build responsive email easily, and they are reliable.
But I couldn't find how to setup a simple "Subscription Form" to let users registers. They have "subscription widgets" that actually are <iframe> snippets. But I didn't want an <iframe>, I just wanted a simple form tag in my page.

So actually we chose ElasticEmail service, that is very affordable (it seems to be free for our volumes).

Sending the fist email

On 2018 June the 4th, at 06:15 AM Japan Time, "Best of JavaScript Weekly Rankings #1” email was sent to 2,414 contacts.

The email includes the rankings of the week and some comments about the leading project.
The button "Read on the web" leads to the page: https://weekly.bestofjs.org/issues/1

Screenshot

Email:

Online version:

[Addition] postcss-px-to-viewport: open-source software to create scalable interfaces on any display

Most mobile and cross-platform web developers have encountered the problem at some point: you need your web app to scale neatly to the device screen size, regardless of which of the many thousands of devices there are out there, but your units only have one design layout width, mainly mobile.

Grappling with this problem in one of our projects our leading frontend developer Dmitriy Karpunin came up with the idea of using a post-processor to convert CSS values from one set of units to another, and that’s how postcss-px-to-viewport, a plug-in for PostCSS that converts px values to viewport units (vw, vh, etc.), was born.

The article: https://evrone.com/postcss-px-viewport

Could you please add the article to your newsletter?

neo.mjs description

Hi @michaelrambeau,

thank you very much for putting neo.mjs into the weekly highscore!

If I may add some feedback on how to improve the description:

1. JS supports multi-threading, otherwise workers would not exist. Browsers use one thread by default though.
2. The dist versions of neo.mjs can run in Firefox, Safari & Chrome (without the experimental flag). Please take a look at: https://neomjs.github.io/pages/ => scroll down to dist/development or dist/production
3. The Chrome flag is only needed until Chrome version 80, which should get released in January. It already works without the flag in Chrome Canary.

Thank you in advance for updating the description and best regards,
Tobias

UI Improvements: Responsive Design and Navigation Menu

Responsive Design issues

Some improvements to do on mobile screens:

• Fix the "Sign Up" block, the button is not displayed correctly. On mobiles we could remove the margin around the white block to save space
• Fix the "Previous" and "Next" link on mobiles. Maybe we could dispay only the icon, not the text on mobiles

Add a navigation menu?

I think we need a navigation menu to easily go the the LATEST issue, from the top of the screen.

• On the left: bestofjs.org logo should be linked to the the main application, I think
• On the right, there could 2 or 3 menu items: "HOME" | "LATEST" | "ARCHIVES", like in http://javascriptweekly.com/ maybe?

Rando.js: The world's easiest, most powerful random function.

Hi there,

My repo has just gotten an unexpected surge in interest, and I'm starting to realize that it's being featured around the web on reddit and other places. Today's GitHub insights told me JavaScript Weekly's latest article featured my project. It's been awesome seeing the users of the internet work their magic the past two days, so I figured, hey, this project might be worth actively promoting since people seem to like it. Anyway, if you're interested, it'd be cool to see the repo in your articles as well. Feel free to copy any of my phrasing verbatim. I'll include a screenshot of my recent spike here (with today cut off since it's midnight). Thanks for your time!

Improve the home page content

The problem

The current home page displays the following content:

• The latest issue (story + ranking)
• A table that shows all issues from the beginning (60 issues)

That list is now way too long.

We could display only the last 10 issues in the top pagge and a link "show more" that would open a new page with the full list (grouped by year maybe, creating one page by year?)

Inspiration

Interesting pattern, seen on https://www.graphqlweekly.com/ sidebar: