DEV Community

loading...
Cover image for My contributions in this year 2020 Hacktoberfest

My contributions in this year 2020 Hacktoberfest

Alba Silvente πŸ’ƒπŸΌ
Senior Frontend Consultant at Passionate People πŸ’œ blogger, speaker & open source contributor. GoogleDevExpert in Web - Nuxt & Storyblok Ambassador
Originally published at dawntraoz.com ・2 min read

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!

Purpleland #69

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 title, author, and stylesheet?
  • [x] Is the value of stylesheet a 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 *,*::before,*::after?
  • [x] Did you style the .skip-link?
  • [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! 😍

https://stylestage.dev/styles/purpleland/

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.

Use LESS and BEM implementation #29

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

fix #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).

Add CI workflow, jest and basic unit tests #26

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.

ISSUE: #23

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 πŸ‘.

docs: migrate from vuepress to nuxt content #133

  • [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

Questions:

  • 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!

Discussion (12)

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Great work Alba! πŸŽ‰

Collapse
dawntraoz profile image
Alba Silvente πŸ’ƒπŸΌ Author

Thank you so much πŸ’œ

Collapse
natterstefan profile image
Stefan Natter πŸ‡¦πŸ‡ΉπŸ‘¨πŸ»β€πŸ’»

Great work!

Collapse
dawntraoz profile image
Alba Silvente πŸ’ƒπŸΌ Author

Thank you Stefan 🀩

Collapse
krishnakakade profile image
krishna kakade

Great congrats

Collapse
dawntraoz profile image
Alba Silvente πŸ’ƒπŸΌ Author

Thanks πŸ’œ

Collapse
micahlt profile image
Micah Lindley

Congrats! It was a pleasure to have your contribution on our repository 😊

Collapse
dawntraoz profile image
Alba Silvente πŸ’ƒπŸΌ Author

Oooh, thank you πŸ’œ I learnt a lot there πŸ€—

Collapse
5t3ph profile image
Stephanie Eckles

Yay, congrats! Super pumped you chose StyleStage.dev as one of your 4! :)

Collapse
dawntraoz profile image
Alba Silvente πŸ’ƒπŸΌ Author

Thank you so much 🀩
The idea and project is amazing πŸ’œ So proud of being in that list πŸ’ƒ

Collapse
pika1998 profile image
Prafulla Raichurkar

That's great, keep it up πŸ˜ƒ

Collapse
dawntraoz profile image
Alba Silvente πŸ’ƒπŸΌ Author

Thanks a lot! You too 🦾