GSoC 2018: OOUI Tutorial Migration
What have I been up to lately?
So glad you asked. I made a new version of the first part of the OOUI library tutorial. So far this is coming along very well, and I hope the new tutorial will be merged soon. It’s in review now, so I’m expecting some corrections and modification requests first. And I already know about a bunch of lint errors I’ve submitted my patch without fixing (sorry!), so there’s that, too.
The new tutorial will be migrating to the official OOUI docs. It’s meant to be a part of the OOUI Demos website. Revamping it consisted of a variety of tasks: Updating the installation instructions, creating live demos of different stages of the tutorial app (which is, of course, a ToDo List app), deciding on an initial design, solving problems that have to do with changes made to the library since the original tutorial has been written, ensuring coherence and cohesion of the text after making all the changes. Plus, debugging weird problems, or problems that seem weird until you manage to debug them.
For instance, I wanted to use a syntax highlighting tool (to color the code shown in the tutorial). So I did a little research, came to the conclusion I should go with PrismJS, and then found out OOUI demos, which my project is part of, already uses PrismJS. So… why… wasn’t it loading… all the cool colors…? And what about the line numbers…?
TL;DR: it turned out there was a reason for that. When using the particular version we were using (1.12.2, I think), it’s not enough to include the CSS and JS scripts of this library, you also need to add a piece of JavaScript code. Once things have reasons, they cease to be weird. The mystery then goes on to settle somewhere else.
As you can learn from the screencap below, I enjoyed building the live demos, but I had some trouble installing some stuff. I just wanted to do a fresh install, to make sure the new instructions I’m writing do in fact work. Well, eventually I realized what I did wrong. After my mentor told me, that is. ¯\_(ツ)_/¯
Next up
If time permits, I’m hoping to redo part 2 of the tutorial as well, using the design and structure I’ve conjured up for part 1. Part 2 is where you learn how to build your own widgets/classes, instead of just using existing ones.
I also intend to build a page/app for displaying these and future tutorials — a tutorial system, if you will. I will actually get to do some of the initial planning, UX thinking, etc., and influencing different facets of a project is always fun for me, so I think it’s going to be awesome.
This is the tutorial migration project ticket/proposal. I will keep updating the workplan as I go.
See you next time.
