What did you do this week?

This week I continued to improve the user experience for the course.

1. The PR that I mentioned last week (PR #129), where I replaced the code screenshots with codeblocks and eliminated repeated titles, had some corrections to do. I already implemented them and is under revision again.
2. I added the introductory video in the index. PR #130
3. I did a proof of concept to divide the readings by topic into shorter sublectures. PR #132

What is coming up next?

This last proof of concept seemed very useful and more organized to my colleagues and mentors. This upcoming week I will be implementing the same structure with all the other lectures.

If I finish early, I plan on grouping the lectures into subgroups with each quiz. That way the menu looks with no more than 7 items (following UX rules). Instead of the large list that is displaying right now.

Did you get stuck anywhere?

I did not get stuck. I had to pause my work to make corrections that were necessary, but I continued working just fine :)

What are you working on?

This week I made some fixes, enhancements, and new things:

Fixes: I worked on the Brython console. The output was given as a static block and when the text shown was very large, you could not see it due to the size of the iframe. To solve this, I implement a CSS style that allows the block to be scrolled and resizable. I also added another style called sticky, so that the console is always visible at the top of the iframe and the rest of the content below it. Here is the PR

New things: An interactive Python interpreter was required for the first lecture. For this I used a Brython library called Interpreter and added them to the first lecture of the course TWP05. Here is the PR

Enhancements: Lastly, I did a general review of all the lectures. I removed the content that was duplicated (like: titles, images, text), change some images that were screenshots of a fraction of code, for elements like code-blocks, code-lens or activecode. PR #128 and PR #129

What have you struggled with?

Runestone uses a tool called Sphinx to build the projects. I have struggled with its limitations and learning the syntax for reStructuredText files. For example, to color text it is needed to embed html. It does not have an instruction for that.

What solutions have you found?

The .. raw::html instruction helped me. Since is writing in HTML syntax it has more documentation coverage and it allowed me to add color to the text.

What did you do this week?

As I mentioned in my previous Blog Post my mentors were reviewing the console improvement for the Brython module. It was approved! :) So, we are officially done with this new tool that is helping with the exercises that had limitations due to Skulpt. I started to do a sketch of what I would like to implement graphically for the course (bootstrap buttons, forms, etc). But after a reunion with the mentors, we have decided to do these changes after the first evaluation period to avoid conflicts with the changes that are being done with the exercises.

What is coming up next?

In the reunion they suggested to implement a Python interpreter for the first part of the PyZombis course where we want to show students how to write expressions and not to construct a whole program for it. For example how to print a line of output like “2+2” without actually writing print(2+2). Here is a reference. So that is what I will be working on this week. And some other minor improvements reviewing old pictures that are outdated or that just not apply to the context. Like reference to the IDE code highlighter. e.g. “When you write print you can see the word is purple, that is because it is a reserved word…”. As we are not using the same IDE anymore, this kind of clarifications must change.

Also, I will be communicating with the Runestone community for the upcoming front-end changes and ask if it is possible to change the books layout.

Did you get stuck anywhere?

I would not call it stuck, but I could not continue with some of the work I started. For example, for the course I wanted to show the PyZombis logo instead of the Runestone icon, but as we are building the course as a Runestone Book we cannot do that, and I did not know that. So more than getting stuck, it was that I had to reformulate my ideas and undo some of my advances.

What are you working on?

This week I kept working on the console that shows outputs and errors on screen (inside the iframe output) and I have finished it. I made two approaches:

1. Overriding the console.error, console.debug, console.info and console.log javascript methods, only when they are called inside the iframe. I made sure that these new methods keep logging on the browser console but also display the message on a pre tag inside the iframe. Here is the PR for this approach.
2. Redirecting sys.stderr and sys.stdout. Similar to the first solution, I redirected these two Python methods so they show the errors and the print() outputs on a pre tag inside the iframe as well. To catch the errors I used a try except with a exec() function inside, that runs the program captured in the text area. Here is the PR for this approach.

On both approaches I used the highlight.js library when there is an error to color key words.

My mentors are reviewing these two approaches to see which one is better. They were the ones that recommended a second approach on the first place because overriding console.log does not look like a good idea.

Once this gets merged, I would finish my first milestone. And start working on the second one.

What have you struggled with?

I struggled finding the second approach. Before I got to what I have now, I tried a lot of other alternatives but those were not working. I submitted an issue logging what I tried. My last attempt was missing the try except sentence for it to work. I could solve it, but I did struggle finding the solution.

What solutions have you found?

I joined the Brython google group where other people were having similar issues to mine, and I received a lot of help there: :D

What did you do this week?

I achieved the Brython module! :D you can try it here in an exercise I did that works with the Facebook API getting the profile picture. The mentors are reviewing my PR on this component that will help implement the advance exercises of the course. This PR changes the requirements of the project, so it uses my fork of Runestone that has the new option for active code blocks with Brython.

I also submitted a PR to Runestone Components repository. If it gets accepted and merged PyZombis will not have to reference my fork on its requirements which would be a great thing.

What is coming up next?

I started working on some upgrades the mentors suggested for the Brython option. Right now, the output displays an iframe with an embedded html page that shows the results. But when a Syntax error is made or the simple print() function is used, these results are shown on the browser console rather than the iframe. I look forward to having a console, that displays below the iframe the errors or logs that are written.

Did you get stuck anywhere?

I did not get stuck. I solved the issue I was struggling with last week, about the Runestone project and I ended up with a great outcome! I am happy with my achievements this week and I hope to keep this work rhythm up :)