Open Source and Me
my journey into the open source world
20222022 was such an golden age for anyone to contribute to open source. There were so many projects being revamped with countless good first issues. During college I tried to contribute to some famous projects but failed due to lack of device. In my first job at Freshworks, everyone were encouraged to make open source contributions. That is how my journey started.
I was working with emberjs at work and didn't have exposure to react, in my attempt to learn react I started looking out for react based opportunities in open source. Fair enough the reactjs.org website (official react documentation) was getting a fresh new paint and everyone in the JS world were excited.
react and me
I raised a PR for the reactjs.org website and to my surprise it got merged very quickly. I was going through a very bad phase personally and this made me happy and motivated me to continue making more contributions. I found the joy in open source that day. I then started contributing more frequently to react, I started screening through the website for more issues and fixing them one by one. My first code related changes was adding system theme to the website. Then I started landing more bug fixes and codebase improvements that I could find like
- using Tailwind CSS instead of inline styles - PR
- removing unwanted dependencies - PR
- accessibility features like unwanted focuses removal - PR
- custom linter to validate duplicate heading links - PR
thus raising more than 80+ pull requests to the reactjs.org repo.
Notable Contributions in react
While I was finding out the composition of the statically generated bundle of every route, I noticed one package that was present everywhere and was an potential improvement if we could chunk it out. The harder part was we weren't really sure if we could chunk the package out of every statically generated bundle but serve the fallback alone. So Dan asked me to raise an PR and we could take it on from there.
Splitting sandpack from main bundle
Tried to split the sandpack and added a fallback with suspense
Adding suspense to Sandpack reduced ~9.55KB Adding a wrapper to codeBlock and Sandpack reduced ~150KB
Fallback preview here: https://beta-reactjs-org-namamgdvj-fbopensource.vercel.app/learn
We were then going back and forth discovering what we would need for our changes to work effectively and Dan came up with this checklist
And we had to make changes to our the component so that the server output and the client hydrated output never jumped layouts, which would not give an clue to user that the codesandbox (preview and sandpack) were loading async. Once this was done we could see great improvement in the bundle for every page almost an solid ~158KB duplication reduction across all routes.
Size Changes
📦 Next.js Bundle Analysis
This analysis was generated by the next.js bundle analysis action 🤖
🎉 Global Bundle Size Decreased
| Page | Size (compressed) |
|---|---|
global | 92.86 KB (🟢 -488 B) |
Details The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster. Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!
One Hundred Eighty-three Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load |
|---|---|---|
/ | 59.17 KB (🟢 -158.97 KB) | 152.03 KB |
/404 | 58.28 KB (🟢 -158.97 KB) | 151.14 KB |
/apis | 58.83 KB (🟢 -158.97 KB) | 151.69 KB |
/apis/reactdom | 58.98 KB (🟢 -158.98 KB) | 151.83 KB |
/apis/render | 61.04 KB (🟢 -158.98 KB) | 153.9 KB |
/apis/usestate | 69.99 KB (🟢 -158.98 KB) | 162.84 KB |
/blog/2013/06/02/jsfiddle-integration | 69.55 KB (🟢 -158.97 KB) | 162.41 KB |
/blog/2013/06/05/why-react | 71.27 KB (🟢 -158.98 KB) | 164.13 KB |
/blog/2013/06/12/community-roundup | 70.98 KB (🟢 -158.97 KB) | 163.83 KB |
/blog/2013/06/19/community-roundup-2 | 71.65 KB (🟢 -158.97 KB) | 164.5 KB |
/blog/2013/06/21/react-v0-3-3 | 69.7 KB (🟢 -158.97 KB) | 162.55 KB |
/blog/2013/06/27/community-roundup-3 | 72.01 KB (🟢 -158.97 KB) | 164.87 KB |
/blog/2013/07/02/react-v0-4-autobind-by-default | 70.31 KB (🟢 -158.98 KB) | 163.17 KB |
/blog/2013/07/03/community-roundup-4 | 71.38 KB (🟢 -158.97 KB) | 164.24 KB |
/blog/2013/07/11/react-v0-4-prop-validation-and-default-values | 70.18 KB (🟢 -158.98 KB) | 163.04 KB |
/blog/2013/07/17/react-v0-4-0 | 70.89 KB (🟢 -158.97 KB) | 163.75 KB |
/blog/2013/07/23/community-roundup-5 | 71.78 KB (🟢 -158.97 KB) | 164.63 KB |
/blog/2013/07/26/react-v0-4-1 | 69.66 KB (🟢 -158.97 KB) | 162.52 KB |
/blog/2013/07/30/use-react-and-jsx-in-ruby-on-rails | 70.26 KB (🟢 -158.97 KB) | 163.12 KB |
/blog/2013/08/05/community-roundup-6 | 71.07 KB (🟢 -158.97 KB) | 163.93 KB |
/blog/2013/08/19/use-react-and-jsx-in-python-applications | 70.27 KB (🟢 -158.97 KB) | 163.13 KB |
/blog/2013/08/26/community-roundup-7 | 71.24 KB (🟢 -158.97 KB) | 164.1 KB |
/blog/2013/09/24/community-roundup-8 | 72.67 KB (🟢 -158.97 KB) | 165.53 KB |
/blog/2013/10/03/community-roundup-9 | 71.61 KB (🟢 -158.97 KB) | 164.46 KB |
/blog/2013/10/16/react-v0.5.0 | 71.29 KB (🟢 -158.97 KB) | 164.15 KB |
/blog/2013/10/29/react-v0-5-1 | 69.65 KB (🟢 -158.97 KB) | 162.51 KB |
/blog/2013/11/06/community-roundup-10 | 73.27 KB (🟢 -158.98 KB) | 166.12 KB |
/blog/2013/11/18/community-roundup-11 | 72.35 KB (🟢 -158.97 KB) | 165.2 KB |
/blog/2013/12/18/react-v0.5.2-v0.4.2 | 70.12 KB (🟢 -158.97 KB) | 162.98 KB |
/blog/2013/12/19/react-v0.8.0 | 70.54 KB (🟢 -158.97 KB) | 163.4 KB |
/blog/2013/12/23/community-roundup-12 | 72 KB (🟢 -158.97 KB) | 164.86 KB |
/blog/2013/12/30/community-roundup-13 | 71.78 KB (🟢 -158.98 KB) | 164.64 KB |
/blog/2014/01/02/react-chrome-developer-tools | 70.04 KB (🟢 -158.97 KB) | 162.9 KB |
/blog/2014/01/06/community-roundup-14 | 71.38 KB (🟢 -158.97 KB) | 164.24 KB |
/blog/2014/02/05/community-roundup-15 | 72.6 KB (🟢 -158.97 KB) | 165.45 KB |
/blog/2014/02/15/community-roundup-16 | 72.3 KB (🟢 -158.97 KB) | 165.16 KB |
/blog/2014/02/16/react-v0.9-rc1 | 72.71 KB (🟢 -158.98 KB) | 165.57 KB |
/blog/2014/02/20/react-v0.9 | 73.16 KB (🟢 -158.97 KB) | 166.01 KB |
/blog/2014/02/24/community-roundup-17 | 72.02 KB (🟢 -158.97 KB) | 164.88 KB |
/blog/2014/03/14/community-roundup-18 | 72.99 KB (🟢 -158.97 KB) | 165.84 KB |
/blog/2014/03/19/react-v0.10-rc1 | 71.29 KB (🟢 -158.97 KB) | 164.15 KB |
/blog/2014/03/21/react-v0.10 | 71.32 KB (🟢 -158.97 KB) | 164.18 KB |
/blog/2014/03/28/the-road-to-1.0 | 71.43 KB (🟢 -158.97 KB) | 164.29 KB |
/blog/2014/04/04/reactnet | 70.07 KB (🟢 -158.97 KB) | 162.93 KB |
/blog/2014/05/06/flux | 70.2 KB (🟢 -158.97 KB) | 163.05 KB |
/blog/2014/05/29/one-year-of-open-source-react | 70.42 KB (🟢 -158.97 KB) | 163.28 KB |
/blog/2014/06/27/community-roundup-19 | 71.96 KB (🟢 -158.97 KB) | 164.82 KB |
/blog/2014/07/13/react-v0.11-rc1 | 72.35 KB (🟢 -158.98 KB) | 165.21 KB |
/blog/2014/07/17/react-v0.11 | 73.61 KB (🟢 -158.98 KB) | 166.46 KB |
/blog/2014/07/25/react-v0.11.1 | 70.56 KB (🟢 -158.97 KB) | 163.41 KB |
/blog/2014/07/28/community-roundup-20 | 72.11 KB (🟢 -158.98 KB) | 164.96 KB |
/blog/2014/07/30/flux-actions-and-the-dispatcher | 71.74 KB (🟢 -158.97 KB) | 164.6 KB |
/blog/2014/08/03/community-roundup-21 | 71.78 KB (🟢 -158.97 KB) | 164.63 KB |
/blog/2014/09/03/introducing-the-jsx-specification | 69.78 KB (🟢 -158.98 KB) | 162.64 KB |
/blog/2014/09/12/community-round-up-22 | 72.26 KB (🟢 -158.98 KB) | 165.11 KB |
/blog/2014/09/16/react-v0.11.2 | 70.55 KB (🟢 -158.97 KB) | 163.41 KB |
/blog/2014/09/24/testing-flux-applications | 73.73 KB (🟢 -158.98 KB) | 166.59 KB |
/blog/2014/10/14/introducing-react-elements | 72.69 KB (🟢 -158.98 KB) | 165.54 KB |
/blog/2014/10/16/react-v0.12-rc1 | 72.65 KB (🟢 -158.97 KB) | 165.51 KB |
/blog/2014/10/17/community-roundup-23 | 73.23 KB (🟢 -158.97 KB) | 166.08 KB |
/blog/2014/10/27/react-js-conf | 69.83 KB (🟢 -158.98 KB) | 162.68 KB |
/blog/2014/10/28/react-v0.12 | 72.59 KB (🟢 -158.97 KB) | 165.45 KB |
/blog/2014/11/24/react-js-conf-updates | 70.21 KB (🟢 -158.97 KB) | 163.07 KB |
/blog/2014/11/25/community-roundup-24 | 73.45 KB (🟢 -158.98 KB) | 166.31 KB |
/blog/2014/12/18/react-v0.12.2 | 70.24 KB (🟢 -158.97 KB) | 163.1 KB |
/blog/2014/12/19/react-js-conf-diversity-scholarship | 70.63 KB (🟢 -158.98 KB) | 163.49 KB |
/blog/2015/01/27/react-v0.13.0-beta-1 | 71.6 KB (🟢 -158.98 KB) | 164.46 KB |
/blog/2015/02/18/react-conf-roundup-2015 | 73.59 KB (🟢 -158.97 KB) | 166.45 KB |
/blog/2015/02/20/introducing-relay-and-graphql | 72.74 KB (🟢 -158.97 KB) | 165.6 KB |
/blog/2015/02/24/react-v0.13-rc1 | 71.64 KB (🟢 -158.97 KB) | 164.5 KB |
/blog/2015/02/24/streamlining-react-elements | 74.19 KB (🟢 -158.97 KB) | 167.05 KB |
/blog/2015/03/03/react-v0.13-rc2 | 70.98 KB (🟢 -158.97 KB) | 163.83 KB |
/blog/2015/03/04/community-roundup-25 | 71.94 KB (🟢 -158.97 KB) | 164.8 KB |
/blog/2015/03/10/react-v0.13 | 72.26 KB (🟢 -158.98 KB) | 165.11 KB |
/blog/2015/03/16/react-v0.13.1 | 70.08 KB (🟢 -158.97 KB) | 162.93 KB |
/blog/2015/03/19/building-the-facebook-news-feed-with-relay | 72.83 KB (🟢 -158.97 KB) | 165.69 KB |
/blog/2015/03/26/introducing-react-native | 69.97 KB (🟢 -158.97 KB) | 162.83 KB |
/blog/2015/03/30/community-roundup-26 | 71.9 KB (🟢 -158.97 KB) | 164.76 KB |
/blog/2015/04/17/react-native-v0.4 | 70.82 KB (🟢 -158.98 KB) | 163.67 KB |
/blog/2015/04/18/react-v0.13.2 | 70.15 KB (🟢 -158.98 KB) | 163.01 KB |
/blog/2015/05/01/graphql-introduction | 74.64 KB (🟢 -158.97 KB) | 167.5 KB |
/blog/2015/05/08/react-v0.13.3 | 70.04 KB (🟢 -158.98 KB) | 162.9 KB |
/blog/2015/05/22/react-native-release-process | 70.19 KB (🟢 -158.97 KB) | 163.05 KB |
/blog/2015/06/12/deprecating-jstransform-and-react-tools | 70.65 KB (🟢 -158.97 KB) | 163.5 KB |
/blog/2015/07/03/react-v0.14-beta-1 | 72.16 KB (🟢 -158.97 KB) | 165.02 KB |
/blog/2015/08/03/new-react-devtools-beta | 70.76 KB (🟢 -158.98 KB) | 163.61 KB |
/blog/2015/08/11/relay-technical-preview | 70.82 KB (🟢 -158.97 KB) | 163.68 KB |
/blog/2015/08/13/reacteurope-roundup | 72.41 KB (🟢 -158.97 KB) | 165.27 KB |
/blog/2015/09/02/new-react-developer-tools | 70.18 KB (🟢 -158.97 KB) | 163.03 KB |
/blog/2015/09/10/react-v0.14-rc1 | 75.86 KB (🟢 -158.97 KB) | 168.72 KB |
/blog/2015/09/14/community-roundup-27 | 72.33 KB (🟢 -158.97 KB) | 165.19 KB |
/blog/2015/10/01/react-render-and-top-level-api | 71.31 KB (🟢 -158.98 KB) | 164.16 KB |
/blog/2015/10/07/react-v0.14 | 76.35 KB (🟢 -158.97 KB) | 169.2 KB |
/blog/2015/10/19/reactiflux-is-moving-to-discord | 72.06 KB (🟢 -158.98 KB) | 164.91 KB |
/blog/2015/10/28/react-v0.14.1 | 70.07 KB (🟢 -158.97 KB) | 162.92 KB |
/blog/2015/11/02/react-v0.14.2 | 70.1 KB (🟢 -158.97 KB) | 162.95 KB |
/blog/2015/11/18/react-v0.14.3 | 70.22 KB (🟢 -158.97 KB) | 163.08 KB |
/blog/2015/12/04/react-js-conf-2016-diversity-scholarship | 71.09 KB (🟢 -158.97 KB) | 163.95 KB |
/blog/2015/12/16/ismounted-antipattern | 70.69 KB (🟢 -158.97 KB) | 163.55 KB |
/blog/2015/12/18/react-components-elements-and-instances | 74.62 KB (🟢 -158.97 KB) | 167.47 KB |
/blog/2015/12/29/react-v0.14.4 | 69.89 KB (🟢 -158.98 KB) | 162.75 KB |
/blog/2016/01/08/A-implies-B-does-not-imply-B-implies-A | 70.91 KB (🟢 -158.97 KB) | 163.76 KB |
/blog/2016/01/12/discontinuing-ie8-support | 69.71 KB (🟢 -158.97 KB) | 162.57 KB |
/blog/2016/02/19/new-versioning-scheme | 71.1 KB (🟢 -158.97 KB) | 163.95 KB |
/blog/2016/03/07/react-v15-rc1 | 73.85 KB (🟢 -158.97 KB) | 166.7 KB |
/blog/2016/03/16/react-v15-rc2 | 70.71 KB (🟢 -158.97 KB) | 163.57 KB |
/blog/2016/03/29/react-v0.14.8 | 69.84 KB (🟢 -158.97 KB) | 162.7 KB |
/blog/2016/04/07/react-v15 | 78.03 KB (🟢 -158.98 KB) | 170.89 KB |
/blog/2016/04/08/react-v15.0.1 | 70.6 KB (🟢 -158.97 KB) | 163.46 KB |
/blog/2016/07/11/introducing-reacts-error-code-system | 70.31 KB (🟢 -158.97 KB) | 163.17 KB |
/blog/2016/07/13/mixins-considered-harmful | 78.47 KB (🟢 -158.97 KB) | 171.32 KB |
/blog/2016/07/22/create-apps-with-no-configuration | 73.79 KB (🟢 -158.97 KB) | 166.65 KB |
/blog/2016/08/05/relay-state-of-the-state | 73.83 KB (🟢 -158.97 KB) | 166.69 KB |
/blog/2016/09/28/our-first-50000-stars | 75.28 KB (🟢 -158.97 KB) | 168.14 KB |
/blog/2016/11/16/react-v15.4.0 | 73.23 KB (🟢 -158.97 KB) | 166.09 KB |
/blog/2017/04/07/react-v15.5.0 | 73.8 KB (🟢 -158.98 KB) | 166.65 KB |
/blog/2017/05/18/whats-new-in-create-react-app | 73.19 KB (🟢 -158.97 KB) | 166.05 KB |
/blog/2017/06/13/react-v15.6.0 | 71.82 KB (🟢 -158.97 KB) | 164.67 KB |
/blog/2017/07/26/error-handling-in-react-16 | 72.17 KB (🟢 -158.97 KB) | 165.02 KB |
/blog/2017/09/08/dom-attributes-in-react-16 | 72.59 KB (🟢 -158.97 KB) | 165.45 KB |
/blog/2017/09/25/react-v15.6.2 | 70.93 KB (🟢 -158.98 KB) | 163.79 KB |
/blog/2017/09/26/react-v16.0 | 76.06 KB (🟢 -158.98 KB) | 168.92 KB |
/blog/2017/11/28/react-v16.2.0-fragment-support | 73.99 KB (🟢 -158.97 KB) | 166.85 KB |
/blog/2017/12/07/introducing-the-react-rfc-process | 70.51 KB (🟢 -158.98 KB) | 163.37 KB |
/blog/2017/12/15/improving-the-repository-infrastructure | 86.3 KB (🟢 -158.97 KB) | 179.16 KB |
/blog/2018/03/01/sneak-peek-beyond-react-16 | 70.47 KB (🟢 -158.97 KB) | 163.33 KB |
/blog/2018/03/27/update-on-async-rendering | 75.71 KB (🟢 -158.97 KB) | 168.57 KB |
/blog/2018/03/29/react-v-16-3 | 72.53 KB (🟢 -158.97 KB) | 165.39 KB |
/blog/2018/05/23/react-v-16-4 | 72.67 KB (🟢 -158.97 KB) | 165.53 KB |
/blog/2018/06/07/you-probably-dont-need-derived-state | 76.33 KB (🟢 -158.97 KB) | 169.19 KB |
/blog/2018/08/01/react-v-16-4-2 | 71.32 KB (🟢 -158.98 KB) | 164.18 KB |
/blog/2018/09/10/introducing-the-react-profiler | 72.93 KB (🟢 -158.97 KB) | 165.79 KB |
/blog/2018/10/01/create-react-app-v2 | 73.41 KB (🟢 -158.97 KB) | 166.27 KB |
/blog/2018/10/23/react-v-16-6 | 72.61 KB (🟢 -158.97 KB) | 165.46 KB |
/blog/2018/11/13/react-conf-recap | 70.32 KB (🟢 -158.98 KB) | 163.18 KB |
/blog/2018/11/27/react-16-roadmap | 76.51 KB (🟢 -158.97 KB) | 169.37 KB |
/blog/2018/12/19/react-v-16-7 | 71.44 KB (🟢 -158.97 KB) | 164.3 KB |
/blog/2019/02/06/react-v16.8.0 | 73.71 KB (🟢 -158.97 KB) | 166.57 KB |
/blog/2019/02/23/is-react-translated-yet | 73.27 KB (🟢 -158.98 KB) | 166.13 KB |
/blog/2019/08/08/react-v16.9.0 | 76.21 KB (🟢 -158.97 KB) | 169.06 KB |
/blog/2019/08/15/new-react-devtools | 70.81 KB (🟢 -158.97 KB) | 163.67 KB |
/blog/2019/10/22/react-release-channels | 72.62 KB (🟢 -158.97 KB) | 165.48 KB |
/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense | 77.33 KB (🟢 -158.97 KB) | 170.18 KB |
/blog/2020/02/26/react-v16.13.0 | 73.55 KB (🟢 -158.97 KB) | 166.41 KB |
/blog/2020/08/10/react-v17-rc | 79.83 KB (🟢 -158.97 KB) | 172.69 KB |
/community | 58.86 KB (🟢 -158.98 KB) | 151.72 KB |
/community/acknowledgements | 60.05 KB (🟢 -158.98 KB) | 152.91 KB |
/community/meet-the-team | 60.57 KB (🟢 -158.98 KB) | 153.43 KB |
/learn | 63.36 KB (🟢 -158.98 KB) | 156.22 KB |
/learn/add-react-to-a-website | 63.69 KB (🟢 -158.98 KB) | 156.54 KB |
/learn/adding-interactivity | 65.49 KB (🟢 -158.98 KB) | 158.35 KB |
/learn/choosing-the-state-structure | 71.23 KB (🟢 -158.97 KB) | 164.09 KB |
/learn/conditional-rendering | 63.46 KB (🟢 -158.98 KB) | 156.32 KB |
/learn/describing-the-ui | 62.68 KB (🟢 -158.97 KB) | 155.54 KB |
/learn/editor-setup | 59.95 KB (🟢 -158.98 KB) | 152.81 KB |
/learn/escape-hatches | 58.2 KB (🟢 -158.97 KB) | 151.05 KB |
/learn/extracting-state-logic-into-a-reducer | 68.86 KB (🟢 -158.98 KB) | 161.72 KB |
/learn/importing-and-exporting-components | 61.86 KB (🟢 -158.97 KB) | 154.72 KB |
/learn/installation | 59.52 KB (🟢 -158.98 KB) | 152.38 KB |
/learn/javascript-in-jsx-with-curly-braces | 61.94 KB (🟢 -158.98 KB) | 154.79 KB |
/learn/keeping-components-pure | 66.07 KB (🟢 -158.97 KB) | 158.93 KB |
/learn/managing-state | 64.79 KB (🟢 -158.98 KB) | 157.65 KB |
/learn/manipulating-the-dom-with-refs | 66.7 KB (🟢 -158.98 KB) | 159.56 KB |
/learn/passing-data-deeply-with-context | 66.21 KB (🟢 -158.98 KB) | 159.07 KB |
/learn/passing-props-to-a-component | 65.64 KB (🟢 -158.98 KB) | 158.5 KB |
/learn/preserving-and-resetting-state | 68.45 KB (🟢 -158.98 KB) | 161.31 KB |
/learn/queueing-a-series-of-state-updates | 63.43 KB (🟢 -158.98 KB) | 156.29 KB |
/learn/react-developer-tools | 59.39 KB (🟢 -158.98 KB) | 152.24 KB |
/learn/reacting-to-input-with-state | 67.91 KB (🟢 -158.98 KB) | 160.76 KB |
/learn/referencing-values-with-refs | 64.96 KB (🟢 -158.97 KB) | 157.81 KB |
/learn/render-and-commit | 61.93 KB (🟢 -158.97 KB) | 154.79 KB |
/learn/rendering-lists | 65.99 KB (🟢 -158.97 KB) | 158.85 KB |
/learn/responding-to-events | 64.98 KB (🟢 -158.98 KB) | 157.84 KB |
/learn/scaling-up-with-reducer-and-context | 63 KB (🟢 -158.98 KB) | 155.86 KB |
/learn/sharing-state-between-components | 63.71 KB (🟢 -158.98 KB) | 156.57 KB |
/learn/start-a-new-react-project | 60.36 KB (🟢 -158.98 KB) | 153.21 KB |
/learn/state-a-components-memory | 69.16 KB (🟢 -158.98 KB) | 162.01 KB |
/learn/state-as-a-snapshot | 62.98 KB (🟢 -158.98 KB) | 155.84 KB |
/learn/thinking-in-react | 64.8 KB (🟢 -158.98 KB) | 157.66 KB |
/learn/updating-arrays-in-state | 67.04 KB (🟢 -158.97 KB) | 159.89 KB |
/learn/updating-objects-in-state | 66.76 KB (🟢 -158.98 KB) | 159.62 KB |
/learn/writing-markup-with-jsx | 61.86 KB (🟢 -158.98 KB) | 154.72 KB |
/learn/your-first-component | 62.77 KB (🟢 -158.98 KB) | 155.63 KB |
Details Only the gzipped size is provided here based on an expert tip. First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded. Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.
<!-- __NEXTJS_BUNDLE -->
Adding console to sandpacks in the docs. Sandpack added the feature of emitting any consoles added inside the sandpacks to be emitted to the parent component. I worked on capturing the consoles and pretty printing them on the react site
I got to collaborate with Dan from react team and Danilo from the sandpack team for react docs contributions.
Me in the ESLint website team
I got started in ESLint in the same way as react website, There was a new ESLint website being built very actively and I raised an PR that fixes CLS in home page. From then on it was pretty much easier for me, ESLint was a bit more organized as an org compared to react, there were clearer guidelines and processes. The reviewers were group of great people providing amazing feedback. I then spanned my contribution to more than just website and started contributing to ESLint CLI, Code Explorer, Playground etc.. Thereby becoming a website team member.
I focused on:
- working on the code explorer to learn about AST (Abstract Syntax Tree) and how ESLint analyzes code
- contributing to the ESLint CLI to improve developer experience and tooling
- enhancing the ESLint Playground to provide better interactive learning visually and experientially for users
you can see more of my works spanning across all ESLint projects here.
Babel website
Whilst contributing to all these documentation website I stumbled upon babel website which was using Docusaurus v1. So I decided to propose migration to v2. The v2 migration came with lot of improvements like dark mode, performance improvements, MDX version upgrade etc. This required us to significantly refactor the codebase to support MDX v2 as it got stricter with JSX syntax.
https://github.com/babel/website/issues/2621
Then I created an checklist for myself for migrating from v1 to v2 Docusaurus based on the official migration guide.
Docusaurus v2
This PR will contain changes needed for docusaurus v2. Use this PR for reviews and tracking file changes. I'll modify the existing site rather than creating a new copy of site (since this will be hard for tracking changes).
Related PRs:
https://github.com/harish-sethuraman/website/pull/1
https://github.com/harish-sethuraman/website/pull/2
https://github.com/harish-sethuraman/website/pull/3
https://github.com/harish-sethuraman/website/pull/4
https://github.com/harish-sethuraman/website/pull/5
https://github.com/harish-sethuraman/website/pull/6
https://github.com/harish-sethuraman/website/pull/9
Builds succeed properly and pages work fine. Please report bugs if any.
I forked the repo and then started to do changes one by one and raise pull requests, so that it is easier to manage changes. The final stacked PR had +8,519 -4,309 line changes on the repo with 250+ file changes with minimal breakage. The PR later got picked by another maintainer and made changes on top of my changes to finalize the migration.
Other contributions
Apart from these I was also contributing to a bit more things as well like:
- lexical, the text editor library by meta
- webpack loaders and its documentations on defining types
- NodeJS website