Page MenuHomePhabricator

Outreachy Proposal - remind me this article in X days
Closed, ResolvedPublic

Description

Name (public):
Ela Opper

Do you meet the eligibility requirements outlined at https://wiki.gnome.org/Outreachy#Eligibility (if no, explain why not)?
Yes

Preferred pronoun (e.g. she, he, they):
She

E-mail address:
elaarad@gmail.com

IRC nick (public):
FoxyBrown

Internet presence (e.g. web page, blog, portfolio, GitHub, Twitter, LinkedIn links) (blog will be displayed publicly):

Location (city, state/province, and country) (public):
Tel Aviv

Education completed or in progress (include university, major/concentration, degree level, and graduation year):
B.Sc in Computer Science from The Academic College Of Tel Aviv Jaffa

How did you hear about this program?
Through 'She Codes' group

Are you applying for Google Summer of Code and, if so, with what organization(s)?
No.

Please describe your experience with the organization's product as a user and as a contributor (include the information, as well as a link or an attachment, for the required contribution you made to the project you are interested in here):
I spent the last day and a half installing MediaWiki server on my machine with all its dependencies and manage to contribute (I think I've managed...) this task -
https://phabricator.wikimedia.org/T75209
with this code:
https://en.wikipedia.org/wiki/User:Eee888/common.js

Please describe your experience with any other FOSS projects as a user and as a contributor:
Umm... This will be my first time as an open source contributor.

Please describe any relevant projects that you have worked on previously and what knowledge you gained from working on them (include links):
I have worked for mostly large companies that provide complex front-end products (real-time, SDK's, ext.):
Retalix, Liveperson, Appsflyer, Gigya.

What project(s) are you interested in (these can be in the same or different organizations)?
Notifications in MediaWiki.

Who is a possible mentor for the project you are most interested in?
Moriel Schottlender and Matthew Flaschen

Please describe the details and the timeline of the work you plan to accomplish on the project you are most interested in (discuss these first with the mentor of the project):
On the 1-2 weeks I would explore and learn in details the exists notification system (mostly on the server side)
On the 3rd week I'll add the timed notification infrastructure to the server side
On the next 4-6 weeks I'll implement the client side modal(?) which will enables the user to config the desired notification to the article (deliverable).
On the 7th week I'll integrate smoothly the client side with the server side and will add some Unit Tests to the client side components (deliverable).
On the 8th week I'll explore limitation of non-supported JS explorers and try to figure out a solution (deliverable?).
On the 9th week I'll explore the possibility to determine timed notifications on non-articles entities (deliverable?).
On the final week I'll be available to bugs, change requests and all kind of things that comes up in projects like these (deliverable?).

Participation:
Personally, I like working "through the hands", which means that I'll try to get along myself, till the point I would not have an idea where to progress. Then I'll ask questions on the relevant forum(s), and will explore others similar code/project.
I like to work in short intervals, so my commits(=check-ins) will be continuous (when I'll grasp the core idea of the task).
I will communicate with my mentors with every accomplishment/major issue.
And of course I'll be highly responsive to them.

Past experience with FOSS:
Unfortunately, I have no experience with FOSS, only with startups and enterprises - but I'm looking forward to it!

Will you have any other time commitments, such as school work, exams, research, another job, planned vacation, etc., between May 30, 2017 and August 30, 2017? Please provide exact dates for these commitments and the number of hours a week these commitments take.
Yes - I'll be spending time with my daughter every day from 1PM till 5PM UTC.
I would complete my tasks later at night if I'll see I'm late behind.
We also reserve a vacation on August 23rd till 30th. I suppose that I could take my work there, but I rather not.

My typical working hours:
6AM-1PM (sometimes till 5PM UTC

If a student, please list the courses you will be taking between May 30, 2017 and August 30, 2017, how many credits you will be taking, and how many credits a full-time student normally takes at your school. Please provide a link or upload your program's suggested curriculum by semester, which includes the suggested number of credits in each semester. Please provide a link or upload your school's academic calendar.

Microtask: T75209: The document title should be dynamically updated to include a (n) notifications count in the browser title bar.
https://outreachy.gnome.org/?q=view_projects&prg=8&p=1631


Copied from T2582:

Milestones:
Week 0 (May 23-29) - Perform community bonding, open my first blog and did a lot of Echo reading (both code and documentation),
start by figure out how to create a new notification type and write a feature flag for the feature.
Week 1 (May 30- June 5) creating a new notification type and write a feature flag for the feature. Creating new Article Reminder API
Week 2 (June 6 - June 12) Enriching the Article Reminder API
Week 3 (June 13 - June 19) Exploring the time delay mechanism for the API and improve the API
Week 4 (June 20 - June 26) Creating the UI button that opens up the Article Reminder menu and popup menu itself
Week 5 (June 27 - July 3) Continue developing the popup menu, fix API code review comments
Weeks 6-7 (July 4 - July 17) Continue developing the popup menu, fix API code review comments
Weeks 8-9 (July 18 - July 31) Continue developing the popup menu, fix API code review comments
Week 10 (August 1 - August 7) Writing a new and improve notification type (based on the first POC)
Week 11 (August 8 - August 14) I'll explore limitation of non-supported JS explorers and try to figure out a solution (deliverable?).
Week 12 (final) (August 15 - August 21) I'll be available to bugs, change requests and all kind of things that comes up in projects like these (deliverable?).

Primary mentor: <Phabricator Username>
Co-mentor: @Mattflaschen-WMF, @Mooeypoo


Summery:

So!
The final commits of my project are super close to being merged into the master branch, all comments were addressed, the feature is working fluently - I am a proud mother of a WikiMedia feature!

The internship was very interesting and enriched experience: at first, I did not tell my left from right (all the new tools I had to learn, the methods, the conventions, the alternatives of doing every little thing) but as usual, as in all workplace, I managed to get on top of things and started to make a progress.

My mentors were extremely friendly and supportive, gave me all the information needed and beyond, were super available and gave me the feeling that I can approach them with any question, anytime.

The outcome of the feature is a game changer for the Echo extension in WikiMedia - it is the first scheduled feature in the extension, instead of being just responsive to the actions the users are doing right now.

The feature itself is protected with a feature flag, and placed in the UI "front row" - a new tab near the Wishlist, Edit and History tabs.
When the user clicks on it, a popup is opened and a page reminder form is shown inside of it.

The user filling the form and then save the reminder. Then there is a backend which set this scheduled event into the data base and a maintenance script that will run every 15 minutes and checks whether there are scheduled events needed to be activated.

When and if the maintenance script finds such event(s), those events are being triggered through the system and the user is getting a new notification about his reminder with his own comment (if he adds one, of course).

There are many next steps to this feature, this is only the MVP of it (multiple reminders per page, reminder deletion, reminder edit
and event reminder snooze (!) BUT in the Outreachy internship time frame, the MVP was more than enough.

I would like to thank again to my mentors and of course to Outreachy who gave me this opportunity to grow and learn.

Ela.

Event Timeline

Eee888 created this task.Mar 30 2017, 5:23 PM
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptMar 30 2017, 5:23 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Eee888 updated the task description. (Show Details)Mar 30 2017, 7:25 PM
Eee888 updated the task description. (Show Details)Mar 30 2017, 8:22 PM
srishakatux added a subscriber: srishakatux.

@Eee888 Thanks for your proposal! Could you change the title of this task to something which is more project-related?

srishakatux reassigned this task from Mooeypoo to Eee888.Mar 30 2017, 9:12 PM
srishakatux added a subscriber: Mooeypoo.

Thank you for the proposal, @Eee888 ! The code looks good! After testing, I have tiny comments to add. I sent them to you, but here they are a little more clearly:

  • The hook seems to run just before the DOM changes -- we should fix that in Echo, but while it's slightly broken, my recommendation is to use the hook's parameters. The hook gives you 3 params: function ( notificationType, notificationCount, notificationCountLabel ) { ... } so you can use the notificationCount instead of reading from the DOM. Just notice that the count you're getting is only per type so you might have to update your per-type count when the hook is fired, and then your overall number is count['notice'] + count['message'] or something like that.
  • Related to the total count -- your current code pushes '(n)' to the beginning of the title. This means that at first, I get "(x) Title of page", and then if my notification count changes (like, if I opened my notifications popup, or marked notifications as read/unread) then you get "(y)(x) Title of page" etc. You could try to cache the initial title of the page, and then just push the number before the cached value, so you always get one number in.

Good work :) Thank you for the submission!

Just as an FYI, this caused me to submit the fix to make sure the hook fires after the DOM actually changes: https://gerrit.wikimedia.org/r/#/c/345779/

However, I still recommend going with the hook parameters, if only just to be sure you get the correct count every time. This should be fixed (at least the first bullet point) once the above code is merged and deployed anyways, but that would be around next week if this patch is merged soon.

Anyways - thanks for exposing this, even if by accident ;)

Courtesy note - Please be aware that there are other students interested in this project, who posted proposals as child-tasks to the original T2582: Remind me of this article in X days

Eee888 renamed this task from Outreachy Proposal to Outreachy Proposal - remind me this article in X days.Apr 1 2017, 5:02 AM
Mooeypoo added a comment.EditedApr 1 2017, 5:29 AM

Okay, this script is awesome, I've been playing around with it a little.

I'm hoping to get this script ready so we can propose it as a global gadget, even in mediawiki.org and get used by other users across our wikis!

So here are a couple of comments to really polish this:

  • Your counter is great, but the next step is to make sure it works with all languages. Some languages have difference rendering for the digits (for example, using comma vs dots as thousand-separators, etc) so we have a utility to handle that: mw.language.convertNumber() (see source here) So you should encompass the final display (inside the brackets) with that converter.
    • MediaWiki works with modules, so in order to be able to use mw.language.convertNumber() you will need to make sure your gadget loads mw.language module. You do that through the ResourceLoader loader: mw.loader.using( 'mw.language', function () { /* your code here */ } ); (see reference to the loader and how to use it in the documentation) - I know it makes things a bit more complicated, but that's the only way to make sure that module loads before your code runs, and that we support the languages that we do on Wikipedia.
  • Speaking of converted numbers - data-counter-text is already a converted number-string, so parseInt() may not work on some versions of it in some languages. You should instead use data-counter-num which is the raw number, for your counter, and then convert it before display.
  • Array.prototype.include() seems to be ES6, and doesn't work for earlier versions of IE before IE11; please replace that. We are still supporting ES5.
  • Your initial call should go inside a $( document ).ready() process (or any other iteration of it) so it runs after the DOM's ready. (So you'll have to do the mw.loader.using call *and* document-ready call as nested layers, to make sure both the module and the DOM are ready for the script to run).
  • We generally use jQuery. This isn't super crucial, but there are several things you can just switch to use jQuery instead of pure JS (like using $element.data( 'counter-text' ) instead of element.getAttribute('data-counter-text'), etc)
  • Totally petty, but maybe add a space after the parentheses?
Eee888 added a comment.Apr 3 2017, 3:58 AM

@Mooeypoo -
Thanks for the inputs!

My problem is when trying to use mw.loader.using('mw.language', /BLA*/** I get an error "Error: Unknown dependency: mw.language".

I wanted to leave my common.js works so here is the buggy version right here:

$(document).ready(
mw.loader.using('mw.language',
function(){

		var initialDocTitle = document.title;
		var messageNotification = 0, alertNotification = 0;
	
		function addNotificationCounterToDocumentTitle(notificationType, newCountValue){
			
			if (!notificationType) { //first time the page is loaded
			
				var notificationElmArr = $('.mw-echo-notifications-badge');
				for(var elemIndex = 0; elemIndex < notificationElmArr.length ; elemIndex++){
					
					var elementNotificationNumber = parseInt($(notificationElmArr[elemIndex]).data('counter-num'));
					notificationElmArr[elemIndex].parentElement.id.indexOf('alert') > -1 ? 
						alertNotification += elementNotificationNumber : messageNotification += elementNotificationNumber;
				}
			} else {// it's an update
			
				'alert' == notificationType ? alertNotification = newCountValue : messageNotification = newCountValue;
			}
			
			var notificationToTitle = messageNotification + alertNotification;
			
			document.title = notificationToTitle !== 0 ? '('+mw.language.convertNumber(notificationToTitle)+')' + initialDocTitle : initialDocTitle;
		}
		
		addNotificationCounterToDocumentTitle(); //for the initial page load
		
		mw.hook('ext.echo.badge.countChange').add(addNotificationCounterToDocumentTitle); //for any other notification counter change

}, function(err){console.log(err)}));

thanks,

Ela.

@Mooeypoo -
Thanks for the inputs!
My problem is when trying to use mw.loader.using('mw.language', /BLA*/** I get an error "Error: Unknown dependency: mw.language".

OOPS, that's totally my fault -- try 'mediawiki.language' as the name of the module. (Sorry! I completely forgot the module names are not shorthand)

Eee888 added a comment.Apr 3 2017, 6:11 AM

Done and works, Thanks.

I also want to thank you for your proposal and completed microtask. It's great to have interested people!

I have a few requests below, based on the application template and/or Outreachy application.

  • Please note which university you graduated from.
  • Please list some of the projects you've worked on, or companies if the project-level is not public. You can provide a resume, or just list them here.
  • Please list both Moriel and I as co-mentors, per T2582: Remind me of this article in X days
  • Web Page / Blog / Microblog / Portfolio:
    • You can list as many of your relevant sites as you wish, but we are particularly interested in examples of your past work.
  • Typical working hours
  • Participation
    • "We don't just want to know what you plan to accomplish; we want to know how. Briefly describe your work style: how you plan to communicate progress, where you plan to publish your source code while you're working, how and where you plan to ask for help. (We will tend to favor applicants that demonstrate a clear vision for what it means to be an active participant in our development community.)"
  • Past experience
    • "Please describe your experience with any other FOSS projects as a user and as a contributor:"

Outreachy is 13 weeks, so it would be 12 weeks not including your vacation. Please don't make major changes, but you can tweak your timeline to account for that.

Eee888 updated the task description. (Show Details)Apr 5 2017, 11:53 AM
Eee888 updated the task description. (Show Details)Apr 5 2017, 12:11 PM

Congratulations, you have been accepted for Outreachy! Welcome!

@Mooeypoo and I look forward to working with you.

We will use the actual task (T2582: Remind me of this article in X days) going forward, so this is being merged in (we can discuss other forms of project management and how to use Phabricator in more detail together).

Aklapper changed the task status from Duplicate to Resolved.Sep 26 2018, 3:14 PM
Restricted Application added a project: Growth-Team. · View Herald TranscriptSep 26 2018, 3:14 PM