Google Summer of Code is finishing and many things have been done on WikiToLearn since previous post. A little recap is needed.

Talking with mentors has been crucial because they told me to focus on finishing CRUD interaction with API backend instead of working on “history mode” viewer.

On the CRUD part, users now have full control of courses and chapters, they can:

• Edit courses title
• Add new empty chapters to a course
• Reorder course chapters
• Edit chapters title
• Add new empty page to a chapter
• Reorder chapters pages
• [WIP] Write content of a page

Chapter editor have the same UI of course’s one because you can do similar actions in both of them. Here you can see a real web app screenshot of it

Now there is some important work to do: let users write organized content in a useful and easy manner.
They need an editor that lets them insert:

• Math formulas (with real-time compiling and rendering)
• Theorems and demonstrations
• Images

For these tasks we make use of CKEditor (now at the 5th version, compatible with our build system), we have to create/use existing plugins to let users write beautiful content ready to be read.

The difficult part is that this information needs to be structured to be easily saved and reused. I read most of CKEditor docs and I integrated it in our webapp, I prepared a local repo for it because we need to plugin some custom modules for make it working with math, images and with our data structure and we have to lock-down some features we don’t use. It is a bit difficult to know which part has to be touched in order to make it working but I am on the way because I understood CKEditor fundamentals by reading the docs.

The work on WikiToLearn webapp will continue even after the end of GSoC, I’ll let you know how it goes.

Hi, it’s a bit of time that I didn’t write a blog post and many things on WikiToLearn ecosystem happened. Course editor mode is almost finished: now you can add, remove and edit chapter on a course, with new revamped Dialog and Modal components for confirming and editing views. You can see it below in action.

These works needed an update on the API backend and some discussion with mentors so they took some time to implement. (because you know, _etags…)
I introduced a feature not present on previous Modal and Dialog compoents that dismiss them on clicking outside their view. This is important because Modals which haven’t “confirm” or “dismiss” buttons couldn’t be closed before.

Another important work has been done on making typography fluid. When resizing the window the typography should change little by little and media queries aren’t enough. This has been done using viewport units, so font size change smoothly (check https://www.youtube.com/watch?v=Wb5xDcUNq48&t=2s for more information).

Now WTLIcons are clickable, more styles have been fixed and PWA banner is displaying again!

Now we can work on page editor and course history viewer!

Hi everybody, it has been a month since I started working on WikiToLearn PWA for Google Summer of Code program and many things happened!
WTL frontend needed some improvements in terms of usability and functionalities. Course needed a way to update their metadata: title and chapters order for example
So I implemented a work-in-progress EDIT MODE, as you can see below. You can drag chapters, insert new ones and/or modify course title.

Now that editing structures works, I started to write some unit and integration tests. I had to change the current setup to make it working: PhantomJS is no longer maintained so I replaced it with Chrome Headless for now.
New components have been added: Snackbar for displaying messages, Error component has been rewiewed and it is available globally by setting the “error” variable from any component.

One problem regarding OAuth2 authentication was that the token was expiring without being refreshed automatically. Now the PWA can detect if a token is expiring in little time (thanks to @crisbal and its vue-keycloak package) and refresh it.
As of now, it is a very great experience, i learned a lot using VueJS, mentors helped me a lot by keeping me focused on what needs to be done now, and what can be delayed after. Thanks a lot all.

Hi everybody, first two weeks are gone so I am going to do a little summary of what I did and what’s next!
WikiToLearn frontend needed a easily way to navigate between courses, so I coded a little pagination component that make transition between pages more user-friendly. This component can be reused in other scenaries too because it is flexible.

Frontend needed a way to know if there are pending network requests so I introduced a little animation when requests spawn, hiding it when they finish.

Migration to webpack 4 has been done with success, build time is decreased by 30-40%, and bundle size is lower too! From 472kB to 325kB!

Initial work to include WorkBox, a JS library to handle service workers, has been done by replacing old sw-precache plugin.
And what’s about our user’s data? I made a standalone privacy policy page to show where your data goes and how they are used in our application.

And so what’s next?
We need to focus more on usability and make courses and chapters’ structure editable. Then we can set up all for unit and integration tests. We can update some dependencies’ configuration too to cut off a few kB of resources and seconds of building time.