In this post I want to tell you how my contributions to Hacktoberfest2020 are going, although there are still 21 days to go!
This week has been a blast, I literally spent 5 days without stopping programming and I had a great time (but I don't recommend it as a lifestyle, for a hackathon is worth xD).
As I've already finished 4 PRs which is the star number of this hackathon (I'm looking forward to planting my tree 😍), I wanted to tell you what I've been doing.
Since I've been contributing little, I wanted to start with technologies that were more familiar to me, so I only had to fight with forks and git origins. That's why I chose to create a feature in https://stylestage.dev/ as my first PR and put into practice my beloved SASS to generate the CSS that was require.
If you still haven't finished your PRs or you want to keep contributing I absolutely recommend you to participate in this project, it's amazing!
New Stylesheet Submission:
- [x] Have you followed the guidelines in our Contributing document?
- [x] Have you checked to ensure there aren't other files using the same name as yours?
- [x] Have you filled in at least the required data for
- [x] Is the value of
stylesheeta full URL that is publicly accessible and renders an unminified, compiled CSS file?
- [x] Do your styles pass proper contrast for accessibility?
- [x] Have you included
@media (prefers-reduced-motion: reduce)to remove animations on
- [x] Did you style the
- [x] Have you checked on a real mobile device to ensure your responsive design doesn't cause overlaps or overflow scrolling?
Hi :) I read the whole guidelines, I took care and check everything with WAVE extension and my mobile also!
If anything else is needed, I'm here to fix it
Thanks in advance for this awesome project
And once it is merge you can see your result live! 😍
Then, searching among projects with the Hacktoberfest2020 tag, I found one where they were looking to migrate their CSS to LESS with the BEM methodology for their class nomenclature. As I really liked the initiative, I helped them with it. It allowed me to get to know Apache Cordova a bit, since I had never used it before.
Create LESS structure. Add the global packages needed to run LESS compiler and autoprefixer to the Readme and push the generated styles in asset/css folder. Add BEM methodology to name classes and structure LESS code. PS: Exclude .idea in .gitignore (folder automatically generated by VS Code) Implementation of ISSUE: #23
Once I had gained confidence with the way of working in open source I decided to try out projects I already knew before.
As a huge fan of the work that FrontEndFoxes does for the community of FrontEnd developer women, I decided to contribute to their new website by adding the unit tests setup, first test cases and the CI workflow that won the Runner-Up award at GitHub Actions Hackathon (which I'm very proud of and I was looking forward to implementing it in a real project).
Create a CI.yml file to run in each PR/Push to main branch: npm install, npm run lint and npm run test:unit (with coverage included). Add packages need for unit testing in Jest in Vue 3 (@vue/cli-plugin-unit-jest, typescript and vue-jest ^5.0.0-alpha.4) Configure jest to generate coverage when testing. Start writting unit test for App.vue, Views and Components.
Finally, as expected, I couldn't leave out my dear NuxtJS, so I caught up to see if they needed anything. I was told I could help migrate the documentation from the http module to the new Docs theme and here it is 👁.
- [x] Install content docs
- [x] Add new static assets
- [x] Migrate content: change alerts and add categories & position
- [x] Remove vuepress old-docs
- [x] Add new Netlify configuration
- What about the thumbnail template on figma? Where I have to use it?
- There's a new color palette for this module? Which one?
These weeks I will continue to contribute to the wonderful world of open source and I hope to see you for some PR. May the good practices be with you!