DEV Community

dev.to staff for The DEV Team

Posted on

Hacktoberfest 2021 — Who's Looking for Contributors?

Hacktoberfest 2021 kicks off on Friday, October 1 and lasts through the end of the month!

Open source maintainers can drop links to/information on their projects in the comments below. The goal? To find helpful contributors seeking projects to improve in the name of Hacktoberfest!

Note for Maintainers: If you’d like your project to be eligible for Hacktoberfest contributions, you must classify it as a Hacktoberfest Project.

Participating in Hacktoberfest? Let us know in here. You can also use this thread as a reference for projects that are actively seeking contributions 🎉

If you're a maintainer who's interested in getting your repository ready for contributors, this handy guide from @bekahhw is a great place to start.

Discussion (60)

Collapse
coffeecraftcode profile image
Christina Gorton

Happy Hacktoberfest, everyone! Here's a breakdown of some of the Hacktoberfest-eligible bugs in the Forem codebase. We'd love to see you tackle these in October. 🎃
Frontend

Organization secret code not copied to clipboard #13434

Describe the bug

When copying the organization secret code with the special button, it says "Copied to clipboard!" but doesn't work in reality.

To Reproduce

  1. Go To Edit Profile
  2. Go to Organization
  3. Create an org (or switch to an existing one)
  4. Under Grow the team - Your secret code is: --> Copy Button image
  5. It does not copy the secret code

Expected behavior

Clicking on the button just copy the secret code. Or select it if it's not possible to copy.

Screenshots

image *Not copied in reality

Desktop (please complete the following information):

OS, version: Microsoft, Windows 10 Browser, version: Chrome, latest (88.0.4324.190)

Smartphone (please complete the following information):

Not specific to smartphones.

Additional context

I add that we can copy the secret code, just the special button doesn't work.


Clicking "Follow" [a tag] does nothing #14704

Describe the bug

Clicking the Follow [tag] button does nothing, i.e., does not add a tag to the set of tags I follow.

To Reproduce

  1. Go to a tag's page, e.g., https://dev.to/t/cpp.
  2. Click the Follow button.

Expected behavior

#cpp would be added to the set of tags I follow.

Desktop (please complete the following information):

  • OS, version: macOS 11.5.2
  • Browser, version: Safari 14.1.2 and Chrome 93.0.4577.63

I've tried both browsers: same (non)behavior.

Additional context

This must have worked sometime in the past since I follow #c and #go.


Fix prop-types errors #14837

After merging github.com/forem/forem/pull/14635, we have a lot of prop-types errors in the console that need to be cleaned up. These errors can be observed throughout the onboarding flow and during general app usage when running the app locally.

Each error will need to be investigated to check whether the component.propTypes declaration needs to be changed, or whether the prop being passed to the given component needs to be changed.

We can/should complete this work in multiple small PRs (e.g. per page).


Right Sidebar Not Able To Scroll On PC #14806

egoTr avatar
egoTr posted on

Describe the bug On my computer, when I'm in a post with a sidebar on the right which shows User profile and More articles 👉 I can not scroll the sidebar to view more.

To Reproduce

  1. Go to a post
  2. Navigate to the right sidebar
  3. Try to scroll
  4. Can not scroll

Expected behavior The sidebar should scroll for showing more info.

Desktop (please complete the following information):

  • OS, version: Windows 10 | macOS Big Sur
  • Browser, version: Microsoft Edge 94.0.992.31 (Official build) (64-bit) | Safari 15.0 (16612.1.29.41.4, 16612) | Google Chrome 93.0.4577.82 (Official Build) (arm64)

Additional context The sidebar is fully shown in narrow width or on mobile.


Forem mobile hamburger menu scrolling bug #14757

Describe the bug

When navigating to the Forem hamburger menu and then scrolling down, you cannot scroll back up. The menu gets stuck and instead when you try to scroll up it scrolls the page underneath the menu. The only way to scroll up and down sucessfully is to press and hold as you scroll on the screen.

To Reproduce

  1. Open hamburger menu
  2. Scroll all the way down
  3. Try to scroll back up

Expected behavior

Scrolling up and down on the menu should work smoothly and independently of the page underneath the menu.

Screenshots

1vibe-hamburger-menu

I also recorded a quick video of this bug in action: loom.com/share/4ecf500774774367a16...

Desktop (please complete the following information):

This issue is not related to desktop version of Forem. It's only an issue on mobile menu.

Smartphone (please complete the following information):

  • iPhone 10
  • iOS 14.8
  • Safari, Chrome and Brave

Accessibility

Dashboard left-side navigation should be a list #14841

Describe the bug

The left-side navigation options on the dashboard page (desktop view) are correctly wrapped in a <nav> element but they should also be wrapped in a <ul>, each as individual <li> list items.

This helps screen reader users navigate between the items, knowing how many options are in the list and their current position in that list.

To Reproduce

  • Using a screen reader visit the left-hand navigation on the /dashboard page
  • Notice the number of items in the navigation is not announced

Expected behavior

  • Items are wrapped in a list and the number of items is announced when using a screen reader

Screenshots

screenshot of the navigation panel


Dashboard pages shouldn't have two banner landmarks #14840

Describe the bug

On the user dashboard there are two "banner" landmarks:

  • The <header> at the top of the page (with logo, search, etc)
  • The <header> containing "Total post reactions", "Total post views" etc

The same issue is observable across the other dashboards also (e.g dashboard/following_tags).

On each dashboard, we should only have one banner landmark on the page. While the wrapper for the "total post reactions" etc can just be changed to a div, this content should also be moved to live inside the <main> element, and this change might need a little bit of CSS tweaking to make sure everything continues to look consistent.

To Reproduce

  • Log in to the app
  • Go to /dashboard
  • Open up the dev tools and run the axe extension
  • Notice the error "Document should not have more than one banner landmark"

Expected behavior

  • The error should not appear in the axe report
  • Visually everything should remain the same
  • The same should apply to the other dashboard pages

Screenshots

Screenshot of the dashboard with the axe error highlighted and the header area highlighted

Additional context

Each dashboard page could be tackled in separate PRs if this keeps things more manageable.


"Slide in" menus are not keyboard accessible #14839

Describe the bug

There are a few places in the app where we show a "hamburger" menu to open more details. For example:

  • Left side of the header when in a mobile viewport
  • Left and right side of a tag page (e.g.dev.to/t/javascript) when in tablet viewport or smaller

These menus currently lack the ARIA attributes to convey they are popup views, and the focus management required to reach and operate them properly by keyboard. For example, if you open the menu with the keyboard, then keep pressing tab, you'll notice that your keyboard focus continues to scroll behind the menu content and it's actually very hard to reach any of the links in the menu.

Although these views are primarily visible when using a touch device, they need to be keyboard accessible because:

  • Some users will utilise keyboards, switch controls, or other assistive technology with a touch device
  • Screen reader users rely on keyboard focus being in the correct place when dialogs open/close, even when swipe gestures are used on mobile devices
  • Desktop users may see these layouts if zooming in to view the page more clearly

To Reproduce

  • Using your devtools, or by resizing/zooming the window, shrink the viewport so that the hamburger menu is visible
  • Using the keyboard, Tab to the hamburger menu button and press Enter
  • Keep tabbing and notice it's really hard to reach the menu content and you're scrolling behind the menu

Expected behavior

I think the most straightforward approach will be to treat these menus like our dropdowns. We should be able to re-use our initializeDropdown helper function to get all these behaviors without much additional code, but in summary:

  • The "hamburger button" has the ARIA attributes aria-haspopup, aria-controls and aria-expanded, so that screen reader users know that it activates some dynamic content
  • When open aria-expanded is "true"
  • When closed, aria-expanded is "false"
  • When the menu opens, focus is sent to the first link inside it
  • When open, the Escape key closes the menu
  • When closed either by Escape or by clicking the 'X' button, focus is returned to the "hamburger button"
  • If the user Tabs past the last link in the menu, the menu closes

Screenshots

user-images.githubusercontent.com/...


Tag page - All page content should be contained within landmarks #14838

Describe the bug

For accessibility purposes, all content should be contained within landmark regions. On the tag page, e.g. dev.to/t/devops, the content in the left and right sidebars (desktop view) are not within any landmark:

screenshot of the tag page for DEV's devops tag. The right sidebar and left sidebar content have a red box around them to highlight them

In this case, the content could reasonably exist within <aside> elements ( "complementary" landmark), since they support the main content, but are not essential to it, and make sense when separated from the main content.

NB: This refers to the large-screen 'desktop' view pictured above only. On smaller screens, the content is triggered as a pop-up menu. For the purposes of this issue we do not wish to change any of the markup for the pop-up menu.

To Reproduce

  • Visit a tag's page
  • In devtools, use the axe extension to check the page
  • Notice the error "All page content should be contained by landmarks"

Expected behavior

  • The error should not appear in an axe report
  • When I navigate by landmarks using a screen reader, I should be able to select a landmark to navigate to this sidebar content

Additional context

There is a different class of accessibility issues associated with the smaller screen 'menu popup' view for this content. It will be captured in a separate issue, and needn't affect the fix here.


Backend

Incomplete surrogate-key cache invalidation logic #6417

Currently we user surrogate keys to determine when certain endpoints should have their caches cleared, such as an article API endpoint like this...

set_surrogate_key_header Article.table_key, @articles.map(&:record_key)

And then we call article.purge which magically makes any endpoint with that article's record_key have its edge cache expire.

More on surrogate keys...

docs.fastly.com/en/guides/getting-...

The issue with the above logic is that a new article which should become part of that endpoint will not flush its cache if created. So it will not show up on that endpoint until another article which fits within the above @articles is purged. This makes it kind of random to find out when it will be included.

article.purge is a magic method to create a purge ping which uses the appropriate surrogate header.

A solution for this could be a surrogate key like this...

set_surrogate_key_header Article.table_key, "tag-index-endpoint-#{tag}", @articles.map(&:record_key)

and then we make a specific purge call when a new article should purge it like purge("tag-index-endpoint-#{tag}" when an article is created.

Our current situation isn't causing any radically wrong behavior and the "random" purging is working okay but we should look into this as we go about bigger changes here.


Tag "taggings_count" are not always updated correctly #6586

Describe the bug

Each tag has an associated taggings_count which contains the number of items they are associated with (in our case either articles or listings).

The problem lies in the fact that some of these counts are incorrect in the DB.

I found this out by playing with the Tags API which returns tags sorted by taggings_count in descending order

For example:

  1. archlinux according to the API - dev.to/api/tags - is the third most used tag but it's very unlikely that is true. Its tag page - dev.to/t/archlinux - lists 50 articles and even taking into account all listings it might have been used in, it doesn't add up
  2. dev.to/api/tags?per_page=15 shows that devops is more popular than showdev but devops page contains 2917 articles, showdev page contains 3110. Again, I don't think there are enough listings tagged with devops to account for the difference

Thus, the bug.

This counter is managed by automatically by the acts-as-taggable-on gem.

Expected behavior

I'd expect the counter to reflect the correct number of items that have been tagged with it.

I see two possible explanations:

  1. there's an error in our setup, in respect to the usage guide
  2. it has something to do with tag aliasing (?)
  3. there's a bug in the gem itself. I found a few issue tickets that might point us in this direction:

Mobile

Pull-to-refresh does not trigger if you do not "come to a halt" at the top of the page. #7886

Our app has really nice pleasant web pull-to-refresh functionality on most pages (not all, we don't want this behavior on some pages like chat, for example).

But the way it works, the user needs to be stopped at the top of the page and then initiate a pull up before it works like a charm.

I've hacked away at this a bit so I know it's possible to fix with some logical adjustments to how the whole thing works, but I think it needs a finer solution than whatever I'd hack together quickly.

Code is here:

github.com/thepracticaldev/dev.to/...

Hope somebody wants to give this a try 😄


Other

Left-To-Right-Override, invisible unicode chars #4969

Describe the bug Looks like currently we can create posts with "U+202D" (LEFT-TO-RIGHT OVERRIDE) and other Invisible unicode characters

Here's the post

To Reproduce

  • Copy U+202D unicode character
  • Create a new post and set title to U+202D character
    • Same with hastags, Canonical URL & Series.

Expected behavior Should not allow those invisible unicode characters

Screenshots image

Desktop (please complete the following information):

  • OS: Windows 7 64bit
  • Browser: Chrome
  • Version:

Additional context I also copy pasted characters from here emptycharacter.com/


Clicking "Follow" [a tag] does nothing #14704

Describe the bug

Clicking the Follow [tag] button does nothing, i.e., does not add a tag to the set of tags I follow.

To Reproduce

  1. Go to a tag's page, e.g., https://dev.to/t/cpp.
  2. Click the Follow button.

Expected behavior

#cpp would be added to the set of tags I follow.

Desktop (please complete the following information):

  • OS, version: macOS 11.5.2
  • Browser, version: Safari 14.1.2 and Chrome 93.0.4577.63

I've tried both browsers: same (non)behavior.

Additional context

This must have worked sometime in the past since I follow #c and #go.


"Latest" feed occasionally shows posts out of order #14709

Describe the bug

Occasionally, when viewing the /latest feed, users can see more recently published posts appearing below older posts. For example:

screenshot of DEV latest feed. A post is circled that shows it was published "1 hour ago", and above and below it are posts from 2 hours ago

Initially I thought this was an issue coming from the API, but I think it might actually be to do with how the frontend constructs and inserts paged-in articles in the feed. In the example screengrab above, the network responses shows that the "Tracking responses..." article should have appeared in a different part of the sequence (the surrounding articles pictured above were not returned from the same network fetch).

TL;DR - it needs more investigation, but I think the source of the issue may be in how the paging behaviour plays with the chronological feed.

To Reproduce

  • Go to the /latest feed
  • Start scrolling and keep an eye on the published at date on the feed cards
  • Eventually you'll see some that appear out of chronological order

Expected behavior

The articles in the "latest" feed should appear in the order they were published at, with the newest first.


"My Tags" section occasionally doesn't populate #9828

Describe the bug

When navigating around Dev.to the my tags list section of the side bar occasionally will not populate. Refreshing the page seems to always fix this. Sometimes the is a console error at the same time there is a failure.

To Reproduce

  1. Go to the dev.to home page and sign in.
  2. Change from feed to week and watch the my tags section
  3. also try cycling through the different feed types (week/month/year/infinity/latest) and note that every other click results in no "My Tags" list
  4. Intermittently you can go to an article and navigate back to the homepage with the "DEV" Logo and also see the "My Tags" list not present

Expected behavior

"My Tags" list should always populate

Screenshots

Screen Shot 2020-08-17 at 11 24 57 AM Screen Shot 2020-08-17 at 11 24 46 AM Screen Shot 2020-08-17 at 11 11 10 AM Screen Shot 2020-08-17 at 11 10 38 AM

Desktop):

  • OS, version: MacOS 10.15.5
  • Browser, version: Chrome 84

Additional context

I tried this both in and out of incognito mode. The only difference seemed to be that incognito mode did not have the console errors


Happy Hacktoberfest! 🧡
Collapse
karishmashukla profile image
Karishma

Happy Hacktoberfest! I started building a simple UI component library for React called Chic UI. As it is relatively new, there are lots of components that can be added :) If you code in React, then contributeee! 🦄
Repository: github.com/karishmashuklaa/chic-ui

Collapse
yasionfire profile image
Yasio

Coders Railroad
Hey. Check out coders-railroad, a fun Hacktoberfest automated project. Add your cart to the HF2021 train by learning how and submitting a PR :) 🚂

GitHub logo YasiOnFire / coders-railroad

Fun Hacktoberfest project

CodersRailroad 🚂

Netlify Status GitHub contributors PRs Welcome Twitter share

This is a simple project made for Hactoberfest. An easy entry to Pull Requests. You can add your cart to the HF train by submitting a PR.

See the train in action: >>> coders-railroad.netlify.app/ <<<

How to contribute?

  1. Fork repo
  2. Clone your fork
  3. Run yarn
  4. Add your cart to src/assets/data.json and run yarn serve to see your cart
  5. Run yarn test:unit
  6. Create your branch, commit, push, create pull request

Cart config example:

{
  "name": "YasiOnFire"
  "text": "Yasio",
  "cart": 1
}
Enter fullscreen mode Exit fullscreen mode
property description
name your Github name
text your message to show on cart (max 22 chars)
cart # of cart to use (see below)

Avaiable carts:

__.oO.oOo.oOo.oOo.__
|                  | 
|        #0        | 
"OO--------------OO"=
                      
_____________________ 
|                   | 
|        #1         | 
"OO---------------OO"=
  ________________
 |                |  
 |                |  
_|       #2       |_ 
"OO--------------OO"=
      _________
 ____||_______||____
|
Collapse
ben profile image
Ben Halpern
Collapse
abhirajb profile image
Abhiraj Bhowmick

First time participating in Hacktoberfest?

Well, I have got a solution for all the newbie web devs out there.

If you are having a problem in searching for repos to contribute to, then read this till the end.

I present before you Gamesflow
Gamesflow is a combination of 5 web browser based games built on HTML, CSS and Javascript

This org account contains 5 repositories divided on the basis of level of advancement.

Beginners

For beginner repos, the HTML-CSS-JS code is based in one html file.

Repo 1. 2048 game

This repo is for a fun and animated version of the OG 2048 game. It is a game where you add numbers of similar values to reach the number 2048. So, this is a good place to start.

GitHub logo Gamesflow / 2048-game

An animated and fun version of the popular 2048 game. Built with HTML, CSS and Javascript.

2048 with Bubbles

An animated and fun version of the popular 2048 game. Built with HTML, CSS and Javascript.

How to play

Move the bubbles with your mouse and add up the same numbers. After adding up two bubbles, two more drop and will not return if they fall over the sofa.

You can turn off the music and sound effects from the home page and also choose the quality of game.

Screenshot

App Screenshot

Built with

HTML5 CSS JS

Contributing

Contributions are always welcome!

This repo is open for Hacktoberfest PRs.

See contributing.md for ways to get started.

License

MIT

🔗 Links

dev.to twitter

Feedback

If you have any feedback, please reach out to us at rainboestrykr@gmail.com

Support

bmc




Repo 2. Tetradic

This is a fun and music-based concentration game where you have to repeat the musical patters.

GitHub logo Gamesflow / Tetradic

A fun game with music for people to practice their focus and concentration.

Tetradic

A fun game with music for people to practice their focus and concentration.

How to play

Follow the pattern and repeat it with music to complete levels.

You can turn off the music and sound effects from the home page and just use the colors to play.

Screenshot

App Screenshot

Built with

HTML5 CSS JS

Contributing

Contributions are always welcome!

This repo is open for Hacktoberfest PRs.

First time Hacktoberfest participants are welcome.

License

MIT

🔗 Links

dev.to twitter

Feedback

If you have any feedback, please reach out to us at rainboestrykr@gmail.com

Support

bmc




Intermediate

For intermediate repos, there are separate files for languages along with a little intro to ThreeJS.

Repo 3. The Lost Ball

This game is inspired from Subway Surfers and it is a 3D runner type game. There is a high score feature too.

GitHub logo Gamesflow / The-Lost-Ball

A 3D runner game inspired from Subway Surfers

The Lost Ball

A 3D runner game inspired from Subway Surfers and built on ThreeJS.

How to play

Key Controls
Spacebar/Up arrow Jump
Right Arrow Go Right
Left Arrow Go left

Screenshot

App Screenshot

Built with

HTML5 CSS JS

Contributing

Contributions are always welcome!

This repo is open for Hacktoberfest PRs.

First time Hacktoberfest participants are welcome.

License

MIT

🔗 Links

dev.to twitter

Feedback

If you have any feedback, please reach out to us at rainboestrykr@gmail.com

Support

bmc




Repo 4. Shinigami World

For all of you anime fans out there, this game is a ripoff of The Lost ball game above but with completely different aesthetics.

GitHub logo Gamesflow / Shinigami-World

The anime version of "The Lost Ball"

Shinigami World

The official anime version of "The Lost Ball"

How to play

Key Controls
Spacebar/Up arrow Jump
Right Arrow Go Right
Left Arrow Go left

Screenshot

App Screenshot

Built with

HTML5 CSS JS

Contributing

Contributions are always welcome!

This repo is open for Hacktoberfest PRs.

First time Hacktoberfest participants are welcome.

License

MIT

🔗 Links

dev.to twitter

Feedback

If you have any feedback, please reach out to us at rainboestrykr@gmail.com

Support

bmc




Advance

For advance repo, there are different kinds of functions and variables for you to try your hand at them.

Repo 5. PongZoid

This is a mouse-controlled version of the OG pong game with a home page and color changing graphics. This had been a project of mine earlier and I had been working on its multiplayer version.

GitHub logo Gamesflow / PongZoid

A new version of the evergreen and OG pong game.

PongZoid

The new version of the OG and evergreen pong game with mouse functionality and cool colors.

How to play

Move the mouse to move the platform and don't let the ball touch the floor. Survive and create high scores.

You can change paddle speed and view more info on the home page.

Screenshot

App Screenshot

Built with

HTML5 CSS JS Based on a tutorial from here

Contributing

Contributions are always welcome!

This repo is open for Hacktoberfest PRs.

First time Hacktoberfest participants are welcome.

License

MIT

🔗 Links

dev.to twitter

Feedback

If you have any feedback, please reach out to us at rainboestrykr@gmail.com

Support

bmc




Thank you for reading!

Hope this will help you this month, feel free to reach out to me on twitter for any queries or suggestions. Happy Hacktober to you!

Collapse
prakh_r profile image
Prakhar Yadav

This is great @abhirajb
Can you please add labels hacktoberfest for issues section.
Also is it possible for the issue submitters to assign labels? Would be great if it were.

Collapse
abhirajb profile image
Abhiraj Bhowmick

Sure, will set up thoe labels asap.

Collapse
fullstackchris profile image
Chris Frewin • Edited on

Happy Hacktoberfest! I love participating each and every year :) I'm finally trying to be a maintainer this year, here's what I got:

react-use-please-stay

I have a fun and simple React hook called usePleaseStay that helps you animate your favicon and title like so:

usePleaseStay() example

The repository is react-use-please-stay on GitHub.

I've opened a few possible issues that I think could be further optimizations to this hook! I hope you'll consider taking a look at them or tackling one!

Hope to see you all out there this October on the front lines of open source software! Have fun!

Collapse
rizkyrajitha profile image
Rajitha Gunathilake

Hi everyone,

I am excited to announce that Linkin will be participating in 2021 Hacktoberfest 🎃.

LinkIn is a self-hosted link tree application that you can customize to create your own link tree page.

GitHub logo RizkyRajitha / linkin

Linkin is a customizable self hosted link tree platform.

Linkin logo

Linkin · DeepScan grade codecov license Github Actions

Linkin is a customizable self-hosted link tree application.

100% Free and Open Source 💯

Self Hosted, you own your data 💽

Customize your link tree with few clicks with a feature-rich dashboard 🤖

SEO friendly design built using Next js 🕸️

Supports 3 one-click deploy hosting providers 🚀


View Demo
Demo Admin http://linkindemo.vercel.app/admin

  • Demo username = admin
  • Demo password = linkin123

linkin gif


Deploy with Vercel

Deploy with Vercel

Deploy with Heroku

Deploy

Deploy with Railway

Deploy on Railway

Screenshot_2021-05-22 LinkIn's Link tree Page

Screenshot_2021-05-22 Linkin Dashboard

Screenshot_2021-05-22 Linkin Dashboard

Getting started

  • Deploy in Vercel
    • set environment variables
      • DATABASE_URL - Postgres database url
      • HASHSALT - random secret key
      • NODE_ENV - set NODE_ENV to production
    • after successfully deploying visit youdomain/admin to view admin login
    • use default login credentials
      • username = admin
      • password = linkin123
    • after a successfull login you will be able to see above admin dashboard.


  • Deploy in Heroku
    • set environment variables
      • DATABASE_URL - Postgres database url
      • HASHSALT - random secret key
    • after successfully deploying visit youdomain/admin to…

Linkin is built using

  1. Next.js
  2. Postgres as the database.
  3. Prisma as the ORM.
  4. Bootstrap 5 for UI components.

following issues are open for contribution, also feel free to try out new things add issues regarding linkin.

Editable avatar border colors #31

currently avatar border color is hard coded to #fff color .

This has to be dynamic, so that the users can customize the color .

The new form input for color should be under the Colors tab in the dashboard

rough workflow

  1. add new form Input with color type (use bootstrap), github.com/RizkyRajitha/linkin/blo...

and register it with the react-form-hook register method passed avatarBorderColor . destructure avatarBorderColor variable . (refer the existing implementation) github.com/RizkyRajitha/linkin/blo...

  1. add new column to the pagedata relation in prisma with name avatarBorderColor and type String? @db.VarChargithub.com/RizkyRajitha/linkin/blo... .

  2. migrate the modified prisma schema prisma doc . (when migration dev you will need permission to create databases , if such problem occurs use docker postgres instance ).

  3. destructure the new avatarBorderColor variable and the pass it to the styles
    github.com/RizkyRajitha/linkin/blo...

  4. test whether everything works.

avatarborder

Editable height and width in link cards #41

currently link tree max width is hard corded to 320px

github.com/RizkyRajitha/linkin/blo...

current scenario

it should be dynamically changed using the dashboard.

The new form input for width should be under the General tab in the dashboard

tentative workflow

  1. add new form Input with number type github.com/RizkyRajitha/linkin/blo...

and register it with the react-form-hook register method passed pageWidth . (refer the existing implementation)

  1. add new column to the pagedata relation in prisma with name pageWidth and type String? @db.VarChar

github.com/RizkyRajitha/linkin/blo... .

  1. migrate the modified prisma schema prisma doc . (when migration dev you will need permission to create databases , if such problem occurs use docker postgres instance ).

  2. destructure the new pageWidth variable and the pass it to the styles
    github.com/RizkyRajitha/linkin/blo...

  3. test whether everything works.

Cheers 🥂

Happy Hacktoberfest 🎃

Collapse
rocambille profile image
Romain Guillemot

Happy Hacktoberfest !!! 🥳

Here are 2 projects in need for contributors :

Both repositories have open issues, and I would be so happy to welcome contributions ❤️

Collapse
cicirello profile image
Vincent A. Cicirello

See my earlier post about a project open to Hacktoberfest contributions:

The relevant GitHub repository is:

GitHub logo cicirello / user-statistician

Generate a GitHub stats SVG for your GitHub Profile README in GitHub Actions

user-statistician

user-statistician

Check out all of our GitHub Actions: actions.cicirello.org/

Hacktoberfest Participants and Other Potential Contributors

We are currently interested in increasing internationalization of this project. It currently supports generating the SVG in English, Italian, and German. There are open issues for a few other languages, which you can work on if you would like to translate the various labels. You may also work on translations to other languages not currently included among open issues. In such a case, please start by submitting an issue (similar to the existing ones) so that we are aware of interest in a particular language.

About

GitHub release (latest by date) Count of Action Users build samples CodeQL License GitHub top language

good first issue Hacktoberfest GitHub open issues GitHub closed issues

The cicirello/user-statistician GitHub Action generates a detailed visual summary of your activity on GitHub in the form of an SVG suitable to display on your GitHub Profile README Although the intended use-case is to generate an SVG image for your GitHub Profile README you can also potentially link…

Collapse
valeriavg profile image
Valeria

For anyone who is looking for a repo to make a small, but meaningful contributions, I'm working on a WebGL Pixel Editor written in Svelte.
The core functionality is there, but there's plenty of things to do from styling to dev-ops.
Cheers!

GitHub logo ValeriaVG / pixel-vg

WebGL Pixel Editor

Pixel VG - WebGL Pixel Editor

Pixel (V)ector (G)raphics Easy to use point & click pixel-art editor.

Development

Install dependencies:

npm ci

Run in dev mode:

npm run dev

Preview build:

npm run preview

Build static version:

npm run build



Collapse
blair2004 profile image
Blair Jersyer • Edited on

Hi,
I've recently created a free CRM, POS and inventory manager using Laravel and TailwindCSS. The project is yet used by some people around the world, depite it still need your personal touch to make it better 😉.

image

github.com/Blair2004/NexoPOS-4x

Collapse
codess_aus profile image
Michelle Mei-Ling Sandford

Hey everyone, I've put up a really simple website - and I'd like to welcome first time contributors and beginners to help build it out. You can run and test it locally, so no risk of doing any permanent damage. Add something to it, make it beautiful and accessible if you can - and I'll accept the commits. Be explicit in your commits to say what you intend to do with your code - easier for me to approve and easier for other newbies to learn from your edits:

github.com/codess-aus/hacktoberfes...

Collapse
kantord profile image
Daniel Kantor

LibreLingo, a community-owned language-learning platform is participating in Hacktoberfest.

Here's a list of issues that are good choices for a hacktoberfest contribution:

github.com/kantord/LibreLingo/issu...

Collapse
wingkwong profile image
Wing-Kam WONG

Happy Hacktoberfest! We invite you to contribute NocoDB.

NocoDB is an open source Airtable alternative.

NocoDB works by connecting to any relational database and transforming them into a smart spreadsheet interface! This allows you to build no-code applications collaboratively with teams. NocoDB currently works with MySQL, PostgreSQL, Microsoft SQL Server, SQLite, Amazon Aurora & MariaDB databases.

Also NocoDB's app store allows you to build business workflows on views with combination of Slack, Microsoft Teams, Discord, Twilio, Whatsapp, Email & any 3rd party APIs too. Plus NocoDB provides programmatic access to APIs so that you can build integrations with Zapier / Integromat and custom applications too.

GitHub logo nocodb / nocodb

🔥 🔥 The Open Source Airtable alternative - Powered by Vue.js 🚀 🚀

NocoDB
The Open Source Airtable Alternative

Turns any MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into a smart-spreadsheet

Build Status Node version Twitter

WebsiteDiscordTwitter

OpenSourceAirtableAlternative

NocoDB - The Open Source Airtable alternative | Product Hunt

Quick try

1-Click Deploy

Heroku


Deploy NocoDB to Heroku with 1-Click


Using Docker

docker run -d --name nocodb -p 8080:8080 nocodb/nocodb:latest
Enter fullscreen mode Exit fullscreen mode

To persist data you can mount volume at /usr/app/data/.

Using Npm

npx create-nocodb-app

Using Git

git clone https://github.com/nocodb/nocodb-seed
cd nocodb-seed
npm install
npm start

GUI

Access Dashboard using : localhost:8080/dashboard

Join Our Community


Screenshots

2

1

7

5

6

3

4

11

10

8

9

Features

Rich Spreadsheet Interface

  •  Search, sort, filter, hide columns with uber ease
  •  Create Views : Grid, Gallery, Kanban, Gantt, Form
  •  Share Views : public & password protected
  •  Personal & locked Views
  •  Upload images to cells (Works with S3, Minio, GCP, Azure, DigitalOcean, Linode, OVH, BackBlaze)
  •  Roles : Owner, Creator, Editor, Viewer, Commenter, Custom Roles.
  •  Access Control : Fine-grained access control even at database, table & column level.

App

Collapse
horizon733 profile image
Dishant Gandhi

Hi everyone, here's couple projects I have kept eligible for Hacktoberfest, Would love to see your contributions on them
Certificate Builder:
Github: github.com/Horizon733/certi-build
Language: Python
Customer Care chatbot:
GIthub: github.com/Horizon733/customer-car...
Framework/Language: Rasa/Python

Collapse
superfola profile image
Alexandre Plateau

Happy Hacktoberfest!

ArkScript (a programming language in C++) is looking for contributors!
The core itself is the biggest project we have: github.com/ArkScript-lang/Ark

Though a lot of things gravitate around that, from a package manager that we want to rewrite in C++ soon, a documentation generator, standard library, C++ modules and more !

Also, I'm maintaining a "hack" over the DNS protocol on this repo, in Python. This allows anyone to easily create a chatserver over DNS requests, and many other data transmission protocol.

Last project of mine, I'm writing a modern C++ roguelike library, using libtcod! I'm using the roguebasin tutorial as a base, but going mostly my way to make the project modern C++, and refering to YouTube talks such as this one for more ideas and concepts (actions, energy, classes...).

Collapse
bobbyiliev profile image
Bobby Iliev

Super excided for this! 🥳

I've just posted a list of 8 projects that I maintain. I'll be happy to see some contributions 🙌

Collapse
rocambille profile image
Romain Guillemot • Edited on

Hello everyone, hope your Hacktoberfest is going well 🎃

Here is an other project looking for help if you need more PRs: github.com/rocambille/elo

This package allows to add rating between objects using Elo system. It is designed to add Elo properties, while preserving existing ones. So it is compatible with every objects, wherever they come from (e.g. I use it to rate my favorite movies and board games, after retrieving the data from APIs). Check the issues to know how to help, or feel free to propose any amazing idea 😉

Collapse
tbouffard profile image
Thomas Bouffard

Happy Hacktoberfest!
The Process Analytics project is participating in 2021 Hacktoberfest 🎃.

Hacktoberfest 'how to contribute' BPMN diagram with Hacktoberfest theme

You can contribute to visualization libraries for BPMN and Process Discovery in JavaScript, TypeScript, R.
More details here and happy hacking on GitHub 🤘

Collapse
alabulei1 profile image
alabulei1

Do you want to learn about and contribute to the next-gen runtime for cloud-native applications? Welcome to CNCF’s WasmEdge project! WasmEdge runs on Mac OS and Windows, but its documentation could be improved. Come to learn WasmEdge and help others learn by working on the project documentation and build scripts. Of course, if you have other ideas for improvements / bug fixes, feel free to open a GitHub issue and we will add the hacktoberfest label. github.com/WasmEdge/WasmEdge/label...

Collapse
aetherunbound profile image
Madison Swain-Bowden

All of the Openverse projects are participating this year! We've been trying to catalog easy issues in our various repos for new contributors :)

github.com/WordPress/openverse

Collapse
pierrebresson profile image
Pierre Bresson • Edited on

Hello React Native developers ⚛

Do you want to contribute to a beautiful mobile app for hacktoberfest 2021?

image

More info here and happy hacking on Github ✌️

Collapse
driftctl profile image
driftctl

Hi everyone!
Thrilled to join this discussion.
Driftctl is a free and OSS tool that warns of infrastructure drift. The more supported resources there are in the tool, the more comprehensive the analysis it provides.
That’s why all Hacktoberfest contributors are more than welcome to make a contribution to driftctl and add new resources on GCP and Azure.
We even have PR templates available and ready to use if you wish to make a quick and simple AND YET very useful contribution. Here's a link to our repo
github.com/cloudskiff/driftctl/dis...

Collapse
driftctl profile image
driftctl

Hi everyone!
Thrilled to join this discussion.
Driftctl is a free and OSS tool that warns of infrastructure drift. The more supported resources there are in the tool, the more comprehensive the analysis it provides.
That’s why all Hacktoberfest contributors are more than welcome to make a contribution to driftctl and add new resources on GCP and Azure.

We even have PR templates available and ready to use if you wish to make a quick and simple AND YET very useful contribution. Here's a link to our repo

github.com/cloudskiff/driftctl/dis...

Collapse
jstarpl profile image
Jan Starzak

Hi Hacktoberfest fans 👋!

I'm one of the maintainers of Sofie - an Open Source TV Studio Automation system.

We're always eager to welcome contributors that would like to work with us on making video content producers' lives easier as well as supporting more hardware. If you are into video production or video streaming - we might just be the project for you. Sofie is built in TypeScript, with the Core application/GUI using Meteor as a framework.

Help us improve Sofie: github.com/nrkno/Sofie-TV-automati...

GitHub logo nrkno / Sofie-TV-automation

This is the documentation for the state-based studio automation system Sofie, used in live TV news production by the Norwegian public service broadcaster NRK since September 2018.

NRK Sofie TV Automation

The producer's view in Sofie

Sofie is a web-based TV automation system for studios and live shows, used in daily live TV news productions by the Norwegian public service broadcaster NRK since September 2018.

Key Features

  • User-friendly, modern web-based GUI
  • State-based device control and playout of video, audio, and graphics
  • Modular device-control architecture with support for several hardware (and software) setups
  • Modular data-ingest architecture, supports MOS and Google spreadsheets
  • Plug-in architecture for programming shows

Youtube: 5-minute presentation from the EBU booth at IBC 2018

Documentation

Sofie system documentation

Code and Releases

The NRK logo is a registered trademark of Norsk rikskringkasting AS. The license does not grant any right to use, in any way, any trademarks, service marks or logos of Norsk rikskringkasting AS.




Collapse
ananto30 profile image
Azizul Haque Ananto

Anyone loves to work on Social Network? (specially after last night's Facebook down 😉)

I was creating Golpo and Hacktoberfest is here!
So let's build Golpo together!

Frontend - github.com/Ananto30/golpo-svelte
Backend - github.com/Ananto30/golpo-express

Collapse
christianparpart profile image
Christian Parpart • Edited on

Happy Hocktoberfest to all!

Are you a terminal guru or lover? We are building a cross platform GPU accelerated terminal emulator (Contour) and we are looking for helpful hands in all ways, including (but not limited to):

  • website building (for github.io content), we don't have one yet, yeah
  • packaging for not yet supported platforms (e.g. RPM based, such as Fedora, SuSE, ...)
  • integrating new automated package generation to Github CI (e.g. RPM)
  • improving OS/X support, such as getting native terminfo properly installled via DMG installer
  • Features! Features! Features! You have a nice idea that you want to add? If a ticket doesn't exist for that yet, add it! If you look for a mentor for doing it, just ask.

I have labeled quite a few features and tasks as "Help Wanted" and "Good first issue" already. We also have a Discord that you'll find on our Github project page that you can join to chat with us. p.s.: I'm also live-streaming on Twitch coding on Contour.

You like screenshots? I've added one:
click me

Happy hacking to all of you (regardless of what project you chose) :-)

Ctrl+F keywords: VTE, C++17, website, twitch, keep-smiling

Collapse
sanketsarang profile image
Sanket Sarang • Edited on

We are working on creating an AutoAI framework with built-in code generation. With the advent of AutoSklearn, TPot and others, we realised that none produce high-quality train + test code. After model discovery using these AutoML frameworks, a Data Scientist almost always has to write the entire code to make a project submission. Just the pickle or h5 file does not work as a submission. This is why we embarked on a journey of creating BlobCity AutoAI. A framework that not just trains, but also generates high-quality code (1000+ lines) for every model.

BlobCity AutoAI in Hacktoberfest 2021

We just started, and are looking to getting some valuable contributions into how the AutoAI framework can be shaped to ease AI model development for everyone.

Repository: github.com/blobcity/autoai

Collapse
vertfromage profile image
Crystal Parker

Hey,
I opened up a game I made last year (2020) during js13kgames for hacktoberfest. I'm participating as a contributer, but I thought it would be fun for some people who like js games, and maybe I'll learn some things.

github.com/Vertfromage/404game/issues

Collapse
mrnaif2018 profile image
MrNaif2018

Happy hacktoberfest everyone! Happy to hear that now maintainer is an official role!
If you want to contribute to an opensource self-hosted cryptocurrency payment processing and developer solution and try yourself in any of the many languages we use (python, docker, vue, bash, golang, js, yaml, markdown and more), you can try out BitcartCC!
All contributors will be mentored to help understand how the project works

Collapse
democracylab profile image
DemocracyLab

Happy Hacktoberfest! There's plenty of work available at DemocracyLab, where our mission is to empower people who use technology for public good.
Your first step is to follow the instructions in our Contributors Guide to get your Dev environment up and running (Docker of VM). Check out github.com/DemocracyLab/CivicTechE... or democracylab.org/projects/1 for more info.

Collapse
markewaite profile image
Mark Waite

The Jenkins project is participating in Hacktoberfest again this year. Join us for an online meetup to start Hacktoberfest Saturday morning at 7:00 AM UTC meetup.com/Jenkins-online-meetup/e...

Alternately, refer to the Hacktoberfest suggested projects at jenkins.io/events/hacktoberfest/

Collapse
whitphx profile image
Yuichiro Tachibana (Tsuchiya) • Edited on

Hello hackers,

If you know about Streamlit, its component development (Python + TypeScript), and E2E testing of them, I hope you tackle this issue:

Set up unit tests and CI for multi Streamlit versions #22

For example, a change for a new Streamlit version has been introduced in #21. However there has been no guarantee that this change works with every supported versions of Streamlit. To ensure that, tests and CI should be set up. These tests can be some sort of E2E testing including frontend and server-side. Ref:

Thank you, happy hacktoberfest!

Collapse
lakatos88 profile image
Alex Lakatos 🥑 • Edited on

Happy Hacktoberfest, y'all. If you're looking for a quick open source contribution, here's the easiest, most fun filled contribution opportunity this year (and every year for that matter).

GitHub logo AlexLakatos / computer-puns

A hand-picked selection of the worst computer puns, really cringe-worthy stuff.

Collapse
liyasthomas profile image
Liyas Thomas • Edited on

We are building an open source {free} Postman alternative: Hoppscotch - API request builder for web.

GitHub logo hoppscotch / hoppscotch

👽 Open source API development ecosystem https://hoppscotch.io

Hacktoberfest guide: github.com/hoppscotch/hoppscotch/d...

Collapse
lorendb profile image
Loren Burkholder

Shout out to github.com/Nheko-Reborn/nheko (I admit it, I am a contributor). The nheko devs aren't necessarily looking actively for Hacktoberfest contributors, but they would definitely be happy with new contributors.

Collapse
thomasbnt profile image
Thomas Bnt

Hi DEV community ! 👋🏼

I research contributors for the new list of Web Monetization stuffs.

A new post is online if you want know more about that. Don't hesitate to ask me anything about that ! 🌈🥳

GitHub logo thomasbnt / awesome-web-monetization

🕶️ Stuffs about Web Monetization. Packages, articles, documentation links and others tools.

Collapse
sampritimitra profile image
Sampriti Mitra • Edited on

This Hacktober, contribute to bringing Conversational AI - Dialogflow CX to Slack!

Hi Folks!
Glad to announce that Dialogflow CX - Slack SDK is accepting contributions this Hacktoberfest!

That's all well and good, but why do we need this SDK?

The motivation behind this SDK, was the slack community to be able to use dialogflow cx in the slack bots. 
Slack provides a multitude of rich features and APIs, including the bot kit UI, that gives life to conversations.
Also currently, the SDK supports App Engine or Cloud functions deployment which can be extended to use other cloud providers as well!
You are also welcome to add any issues/extensions as you feel would help.

Great, great, how do I start contributing? And will my contributions be accepted?

You can start by checking out the SDK first. Do go through the Contributing guideline as well.
All contributions are welcomed and will be accepted provided the follow the contribution guildelines.

Collapse
zigrazor profile image
ZigRazor

Hi Everyone and Happy Hacktoberfest! I have 3 project that partecipate to the hacktoberfest, if someone is interested can look at this links:

C++

GitHub logo ZigRazor / CXXGraph

Header-Only C++ Library for Graph Representation and Algorithms

CXXGraph

codecov CodeFactor

GitHub license GitHub release

LGTM Alerts LGTM Grade

Generic badge Generic badge Generic badge

Generic badge Generic badge

Share on Tweet







Table of Contents

Introduction

CXXGraph is a small library, header only, that manages the Graph and it's algorithms in C++. In other words a "Comprehensive C++ Graph Library".

Algorithm Explanation

Dijkstra

Graph Dijkstras Shortest Path Algorithm(Dijkstra's Shortest Path) Dijkstra's Algorithm is used to find the shortest path from a source node to all other reachable nodes in the graph. The algorithm initially assumes all the…

GitHub logo ZigRazor / CXXAutomata

A C++ library for simulating automata and Turing machines

CXXAutomata

A C++ library for simulating automata and Turing machines




Python

GitHub logo ZigRazor / PyStateMachine

Python State Machine

PyStateMachine

python Python State Machine

CodeFactor Codacy Badge

DeepSource DeepSource

Introduction

PyStateMachine is a Framework that support state machines in Python

Requirements

  • Python3

How to Run

Work in Progess

Example

Work in Progess

Test Suite

Work in Progress

How to contribute GitHub contributors

Read the CONTRIBUTING GUIDE

Contact

E-Mail : zigrazor@gmail.com

GitHub Profile Profile views

ZigRazor's github stats

Support

To support me just add Star the project GitHub stars or follow me GitHub followers

To get updated watch the project GitHub watchers

Project Info

Readme Card

Used Languages

Top Langs




Thank you in advance and Happy coding in this Hacktoberfest

Collapse
maxleiter profile image
Max Leiter

If you're looking to contribute to a JavaScript / Vue project with an active community, check out The Lounge, a self-hosted IRC (internet chat) client.

Check us out at thelounge.chat or join #thelounge on irc.libera.chat (via our demo, demo.thelounge.chat) if you want to learn more.

Collapse
robertobutti profile image
Roberto B.

If you like PHP / Laravel / GitHub Actions, take a look: github.com/Hi-Folks/gh-actions-yam...

Collapse
cdthomp1 profile image
Cameron Thompson

Hello! I just published an article with a couple of my repos that can be contributed to!
dev.to/cdthomp1/my-hacktoberfest-r...

Collapse
ritikpatni profile image
Ritik Patni

Happy Hactoberfest everyone! I built this repo with the help of contributors like y'll and if you have something that you fele can be added to this list or have any suggestions on how to improve this. Then please contribute to this
Issue Link: github.com/RitikPatni/Front-End-We...

Repo Link: github.com/RitikPatni/Front-End-We...

Collapse
shobu95 profile image
Shoaib Ahmed • Edited on

Dear Devs,

Checkout my Flutter and Android application repositories for your contributions.

Flutter -> github.com/Shobu95/sewistic_app
Android (Kotlin) -> github.com/Shobu95/crebits

Happy Hacking.!!!

Collapse
ptrthomas profile image
Peter Thomas

Hi All - we've a pinned issue with all the details for Karate here.

[hacktoberfest] instructions for contributors - link to backlog items #1778

Thank you for your interest in contributing to Karate ! Besides a few open bugs already tagged as #hacktoberfest, we have a set of well-documented roadmap items and enhancements proposed here: github.com/intuit/karate/projects/3

IMPORTANT: Most of the open items are non-trivial and expect you to have a working knowledge of Java. Please keep this in mind before calling "dibs" on any of the items !

image

All you need to do is choose what you wish to work on, look at the Proposed column - and then we will move the status of that item to Assigned. You can discuss here in this issue, just add a comment.

IMPORTANT: after your first comment here, we will assign the item to you, but we need you to demonstrate intent to work on the item within 5 days. Just create a new issue with a brief comment saying that you are working on it. This will be the issue against which you can submit the final PR (Pull Request). It would be great if you can also provide some details of how you are planning to implement the solution. If we don't hear from you within 5 days, we will move the item back to the pile for anyone else to pick up.

Once your code is ready, just submit a Pull Request (in October 2021) and reference this issue.

To summarize:

A) choose an item you want to work on from the roadmap B) make a comment below mentioning which item, and we will assign it to you C) within 5 days create an issue so that we know you are actively working on it (else the item moves back to being un-assigned) D) when your code is ready (or draft) submit a PR and refer the issue you created in (C)

Contributing to Karate is easy, especially for Java programmers. We have a detailed developer guide here: github.com/intuit/karate/wiki/Deve...

Collapse
ksengine profile image
Kavindu Santhusa • Edited on

Please contribute on docs of

GitHub logo ksenginew / nanoasgi

Fast⚡, simple and light💡weight ASGI micro🔬 web🌏-framework for Python🐍.

NanoASGI

Asynchronous Python Web Framework


NanoASGI is a fast, simple and light💡weight ASGI micro🔬 web🌏-framework for Python🐍. It is distributed as a single file module and has no dependencies other than the Python Standard Library.

Download and Install

Download ⬇️ nanoasgi.py into your project directory. There are no hard dependencies other than the Python standard library. NanoASGI runs with Python versions above 3.7.

Or install via pip

pip install NanoASGI
Enter fullscreen mode Exit fullscreen mode

Example

# example.py
from nanoasgi import App, Response
app = App()

@app.on('startup')
async def on_startup():
    print('Ready to serve requests')

@app.on('shutdown')
async def on_shutdown():
    print('Shutting down')

@app.route('GET', '/api/hello/{name}/')
async def hello_handler(request, name):
    return Response(
        {'result': f'Hello 
Enter fullscreen mode Exit fullscreen mode
Collapse
shravan20 profile image
Shravan Kumar B
Collapse
bobbyiliev profile image
Bobby Iliev

Let's see if we can write an eBook only with Hacktoberfest community contributions 🙌

GitHub logo bobbyiliev / 101-linux-commands-ebook

101 Linux commands Open-source eBook

💻 101 Linux commands Open-source eBook

This is an open-source eBook with 101 Linux commands that everyone should know. No matter if you are a DevOps/SysOps engineer, developer, or just a Linux enthusiast, you will most likely have to use the terminal at some point in your career.

List of commands:

If you want to contribute, feel free to pick up a topic marked as TODO and submit a pull request 🙌

Feel free to add new topics in case that you don't find one that you like from the current list.


Collapse
prakash_chokalingam profile image
prakash chokalingam

Looking for contributors to fill my open source lib with re-usable components

github.com/webcored/bootstrap-x

Collapse
saptakbhoumik profile image
SaptakBhoumik

Happy hactoberfest everyone! If you want to contribute in a interesting project then you can contribute here github.com/Swallow-lang/swallow