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.