so today I'm going to talk about how I got 1600 stars in GitHub in two months of Open Source
work and but first I have a question for you have you contribute to any open source project really
little or giant yeah your speaker typo yeah cool so if you haven't I hope you will after my talk
so a little bit about me I'm a creator of jest-preview jest-preview a library
that gives you a visual debug experience when you're testing a front-end app and
also I'm a core member of bestofjs.org is a website that helps you follow the growth
of the JavaScript ecosystem and yeah you can connect with me with Twitter or GitHub
uh this is what I'm gonna cover first I want to cover what is jest-preview and why I pay with
and I'm going to go through what the sturggles do I have to overcome when I build when I
build an awareness project and what I what did I received from joining the open source community
and lastly I will give you some tips if you want to build your own open-source project
first what you jest-preview and why build it um uh I know that a lot of you guys you react right
and your front-end engineer and if you ever write tasks in for front-end app it's kind of yeah we
don't want to write as much right but when you write this and you experience some book you
might you might experience this like that you have you have to see the very long HTML in the terminal
and yes you just don't want to do it right so I I think that what tip instead of looking at the
very long and boring HTML I can visualize it in the browser so I try and yeah I can do it this is
my this is a very quick demo of I have that here is a react app and when you when you you render
it and you do some you do some action like click on it click on it and you just put the preview
dot debug you can see the actual UI in the test and these two this ah this Library that
I view this library to solve my problem itself so turn out many many developers out there they have
the same problem and yeah they just say waste and they say see that very useful and if
you have the same scenario yes give it a try and I think I want to do a little bit more demo
here I have a React app and this a very basic React app is have a count and if you
click on this it's gonna increase one and I have a test that I render an app
and click it 6 and I expect the count have to be 6 but if I
add another line so it's not going to be 6 right the test will fail but if you debug it in
the test you have to see a very ugly HTML but I try to visualize it in the browser
so you can see it easily and many times you can debug the you can spot the book faster
where my mouse?.?
yeah okay so I want to share some some struggles I have to overcome when will be jest-preview
uh the first one is difficult so I show here is a style component I mean uh
almost if you write ever use CSS Modules you know the the syntax right it's very easy just import
styles from the Style style.module.css and use it but when I have when I try to support serious
module in just preview I have to work it with much more complex course but uh yeah I learned a lot
the next one is to take a lot of time when you build an open-source search project and because
when you view and open you build a project because they know there are no existing solution so you
are the one who try to resell it sometime it takes a lot of time and especially when you have
full-time job it when you return from work you do not want to spend some time to do open source
right so as as I am now I'm a full-time oversight I have always have to plan and to to to spend on
on open source and one more thing is ah one almost that I thought is if it's an open source project
many people will come to help you but it's not really and sometimes working on open source that
you want to give up and okay the project but whenever you reach that state just remember why
you want to start the open source software project in the first place and one more thing is of one
more struggle is financial because you just working for free when you work at the company
someone pay you to for you to record but when you work on the open source you just do some kind of
of charity right so to solve this problem um if you if you just do it for fun it's fine right but
if you spend many time on this you have to fight something yeah you can try GitHub sponsor you can
try some open Collective uh some kind of Premium model like you have a free version but if you if
your user wants to see want to have more support or have some more feature you can check them
the next thing I want to share what I received from the from doing open source software the
first one in knowledge I learned a lot when I at my work I just I am I'm a front-end engineer
and I work mostly in react I just know how to write component write UI and write I mean how
to how to organize my component or how to make it more efficiently but when I doing open source
work I have to know what why that worked and how that work under the hood so I read a
lot of source code so my skills reading code and debuggling skill might improve a lot and one
one thing is that it's like a rabbit hole when you try to solve one problem but you'll find some bug
for example that I built jest-preview but I have to read a lot of jest code and I click
into the Vite cord and so now I send them a a couple of pull requests so yeah it's just a
rabbit rabbit hole and you have to learn a lot and you yeah and and I know a lot about the how about
how modern how bundle work under the hood and how they process that app in modern application
the next thing is the opportunity just for two months of Open Source work I got my
project got nominated for the most exciting use of technology for an react open source award and
yeah it's it's very honor of me and also I got many company reach out for job offer I
think it's a good invest and yeah I have chance to join a conference and tech event like Jsconf
next I know a lot developer in the past I never thought that I am I'm gonna talk to many
famous creator of my favorite uh two I have some favorite library like msw mock service
worker if you ever use it a react-hook-form yeah I never thought that I'm gonna be friends with
them but when I live into my open source group yeah I finally get to know them and many other
the developer and so now that's the year they're very friendly and they will support you
next I know a great developer in person like uh in in July I attend another conference in
Singapore and I met many great people here here here Maya Shavin from
Microsoft, Evan You creator of Vue.js and Tan Li he a core member of svelt
next and I have chance to meet you at JSConf Korea this year and one thing that I
received from doing open-source software is that I receive a lot of things at a random moment in
the day I some online guys told me that yeah uh your software just makes me just
just make my life easier and thank you for that and that's the feeling that I never get
when I doing a nine to five work and yeah I think that's the most rewarding
and next so how to do that so so I I'm gonna share some tips some of my personal tips to build your
own open-source project and I think there's a lot more but I just picked some of my
first a uh I think this is a more important thing the most important question is how to choose an
open source project to work on and there are many answers so but it in my opinion that you have to
contribute to the project you use every day if you want to build your own software open source
software you have just you have that software that have to solve your own problem you cannot
find some random project online and hey I try to I try to contribute to it but it's very difficult
to someone to contribute to project that we do not have any context at all so for example that in the
in the daily work I use React-hook-form a lot so until now I can contribute to them and it's kind of
my way to find and help the outer and maintainer. Second one is a maintainer
because you know building an open source project is very hard and shareful so it would be easier
for you to have someone to discuss technical and motivate you to continue the project
the next one is that if you release an open source project do not start it at
1.x because a new project is full of proof of concept and experiment and think
my head chain very quickly and the sample the semantic version if the job software starts with
one topic it means your the next version has to be backward compatible with the previous version
uh otherwise you have to increase to the to the major version right like but uh yeah if
it's a new project I recommend that you just use the major version zero
it's for initial development and anything can change but the public API should not be stable
so you can see that many famous projects but they never it's not never it take a very long
time to reach 1.0 for example svelte-hmr is very close to 1.0 but yeah not yet
and next is please do use your own software so when you use your software as a normal user you
can add more features or you can adjust it to make it reusable for example when I view jest -preview
um oh I want I just want to put the HTML into the browser that's all but when the
more I use I add many features to it like the auto-reload when in the demo
before when whenever I hit save the test run finished and the browser reload automatically
and I have to when the more I use I have to work on code how to process that app
or image otherwise it's just the plain HTML in the browser and you can ask for feedback
because when you build your software your software can be subjective and please ask your friend your
college and your network that if they use your software and you can give you some feedback and
after a while maybe if your software so uh so a kind of proof how real people
people will come and watch out for issues and discussions tab on GitHub
let's learn from other so do not reinvent the wheel so when we build an open software project
there are many problems you have to solve that someone already thought so uh learn from them and read
their source code and maybe steal a little bit but remember to gratitude to them. Picasso said
Good artists copy , great artists steal. so don't worry that you sometimes you
have to learn about as code and my project have to learn many things from wheel from
create-react-app and many other projects. And another advice is you can write good documentation so uh
because it's very easy for you if you build your own software but people around the world they have
very difficult different UK and you sometimes you do not imagine how the how the
road use your own software so just describe what problem you trying to solve how the installation
installation and use it and what can we ask they might encounter when they use your software and
it's very uh if you prefer React, docusaurus and if you prefer Vue, you can use
vitepress and this is my documentation. I try to make it very easy to understand and
how to use it uh how to yeah you can run a demo on there you can have to plug it into your code
and next it will be a great software but please share it with the world. I
think Twitter is the most amazing platform you can share something with the world and
maybe you can write some blog post and share it with other in the tech event when I like I
am I am doing and yeah last but not least that contribute to open source one today and I hope
you will have a lot of fun and learn a ton when doing open source projects and thank
you for attention and this is a link to jest-preview and if you're a front-end engineer
maybe you chuckle developing a test. So give it a try and give it a star since it's free
so thank you very much and the slide available here yeah thank you very much.