How I learned javascript creating npm package.π₯π₯
I did it. You can do it too!
A detailed thread so, set back and enjoy π§΅π
I did it. You can do it too!
A detailed thread so, set back and enjoy π§΅π
1/ What I have learned:
π₯ My first #opensource project ever.
π Charting and #DataVisualization using D3.js.
π§ͺ Testing using Jest.
π¦ Bundling using rollup.
ποΈ Writing high quality comments.
βοΈ Writing Readme docs.
β‘οΈ More ES6 practise.
β¬οΈ Deploy demos on github pages.
π₯ My first #opensource project ever.
π Charting and #DataVisualization using D3.js.
π§ͺ Testing using Jest.
π¦ Bundling using rollup.
ποΈ Writing high quality comments.
βοΈ Writing Readme docs.
β‘οΈ More ES6 practise.
β¬οΈ Deploy demos on github pages.
2/ Backstory π, (if not interested β skip to tweet #4).
Creating packages requires a lot of advance learning and docs diving.
I was working on basecamp clone using laravel when I needed to implement their hill charts. π
github.com/nagi1/hill-chaβ¦
Creating packages requires a lot of advance learning and docs diving.
I was working on basecamp clone using laravel when I needed to implement their hill charts. π
github.com/nagi1/hill-chaβ¦
3/ My javascript wasn't that good (who is π
), but I made it my goal to implement hill charts using pure #javascript to allow wrapping it using any front-end framework.
More about hill-charts π
basecamp.com/features/hill-β¦
More about hill-charts π
basecamp.com/features/hill-β¦
4/ It was the first time I merge PRs and creating tags, I felt happy π.
Someone PRed a new feature (Dark mode). I had to go through all his code fix alignments and suggest better solutions.
Someone PRed a new feature (Dark mode). I had to go through all his code fix alignments and suggest better solutions.
5/ D3js was damn hard π¬!
Some d3.js courses were 7 weeks long!
I learned good portion in just 7 hours. π
Just because I had problem and I needed a very specific solution to solve it.
Some d3.js courses were 7 weeks long!
I learned good portion in just 7 hours. π
Just because I had problem and I needed a very specific solution to solve it.
6/ I fell in love with jest π.
@fbjest it was breeze to learn and use.
I loved the way it describes code like writing poetry.
BTW I didn't follow any youtube tutorial. Just read the documentation and I was ready to go.
@fbjest it was breeze to learn and use.
I loved the way it describes code like writing poetry.
BTW I didn't follow any youtube tutorial. Just read the documentation and I was ready to go.
7/ The code needed to be clear to my future self and to others so I had to learn how to properly structure comments.
I adore @taylorotwell's way of writing comments it feels like care and love.
βοΈ 3 lines, every line 3 character less than the next one.
I adore @taylorotwell's way of writing comments it feels like care and love.
βοΈ 3 lines, every line 3 character less than the next one.
8/ Surprisingly this way of writing comments gave me the opportunity to explain and summarize better.
Like what twitter does with it's 140 chars!
Like what twitter does with it's 140 chars!
9/ I wrote few readme docs before, but this one I spent the most with!
I had to perfect this one, so I created a little demo took a screenshot it looked beautiful.
ππ
github.com/nagi1/hill-chaβ¦
I had to perfect this one, so I created a little demo took a screenshot it looked beautiful.
ππ
github.com/nagi1/hill-chaβ¦
10/
β Logo or screenshot π
β Table of contents for easy navigation.
β Interactive demo.
β Multiple bundles options and a freaking cdnπ₯
β Examples and API.
β Explain theory.
β Copyright notice.
β Roadmap (Todo List).
I had fun!
β Logo or screenshot π
β Table of contents for easy navigation.
β Interactive demo.
β Multiple bundles options and a freaking cdnπ₯
β Examples and API.
β Explain theory.
β Copyright notice.
β Roadmap (Todo List).
I had fun!
11/ It was a great chance to improve my ES6 skills.
I didn't know that you can make OOP class using javascript!
I didn't know that you can make OOP class using javascript!
12/ Bundling is compiling your ES6 code to format that all browsers can understand!
Rollupjs didn't play nice with me. Neither d3.js it was huge that it took me 12 hours of tinkering with rollup options and read every blog post about it to produce reasonable bundle size.
Rollupjs didn't play nice with me. Neither d3.js it was huge that it took me 12 hours of tinkering with rollup options and read every blog post about it to produce reasonable bundle size.
13/ CI integration π
I had a lot of fun configuring @travisci and @scrutinizerci that gave me insights about my code and test coverage.
I didn't stop tuning my code until it reached 10.00/10 code quality!
I had a lot of fun configuring @travisci and @scrutinizerci that gave me insights about my code and test coverage.
I didn't stop tuning my code until it reached 10.00/10 code quality!
14/ You don't need hosting or domain to deploy your demo. @github's pages got you covered.
π₯ Combined with github actions it can build and deploy the demo automatic with every push/release.
π₯ Combined with github actions it can build and deploy the demo automatic with every push/release.
15/ Final thought...
I didn't plan any of this. I learned a lot just by following the natural path of trial and error.
It all started with my unfinished project and my desire to learn javascript and they had me! Hi I'm Hill-Chart and my life is kinda crazy!
I didn't plan any of this. I learned a lot just by following the natural path of trial and error.
It all started with my unfinished project and my desire to learn javascript and they had me! Hi I'm Hill-Chart and my life is kinda crazy!
Oh Did I forget to mention that I wrote a blog post about it?
If you're interested to know I built hill charts and the math behind it. ππ
ahmednagi.com/hill-chart/
If you're interested to know I built hill charts and the math behind it. ππ
ahmednagi.com/hill-chart/
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
