cheapsteak ( Chang Wang )

Vividh Chandna

commit sha 4a2c7bfe6c7a187b0f1cc74c9cfdd7c8a27e3a79

Add contributors list (#140) * Add contributors list * Show random contributor in footer * Fix footer layout

push time in 21 hours

Replace "Crafted in 🍁 by Chang Wang" since that's no longer wholly true

Add contributors list

Changelog:

Maintain a JSON file of all contributors
On page load, pick a random contributor to show in footer (Click to cycle through)
Fix footer responsive layout

Closes https://github.com/cheapsteak/npmcharts.com/issues/139.

+85 -13

3 commit in vividh/npmcharts.com/tree/add-contributors-list cheapsteak/npmcharts.com/tree/master

1 comment

4 changed files

vividh

pr closed time in 21 hours

issue closedcheapsteak/npmcharts.com

Maybe we can start with a simple JSON file of contributors that the app reads

{
  name: "Chang Wang",
  location: "🍁"
},
{
  name: "Borewit",
  location: "🇳🇱",
},
{
  name: "Jon Lim",
  location: "🗽"
},
//...

and randomize which one shows up on page load

relevant lines of code currently - https://github.com/cheapsteak/npmcharts.com/blob/c7dfdfa0a793b1780fcf81b43e6625c2daa10277/packages/frontend/src/home/home.html#L217-L231

way way way down the line, maybe some kind of bot similar to CLA bots that ask for this info as part of the PR process

closed time in 21 hours

cheapsteak

pull request commentcheapsteak/npmcharts.com

Add contributors list

this is ✨ beautiful, thank you so much!

vividh

comment created time in 21 hours

PullRequestReviewEvent

issue commentcheapsteak/npmcharts.com

Replace "Crafted in 🍁 by Chang Wang" since that's no longer wholly true

Thanks!

I would like to discuss an alternative option as well: Instead of picking one random contributor from the list, how about cycling through the list of contributors one by one, every 10 or 15 seconds, with a fade in / fade out animation?

Let me know what you think about this?

I worry that animations would be distracting / annoying for visitors, would prefer to keep the focus on the stats :)

Although could have it cycle through on click?

"link": "https://twitter.com/CheapSteak"

Please omit the link field, I want to avoid getting into a position of needing to define what's acceptable to link out to 🙏

provide the list of contributors to use

Could you please use this list (and also do include yourself!) https://github.com/cheapsteak/npmcharts.com/graphs/contributors And leave everyone's "location" field blank for now, don't really want to assume, can use 🌍 as the default

Thanks you for being so thorough 🙏 🙇

cheapsteak

comment created time in 2 days

pull request commentreact-syntax-highlighter/react-syntax-highlighter

Readme fix: fix broken link for custom renderer example

sure thing! updated

cheapsteak

comment created time in 2 days

push eventcheapsteak/react-syntax-highlighter

commit sha ba0d09e1c8cd4ae7a6992871cd9c0f5acc9ec32e

point to repo, not specific file in a commit

Replace "Crafted in 🍁 by Chang Wang" since that's no longer wholly true

push time in 2 days

issue commentcheapsteak/npmcharts.com

Would appreciate it!

cheapsteak

comment created time in 3 days

issue openedcheapsteak/npmcharts.com

Replace "Crafted in 🍁 by Chang Wang" since that's no longer wholly true

Maybe we can start with a simple JSON file of contributors that the app reads

{
  name: "Chang Wang",
  location: "🍁"
},
{
  name: "Borewit",
  location: "🇳🇱",
},
{
  name: "Jon Lim",
  location: "🗽"
},
//...

?

way way way down the line, maybe some kind of bot similar to CLA bots that ask for this info as part of the PR process

created time in 3 days

startedlucasconstantino/react-apollo-fragments

started time in 4 days

issue openeddaniman/splendor-client

RFC: Move points of interaction closer to the items being interacted with

Context

Played a few more games with wife last week
My fingertips hurt a bit from the friction from swiping on the touchpad :P
swipes

Proposal

Let's move the interaction points closer to the thing being interacted with

for cards, instead of moving the card into the yellow dashed area
- tap card once to reveal "purchase" and "reserve" actions (don't want to use hover to keep this usable on ipad (maybe one day phones))
- tap outside the card to hide it
for coins, move the staging area to be next to the bank; and maybe stack them

created time in 4 days

XIAO HANXU

commit sha 04f3f811118a32b9dd4664dd593b0c1eb34684db

fix weird y-axis ticks (#132) * fix weird y-axis ticks * fix: present y-axis in k,m,b unit

push time in 6 days

fix weird y-axis ticks

to fix issue #130

+13 -1

2 commit in Xiaohanxu1996/npmcharts.com/tree/fix/yaxis-logscale cheapsteak/npmcharts.com/tree/master

2 comments

1 changed file

Xiaohanxu1996

pr closed time in 6 days

PullRequestReviewEvent

push eventdaniman/splendor-client

commit sha ad7a9a29da0ade9c364913fe5ad064c8705c04b6

move turn log up higher

commit sha e8d554aebcc15fe63dfc916d1c1b5bff9062c358

Merge pull request #41 from daniman/chang/20/10/w3/move-log-up move turn log up into same row as GameCardStacks

branch : chang/20/10/w3/move-log-up

push time in 7 days

PR merged daniman/splendor-client

move turn log up into same row as GameCardStacks

As the player purchases cards, the first row's right column grows higher, which pushes the turn log lower

This PR moves turn log into the first row, nestled under GameCardStacks

before	after

helps make https://github.com/daniman/splendor-client/issues/27 a bit better?

+3 -6

1 commit in daniman/splendor-client/tree/chang/20/10/w3/move-log-up daniman/splendor-client/tree/main

0 comment

2 changed files

cheapsteak

pr closed time in 7 days

PR opened daniman/splendor-client

move turn log up into same row as GameCardStacks

As the player purchases cards, the first row's right column grows higher, which pushes the turn log lower

This PR moves turn log into the first row, nestled under GameCardStacks

before	after

helps make https://github.com/daniman/splendor-client/issues/27 a bit better?

+3 -6

1 commit in daniman/splendor-client/tree/chang/20/10/w3/move-log-up daniman/splendor-client/tree/main

0 comment

2 changed files

pr created time in 7 days

create barnchdaniman/splendor-client

created branch time in 7 days

PR opened react-syntax-highlighter/react-syntax-highlighter

Readme fix: fix broken link for custom renderer example

wasn't hard to figure out but hope this saves a few people some jumps :)

+1 -1

1 commit in cheapsteak/react-syntax-highlighter/tree/patch-1 react-syntax-highlighter/react-syntax-highlighter/tree/master

0 comment

1 changed file

pr created time in 8 days

push eventcheapsteak/react-syntax-highlighter

commit sha 81acdcc8667b3798a941b203d00fc0dca12cecf6

fix broken link for custom renderer example

http://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/

push time in 8 days

fork cheapsteak/react-syntax-highlighter

syntax highlighting component for react with prismjs or highlightjs ast using inline styles

react-syntax-highlighter/react-syntax-highlighter cheapsteak/react-syntax-highlighter

fork in 8 days

startedvercel/styled-jsx

started time in 8 days

startedalixaxel/chrome-aws-lambda

started time in 10 days

startedwoltapp/blurhash

started time in 14 days

create barnchcheapsteak/css-inline

branch : chang/20/07/remove-networking-libs

created branch time in 14 days

startedhako/branca

started time in 15 days

startedstephenc222/react-panel-system

started time in 16 days

commit sha b7b188777f8162750b901d97b4b1bb70c6e08e4e

see if this makes CI run for pull requests from forks

push time in 16 days

pull request commentcheapsteak/npmcharts.com

Oh I noticed that the usual CI checks like build/lint/test aren't run for Pull Requests. Is this expected? Thanks

nope not expected
I suspect I might have setup the github workflow file incorrectly, lemme take a looksee 👀

kenrick95

comment created time in 16 days

Kenrick

commit sha f979c19c1aba0af9dc939e86efd69a272cac9e76

Prefetch npmjs apis (#137) * Prefetch npmjs apis Refactored getting start/end dates to getPackageRequestPeriods Refactored getPackagesDownloadsOverPeriod to use this new getPackageRequestPeriods Related to #43 * Fix getPrefetchUrls's logic Need to make each of scoped packages as independent request Added test for this

push time in 16 days

Prefetch npmjs apis

Refactored getting start/end dates to getPackageRequestPeriods

Refactored getPackagesDownloadsOverPeriod to use this new getPackageRequestPeriods

Related to #43

Note that this only prefetches the npmjs's package stats API (https://api.npmjs.org/downloads/range/${startDate}:${endDate}/${packageNamesParam})

Screenshot 2020-10-13 222347

Screenshot 2020-10-14 220246 Screenshot 2020-10-14 220257 Screenshot 2020-10-14 220329

+199 -30

2 commit in kenrick95/npmcharts.com/tree/kenrick/prefetch-npm-apis cheapsteak/npmcharts.com/tree/master

2 comments

7 changed files

kenrick95

pr closed time in 16 days

PullRequestReviewEvent

Pull request review commentcheapsteak/npmcharts.com

+const _partition = require('lodash/partition');
+const isScopedPackageName = require('utils/isScopedPackageName');
+const getPackageRequestPeriods = require('utils/getPackageRequestPeriods');
+
+function getPrefetchUrls(packageNames, start, end) {
+  const requestPeriods = getPackageRequestPeriods(start, end);
+
+  // Need to partition into two because npmjs's api does not support retrieving data of scoped and unscoped packages in one request
+  const partitionedPackageNames = _partition(packageNames, isScopedPackageName);

separate but related issue - this is resulting in an unnecessary prefetch when there are no scoped packages

(can test on /compare/mobx,redux,immer,immutable,recoil)

Really cool to know that this endpoints exists though! Looks like total npm downloads for all packages

kenrick95

comment created time in 17 days

PullRequestReviewEvent

Pull request review commentcheapsteak/npmcharts.com

+const _partition = require('lodash/partition');
+const isScopedPackageName = require('utils/isScopedPackageName');
+const getPackageRequestPeriods = require('utils/getPackageRequestPeriods');
+
+function getPrefetchUrls(packageNames, start, end) {
+  const requestPeriods = getPackageRequestPeriods(start, end);
+
+  // Need to partition into two because npmjs's api does not support retrieving data of scoped and unscoped packages in one request
+  const partitionedPackageNames = _partition(packageNames, isScopedPackageName);

this doesn't quite entirely capture the limitation from npm's api -
scoped packages need to also be requested individually, e.g. https://api.npmjs.org/downloads/range/2019-10-14:2020-10-13/@chakra-ui/core,@material-ui/core,@fluentui/react,@blueprintjs/core,@adobe/react-spectrum

needs to be split into

https://api.npmjs.org/downloads/range/2019-10-14:2020-10-13/@chakra-ui/core https://api.npmjs.org/downloads/range/2019-10-14:2020-10-13/@material-ui/core https://api.npmjs.org/downloads/range/2019-10-14:2020-10-13/@fluentui/react etc

(can test on /compare/express,koa,@hapi/hapi,connect,@nestjs/core,fastify)

kenrick95

comment created time in 17 days

Pull request review commentcheapsteak/npmcharts.com

Percentage comparison graph?

+const { format: formatDate, subDays } = require('date-fns');
+
+const maxRequestPeriod = 365; // ~1 year
+
+function maxDate(a, b) {
+  return new Date(Math.max(a.getTime(), b.getTime()));
+}
+
+/**
+ * @param startDay {number} Start of period, 1 is yesterday
+ * @param endDay   {number} End of period 0 is today
+ * @returns {Array<{startDate: string, endDate: string}>}
+ */
+function getPackageRequestPeriods(startDay, endDay) {

🙏 looks fine!

kenrick95

comment created time in 17 days

issue closedcheapsteak/npmcharts.com

I'm not sure if this is practical for your page but I'd love to see a relative comparison graph. For example https://npmcharts.com/compare/process-on-spawn,nyc?interval=1&start=30 shows downloads for process-on-spawn and nyc in absolute values. nyc 15.0.0 is currently the only source of downloads for process-on-spawn so if process-on-spawn gets 25,000 downloads and nyc gets 200,000 then 12.5% of users have upgraded to nyc 15.0.0. Really for the purpose of this graph I'm not actually interested in the ups and downs of nyc total downloads.

Feel free to close this if impractical or if you think it is too niche.

closed time in 18 days

coreyfarrell

issue closedcheapsteak/npmcharts.com

Alias groups (e.g. (css-in-js))

e.g. css-in-js libraries, large-cap frontend frameworks, small-cap frontend frameworks

/compare/(css-in-js)

package name should not contain any of the following characters: ~)('!*

closed time in 18 days

cheapsteak

issue closedcheapsteak/npmcharts.com

Find similar libraries

Could possibly do this client side

closed time in 18 days

cheapsteak

issue commentcheapsteak/npmcharts.com

add prefetch tag for api requests

thanks for the heads up!

cheapsteak

comment created time in 18 days

startedlelylan/simple-oauth2

started time in 18 days

startedreact-bootstrap/react-overlays

started time in 18 days

startedmarknorrapscm/number-rollup

started time in 18 days

commit sha c7dfdfa0a793b1780fcf81b43e6625c2daa10277

Allow exporting chart as SVG and PNG (#136) * install file-saver * mostly copy over dom-to-image * scale exported png images so they'd look crisp * don't embed fonts or inline images don't need fonts/images for the svg * no need to clone pseudoelements or copy user input * fix image exports * merge export csv/png/svg into one ui element

push time in 19 days

delete branch cheapsteak/npmcharts.com

delete branch : chang/save-svg

delete time in 19 days

Allow exporting image (without screen cap)

Allow exporting chart as SVG and PNG

Allow the chart to be exported as SVG and PNG

This involved a surprisingly more amount of work than initially anticipated

As @kenrick95 investigated in https://github.com/cheapsteak/npmcharts.com/issues/55#issuecomment-706459748 (🙏 much appreciated), the html-to-image library doesn't actually process css applied to svg elements and resulted in a very wonky image

It looks like as a part of forking from dom-to-image, it somewhat significantly rewrote pieces of the library and caused some regressions.

Switching from html-to-image to dom-to-image (the original, last updated 3y ago) fixes this and everything looks great, however, the SVGs ends up being 10MB large 🤯

it was embedding all the webfonts on the page, regardless of whether they were necessary (they weren't). Removing this cut svg sizes down to 5MB
the way it ways making styles work was that it sucked in every computed style on the element, which includes a ginormous amount of default style rules that don't actually do anything. Removing this cut svg sizes down to ~200kb

Decided then to copy over and internalize the js file from dom-to-image and make inline modifications to comment out stuff that wasn't needed (sucking in images and fonts) and change the way style cloning was working so it only set stuff that wasn't already default.

closes https://github.com/cheapsteak/npmcharts.com/issues/55

+870 -27

7 commit in cheapsteak/npmcharts.com/tree/chang/save-svg cheapsteak/npmcharts.com/tree/master

0 comment

6 changed files

cheapsteak

pr closed time in 19 days

issue closedcheapsteak/npmcharts.com

Currently have to go into minimal mode and screen cap

Should have a single button that exports the current view

closed time in 19 days

cheapsteak

commit sha 4cc8ac6d63ecca95313886a3603e106b5a42489b

add cors header for app.css

commit sha 5b1430f9d60b109cb180cc3feefa0348089c0ee1

add crossorigin attribute to app.css links svg/png export needs to be able to access cssRules on the stylesheet; without crossorigin it throws an error instead. cors headers were already added by previous commit

commit sha dcbf4d634d3b0158fbef1348c9093183f8418075

install file-saver

commit sha 2b5fe8a79fcd933cd2703b2752673db764fc4cfc

mostly copy over dom-to-image

commit sha 8d8082a740b0eec98e2439184da6485806137930

scale exported png images so they'd look crisp

commit sha a74eab29cf700ceb23fc4788e87e684f0bb4e588

don't embed fonts or inline images don't need fonts/images for the svg

commit sha 51a0094330aa595d058053fc15fa0a05c22f0f97

no need to clone pseudoelements or copy user input

commit sha ad7e0252350ae79e654d799f245ee8b93f01113d

fix image exports

commit sha c45eea62ddd326513825dd00987cb4efc82bdc2d

merge export csv/png/svg into one ui element

push time in 19 days

commit sha 5b1430f9d60b109cb180cc3feefa0348089c0ee1

add crossorigin attribute to app.css links svg/png export needs to be able to access cssRules on the stylesheet; without crossorigin it throws an error instead. cors headers were already added by previous commit

push time in 19 days

commit sha f00ad9dea2e0e3c1e711e49d47329ca5a31cbc0a

merge export csv/png/svg into one ui element

push time in 19 days

commit sha 4cc8ac6d63ecca95313886a3603e106b5a42489b

add cors header for app.css

push time in 19 days

PR opened cheapsteak/npmcharts.com

Allow exporting chart as SVG and PNG

Allow the chart to be exported as SVG and PNG

This involved a surprisingly more amount of work than initially anticipated

As @kenrick95 investigated in https://github.com/cheapsteak/npmcharts.com/issues/55#issuecomment-706459748, the html-to-image library doesn't actually process css applied to svg elements and resulted in a very wonky image

It looks like as a part of forking from dom-to-image, it somewhat significantly rewrote pieces of the library and caused some regressions.

Switching from html-to-image to dom-to-image (the original, last updated 3y ago) fixes this and everything looks great, however, the SVGs ends up being 10MB large 🤯

It was embedding all the webfonts on the page, regardless of whether they were necessary (they weren't)

In addition to that, the way it ways making styles work was that it sucked in every computed style on the element, which includes a ginormous amount of default style rules that don't actually do anything.

Decided then to copy over and internalize the js file from dom-to-image and make inline modifications to comment out stuff that wasn't needed (sucking in images and fonts) and change the way style cloning was working so it only set stuff that wasn't already default.

closes https://github.com/cheapsteak/npmcharts.com/issues/55

+870 -27

7 commit in cheapsteak/npmcharts.com/tree/chang/save-svg cheapsteak/npmcharts.com/tree/master

0 comment

6 changed files

pr created time in 19 days

commit sha aaa31c496436410b35cd0dd92e0b6071873d544e

merge export csv/png/svg into one ui element

Allow exporting image (without screen cap)

push time in 19 days

create barnchcheapsteak/npmcharts.com

branch : chang/save-svg

created branch time in 19 days

issue commentcheapsteak/npmcharts.com

@kenrick95 thanks so much for investigating!

cheapsteak

comment created time in 19 days

startedNodlik/react-st-modal

started time in 20 days

push time in 20 days

commit sha 17e298a807614993070bd2df7ba0f0e4bc0cf3cc

install esbuild-loader

commit sha 0c937a67088d26d8b7fc681ccf2b425d0183584b

minimize using esbuild

push time in 20 days

commit sha 5dd261ddd666623bf536fe7da43681d63d0778ca

make separator gradient tiny bit thinner

push time in 20 days

commit sha 3bf141dbf3353ee3fc8e91c2a6a6f96565a758ca

add outbound link to bundlephobia https://github.com/pastelsky/bundlephobia/pull/415

commit sha bf8523c9e6f5c40be50513af18b2b0a3543a1d05

style header - lighten bg, thinner subheading, darken text

Allow exporting image (without screen cap)

push time in 20 days

issue commentcheapsteak/npmcharts.com

@kenrick95 that wouldn't quite export the current view, would prefer if it exports exactly what the user is seeing :)

This looks promising - https://www.npmjs.com/package/html-to-image , specifically the toBlob

htmlToImage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    fileSaver.saveAs(blob, 'my-node.png');
  });

cheapsteak

comment created time in 21 days

commit sha 94904c041d3153815190293cbd9566605a2e3f58

upgrade eslint and prettier (#135) * remove extra unnecessary yarn lock * run lint fix * upgrade eslint and prettier * downgrade prettier back to 1.* too much diff * lint fix

push time in 22 days

delete branch cheapsteak/npmcharts.com

delete branch : chang/eslint-prettier-upgrade

delete time in 22 days

upgrade eslint and prettier

having some integration issues with vscode, might be due to eslint being massively out of date

hope this fixes that

+617 -2697

5 commit in cheapsteak/npmcharts.com/tree/chang/eslint-prettier-upgrade cheapsteak/npmcharts.com/tree/master

0 comment

11 changed files

cheapsteak

pr closed time in 22 days

PR opened cheapsteak/npmcharts.com

upgrade eslint and prettier

having some integration issues with vscode, might be due to eslint being massively out of date

+617 -2697

5 commit in cheapsteak/npmcharts.com/tree/chang/eslint-prettier-upgrade cheapsteak/npmcharts.com/tree/master

0 comment

11 changed files

pr created time in 22 days

commit sha 062af82a01e89661583b5e2adb82ea02f17f8222

upgrade eslint and prettier

commit sha e4cfd3b94f60b635fc1faf523c9a2a8d66030190

downgrade prettier back to 1.* too much diff

commit sha 8f544c86d828d13bdf469b63bc8d1c8118688b52

lint fix

branch : chang/eslint-prettier-upgrade

push time in 22 days

create barnchcheapsteak/npmcharts.com

created branch time in 22 days

PR opened pastelsky/bundlephobia

Add npmcharts.com to "Built using Bundlephobia"

Thanks for providing this amazing resource!
Been wanting this for a while and this was recently added in https://github.com/cheapsteak/npmcharts.com/pull/134

+1 -0

1 commit in cheapsteak/bundlephobia/tree/patch-1 pastelsky/bundlephobia/tree/bundlephobia

0 comment

1 changed file

pr created time in 22 days

push eventcheapsteak/bundlephobia

commit sha 7253f4121f44801198dab89542d270bd8a8c69c7

Add npmcharts.com to "Built using Bundlephobia" Thanks for providing this resource!