bestofjs / bestofjs Goto Github PK
View Code? Open in Web Editor NEW:star: A place to find the best components to build amazing web applications. The best of JavaScript!
Home Page: https://bestofjs.org
License: MIT License
:star: A place to find the best components to build amazing web applications. The best of JavaScript!
Home Page: https://bestofjs.org
License: MIT License
Hi, I request add a feature about RSS Feed.
I always using Feedly for checking trend news.
If this site output several RSS (new repos/ranking/trend feed etc) weekly, it will be awesome!
thanks.
I'd love an export bookmarks feature. Downloading a json, csv, or whatever format would be fine. I'd like the download to include the package name, github/npm link, description, stars/downloads, and tags.
Is this at all possible? I'd web scrape it but there aren't any links on the page.
Some ideas to discuss, to make bestof.js.org better...
The left sidebar is too long, there are too many tags, we could remove it and use the search field to select one or several tags, maybe adding an autocomplete feature
And then the home page could become a wall of project "cards", whose number of columns depends on the width of the screen.
When opening a project page, it would be nice to see the star trends over the last months using a heat map, similar to the heat map used in Github repo page to show user’s activity.
When opening a given tag page, it would be nice to see a graph to be able to compare trends over the last months.
It could be nice to create a "hall of fame" to show people to follow in the JavaScript community: great contributors like Sindre, TJ, Paul Irish, Benjamin Lupton, Substack, Eric Elliot...
A list of 25 famous developers: https://psdtowp.net/learn-javascript.html
2015's Top JavaScript Devs To Follow: http://blog.bithound.io/2015-top-js-devs
Hi @michaelrambeau !
Wonderful project 🎉
I noticed that the link to Ember in NPM is not the correct one, I would like to correct but I did not find where I can make a PR or if it is just open an issue here. The correct NPM link for Ember is this one: https://www.npmjs.com/package/ember-source
Can you help me?
Thank you.
Trendy projects today willl no more be trendy tomorrow, projects live and die...
We need a system to remove projects from the application, it could be a flag "deprecated".
I think we could stop taking snapshots for "deprecated" projects, since it means "deprecated for ever".
Maybe we also need a flag to just disable a project (stop displaying in the application) but keep taking snapshots (in case of a project "revival")
Examples of deprecated projects:
It'd be nice to have the site served over HTTPS. There are many advantages such as:
If your site is hosted by GitHub you can get free SSL by using Cloudflare (I've done this before and it works great).
We had an interesting discussion with @amark, from Gun project about the scope of the Node.js frameworks
tag.
This is what Mark replied when I said that the category was limited to libraries that can be used to build REST APIs:
If you feel like NodeJS Framework should stay REST-only then that is your call and I respect that, it just doesn't seem descriptive. I (and if I do a quick google) instinctively think of things like, yes Express, but also Meteor, Parse, Derby, Connect, Flatiron, SocketCluster, etc., just some of my observations:
- Sails and Feathers are listed (even Nest also does it), yet have realtime/websocket abilities, but Meteor, etc. are not.
Perhaps because Meteor is frontend as well? Yet:- Flatiron, After.js, etc. are listed.
My definition (which you don't need to use) is a "NodeJS Framework is a tool that abstracts client-server interactions for the developer, so they can focus on their own API and routes rather than handling the network layer itself."
If this is true, a tools that allow for developers to use the following code pattern would qualify:
var fw = require('framework');
fw.start(require('http'));
fw.on('myApp/users', function(data){
console.log(data);
if(data.foo){
return fw.next(data);
}
fw.reply(data + 1);
});
The reason why this definition excludes
ws
by itself is becausews
doesn't provide any framework for handling messages/rooms/routes, in the same way HTTP by itself doesn't do that.
However tools like Express, SocketCluster, Feathers, Gun, etc. do, their API abstracts the communications/networking and gives an API to the user that lets them declare their application structure. Whether this is REST or Realtime or not doesn't seem relevant, just the key: Does it provide routing and middleware?
Thanks for letting me share my thoughts, and I appreciate how much work you've already put into this, my core proposal is:
GUN provides many of the same tooling (routing and middleware) as Feathers, Sails, Nest, it is isomorphic like flatiron but not monolithic like Meteor. I think my proposal applies to including a few other projects beyond just GUN, but doesn't open the floodgates. (Although given that "Full-stack framework" tag only has 6 items listed, I don't think it would be unfair to merge those 6, including Meteor, into "NodeJS Framework" tag which has 30, when React and Vue have their own tags, where Vue has 36 as well.)
This issue sums up the moves related to the choice of extending the scope of the Node.js frameworks
tag, in the way described by Mark.
Some ideas of improvement to discuss.
The react
tag page contains almost 100 projects.
https://bestof.js.org/tags/react
We need either pagination or infinite scrolling to make the page faster.
Also, this pagination solution would be applied to the ALL PROJECTS
and HALL OF FAME
pages.
When you have to pick a npm package to perform a given task, one of the main of the main arguments is the number of dependencies.
So I think it would be useful to be able to see the list of project dependencies.
When the app loads, we fetch all data about user's reviews and links, even if reviews and links are NOT displayed inside the project cards.
We make 2
GET
requests to get all reviews and all links
It works fine because we have very little few links and reviews.
It would be better to fetch only data about a given project when the user opens a project page (
/projects/:slug/
url)
This point has been addressed by this PR #48
If you keep the browser open for more than 24 hours, data will be out-dated.
The only way to to get fresh data is to trigger a browser reload (F5).
It would be nice if data was automatically reloaded when it's needed.
It would be nice if tags could be selected right from the search box, because the tag list is really long, it takes time to scroll down.
See #33
The application was made from scratch, without using any framework.
The landscape has changed a lot since 2015.
Could we take advantage of solutions like create-react-app
, next.js
or Gatsby
to implement the following features?
After a user logs in and reloads the page, he has to login again.
Related to auth0 authentication policy change: Github access token is no more returned when getting user profile data.
https://auth0.com/docs/what-to-do-once-the-user-is-logged-in/calling-an-external-idp-api
GOAL: add graphs to let users visualise trends over the last months.
For a given tag such as Framework
or Testing
, users should be able to see at a glance which projects get traction.
When I was logging in with my github account, it asked for both read/write access to both my public and private repositories. I am sure there are tons of people who would not feel comfortable with giving write permissions to someone, and it is not really necessary I think.
My suggestion is to ask only for read access, as that is more than enough to do any of the current and future functionalities of bestofjs.
It seems the npms.io API does not work anymore:
https://api.npms.io/v2/package/react return an error
{
"code":"INTERNAL",
"message":"Internal server error"
}
The website itself works but I can't perform any search: https://npms.io/search?q=test
It may better to remove npms.io links from bestof.js.org
Should be able to add several tags to a project and be able to search by them as well.
Hey Michael!
One killer feature would be to be able to add projects I am interested in or use, and I can see the state of each project on a personal page (like my projects or something). Many times I keep a list of libraries/projects that I use and silently some of them get outdated, or stop getting maintained, and I want to be aware when something like this happens, or when a project loses popularity.
For a start I think the same view as for Popular/Trending can be used, but personalized (and optionally private) for me. This can be a simple list of URLs that I specify, and I get back the stats for each of the projects.
What do you think? I am a bit busy for the next two weeks, but after that I can help out with the implementation.
3 http requests on external domains to get reviews and links, and to check the user token cause 3 extra OPTIONS
requests.
Can it can be avoided, following what is described in this article ? Killing CORS Preflight Requests on a React SPA
The 3 original http requests, made with fetch
("Other" category in Chrome DevTools Network tab):
The 3 extra "CORS preflight requests" (under "XHR" category):
Here is the feedback I got from Martin @martinheidegger in 2017 September:
The aggregations are really important, ie. If all libraries are MIT
Dependencies and subdependencies
And rather than see the license of all a combination of licenses:: i.e. 95xMIT, 3xBSD
But I feel like there is some aggregation information that could be REALLY valuable, is not available and could be fairly easily done.
i.e. If there is one dependency in your tree of a different license than others: that is a major red flag. Particularly if the license is "Unlicensed"
How could we rank projects in order to show the trending projects?
Could we assign a single score to all projects and show projects sorted by this score?
The Github API gives access to "stargazing" events.
For a given project we can get a list a events that tell us who added a star and when it was.
2 rules I'd like to handle when handling stargazing events:
The effect of star gazing events decreases with time.
If someone added the star one year ago, it's far less important that a star added yesterday.
The more followers on Github a user has, the more important the event is.
A user with a lot of followers on Github is considered as an expert.
It is nice to have a splash screen that introduces the application the first time you access it but it is really annoying to see this screen every time you access the application.
We need server-side rendering to be able to display the content right away in the browser.
Now, when the user launches the application, an Ajax request is made to get the content from a static JSON file generated automatically every morning.
Therefore, it takes between 1 and 2 seconds to display the application content.
Since the application content is static, we could render the home page html on the server, that is to say generate a html page every morning (instead of generating only JSON data).
Use redux
instead of reflux
to manage actions and state, to make the application scale up easily.
First steps:
In Firefox, on my 5-year old Windows7 laptop, navigation is not smooth, every click on tag menu items takes a few seconds... that is really slow!
I did some tests using very small data (only 10 projects and 3 tags instead of 350 projects and 50 tags, for example) but it makes almost no difference.
It does not not look like the problem comes from processing data.
I checked an older version of the application (before the react-router upgrade) but it is slow too, in Firefox
It seems to be related to react-router; maybe it has to do with binding DOM and click events but I have no clue...
Sorry if this is already addressed somewhere - I did not see it mentioned in the README ...
How do you prefer to receive suggestions for potentially missing tags?
For example, the Taskr project is a task runner, like Grunt and Gulp, but unlike Grunt and Gulp, it does not have the build tag assigned to it.
The application calls micro-services created on webtask.io platform.
2 micro-services were created:
get-readme
makes a call to Github API to fetch the project READMEuser-content-api
is the API to read / create / update content generated by the users (links and reviews about projects)Let's check if zeit.co/now can be a good option...
If you open the project "Aero" http://bestof.js.org/projects/aero, images in the README.md section do not show up.
The cause seems to be the default Git branch that is called nodejs
, there is no master
branch.
URL that generates the README markup used by the application: https://get-github-readme-v1.now.sh/aerojs/aero
This URL returns the following path for the main screenshot:
https://github.com/aerojs/aero/raw/master/docs/images/aero-installation.png
It should be:
https://github.com/aerojs/aero/raw/nodejs/docs/images/aero-installation.png
(because image filepath in the repository is /docs/images/aero-installation.png
and the branch name is nodejs
)
I will fix the get-github-readme
micro-service very soon to use the project default branch instead of master
.
I also noticed that the table included in Aero README is not correctly styled.
Thank you @blitzprog for having introduced Aero project to me!
It could be nice to include data from npm modules in the application:
npm module name could be used as a key for projects URLs (now Github repository name is used, see isuee #19)
Currently using
https://npms.io/search?term=vue
But it changed to
https://npms.io/search?q=vue
It could be nice to display some visuals for projects in the application, rather than only data.
It would look like more livery, more "human".
We could display the owner avatar from Github:
Following issue #18 about hash-bang URLs, it would be nice to use shorter URLs for projects.
BEFORE:
http://bestof.js.org/projects/55723c9f4140883353bc775c
AFTER
http://bestof.js.org/projects/react
Note: the first releases of bestof.js.org did not use these ugly ids that were introduced when the "user content" feature was added.
hashbang URLs are really convenient to deploy single page applications on any web host but there are 2 downsides:
k
querystring parameter automatically added by react-router http://bestof.js.org/#/?_k=q6h6qa
Let's try to get rid of hashbang URLs, using the approach described in this project: https://github.com/rafrex/spa-github-pages
In the issue #19, we made the project URLs nicer by removing the database _id
(24-character long string coming from the MongoDB database).
But project _ids
are still included in the JSON API
https://bestofjs-api-v2.firebaseapp.com/projects.json
Example:
{
"_id": "55723c9f4140883353bc774e",
"name": "Angular 1",
"stars": 55097,
"deltas": [3, 17, 14, 12, 15, 9, 8],
"monthly": [47900, 49982, 52194, 53913, 54406, 54761, 55097],
"url": "https://angularjs.org",
"full_name": "angular/angular.js",
"description": "AngularJS - HTML enhanced for web apps!",
"pushed_at": "2017-03-17T17:02:15.000Z",
"owner_id": 139426,
"tags": ["framework"],
"npm": "angular",
"quality": 88,
"version": "1.6.3",
"score": 40,
"color": "A4140C"
}
The reason: these _id
are used to call the "user-generated content" API (the REST API about links and reviews):
So the goal is to remove the _ids
from the project API and to use an other key to handle relations between the user-generated content and projects.
A logged-in user should be able to request to add new projects on Github and new Hall-of-fame members.
About the implementation, we could use Github issues to keep track of these user requests.
Pros:
Cons;
When displaying the "ALL PROJECTS" page (https://bestof.js.org/projects), only the first 50 projects are displayed.
Same problem for tag pages that contain more than 50 projects, which only happens for the React
tag right now.
For performance reasons, we cannot display all projects in one page, the application can become laggy if more than 100 project cards are displayed.
To face this problem we could implement a kind of infinite scrolling solution (using http://www.reactvirtualized.com/ for example) but the simplest solution is to implement a client-side pagination.
Those are two projects that I made, could they be added, please?
By default, the project icon is the Github repository owner's avatar (see #23 )
But we can define a specific SVG file in the admin client.
So far this feature has been used for 6 projects:
The SVG markup is included in project data (projects.json)
It will be better (more performant and more flexible) if we could define a project logo URL instead of the whole SVG.
It would be able to address requests of custom icons (see michaelrambeau/bestofjs#74).
How could we display information about npm package quality ?
We could use data from:
API response:
http://packagequality.com/package/redux
{
"_id": "54e2cd1ff22796cf67c857ee",
"name": "redux",
"source": "npm",
"created": "2015-03-10T09:57:27+00:00",
"lastUpdated": "2016-06-17T19:00:04+00:00",
"nextUpdate": "2015-03-25T10:30:26+00:00",
"timesUpdated": 2,
"repoTotalIssues": [0.9994165694282381, 1],
"repoOpenIssues": [1, 1],
"repoLongOpenIssues": [1, 1],
"versions": [0.9811320754716981, 1],
"downloads": [0.9999997440054393, 1],
"quality": 0.9961096777810752,
"description": "Predictable state container for JavaScript apps"
}
https://api.npms.io/search?from=0&size=1&term=redux
{
"total": 1646,
"results": [{
"date": "2016-04-24T12:20:45.108Z",
"evaluation": {
"maintenance": {
"commitsFrequency": 1,
"recentCommits": 1,
"issuesDistribution": 0.9995429837308245,
"openIssues": 1
},
"popularity": {
"downloadsCount": 683593.3333333334,
"dependentsCount": 548,
"communityInterest": 22813,
"downloadsAcceleration": 5542.798896499239
},
"quality": {
"tests": 0.85,
"branding": 0.85,
"dependenciesHealth": 1,
"carefulness": 0.9
}
},
"score": {
"final": 0.9068110186654271,
"detail": {
"popularity": 0.7340079979736842,
"maintenance": 0.9999999999935061,
"quality": 0.9996940645897018
}
},
"keywords": ["redux", "reducer", "state", "predictable", "functional", "immutable", "hot", "live", "replay", "flux", "elm"],
"name": "redux",
"description": "Predictable state container for JavaScript apps",
"publisher": {
"email": "[email protected]",
"username": "gaearon"
},
"links": {
"bugs": "https://github.com/reactjs/redux/issues",
"npm": "https://www.npmjs.com/package/redux",
"repository": "https://github.com/reactjs/redux",
"homepage": "http://redux.js.org"
},
"version": "3.5.2",
"searchScore": 0.14198856
}]
}
Now https://divshot.com/ is used to host the JSON file that contains project data consumed by the web application.
Every morning a batch run by SemaphoneCI updates the JSON file:
http://bestofjs-api-v1.divshot.io/projects.json
divshot.io has been bought by Firebase, service will be closed in December.
services will shut down on Monday, December 14, 2015
How to migrate from divshot.io to Firebase: http://docs.divshot.com/migrate
A cool feature we may miss from divshot: the ability to deploy to 3 environments (development, staging end production)
In Webpack settings, local environment is connected to the "development" version of: data: http://development.bestofjs-api-v1.divshot.io/projects.json
With Firebase we may need to create 2 applications: "api-dev" and "api" for example, to reproduce this behaviour.
The main JavaScript file bundle-app.js
size is 165 KB.
It's pretty big compared to project data (100 KB for about 800 projects on Github, loaded by Ajax)
We should find a way to decrease the bundle using:
Results from webpack-bundle-size-analyzer CLI tool:
react-dom: 509.03 KB (30.2%)
redux-form: 294.58 KB (17.5%)
lodash: 108.97 KB (37.0%)
<self>: 185.61 KB (63.0%)
react: 89.89 KB (5.33%)
react-select: 65.92 KB (3.91%)
react-redux: 46.44 KB (2.75%)
lodash: 5.76 KB (12.4%)
<self>: 40.69 KB (87.6%)
react-router: 33.78 KB (2.00%)
history: 33.04 KB (1.96%)
fbjs: 29.39 KB (1.74%)
redux: 28.12 KB (1.67%)
lodash: 5.76 KB (20.5%)
<self>: 22.36 KB (79.5%)
marked: 27.99 KB (1.66%)
es6-promise: 27.77 KB (1.65%)
numeral: 27.68 KB (1.64%)
notie: 26.91 KB (1.60%)
lodash.intersection: 26.21 KB (1.55%)
prop-types: 23.74 KB (1.41%)
react-router-dom: 15.97 KB (0.947%)
whatwg-fetch: 12.38 KB (0.734%)
vague-time: 10.82 KB (0.641%)
path-to-regexp: 10.67 KB (0.633%)
isarray: 120 B (1.10%)
<self>: 10.56 KB (98.9%)
lodash.debounce: 10.53 KB (0.624%)
slideout: 8.06 KB (0.478%)
style-loader: 7.04 KB (0.418%)
node-libs-browser: 5.17 KB (0.307%)
process: 5.17 KB (100%)
<self>: 0 B (0.00%)
react-input-autosize: 4.54 KB (0.269%)
emitter: 4.02 KB (0.238%)
react-hot-loader: 3.95 KB (0.234%)
es6-error: 2.64 KB (0.157%)
object-assign: 2.06 KB (0.122%)
resolve-pathname: 1.83 KB (0.108%)
warning: 1.76 KB (0.105%)
invariant: 1.48 KB (0.0878%)
css-loader: 1.47 KB (0.0872%)
hoist-non-react-statics: 1.35 KB (0.0803%)
value-equal: 1.19 KB (0.0708%)
symbol-observable: 1.12 KB (0.0666%)
classnames: 1.08 KB (0.0638%)
decouple: 669 B (0.0387%)
blacklist: 355 B (0.0206%)
redux-thunk: 306 B (0.0177%)
webpack: 251 B (0.0145%)
isomorphic-fetch: 233 B (0.0135%)
is-promise: 165 B (0.00955%)
<self>: 284.88 KB (16.9%)
Some project descriptions contain emojis.
Example:
So we have to transform the project description, using Github API to get emojis URL: https://api.github.com/emojis
BEFORE:
Node.js JavaScript runtime :sparkles::turtle::rocket::sparkles:
AFTER:
Node.js JavaScript runtime
<img class="emoji" title=":sparkles:" alt=":sparkles:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" height="20" width="20" align="absmiddle">
<img class="emoji" title=":turtle:" alt=":turtle:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f422.png" height="20" width="20" align="absmiddle">
<img class="emoji" title=":rocket:" alt=":rocket:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f680.png" height="20" width="20" align="absmiddle">
<img class="emoji" title=":sparkles:" alt=":sparkles:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/2728.png" height="20" width="20" align="absmiddle">
must be
The project named "Selectize" was "moved" on 2015-12-31and lost all its stars!
Before: https://github.com/brianreavis/selectize.js
After: https://github.com/selectize/selectize.js
it seems to be a special case, different from from what happened in the past with repositories like Redux that moved from an organization to an other.
The "old" repo displays "forked from selectize/selectize.js" (the new one)
In iOS Safari (ipad), layout is broken, menu links do not work.
"¨Promise is not defined" error in IE Edge.
In the browser, load a "tag" URL, http://bestof.js.org/#/tags/test for example.
Enter any character in the search text field => an error occurs:
Uncaught TypeError: Cannot read property 'id' of undefined
The error does not occur when loading the application from the root URL and navigating using the links (the bug was difficult to find!)
I got a wonderful review from Hugo Giraudel (a member of the Hall if Fame, sass expert, creator of http://jargon.js.org/ among other things).
KittyGiraudel/ama#63 (comment)
So I am going to fix / improve things as much as possible.
Action plan:
Let's try to be inspired by Antoine de Saint Exupéry:
It seems that perfection is attained, not when there is nothing more to add, but when there is nothing more to take away.
En version originale 🇫🇷 :
Il semble que la perfection soit atteinte non quand il n'y a plus rien à ajouter, mais quand il n'y a plus rien à retrancher.
This issue is used to track ideas and store screenshots related to the presentation I will make at Rakuten Tech Conference 2017 (https://tech.rakuten.co.jp/).
Typo (no "h")
It is easy to break a single-page application, so running tests on the CI server before every deploy would be safer.
There are several strategies to write tests for a single page application made with React components:
Other ideas:
Now bestof.js.org application only displays the number of stars from Github.
It would be interesting to be able to see more qualitative content such as:
Content will be generated by users logged with Github.
Questions:
/projects/:id
). How to update project lists displayed in the homepage and in the "tag" pages ? (/tags/:code)A user review could be made of 2 parts: a user score (from 1 to 5) and a comment (markdown content)
User score meaning:
A "useful resource" would be made of a URL (link to the blog entry), a title and a comment (optional) that describes the content of the link.
Reading the latest issues of javascriptweekly.com will be useful to get initial data.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.