DEV Community: Jerry Zhu

How to Contribute to Hacktoberfest with Codédex

Jerry Zhu — Sat, 15 Oct 2022 15:38:45 +0000

Hacktoberfest is here, which means open source contributions are in full swing! 🎃

However, making your very first open source contribution can be super daunting. Don’t fret, Codédex is here to help!

Here is how to contribute to open source and Hacktoberfest with Codédex and make your very first pull request to a public project on GitHub.

What is Codédex?

Codédex is an 8-bit learn to code platform by developers, for developers! One of the main features of Codédex is the project tutorials!

Codédex Projects is a catalog of fun, beginner-friendly, and real-world programming tutorials available to developers all over the world. Our goal is to create a mountain of top-notch coding content on the web, from Python to Web Development, VR/AR to Machine Learning.

Now that the MVP is out, our goal is to invite awesome content creators from the community to author one or two project tutorials, since maintaining a resource of this type at-scale is only possible if it's open-sourced. That means we need your help, whether it's contributing, reviewing (catching bugs/typos), or evangelizing!

Here are some cool examples of Codédex Projects:

🔗 Generate a QR Code with Python
📝 Generate a Blog with OpenAI
🎞 Create a GIF with Python
📊 Visualize YouTube Data with Plotly Express
🤖 Build a Discord Bot with Python

Why Contribute?

This is great, but why should you contribute to Codédex Projects?

Valuable article writing and real world coding experience.
Mentorship from the Codédex team to support your project tutorial.
Ability to publish your tutorials and grow your online presence on sites such as Dev.to, Indie Hackers, LinkedIn, and Medium.
Access to Codédex premium features such as the Discord Server and community events.
A free swag from our merch store.

codedex-io / projects

Codédex Projects 📝

🚀 Codédex Projects

The best programming tutorials on the web.
Built by developers, for developers.

What are Projects?

Here are some examples of Codédex Projects:

🔗 Generate a QR Code with Python
📝 Generate a Blog with OpenAI
🎞 Create a GIF with Python
📊 Visualize YouTube Data with Plotly Express
🤖 Build a Discord Bot with Python

Contributing

Ready to add your own project tutorial? Learn more by reading our Contribution Guide! 🙌

What stage of development are we in right now?

Now that the MVP is out, our goal for Codédex Projects is to invite awesome content creators from the community to author one or…

View on GitHub

Getting Started

To contribute a project tutorial for Codédex, you can follow these 3 simple steps to get started!

1. Open an Issue

First, read our contributing guidelines file to learn about the workflow for contributing.

Next, decide what topic you want to talk about! Your topic can be beginner, intermediate, or advanced (see the contributing guidelines for details)! Once you have 3-4 cool topic ideas, open an issue under codedex-io/projects, following the issue template.

Our team will get back to you with the project tutorial out of the list that you should do. Once that happens, you can start creating your project tutorial!

2. Open a Pull Request

When writing your project tutorial, feel free to reach out to @sonnynomnom with any questions. Remember that your project tutorial should be interesting and engaging for others to read, while being easy to follow! Make sure to also follow our content guidelines.

Once it is completed, simply open a pull request, following the pull request template!

How do I submit a Pull Request (PR)?

Fork the repository.
Clone the forked repository to your computer.
Create and switch into a new branch.
Create a new folder with your project tutorial .mdx file in it.
Make a pull request to merge your fork with this repository.

3. Review and Publish

When you complete your pull request, our team will review your pull request, and provide any comments or suggestions! Once those are completed, you can publish your tutorial on any site of your choosing!

So what are you waiting for? Contribute to Codédex and make an impact in the coding and open source communities! Happy Hacktoberfest!

Jerry from Codédex 🚀

10 Ways to Get Involved with No Code Open Source Contributions

Jerry Zhu — Wed, 12 Oct 2022 13:49:46 +0000

As an open source contributor, making meaningful contributions to open source repositories can be overwhelming at first, especially during Hacktoberfest. The sheer amount of information and the complexity of certain issues can make Hacktoberfest seem a bit discouraging. However, a great way to contribute and help the open source community, while also contributing in a way that meets your skillset and grows your coding abilities lies in non-code contributions. What are some specific ways we can make helpful contributions to open source without writing code?
In this article, we will learn about 10 ways to get involved with no-code open source contributions!

1. Documentation

One of the biggest ways to contribute to large projects you love, without needing to contribute large amounts of code and understand the entire codebase, is through improving documentation. Almost every project has some part of documentation that is inadequate, or could be improved on further. By contributing to documentation, you are helping other users understand more about what the project is doing, while making a valuable contribution and learning more about the codebase! You can make many of these types of contributions during Hacktoberfest!

Example:

facebook / docusaurus

Easy to maintain open source documentation websites.

Docusaurus

Introduction

Docusaurus is a project for building, deploying, and maintaining open source project websites easily.

Short on time? Check out our 5-minute tutorial ⏱️!

Tip: use docusaurus.new to test Docusaurus immediately in a playground.

Simple to Start

Docusaurus is built in a way so that it can get running in as little time as possible. We've built Docusaurus to handle the website build process so you can focus on your project.

Localizable

Docusaurus ships with localization support via CrowdIn. Empower and grow your international community by translating your documentation.

Customizable

While Docusaurus ships with the key pages and sections you need to get started, including a home page, a docs section, a blog, and additional support pages, it is also customizable as well to ensure you have a site that is uniquely yours.

Installation

Use the initialization CLI to create your site:

npm init docusaurus@latest

…

View on GitHub

2. Examples

Another way to contribute to no-code open source is to create or flag examples that leverage certain tools and libraries. For every library, you can create examples showcasing how these tools can be integrated into your projects. This is beneficial to the open source community because it shows users and collaborators how to use the open source tool. You can even contribute to repository lists containing examples usages of different tools or languages!

Example:

medusajs / nextjs-starter-medusa

A performant frontend ecommerce starter template with Next.js 15 and Medusa V2.

Medusa Next.js Starter Template

Combine Medusa's modules for your commerce backend with the newest Next.js 15 features for a performant storefront.

Prerequisites

To use the Next.js Starter Template, you should have a Medusa server running locally on port 9000 For a quick setup, run:

npx create-medusa-app@latest

Check out create-medusa-app docs for more details and troubleshooting.

Overview

The Medusa Next.js Starter is built with:

Features include:

Full ecommerce support:
- Product Detail Page
- Product Overview Page
- Product Collections
- Cart
- Checkout with Stripe
- User Accounts
- Order Details
Full Next.js 15 support:
- App Router
- Next fetching/caching
- Server Components
- Server Actions
- Streaming
- Static Pre-Rendering

Quickstart

Setting up the environment variables

Navigate into your projects directory and get your environment variables ready:

cd nextjs-starter-medusa/
mv .env.template .env.local

Install dependencies

Use Yarn to install all dependencies.

yarn

Start developing

You are now ready to start up your project.

yarn dev

Open

…

View on GitHub

3. Tutorials

By creating tutorials or guides about how to use the open source tool, users can hit the ground running with using open source tools or projects. Examples include creating a quick start for deployment, creating advanced tutorials, or popular use cases of an API. Tutorials can significantly improve the amount of users to a project, and help contribute to its success. Writing tutorials is a great way to contribute to open source, while also teaching others about valuable open source tools.

Example:

wingkwong / leetcode-the-hard-way

LeetCode The Hard Way - From Absolute Beginner to Quitter. Join Discord: https://discord.com/invite/Nqm4jJcyBf

Welcome!

About

Welcome to "LeetCode The Hard Way," the ultimate resource for those looking to improve their skills in data structures and algorithms! Our website is dedicated to providing comprehensive tutorials and detailed solutions to some of the most challenging problems in LeetCode. Whether you're a student looking to ace your next exam or a professional seeking to level up your coding skills, our tutorials and solutions are designed to help you succeed. Our content covers a range of popular programming languages, so you can learn and practice using the language of your choice.

From basic data structures to advanced topics, we've got you covered. At "LeetCode The Hard Way," we believe that learning should be fun and engaging. With plenty of LC problems and examples to work through, you'll have the opportunity to apply what you've learned and test your skills. So why wait? Start exploring our tutorials and…

View on GitHub

4. Translations

Translations are a great way to help users from other languages understand and use a codebase. By translating documentation, tutorials, or articles, one can broaden the useability of a tool, and introduce people of other languages to the world of open source. Translations are a great way to hone your language skills while making a valuable contribution to the community.

Example:

Chinese developers #3894

sunnycat1991 posted on Sep 21, 2022

💭 Description

There are million developers in china，Whether to consider opening a Chinese website for them. VPN and En glinsh Doc are difficult for me

👀 Have you spent some time to check if this issue has been raised before?

[X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

[X] I have read the Code of Conduct

View on GitHub

5. Articles

Writing articles (like this one) is also a fantastic way to contribute to open source! Through writing articles, one can gain experience in explaining topics, and appealing to open source audiences. Articles provide valuable information to the open source community, and are especially beneficial during Hacktoberfest.
One way to contribute to Hacktoberfest is through writing articles for Aviyel! Learn more about it here.

6. Artistic Design

If you are good at artistic design or UI/UX, you can contribute art or design implementations to the repository! Some ideas include images, GIFs, or backgrounds! Even giving issues or suggestions on ways to improve a tool or site can go a long way to help the open source community! Using your skillset creatively towards open source is a great way to get started in Hacktoberfest, and no-code contributing in general.

7. Code Layout

Using a proper style guide in formatting your code and files is very important in maintaining a good open source repository. As such, providing useful feedback on ways to improve the ways files are packaged or written can greatly benefit the readability of a repository. This can be done through issues and pull requests, without having to write code.

8. Workshops/Talks

Creating or attending workshops and talks can be a great way to interact with the open source community, and learn more about no-code contributions. You can connect with other no-code contributors, and learn about repositories that require no-code contributions. Finally, you can gain valuable experience from mentors who have lots of experience in open source. In fact, Aviyel has some great talks about contributing to open source! Learn more here!

9. Conferences

If you are ambitious and want to learn more about open source, attend an open source conference! You can meet like-minded members of the open source community, and attend workshops and talks, as mentioned above. You can build valuable connections, and make no-code contributions together! Some examples for Hacktoberfest 2022 can be found here!

10. Mentorship

Finally, if you are a no-code open source contributor, the best way to get involved or give back to the community is through mentorship. You can guide contributors through ways to make meaningful contributions and pull requests to repositories, give tips and tricks, and recommend good repositories for open source contributions! Start by joining Discord servers, open source communities, and even talk to your friends about helping them navigate the beautiful world of open source!

Conclusion

Now that you know 10 valuable ways to get involved with the open source community without writing any code, why not try some of these ideas out? Remember, as long as you're actively interacting with open source and having fun, you're helping shape the community, and making an impact in no-code open source!

Attending Your First Hackathon: Tips And Tricks

Jerry Zhu — Tue, 11 Oct 2022 19:55:07 +0000

What do you think of when I say the word “hackathon”? Is it a group of people in black hoodies in the dark typing fiendishly in the terminal?

In this article, you will learn what a hackathon is, tips and tricks to achieve your goals, and how to get the most out of your hackathon experience! 🚀

What is a Hackathon?

A hackathon is usually a 24-48 hour event where programmers, or “hackers”, get together and create cool projects together! Hackers get together in groups of 2-4 to build a project about something they are passionate about. Although building a project and getting judged on it is the bulk of the hackathon experience, it is definitely not the only thing happening!

There are also several types of events happening in tandem, including activities, workshops, and networking events, as well as food! In terms of networking, there will be sponsor booths, where you can talk to representatives from companies, and hacker meetups. Being able to manage your time given everything that is going on around you can be tricky.

Here are a few tips and tricks!

1. Do Your Research Beforehand

Before going into the hackathon, do some research into what the hackathon is about. This can be as simple as reading the FAQ, or looking at prizes and sponsors. You should have a good idea of what the theme is (if there is one), which prizes you want to go for, and which sponsor libraries you are interested in. Having these things in mind will help you plan your hackathon project better.

2. Project Idea and Schedule

During the hackathon, you will have to work with a team to think of an idea. As such, it would be beneficial to think of an idea beforehand. A great way to come up with an idea is to think about a problem you’d like to see solved, whether it be in your life, community, or the world! You can sculpt a potential solution through real world issues you want to tackle!

For experienced hackers, a great way to plan ahead of time is to look at the hackathon schedule, and create a Google Calendar based on what you want to be doing during those times. Although unexpected things could happen, knowing approximately how much time you want to commit to each part of the hackathon will go a long way in making it more successful!

However, in order to plan your schedule, you must know your strengths and weaknesses.

3. Know Your Strengths and Weaknesses

This is an extremely crucial point when tackling your project during the hackathon. Make sure that you know exactly what you want to accomplish, and what is required to get there.

In terms of libraries, reach out to your team to see what they are comfortable with, and how to align them with the project.

For example:

For complete code newbies, using HTML/CSS or no-code libraries like Bubble or Adalo could be a great suggestion for deployment.
For less experienced programmers, HTML/CSS/JavaScript are great languages for building a website and hosting it on Repl.it, Glitch, or GitHub pages.
For more experienced programmers, look into Python or JavaScript libraries for a more complex application. You can deploy it on Netlify or Vercel and use a database, or look into cloud services and containerization.

However, don’t do something you are not super comfortable with: after all, there are only 24 hours, so if you have looked into a framework but have no idea how it works, maybe look into a simpler one.

Knowing your strengths when it comes to learning new libraries is also important when deciding sponsor or prize categories to pursue. Going out of your way to learn a difficult tool or library for a prize may be tempting, but it might be more beneficial to stick to the basics.

4. Manage Your Time Well

To do well at a hackathon, it is extremely important to manage your time well. There are so many things going on during a hackathon, and it can be overwhelming to try to do all of them while also wanting to focus on your project. Having a point of focus is very important.

If you care about your project more, spend less time going to events.
If you want to build a network and have fun, go to activities and sponsor booths.
If you want to learn more about coding, attend workshops and reach out to mentors.
If you really want to win, make sure to spend an ample amount of time on the pitch.

Don’t be afraid to have fun, but also make sure you achieve what you want to!

5. Take Away Something

The most important thing is to take something away from the hackathon! Maybe it’s the friends and connections you made, maybe it’s the tools and libraries you learned, and maybe it’s the project you just made that can be added to your resume or personal portfolio. In any case, learning something from a hackathon, and gaining experience, will help your next hackathon experience be even better.

Feel free to utilize these tips the next time you’re at a hackathon. Remember, as long as you’re having fun, you’re succeeding!

Go put yourself out there and happy hacking 💻!

Jerry from Codédex

Generate a QR Code with Python

Jerry Zhu — Fri, 23 Sep 2022 00:32:54 +0000

Prerequisites: Python fundamentals
Versions: Python 3.10, qrcode 7.3.1, Pillow 9.2.0
Read Time: 40 minutes

Introduction

Have you ever wondered how QR codes work or how procedural images are generated? Have you ever wanted to send someone a website link in a much cooler way? If you said yes to any of these questions, you're in luck!

In this quick tutorial, we will learn how to create a QR code in Python with qrcode, pillow, and just five lines of code.

Let's jump in!

What Is a QR Code?

The QR code, short for Quick Response code, was originally invented in 1994 by a Japanese tech company. It is a 2D barcode containing black patterns on a white background. However, this is no ordinary scribble: QR codes are capable of storing huge amounts of data in a deceivingly small amount of space. These black rectangles can store links, text, basically anything you want... and can be accessed simply by scanning from any mobile device!

A QR code is important since it gives users a simple way to access something on a non-conventional source (e.g., on a piece of paper). Putting a QR code on a piece of paper is a far better and faster experience for the user than placing a website link. Due to this, QR codes are now becoming more commonly used than UPC barcodes and are found on restaurant menus, business cards, and even Superbowl ads!

Enough about QR codes, let's learn how to create one!

Setting Up

First, go to the Python code editor of your choice (we recommend VS Code), and create a new file called qr_code.py. This is where we will be writing our code.

Note: You can call your file any name except qrcode.py. This is because qrcode.py is a file that already exists as part of the qrcode library that we will use, and calling your file that will overwrite the library functions.

To start, we need to install the two libraries:

The qrcode library: This library lets us perform all of our QR code related operations.
The pillow library: This library helps us process and save images.

To install qrcode and pillow, run this command inside the VS Code terminal:

pip install qrcode pillow

For this tutorial, we are using qrcode version 7.3.1 and Pillow version 9.2.0.

Next, add this line of code to the first line of qr_code.py:

import qrcode

This line of code makes sure that the two libraries can be used in the rest of our code, since Python code runs from top to bottom in a file. We just need to import qrcode, because pillow is implicitly imported.

Creating the QR Code

First, we want a link that we want to showcase. Let's use a classic YouTube video.

We can store this YouTube URL into a variable called website_link:

website_link = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'

Next, we want to create an instance of qrcode. Since it's a Python library, we can call the package constructor to create a qrcode object, customized to our specifications.

In this example, we will create a QR code with a version of 1, and a box size and border size of 5.

qr = qrcode.QRCode(version = 1, box_size = 5, border = 5)

The version parameter is an integer from 1 to 40 that controls the size of the QR code.
The box_size parameter controls how many pixels each “box” of the QR code is.
The border parameter controls how many boxes thick the border should be.

As an exercise, try taking in these parameters as input, and explaining to the user how to set this up, so they can create the QR code to their own specifications.

Visit documentation for more information about the parameters in qrcode.QRCode(...).

Then, the data (specifically, the link we specified before) is added to the QR code, using .add_data(). The QR code is then generated using .make():

qr.add_data(website_link)
qr.make()

Finally, we save this created QR code in an img pillow object using qr.make_image():

img = qr.make_image(fill_color = 'black', back_color = 'white')

Setting the line color fill_color to black.
Setting the background color back_color to white.

Finally, we have to store and save the file. We can do this using pillow's save() command. We specify the file name inside the brackets, which is youtube_qr.png in our case.

img.save('youtube_qr.png')

Now we are done! Here’s the whole code:

import qrcode

website_link = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'

qr = qrcode.QRCode(version = 1, box_size = 5, border = 5)
qr.add_data(website_link)
qr.make()

img = qr.make_image(fill_color = 'black', back_color = 'white')
img.save('youtube_qr.png')

You should see the youtube_qr.png image pop up on the left-hand side of VS Code, and you can open it to see what it looks like.

You can add this QR code to anywhere you like, on your website or in an email!

Improvements

To improve this, we could do a couple of things:

Allow the website link to be typed in using input() function.
Allow users to customize the QR code generated.
Automate the process to create multiple QR codes.
Include more functions (or object parameters) of the qrcode library.
Try changing the colors and styles of the generated QR codes using different drawer modules and fill colors.
Use an application library (like Tkinter) to add a user interface.
Check out other QR code libraries like pyqrcode.

DEV Community: Jerry Zhu

How to Contribute to Hacktoberfest with Codédex

What is Codédex?

Why Contribute?

codedex-io / projects

Codédex Projects 📝

🚀 Codédex Projects

What are Projects?

Contributing

What stage of development are we in right now?

Getting Started

1. Open an Issue

2. Open a Pull Request

How do I submit a Pull Request (PR)?

3. Review and Publish

10 Ways to Get Involved with No Code Open Source Contributions

1. Documentation

facebook / docusaurus

Easy to maintain open source documentation websites.

Docusaurus

Introduction

Installation

2. Examples

medusajs / nextjs-starter-medusa

A performant frontend ecommerce starter template with Next.js 15 and Medusa V2.

Medusa Next.js Starter Template

Prerequisites

Overview

Quickstart

Setting up the environment variables

Install dependencies

Start developing

Open

3. Tutorials

wingkwong / leetcode-the-hard-way

LeetCode The Hard Way - From Absolute Beginner to Quitter. Join Discord: https://discord.com/invite/Nqm4jJcyBf

Welcome!

About

4. Translations

Chinese developers #3894

💭 Description

👀 Have you spent some time to check if this issue has been raised before?

🏢 Have you read the Code of Conduct?

5. Articles

6. Artistic Design

7. Code Layout

8. Workshops/Talks

9. Conferences

10. Mentorship

Conclusion

Attending Your First Hackathon: Tips And Tricks

What is a Hackathon?

1. Do Your Research Beforehand

2. Project Idea and Schedule

3. Know Your Strengths and Weaknesses

4. Manage Your Time Well

5. Take Away Something

Generate a QR Code with Python

Introduction

What Is a QR Code?

Setting Up

Creating the QR Code

Improvements

More Resources