Refactoring

00:00 Generally, your code image generator works and that’s amazing. But the code is not super clean, so here are a few things that we will clean up in this lesson.

00:10 Currently, in the app.py file, you are hardcoding the Python code that you want to show inside of the context dictionary. Instead of having this in there, I would like to have this in a config file so you can easily change the code and run your code image generator with some fresh code.

00:30 The other part in the code function is hardcoding in the theme, so it would also be nice to have a more convenient way of changing the theme.

00:41 Next, if you hop over to the utils.py file, then you can also see that currently the directory and the filename are also hardcoded in the utils.py file.

00:52 So these are also two values that we could save in some kind of config and import them to make our application a bit more maintainable.

01:02 Create a new file named config.py in the root directory of your project. Inside of config.py, create four constants. Since they are config constants, you can choose having them in uppercase: the THEME, which currently has the value dracula.

01:18 Then CODE, which currently has the value of the print() function call saying Hello. Then create another named IMG_FILENAME, which currently is screenshot.png,

01:32 and IMG_DIRECTORY, which has the value screenshots.

01:38 Now that you have the config.py file with the four constants, you need to import them at the places where you use them. So let’s first go to utils.py and import the IMG_FILENAME and the IMG_DIRECTORY.

01:53 And replace the values of the variables directory and filename with IMG_DIRECTORY and IMG_FILENAME.

02:01 Okay, that was the first part. Now let’s use THEME and CODE in the app.py file. Again, you need to import from config the variables CODE and THEME.

02:13 And then instead of using the string dracula, when you’re instantiating the formatter, you can use the THEME variable there. And instead of hardcoding the print() function call string, when you call the highlight() function inside of your context dictionary, you are passing in the CODE variable.

02:30 Now, again, reload the browser, and if there is no error, then you did everything right. That was a nice refactoring session. And last but not least, let’s change the code up a little bit.

02:41 Hop over to config.py. Use another theme. So for example, I will use monokai and I will change the string. Instead of saying print("Hello"), I will say print("Bye").

02:56 Once I save the config file and I reload the browser, then you can see that there is a new theme, which is the monokai theme with the Python code that says Bye.

03:07 Okay, having one line of code is a little bit boring, so adjust the CODE constant with some triple quotes. And in between the triple quotes, you can add in multiline Python code.

03:21 And now when you save the config.py and you visit your code image generator, then you can see a nice big code image with multiple lines of Python code and nice code highlighting.

03:35 And that concludes the code part of this video course. In the next and last lesson, I will also give you a few ideas on how to continue working on the code image generator and share a few resources with you if you want to dive in deeper with a few concepts that we tackled in this video course.

03:52 See you in the next and last lesson.