DEV Community

Dragoș Străinu
Dragoș Străinu

Posted on

My first open-source project

Preface

Almost 4 years ago when I started University I participated in my first Hackathon. And from that day I understood that I really enjoy building things and contributing together with other people. Participating at hackathons I primordially used JavaScript as it is a perfect language to develop fast prototypes. I used a lot of open-source libraries and tools and at some point, I wanted to also contribute to any project as I thought that contributing will help me to raise my developing skills.

So occasionally I was trying to find a project on GitHub there I can contribute. And I faced the problem that I think everyone who is trying to contribute had. The problem is finding the right project and the issue that you can solve. I was surfing sites like https://up-for-grabs.net/ and others searching for a JavaScript library or package where I can contribute. In most cases even if the issues were labeled with good first issue or first-timers-only they involved a deep understanding of the project. And in cases where I found something that I can implement other contributors were already working on the issue.

In the end, I contributed to a project by updating the README and at that time it was an achievement for me 🎉. But I wanted to contribute with code so my first code contribution was (as I suggesting) converting the SVG clock logo to a real-time clock for http://rebble.io/. It was my next achievement. But I was still looking at something interesting to contribute. But everything changed when I created my first npm package.

mOcKiNgCaSe

The idea of the package came to me after explaining to someone the differences between camelCase, snake_case, kebab-case. I remembered the mocking spongebob meme and did a quick research to see if there isn't such package already.

The purpose of the package is to change a string to sTrInG. I thought about naming it spongebobcase but in the end, decided to stick with mockingcase as it sounds better(in my and friends opinions). Later I found an article on Wikipedia Studly caps which explains about this case.
So in one or two days I already published the first version of the mOcKiNgCaSe on npm. Even at that point, I learned a lot about semantic versioning and publishing npm packages.

Quickly after I made a post on reddit.com/r/javascript/ to see people opinions. Some of them reproached me because I made a useless package, some praised me because I learned something new and others just liked the idea of the package itself and it even received some ⭐ on GitHub. People who liked the package started contributing to it, like adding unit tests and optimizing the converting function.
I decided that I will add more features even if it looked over-engineering for such kind of package. I thought about some features that can be added and opened the issues in the repo and added the project on the https://up-for-grabs.net/ so others can contribute too.

As the package itself and the features that should be implemented aren't so difficult, this open-source project is very beginner friendly. At the moment the project has already 11 contributors who did a lot of good work and really improved the package. Contributing to this projects teaches you about software versioning, unit testing, continuous integration, declaration files for TypeScript, documentation but also a lot of interesting things about JavaScript and development itself. I even created mockingcase bindings for ReasonML.

At the moment the package has these functionalities:

Converting a string to mOcKiNgCaSe

mOcKiNgCaSe('foo-bar');
//=> 'fOo-bAr'
Enter fullscreen mode Exit fullscreen mode

Using random option

mOcKiNgCaSe('aa', {random: true});
//=> 'aa'
//=> 'aA'
//=> 'Aa'
//=> 'AA'
Enter fullscreen mode Exit fullscreen mode

Removing non letter characters

mOcKiNgCaSe('a13%$a', {onlyLetters: true});
//=> 'aA'
Enter fullscreen mode Exit fullscreen mode

Changing the order of converting

mOcKiNgCaSe('foo bar', {firstUpper: true});
//=> 'FoO BaR'
Enter fullscreen mode Exit fullscreen mode

Supporting array

mOcKiNgCaSe(['foo','bar']);
//=> 'fOoBaR'
Enter fullscreen mode Exit fullscreen mode

Override String.prototype

'foo_bar'.toMockingCase();
//=> 'fOo_bAr'
Enter fullscreen mode Exit fullscreen mode

Having a global config

const mOcKiNgCaSe = require('mockingcase').config({onlyLetters: true, firstUpper: true});
// const mOcKiNgCaSe = mOcKiNgCaSe.config({onlyLetters: true, firstUpper: true});

mOcKiNgCaSe('foo bar42');
//=> 'FoO BaR'
Enter fullscreen mode Exit fullscreen mode

You decide if you like the package and if it is somehow useful in your point of view. But as I think it can be used as a joke to display funny messages or errors to users. The important feature (in my opinion) that will raise the popularity of this package is changes all text on an HTML page which will let developers use this package as a 1st April joke for their web application.

Conclusion

Even if it may look like a useless project to someone, I learned a lot during the development of it and also gave others beginner contributors a chance to make their first contribution to open-source. Now I am focused on thinking of new features that will let other people try to implement them. If you like the project and have some interesting ideas for it or just want to solve current issues don't hesitate to contribute.

Top comments (0)