My contributions in this year 2020 Hacktoberfest

#hacktoberfest #nuxt #frontendfoxes #css

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

Dawntraoz posted on Oct 04, 2020

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 💜

View on GitHub

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

Dawntraoz posted on Oct 05, 2020

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

View on GitHub

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

Dawntraoz posted on Oct 06, 2020

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

View on GitHub

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

Dawntraoz posted on Oct 08, 2020

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

View on GitHub

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!

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide