Cover image from What to do when you feel overwhelmed by code by Gonzalo Manrique.

Original post on hashnode written June 13, 2021.

Previous Outreachy article: Meet the latest Outreachy and Ushahidi Intern.

Real work starts 🏋️

This time around, I interacted a lot with parts of Ushahidi's platform-client that I have never been to. The task involved replacing heavy dependencies/libraries with lightweight libraries to improve performance. The first step I took was to add webpack-bundle-analyzer plugin, to see what the dependency tree-map and bundle sizes looked like. I wondered what to do with what was in front of me, the whole time I stared at the screen. Thankfully there were some resources to help understand how to use it.

In the end (i.e. during the weekly sync call), Anna (my mentor) helped to point out dependencies that were heavy and need to be replaced with lighter alternatives. The platform uses moment.js for date-time formatting and manipulation, and d3.js for chart visualisation. These were the two libraries I was to find alternatives for. I have heard of these libraries but never worked with any of them until now. So in these past two weeks, I have been learning how they work, the vocabularies associated with them, and what library alternative to use instead.

Bundlephobia ❤️

In the process of looking for alternatives, I came across this online tool called bundlephobia. This has been very helpful in comparing the sizes of libraries (by percentage, and by their minified and minified + gzipped sizes). The only new term here was gzip. And this CSS tricks article, the difference between minification and gzipping, helped to understand what the term means. Some other materials talked about gzip and webpack (which may be useful in a future task where I have to deal with webpack). Bundlephobia also provides information on whether the library is tree-shakable or not. Looks like a really cool tool.

Week 2: The easy part 😃

momentjs to dayjs

Bundlephobia revealed alternatives like luxon, date-fns, dayjs etc for momentjs. The "the easy part" was not entirely easy, you'll see. Even though bundlephobia "helped my ministry" a lot, I still had to spend a lot of time reading and comparing documentations. Took in a lot in a very short time. The result? - headache 🥺. The you don't (may not) need Momentjs resource, which Anna shared during the contribution period, was particularly helpful.

The moment it was decided that dayjs is "the chosen one", the rest of the journey was a smooth ride. Anna also helped with a detailed guide to finding where to test the output of my changes. According to bundlephobia, dayjs is 96% smaller than momentjs (wow!). The things I had to do differently while migrating were not much, as both use similar API. I got to import only the plugins needed. Just 4 in my case - relativeTime, localizedFormat, utc and isSameOrBefore plugins. And then I had to make them usable after importing them by adding dayjs.extend(plugin-name-goes-here) in the file I need to use them in. See dayjs documentation for how it is used in case you also find it attractive 😌 - it's very well documented (thankfully).

Oh, and all jasmine tests passed 🤸🎉 while working on this task. During the contribution period, I remember I spent 2 full weeks trying to get one test to pass after I added some lines of code, and how Anna intervened. Lessons from that experience helped me this time. I hope those tests keep cooperating because I'm going to be having business with them often from the look of things. Lol.

Week 3: El problema 🥺

Activity-view and d3 alternative

Looking at the activity-view (activity-view is just Ushahidi's "fancy name" for one of their web pages 😉), one would think it's one very easy task. Little did I know I was going to spend close to 2 days trying to get the charts to display in my deployment. Anna was helping most of the time - Cecilia too. According to Anna, this view hasn't been given love and care in a long time (I'll like to think of myself as a "love and care expert" from this point onwards 😉. Activity-view doesn't even show love in return 🥺).

Experimenting with two very small suggested d3 alternatives, frappe-charts and chartist, hasn't been rosy. Especially because their documentation guides have not been so helpful (so far). They are both sooooooo different from d3 - another cause of worry. There are not much examples and tutorials on them, and there is also the problem of how to use them in angularjs (thankfully, migration from angularjs has started).

Frappe-charts is more actively maintained, has fewer options built-in (from what I see so far), but no plugins for options not built-in e.g. no axis title. Chartist on the other hand has plugins for options not built-in. The problem is that chartist was last updated 2 years ago (as at the time of writing), the plugins are way older, and the documentation only states how to use it with bower. I've not been able to get the tooltip and axis title plugins to work either 😔

Frappe looks like a good option, if only there are good tutorials on it. I hope I will be able to figure out how it can be used in this project (with my mentor's help). You can drop me suggestions or materials in the comments in case you (have worked with charts and) have any for me.

Single SPA 😍

There is one new term I have learnt about (from Anna) that I haven't written about yet, called single SPA. It came up because of the need to migrate from angularjs to a newer framework - since angularjs will reach end of life later this year in December 2021. It is a javascript framework for frontend micro-services. From what I read about it, you can even have frameworks like react, angular, vue etc cohabitate in the single-page application you create with it. It excites me that I may get to work with it. I also think about how I may soon be writing about my struggles with it like I have done for d3 😂

Conclusion

Anna tells me there are parts of the project she isn't so familiar with too, and that we'll figure it out together. Knowing this has helped me stop beating myself too much when I don't know something (still working on this though 😁). One thing I am grateful for is that I didn't attempt the d3 task before that of momentjs. My momentjs to dayjs pull request (PR) still has to pass through Walter. I hear he has an "eagle eye" for detecting bugs. I hope the PR "finds grace in his sight" 😉.

Everybody struggles... I find that it is good for us that these struggles come up. This way we grow and become a better support to others. You can drop a link to an article you have written, about what you struggled with while working on a task or project. Or just briefly type your experience and/or advice in the comment section below. I will gladly create time to read through. Hoping the next couple of weeks will be lenient. More gist coming soon.

Find me on Github, Twitter and/or LinkedIn.

Next Outreachy article: Think about your audience.