DEV Community: Codédex

Monthly Challenge #4: Valentine's Day 💘

Sonny Li — Thu, 09 Feb 2023 19:08:57 +0000

What better way to celebrate Valentine's Day than by sharing a poem with your friends and family? In this challenge, you will create a poem on a web page using HTML. 💌

Requirements:

Use a combination of at least five common HTML elements, such as headings, paragraphs, lists, and text formatting.
The poem can take on any form you like! You can freestyle with as many lines as your heart desires, but here are some suggestions for common poem types:
- Sonnet (14 lines)
- Haiku (3 lines; 5 syllable, 3 syllables, 5 syllables, respectively)
- Limerick (5 lines; rhyme scheme AABAB)

Bonus:

Make your Valentine's Day poem as pretty or complex in style (background color, border, etc.) by doing one of the following:

Use a <style> element in the <head> of the document.
Apply a global style attribute to various elements in the <body> of the document.

Try our free course if you need a quick refresher on HTML!

Submit a screenshot of your web page by Feb 14th for a chance to win a special surprise! If you want, you can tag the person the valentine is for so they can see it.

May the best poet win. 💕

Monthly Challenge #3: Morse Code 🆘

Sonny Li — Mon, 02 Jan 2023 22:06:09 +0000

Morse Code

Morse code is a communication method to encode characters as dots (.) and dashes (-), developed in the 1830s.

January Challenge

Create a translate() Python function that takes in a message and converts it to morse code.

Post the code/output screenshot in the Twitter thread by Jan 14th for a chance to win a Codédex hoodie! 🎁

// Detect dark theme var iframe = document.getElementById('tweet-1609910099824496647-936'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1609910099824496647&theme=dark" }

Monthly Challenge #2: Holiday ASCII Art ️ ️☃️

Sonny Li — Thu, 01 Dec 2022 18:10:39 +0000

Welcome to Codédex's second Monthly Twitter Challenge! This one is also created by our SWE Intern, @asiqurrahman. 🙌

// Detect dark theme var iframe = document.getElementById('tweet-1598365914134679552-665'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1598365914134679552&theme=dark" }

ASCII Art:

ASCII art is a computer graphic design technique that piece together a picture using characters defined by the ASCII Standard from 1963.

Challenge:

Using your coding language of choice, create a holiday-themed ASCII art in the terminal. Be as creative as you can. And it has to be original! 🎅🏼🎄☃️❄️

Post your code & screenshot below by Dec 14th for a chance to win a limited edition Codédex sweater mailed to your door by Christmas morning! 🎁

Codédex Launch on Product Hunt! 🚀

Sonny Li — Mon, 07 Nov 2022 12:01:08 +0000

Hi Devs!

It’s Sonny from Codédex –– a brand new learn to code platform for Gen Z.

We’re a small-but-mighty team based in Brooklyn, NY but have teammates across the globe.

Since June 2022, we’ve gone full in on our mission to empower the next generation of builders and dreamers. And today, we are finally launching to the world on Product Hunt — please support us!

Head over to Product Hunt to give us an upvote! We are aiming for the Top 5 Products of the Day and it would mean the world if you can give us 30 seconds of your time.

⬆️ https://www.producthunt.com/posts/codedex ⬆️

Here's a preview of the site:

Lastly, huge shoutout out to the whole team: Dharma, Malcolm, Asiqur, Jerry, Rose, and Lil for working on this night and day for the past few months. LFG team!

Happy coding,
Sonny 🤠

How do programmers say "I love you"? 🤔

Sonny Li — Thu, 03 Nov 2022 16:04:42 +0000

Note: WRONG answers only!

Feel free to reply in the comments or in the Twitter thread:

Codédex

@codedex_io

How do programmers say "I love you"? 🤔
Wrong answers only.

00:16 AM - 03 Nov 2022

That's all! Happy Thursday, Devs! 💖

Monthly Challenge #1: Palindrome 🔤

Sonny Li — Tue, 01 Nov 2022 16:39:08 +0000

Welcome to Codédex's first ever Monthly Twitter Challenge! This one is created by our SWE Intern, @asiqurrahman. 🙌

// Detect dark theme var iframe = document.getElementById('tweet-1587072993448058883-356'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1587072993448058883&theme=dark" }

Palindrome:

A word, sentence, or number that reads the same forward or backward (e.g., racecar, civic, and 121).

Challenge:

Create a Python function that:

Takes in a string as a parameter.
Checks if it's a palindrome.
Returns True if it is or False if it's not.

Requirements:

📦 Don’t use any packages.
💬 Make sure to comment the code.

Post your program screenshot in the Twitter thread.

And we will pick a random winner by noon this Friday. The prize is a free Codédex tee and bragging rights! 🏆

Update:

We have a winner to the Codédex Monthly Challenge: Palindrome! 🥁...

Congrats to Michael Gonzalez! 🇪🇨

The reasons being:

Solution covers string & number
Good comments
Good breakdown of the functions
First to post bonus

Here's the solution:

// Detect dark theme var iframe = document.getElementById('tweet-1587105952607703040-740'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1587105952607703040&theme=dark" }

Generate a Blog with OpenAI

Asiqur Rahman — Wed, 19 Oct 2022 20:06:42 +0000

Prerequisites: Python fundamentals
Versions: Python 3.10, python-dotenv 0.21.0, openai 0.23.0
Read Time: 60 minutes

Introduction

Artificial Intelligence (AI) is becoming the next big technology to harness. From smart fridges to self-driving cars, AI is implemented in almost everything you can think of. So let's get ahead of the pack and learn how we can leverage the power of AI with Python and OpenAI.

In this tutorial, we'll learn how to create a blog generator with GPT-3, an AI model provided by OpenAI. The generator will read a topic to talk about as the input, and GPT-3 will return us a paragraph about that topic as the output.

So AI will be "writing" stuff for us. Say goodbye to writer's block!

But wait, hold on! Artificial intelligence?! AI models?! This must be complicated to code. 😵

Nope, it's easier than you think. It takes around 25 lines of Python code!

The final result will look something like this:

Who knows, maybe this entire project was written by the generator we're about to create. 👀

What is GPT-3?

GPT-3 is an AI model released by OpenAI in 2020. An AI model is a program trained on a bunch of data to perform a specific task. In this case, GPT-3 was trained to speak like a human and predict what comes next given the context of a sentence, with its training dataset being 45 terabytes of text (!) from the internet.

For reference, if you had to keep writing until your paper hits 45 terabytes in size, you would have to write 22,500,000,000 pages worth of plain text.

Since GPT-3 was trained on internet data, it knows what the internet knows (not everything of course). This means that if we were to give GPT-3 a sentence, it would be able to predict what comes next in that sentence with high accuracy, based on all the text that was used to train it.

Now we know what we'll be working with, let's build the program!

Setting Up

OpenAI Account

Before we do anything, we need an OpenAI account. We'll need this account access to an API key that we can use to work with GPT-3.

API (Application Programming Interface) is a way for two computers to communicate with each other. Think of it like two friends texting back and forth. An API key is a code we receive to access the API. Think of it like an important password, so don’t share it with others!

Go to www.openai.com and sign up for an OpenAI account.

After you've created an account, click on your profile picture on the top right, then click "View API keys" to access your API key. You should see this page and it should look like:

Now that we know where the API key is located, let's keep it in mind for later.

With the API key, we get access to GPT-3 and \$18 worth of free credit. Meaning that we can use GPT-3 for free until we go over the \$18, which is more than enough to complete this project.

Python Setup

For this project, we'll need Python 3 and pip (package installer) installed.

Assuming that we have those two installed, let's open up the code editor of our choice (we recommend VS Code) and create a new file called blog_generator.py.

Note: You can name this file anything except for openai.py, since the name will clash with a package we'll be installing.

Beginning the Project

At the core of this project, all we'll be doing is sending data with instructions to a server owned by OpenAI, then receiving a response back from that server and displaying it.

Install openai

We'll be interacting with GPT-3 model using a python package called openai. This package consists of methods that can connect to the internet and grant us access to the GPT-3 model hosted by OpenAI, the company.

To install openai, all we have to do is run the following command in our terminal:

pip install openai

We can now use this package by importing it into our blog_generator.py file like so:

import openai

Authorize API Key

Before we can work with GPT-3 we need to set our API key in the openai module. Remember, the API key is what gives us access to GPT-3; it authorizes us and says we're allowed to use this API.

We can set our API key by extending a method in the openai module called api_key:

openai.api_key = 'Your_API_Key'

The method will take in the API key as a string. Remember, your API key is located in your OpenAI account.

So far, the code should look like this:

import openai

openai.api_key = 'sk-jAjqdWoqZLGsh7nXf5i8T3BlbkFJ9CYRk' # Fill in your own key

The Core Function

Now that we have access to GPT-3, we can get to the meat of the application, which is creating a function that takes in a prompt as user input and returns a paragraph about that prompt.

That function will look like this:

def generate_blog(paragraph_topic):
  response = openai.Completion.create(
    model = 'text-davinci-002',
    prompt = 'Write a paragraph about the following topic. ' + paragraph_topic,
    max_tokens = 400,
    temperature = 0.3
  )

  retrieve_blog = response.choices[0].text

  return retrieve_blog

Let's break down this function and see what's going on here.

First, we defined a function called generate_blog(). There's a single parameter called paragraph_topic, which will be the topic used to generate the paragraph:

def generate_blog(paragraph_topic):
  # The code inside

And let's go inside the function. Here's the first part:

def generate_blog(paragraph_topic):
  response = openai.Completion.create(
    model = 'text-davinci-002',
    prompt = 'Write a paragraph about the following topic. ' + paragraph_topic,
    max_tokens = 400,
    temperature = 0.3
  )

This is the bulk of our function and where we use GPT-3. We created a variable called response to store the response generated by the output of the Completion.create() method call in our openai module.

GPT-3 has different endpoints for specific purposes, but for our goal, we'll use the completion endpoint. The completion endpoint will generate text depending on the provided prompt. You can read about the different endpoints in the documentation.

Now that we have access to the completion endpoint, we need to specify a few things, The first one being:

model: The model parameter will take in the model we want to use. GPT-3 has four models that we can use:

text-davinci-002
text-curie-001
text-babbage-001
text-ada-001

These models perform the same task but at a different power level. More power equals better and more coherent responses, with text-davinci-002 being the most powerful and text-babbage-001 being the least. You can think of it like a car vs. a bike. They both perform the same task of taking you from one place to another, but the car will perform better. You can read more about the models in the documentation.

prompt = 'Write a paragraph about the following topic. ' + paragraph_topic,

prompt: This is where we design the main instructions for GPT-3. This parameter will take in our paragraph_topic argument, but before that, we can tell GPT-3 what to do with that argument. Currently, we are instructing GPT-3 to Write a paragraph about the following topic. GPT-3 will try its best to follow this instruction and return us a paragraph.

GPT-3 is very flexible; if the initial string is changed to Write a blog outline about the following topic, it will give us an outline instead of a normal paragraph. You can later play around with this by telling the model exactly what it should generate and seeing what interesting responses you get.

max_tokens = 400

tokens: The token number decides how long the response is going to be. A larger token number will produce a longer response. By setting a specific number, we're saying that the response can't go past this token size. The way tokens are counted towards a response is a bit complex, but you can read this article by OpenAI that explains how token size is calculated.

Roughly 75 words is about 100 tokens. A paragraph has 300 words on average. So, 400 tokens is about the length of a normal paragraph. The model text-davinci-002 has a token limit of 4,000.

temperature = 0.3

temperature: Temperature determines the randomness of a response. A higher temperature will produce a more creative response, while a lower temperature will produce a more well-defined response.

0: The same response every time.
1: A different response every time, even if it's the same prompt.

There are plenty of other fields that we can specify to fine-tune the model even more, which you can read in the documentation, but for now, these are the four fields we need to concern ourselves with.

Now that we have our model setup, we can run our function, and the following things will happen:

First, the openai module will take our API key, along with the fields we specified in the response variable, and make a request to the completion endpoint.
OpenAI will then verify that we're allowed to use GPT-3 by verifying our API key.
After verification, GPT-3 will use the specified fields to produce a response.
The produced response will be returned back in the form of an object and stored in the response variable.

That returned object will look like this:

{
  "choices": [
    {
      "finish_reason": "stop",
      "index": 0,
      "logprobs": null,
      "text": "\n\nPython is a programming language with many features, such as an intuitive syntax and powerful data structures. It was created in the late 1980s by Guido van Rossum, with the goal of providing a simple yet powerful scripting language. Python has since become one of the most popular programming languages, with a wide range of applications in fields such as web development, scientific computing, and artificial intelligence."
    }
  ],
  "created": 1664302504,
  "id": "cmpl-5v9OiMOjRyoyypRQWAdpyAtjtgVev",
  "model": "text-davinci-002",
  "object": "text_completion",
  "usage": {
    "completion_tokens": 80,
    "prompt_tokens": 19,
    "total_tokens": 99
  }
}

We’re provided with tons of information about the response, but the only thing we care about is the text field containing generated text.

We can access the value in the text field like so:

retrieve_blog = response.choices[0].text

Finally, we return the retrieve_blog variable which holds the paragraph we just dug out of the dictionary.

return retrieve_blog

Whoah! Let's take a moment and breathe. That was a lot we just covered. Let's give ourselves a pat on the back as we're 90% done with the application.

We can test to see if our code works so far by printing out the generate_blog() function we just created, giving it a topic to write about, and seeing the response we get.

print(generate_blog('Why NYC is better than your city.'))

Here's the complete code so far:

import openai

openai.api_key = 'sk-jAjqdWoqZLGsh7nXf5i8T3BlbkFJ9CYRk' # Fill in your own key

def generate_blog(paragraph_topic):
  response = openai.Completion.create(
    model = 'text-davinci-002',
    prompt = 'Write a paragraph about the following topic. ' + paragraph_topic,
    max_tokens = 400,
    temperature = 0.3
  )

  retrieve_blog = response.choices[0].text

  return retrieve_blog

print(generate_blog('Why NYC is better than your city.'))

And boom, after 2-3 seconds, it should spit out a paragraph like this:

Try running the code a couple more times; the output should be different every time! 🤯

Multiple Paragraphs

Right now, if we run our code, we'll only be able to generate one paragraph worth of text. Remember, we're trying to create a blog generator, and a blog has multiple sections, with each paragraph having a different topic.

Let's add some additional code to generate as many paragraphs as we want, with each paragraph discussing a different topic:

keep_writing = True

while keep_writing:
  answer = input('Write a paragraph? Y for yes, anything else for no. ')
  if (answer == 'Y'):
    paragraph_topic = input('What should this paragraph talk about? ')
    print(generate_blog(paragraph_topic))
  else:
    keep_writing = False

First, we defined a variable called keep_writing, to use as a boolean value for the following while loop.

In the while loop, we created an answer variable that will take in an input from the user using the built-in input() function.

We then created an if statement that will either continue the loop or stop the loop.

If the input from the user is Y, then we will ask the user what topic they want to generate text about, storing that value in a variable called paragraph_topic. Then we will execute and print the generate_blog() function using the parapgraph_topic variable as its argument.
Else, we will stop the loop by assigning the keep_writing variable to False.

With that complete, we can now write as many paragraphs as we want by running the program once!

Rate Limit

Since we're using a while loop, we have the potential to be rate limited.

Rate limit is the number of API calls an app or user can make within a given time period.

This is normally done to protect the API from abuse or DoS attacks.

For GPT-3, the rate limit is 20 requests per minute. As long as we don't run the function that fast, we'll be fine. But in a rare case that it does occur, GPT-3 will stop producing responses and make us wait a minute to produce another response.

Credit Limit

By this point, if you have been playing with the API nonstop, there's a chance that you might have exceeded the $18 limit. The following error is thrown when that happens:

openai.error.RateLimitError:  
You exceeded your current quota, please check your plan and billing details.

If that's the case, go to OpenAI's Billing overview page and create a paid account.

Let's take another breather. We're almost done!

Securing Our App

Let's think about this for a minute. We created this amazing application and want to share it with the world, right? Well, when we deploy it to the web or share it with our friends, they'll be able to see every piece of code in the program. That's where the issue lies!

At the beginning of this article, we created an account with OpenAI and were assigned an API key. Remember, this API key is what gives us access to GPT-3. Since GPT-3 is a paid service, the API key is also used to track usage and charge us accordingly. So what happens when someone knows our API key? They'll be able to use the service with our key, and we'll be the one charged, potentially thousands of dollars!

In order to protect ourselves, we need to hide the API key in our code but still be able to use it. Let's see how we can do that.

Install python-dotenv

python-dotenv is a package that allows us to create and use environment variables without having to set them in the operating system manually.

Environment variables are variables whose values are set outside the program, typically in the operating system.

We can install python-dotenv by running the following command in the terminal:

pip install python-dotenv

.env File

Then in our project's root directory, create a file called .env. This file will hold our environment variable.

Open up the .env file and create a variable like so:

API_KEY=<Your_API_Key>

The variable will take in our API key without any quotation marks or spaces. Remember to name this variable as API_KEY only.

Python File

Now that we have our environment variable set, let's open up the blog_generator.py file, and paste this code under import openai.

from dotenv import dotenv_values

config = dotenv_values(".env")

First, we've imported a method called dotenv_values from the module.

The dotenv_values() will take in the path to the .env file and return us a dictionary with all the variables in the .env file. We then created a config variable to hold that dictionary.

Now, all we have to do is replace the exposed API key with the environment variable in the config dictionary like so:

openai.api_key = config['API_KEY']

That's it! Our API key is now safe and hidden from the main code.

Note: If you want to push your code to GitHub, you don't want to push the .env file as well. In the root directory of your project, create a file called .gitignore, and in the Git ignore file, type in .env. This will prevent the file from being tracked by Git and ultimately pushed to GitHub.

With all that set and done, we’re finished! The code should now look like this!

blog_generator.py file:

# Generate a Blog with OpenAI 📝

import openai
from dotenv import dotenv_values

config = dotenv_values('.env')

openai.api_key = config['API_KEY']

def generate_blog(paragraph_topic):
  response = openai.Completion.create(
   model = 'text-davinci-002',
   prompt = 'Write a paragraph about the following topic. ' + paragraph_topic,
   max_tokens = 400,
   temperature = 0.3
  )
  retrieve_blog = response.choices[0].text
  return retrieve_blog

keep_writing = True

while keep_writing:
  answer = input('Write a paragraph? Y for yes, anything else for no. ')
  if (answer == 'Y'):
    paragraph_topic = input('What should this paragraph talk about? ')
    print(generate_blog(paragraph_topic))
  else:
    keep_writing = False

.env file:

API_KEY=sk-jAjqdWoqZLGsh7nXf5i8T3BlbkFJ9CYRk

Finish Line

Congrats, you just created a blog generator with OpenAI and Python! Throughout the project, we learned how to use GPT-3 to generate a paragraph, use a while loop to create multiple paragraphs, and secure our app with a .env file. 🙌

AI is expanding rapidly, and the first few to utilize it properly through services like GPT-3 will become the inovators in the field. Hope this project helps you understand it a bit more.

And lastly, we would love to see what you build with this tutorial! Tag @codedex_io and @openai on Twitter if you make something cool!

More Resources

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 🚀

User Interviews for Dummies

Malcolm Ridenour — Thu, 13 Oct 2022 16:58:36 +0000

Hi Devs! 👋 My name is Malcolm. I’m a brand new Customer Success Manager in my first tech job. When I was told to conduct a batch of user interviews, I assumed it would be easy. And after I completely bombed the first few, I knew this was out of my element.

My team then gave me a tiny pink book called The Mom Test by Ron Fitzpatrick, and it immediately changed not only the quality of my user interviews but also my thought process on identifying the good ideas from the bad IRL!

I’d like to share three takeaways from the book and perhaps help someone new to user interviews like myself:

1. Customer conversations are bad by default and it’s your job to fix them by asking better questions.

This is a cardinal rule from the book. Here are some examples of some bad questions (that I personally asked) that can give false positives and empty compliments that don't identify problems or offer solutions:

Do you think X is a good idea?
Would you buy a product that did X?
How much would you pay for X?

These questions lead to fluff - answers based on hypotheticals and detached from historical facts.

Here are examples of some good questions:

Talk me through the last time X happened?
Have you ever purchased a product like X?
How are you dealing with this problem now?

The good questions focus on specifics of the past instead of the generics or opinions about the future.

You won’t be able to completely stop some user interviews from being unproductive or awkward, but your questions are the only way to mitigate the dry and interrogative nature of them.

2. You can’t learn anything useful unless you're willing to spend a few minutes being quiet.

This is something I struggled with:

I talked too much and listened too little during my interviews!

During lulls in a conversation or when the user would say something that would spark my interest, I would allow the conversation to travel to a place that isn't useful anymore. And that's a no-go from the book. 🙅

The interviewer should only be speaking to ask or explain a question or guiding a user to the next question; the rest of the time should be listening to what your user has to say.

A great way to discover whether or not this is a problem for you is to record your interviews (with their permission of course) and listening to them afterwards. If you are talking more than they are, you are not using your time wisely.

3. Don't pitch your ideas to customers and don't mention your solution.

Naturally, when a customer gives you a negative critique or shares a problem they encountered with your product - it is almost reflexive to apologize and tell them what your intention was and what the team is doing behind the scenes to work on that problem. But don’t do it! 😱

There are two reasons you shouldn't pitch your ideas or explain your solutions to customers:

It is a waste of time that you could be using to listen for more information to solve the problem, instead of apologizing longer than you need to.
Most people are friendly and want to tell you what you want to hear. Little white lies told to appear amicable, but those don't help your business! What you want is the truth. So keep your plans and pitches to a minimum and let them tell you their opinions unsullied by letting them know what your plans are.

So learn from my mistakes when conducting your own user interviews and don’t let any of these obstacles get in the way of collecting the information you need from the most important part of any project or build – the folks that use them!

Happy interviewing and pick up The Mom Test by Ron Fitzpatrick to put your user interviews into overdrive.

💖 Malcolm from Codédex

// Detect dark theme var iframe = document.getElementById('tweet-1570869230341615618-812'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1570869230341615618&theme=dark" }

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.

More Resources

Build a Discord Bot with Python

Sonny Li — Thu, 01 Sep 2022 20:13:27 +0000

Prerequisites: Python fundamentals
Versions: Python 3.10
Read Time: 45 minutes

Introduction

In this tutorial, we'll learn how to set up your Python programming environment, create and register a bot using Discord Developer Portal, and write a few lines of Python code to respond to users' messages in Discord. We'll also provide a breakdown of each line of code for those who want to get a deeper understanding of how it all works.

The Discord bot that we are going to build will listen for the keyword $meme and responds with a random meme from Reddit.

The final result will look like this:

Let's dive in!

Requirements

Before we get started, you will need a few things if you don't have them already:

Python 3 installed.
pip (package installer) installed.
A Discord account.
A Discord server with "Manager Server" permissions.

How Does a Discord Bot Work

First, let's zoom out a bit and think about this question: "What does it mean to code a Discord Bot?" Simply put, a bot is nothing more than a computer program that performs some useful actions.

Because Discord wants bots to be able to do useful things, they have allowed developers to access parts of its system in their code, such as automatically responding to messages or helping with the server's admin functions (e.g. check out these popular Discord Bots).

Today, we're focused on getting our bot to read and write messages, so let's see how that works.

From the crude drawing above (I'm an engineer, not an artist), we can see how users and bots connect to the Discord backend. Each user interacts with the Discord backend to write and read messages. Then, the Discord backend servers will broadcast an event to any program listening that a new message has been posted. All we have to do is write our program to respond to message events (named bot.py here) and connect it to the Discord backend by using their API.

API (Application Programming Interface) is just a fancy terminology to define how one program talks to another program. In our case, Discord's API allows us to read and send messages to its backend servers.

First, we'll have to create and register our bot from Discord's Developer Portal.

Setting Up Discord Developer Portal

We'll be creating and registering our Discord Application inside the Developer Portal. Then, we will create a Bot for the application and get the required permissions.

Step 1. Go to Developer Portal

Visit https://discord.com/developers/applications and sign in if you haven't already.

Step 2. Create a New Application

To let Discord know we're going to be connecting to their backend servers, we need to register an application and set up the required permissions.

Click "New Application" on the top right.

Next, give your application a name. Here, we are calling ours MemeBot:

Step 3. Add a Bot to Your Application

Find the "Bot" tab in the left panel:

And click "Add Bot":

Step 4. Get the Token for Your Application

This step is important because we'll need this Token for later. This Token is similar to a password for your application. Anybody who has this can control it. (So make sure to never share your bot token with anyone, or upload it on GitHub by mistake!)

Click "Reset Token", write it down somewhere safe and definitely don't put it in any public place.

Step 5. Invite Application to Your Server

Now that we've set up our first application, we have to create an invite, to get our bot into our Discord server. To do that we can click URL Generator and select the following permissions. In the screenshot below, we are telling Discord to create an invitation link for our application with the scope "Bot" and that bot should be able to "Send Messages." (Note: Be careful with granting the all-powerful "Administrator" permission to your bot).

This is the link to invite our application (Discord bot) into a Discord server. Copy and paste this link into another tab in your browser and invite the bot into the Discord server that you want.

You can confirm if this worked by checking for this message in your Discord server.

Alright, now that we’ve set up our coding environment and got the necessary permissions from Discord for our new application, let’s write some code.

Writing the Python Code

Installing discord.py

The code that we will write, will be responsible for the creation of the bot that will connect to the Discord backend using Discord APIs.

The complicated part about writing this program is how we're going to interact with the Discord API. While we can read the API documentation and send HTTP requests directly to Discord, we have an easier way.

We'll be using a Python package called discord.py which is a simple wrapper around the Discord API. A wrapper provides a way to access an API through a particular programming language, in this case, Python!

If you are using Mac, run the following command in the Terminal to install it:

python3 -m pip install -U discord.py

If you are using Windows, then the following command should be used instead:

py -3 -m pip install -U discord.py

What did we just do here? We just installed a Python package from pip the package installer, which is just another way of saying we downloaded code that someone kindly wrote and uploaded to a public repository.

Log Into the Discord Server with the Bot

Let’s create a new file called bot.py in a new directory. This is the main file where we'll code the logic to make our Discord bot. Now paste the following code into it:

import discord

class MyClient(discord.Client):
  async def on_ready(self):
    print('Logged on as {0}!'.format(self.user))

client = MyClient()
client.run('Your Token Here') # Replace with your own token.

Let’s go over this block of code line by line.

import discord

class MyClient(discord.Client):
  async def on_ready(self):
    print('Logged on as {0}!'.format(self.user))

First, we've imported the discord.py package that we just installed and created our own class MyClient which we will use to interact with the Discord API. We create this class by extending from the base class discord.Client. This base class already has methods to respond to common events. For example, the on_ready() function above will be called when the Discord bot's login is successful.

discord.py works around the concept of events. There are other types of events (e.g. messages) that we will see later, but for now here's the definition of events from their website:

An event is something you listen to and then respond to. For example, when a message happens, you will receive an event about it that you can respond to.

Finally, our last two lines of code instantiates the MyClient class and calls run, which is the main way to start the client. The client will use the given token (which you should have saved from before) to authenticate itself to the Discord backend servers.

client = MyClient()
client.run('Your Token Here') # Replace with your own token

Running the Bot

You can run this code by typing in the following in your terminal.

python3 bot.py

As long as you keep this program running, your Discord bot will be online.

If you see this output in your terminal, then your Discord bot has successfully logged into your Discord server.

Logged on as MemeBot#3995!

Responding to Messages

Next, we want our bot to read messages in a Discord channel and respond to them.

Add the .on_message() method to the MyClient class like the following:

async def on_message(self, message):
  if message.author == self.user:
    return

  if message.content.startswith('$hello'):
    await message.channel.send('Hello World!')

The .on_message() method gets called automatically anytime there is a new message in a channel where our bot is located. In our method:

We are first checking if message.author == self.user, if the bot is the one sending the message in the chat. We don’t want the bot to keep responding to its own messages.
Then, we have some code to respond to a special keyword $hello.

Let's try it out. Run the command python3 bot.py to start our program.

Now, add Memebot to any channel and type the word $hello in that channel and see what happens:

We've successfully programmed our bot to log into Discord and respond to our messages. But can we go further?

How to Respond with Memes

What if instead of responding with a text message, the bot responds with memes? Well that sounds like a lot of work.. buuut the cool thing about programming is that we can reuse other people’s work (yay for open source).

Check out this Github repository: https://github.com/D3vd/Meme_Api. This API returns a JSON response containing information about random memes from Reddit. Hmm, let’s see how it works by visiting this URL: https://meme-api.herokuapp.com/gimme.

Here is the response that I got:

{
  "postLink": "https://redd.it/w0teq0",
  "subreddit": "me_irl",
  "title": "me_irl",
  "url": "https://i.redd.it/ztpkxx6yl0c91.png",
  "nsfw": false,
  "spoiler": false,
  "author": "ozgonngu",
  "ups": 110,
  "preview": [
    "https://preview.redd.it/ztpkxx6yl0c91.png?width=108\u0026crop=smart\u0026auto=webp\u0026s=e3db2a1ed5ee73480224b55b16fcb38925ea9095",
    "https://preview.redd.it/ztpkxx6yl0c91.png?width=216\u0026crop=smart\u0026auto=webp\u0026s=aaec73a28c4c0b2bc47f4f9722be2fdb8ba95893",
    "https://preview.redd.it/ztpkxx6yl0c91.png?width=320\u0026crop=smart\u0026auto=webp\u0026s=90495a39d05f6d9d8975fb776887c08f65ece2c4",
    "https://preview.redd.it/ztpkxx6yl0c91.png?width=640\u0026crop=smart\u0026auto=webp\u0026s=b291abfb8f85b5826f001dee881570e694bdb46c",
    "https://preview.redd.it/ztpkxx6yl0c91.png?width=960\u0026crop=smart\u0026auto=webp\u0026s=7afc3f2532c7017a0045ae50777a18a2e452183e",
  ],
}

It looks like the url field here contains the link for the meme's image. How about we have our bot respond to user's messages with this image?

Integrating the Meme API

Let's paste these lines of code to the top of the file.

import requests
import json

def get_meme():
  response = requests.get('https://meme-api.herokuapp.com/gimme')
  json_data = json.loads(response.text)
  return json_data['url']

requests package allows us to make HTTP requests to any URL. In this case we're calling the GET method to the URL that will give us the meme data.

json package allows us to read JSON data. This is useful since most data passed around on the web is in the JSON format, like the JSON response we saw above.

We need to install the requests package to import it. Run the following command:

python3 -m pip install requests

Now all we need to do is call get_meme() inside our bot's on_message() method. Let's also change the keyword from $hello to $meme since it's more fitting. Your code should look like this:

import discord
import requests
import json

def get_meme():
  response = requests.get('https://meme-api.herokuapp.com/gimme')
  json_data = json.loads(response.text)
  return json_data['url']

class MyClient(discord.Client):
  async def on_ready(self):
    print('Logged on as {0}!'.format(self.user))

  async def on_message(self, message):
    if message.author == self.user:
      return
    if message.content.startswith('$meme'):
      await message.channel.send(get_meme())

client = MyClient()
client.run('Your Token Here') # Replace with your own token

Time to test it out!

Just remember you need to close and restart your program. Press control+c to close the currently running program in the terminal and then, run python3 bot.py again.

The moment of truth...

Success! 🎉

Final Words

That's all it takes to set up and code a Discord bot in Python! Just a note: the bot will respond to you as long as the program is kept running. If you close your terminal or turn off your computer, it will no longer be running. If you want to keep the program running forever, we’ll have to deploy it to another computer in the cloud. However, that is a lesson for another day.

Hope you enjoyed the tutorial. If you have any questions, you can DM me on twitter at @hongjjeon.

More Resources

About the Author:

Hong Jeon is a Software Engineer at Waymo (formerly known as the Google self-driving car project). Hong discovered his passion for sharing knowledge in college during his time as a Teaching Assistant in several programming classes. You can catch him on Twitter at @hongjjeon.