UserScript Guidelines for Upcoming Front-End Updates

[WaniKaniJavi]

Hi Everyone!

@gomakuma and I will be working on the front-end changes to Lessons that Koichi talked about in Upcoming Front-end Updates. We’ll keep the developer mailing list (make sure to check UserScript Affecting Changes and the forums up to date with our progress along with links to our preview server so you can test your scripts. For now, we wanted to start by giving script authors general guidelines on how to rewrite scripts that could be affected.

Adding CSS

Prefer adding a block or linking to an external stylesheet over adding inline styles to elements. Also keep an eye out for markup changes. (We’ll only make changes if we really have to.)

Manipulating the DOM (ex. deleting or repositioning a div)

We’re still thinking of ways to keep supporting these, but for now, it’ll be safer to do DOM manipulation outside of the React app – maybe in a sibling div, with some styling to make it look similar.

Scripts that substitute global functions with their own functions

window.waniKaniFunction = function(x){
  return x;
}

var originalWkFunction = window.waniKaniFunction;

window.waniKaniFunction = function(x){
  return originalWkFunction(x) + 1;
}

//or even

window.Math.random = function(){ return 0; };

We could consider keeping some functions exposed, but it’s too early to make guarantees here. Safest assumption is that these won’t be available and you should refactor accordingly. One route that might work which other scripts already use is combining Mutation Observer with jStorage.

Scripts that rely on jStorage

jStorage will continue to be available. Scripts that use it for their own logic and have their own namespace should be okay . Scripts that rely on manipulating jStorage with WaniKani’s own namespace are also ok for now, but this might change in the future.

That’s what we’re thinking for now. In the coming weeks we’ll post updates with more details. Thank you!

EDIT: Updated the example code snippet

[Kumirei]

@WaniKaniJavi

Prefer adding a block or linking to an external stylesheet over adding inline styles to elements.

Is this just preferred or would it actually break if we used inline styling? I don’t think I do use inline styling anywhere, but I’m curious.

@WaniKaniJavi

window.Math.random = 0;

Now that’s just evil

[Belthazar]

This is the first time WaniKaniJavi has posted — let’s welcome them to our community!

Welcome, new person! Have you read the FAQ?

@Kumirei

Now that’s just evil

Random Number

[rfindley]

@Kumirei

window.Math.random = 0;

Now that’s just evil

Heh… Reorder Ultimate actually hijacks random().

I would love to have a JS API of callbacks and/or overridable functions such as window.wanikani.lessons.choose_next_item(), which scripts (like Reorder) could override or augment.

(I posted a proposal around here somewhere. Maybe I can dig it up)

[seanblue]

@rfindley

Heh… Reorder Ultimate actually hijacks random().

Believe me, both @Kumirei and I are painfully aware of that…

@rfindley

I would love to have a JS API of callbacks and/or overridable functions such as window.wanikani.lessons.choose_next_item() , which scripts (like Reorder) could override or augment.

+1. This would be a great approach I think.

[seanblue]

@WaniKaniJavi

Scripts that substitute global functions with their own functions

window.waniKaniFunction = function(args){

// some of your own code;

window.waniKaniFunction(args);

};

//or even

window.Math.random = 0;

I’m nitpicking a bit here, but you realize that neither of those would actually do what you’re trying to demonstrate, right? The first example would result in a stack overflow and the second would throw an error when you call Math.random since 0 isn’t a function.

[Lailani]

On DOM manipulation by 3rd party: I am not entirely sure this technique is possible when using jStorage but if you put your react components into the store, scripters might be able to insert their own components there. The idea comes from this handy article: Building Plugins for React Apps | Nylas

[WaniKaniJavi]

I’m nitpicking a bit here, but you realize that neither of those would actually do what you’re trying to demonstrate, right? The first example would result in a stack overflow and the second would throw an error when you call Math.random since 0 isn’t a function.

You’re right, just updated the examples

[WaniKaniJavi]

@Kumirei

Is this just preferred or would it actually break if we used inline styling? I don’t think I do use inline styling anywhere, but I’m curious.

It depends on whether the element that has an inline style needs to be re-rendered with new data. On re-render, you’ll probably lose the styles that you added inline.

[WaniKaniJavi]

@Lailani

On DOM manipulation by 3rd party: I am not entirely sure this technique is possible when using jStorage but if you put your react components into the store, scripters might be able to insert their own components there. The idea comes from this handy article: Building Plugins for React Apps | Nylas

Thanks for sharing! That’s interesting, haven’t seen a plugin approach like this before. But this looks like something we’ll explore further down the line. Right now we just want to be as similar as possible to the current site while introducing React.

[gomakuma]

Hi all

Thanks for following along. This is a cross-post from the other thread. I’m here to let y’all know that we’ve updated the preview site with the first batch of front-end updates to WaniKani. You can use your regular WaniKani credentials here: http://preview.wanikani.com/.

Remember: The preview site is not a test site! The data is from your regular account, so all lessons and reviews are the real deal.

We’d love it for you to try some lessons and quizzes out on the preview site. Try your add-ons and user scripts, especially if they are used on parts of the page that have been converted.

For more nitty gritty details on this update:

• What changed? The top half of the components on the Lessons page and Quiz page have been converted to React, specifically: the Home button, the Skip button, the Stats bar on the top right (with the number of Radicals, Kanji, Vocabulary and total completed), the main character display and the bar that displays what kind of question you’re answering. If you want to follow along with the React changes, I recommend using a React browser extension.
• What hasn’t changed? None of the features, user interfaces or design have changed. For the most part, CSS class names, DOM element structures and hierarchies have not changed. The data for these components, for example, the number of Kanji left, still come from $.jStorage.

Update, 2/12: Thanks to @sornvru for pointing out the whitelist. All scripts you’re testing should have preview.wanikani.com on their whitelist at the top of the script code as well. For example, the Wanikani Ultimate Timeline script’s whitelist includes both sites with this line: // @include /^https://(www|preview).wanikani.com/(dashboard)?$/ . The script won’t work the @include line only has wanikani.com and not preview.wanikani.com

If you notice any bugs, please @wanikanijavi and I (@gomakuma) know in this thread.

Thank you and happy reviewing!

[sansarret]

Here is a thread:

Forecasting Reviews on Preview (or Previewing Review Forecasts)

Hey all! Continuing our Extreme Dashboard Makeover: Slow Edition™, we’re introducing a couple new tools on the dashboard: the review forecast and illustrated, you-can’t-miss-them lesson and review buttons. It’s all up right now on the preview server! The review forecast does just what it claims: it shows when new reviews will show up, broken down by the day and then the hour in a simple, easy-to-scan format. Since we didn’t want to get into speculation, prediction, or machine learning (or acc…