mozilla / webmaker.org

deprecated - https://blog.webmaker.org/whats-next-for-webmaker-tools

This project is no longer under active development.

Read about why, here: https://blog.webmaker.org/whats-next-for-webmaker-tools

webmaker.org

TLDR; if you've done this before

####Development

1. git clone https://github.com/mozilla/webmaker.org
2. npm install
3. cp env.dist .env
4. grunt dev (Builds front end js. If you aren't working on front end assets you can just do node app)

####Submitting PRs

1. grunt (validate and compress images)
2. Make a pull request against mozilla/master

##New Contributors

Please review our contributing guidelines here.

Dependencies

The setup portion of this README assumes you have the following installed:

• Node.js & npm
• Bower: npm install -g bower
• grunt-cli: npm install -g grunt-cli

You should also have these Webmaker stack applications running:

• MakeAPI: https://github.com/mozilla/MakeAPI
• Webmaker Login: https://github.com/mozilla/login.webmaker.org

Project Setup

1. Clone webmaker.org and enter the directory: git clone https://github.com/mozilla/webmaker.org && cd webmaker.org
2. Install webmaker.org's Node and Bower dependencies: npm install
3. Copy the configuration template to its expected location: cp env.dist .env
4. Open .env in your favourite text editor and ensure that your PORT, MAKE_ENDPOINT, LOGIN and LOGINAPI environment variables are set to the correct values. PORT can be any available port. MAKE_ENDPOINT, LOGIN and LOGINAPI should point to the URL of your running MakeAPI and Webmaker Login service instances.
5. Run grunt dev, and open up http://localhost:7777/ in your favourite web browser!

Grunt Tasks

• grunt - Validate LESS, beautify and lint JS, compress images as needed. Run before you push.
• grunt dev - Run the server and build js files as they are changed
• grunt verify - Verify LESS and JS are formatted and lint free. Read only. Used by Travis.

Localization

To add a new language simply add a directory with a locale code under the locale directory with a JSON file(s) for your strings for example: locale/id_ID/strings.json

You also need to make sure you enable the language in your config by changing the value of SUPPORTED_LANGS

  export SUPPORTED_LANGS='[ "en", "id-ID" ]'

webmaker.org's Issues

Tweak "success" headline messaging (onboarding)

"Good start!" messaging after users click the 'next' button feels patronizing. I think most people will realize they've simply only typed something and not done anything too complicated, or even 'real' making. I'd bet most people are used to filling out form fields online. So, what are really trying to say?

Can we tie it back to the concept of "one step closer to really making online" – or the idea @xmatthewx mentioned during demos today of "previewing a making experience"? Even getting rid of the exclamation mark would help, imo.

cc @edrushka @HPaulJohnson

Why are we dimming the checkbox label on hover?

If I hover over a checkbox, it's dimmed. That seems wrong.

(the screen capture didn't catch the mouse cursor over the second line)

Build on-boarding experience

Build the on-boarding experience designed by @iamjessklein and @xmatthewx.

• should be a splash page variant (see home2.html, home3.html, etc.)
• should save the entire page à la x-ray goggles

Save content new users create during on-boarding experience

A question arose from talking about #1073 about saving & publishing the edits that new users make during the on-boarding experience. Essentially, it would be an x-ray goggles publish operation, and most of the makes would look 99% identical.

• Will a new user feel more engaged/interested if we publish their content right away?
  • Will they be deterred if we don't publish, but just direct them to x-ray goggles?
• Does this approach introduce too much similar, uninteresting content into /explore?
  • Or will users feel good about seeing their content up on webmaker right away?

"Tools" page is wonky

"Tools" page -- in both English + Spanish at least -- are garbled.

Bug 1040556 - Webmaker Super Mentor Badge does not show details of "Issued by"

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:30.0) Gecko/20100101 Firefox/30.0 (Beta/Release)
Build ID: 20140605174243

Steps to reproduce:

1. Log in to your account using persona.
2. Under your username in the top right corner, from the drop down list select my profile.

Eg: https://webmaker.org/user/tanay1337

Actual results:

Under the tab badges, there is a badge called webmaker super mentor badge. Under the badge there is text:
"Issued by
Jul 15, 2014"

However, no details of the issuer are there unlike the webmaker mentor badge which reads:
"Issued by Webmaker
Jul 3, 2014"

Expected results:

There should have been details on the "Issued by" clause, so that users could know by whom the badge has been issued to them. Also, since the webmaker mentor badge shows the "Issued by" clause completely, super mentor badge should also show the same behaviour.

Reorder links in secondary-navbar for consistency with Data/Images below

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:31.0) Gecko/20100101 Firefox/31.0 (Beta/Release)
Build ID: 20140716183446

Steps to reproduce:

Open: https://webmaker.org/en-US/tools

We should reorder text in secondary-navbar for consistency with Data/Images below (boxes). That will require swapping X-ray goggles and Popcorn maker in secondary-navbar.

"my makes" as profile view no longer gives immediate "edit" options

Previously when going to "my makes" makes would have an immediate edit and remix option. After switching over to the profile when using the "my makes" option, these buttons are missing, and people are hitting a wall trying to load or edit their makes after publishing now.

apologies, but test.

bug 891031 - Search query returns empty set { }

Steps to reproduce

[1] Go to https://webmaker.org/search?type=tags&q=holiday
[2] Change the option to "Search by Title"

This is changed from the drop down menu that comes beside the search bar option which has { Title, Description, Tags, Users }
[3] Search for "holiday" { I know no makes with this exist }
[4] You encounter a blank screen with an empty set { } at the top.

Expected results

[1] Get back to the same search page with text in telling "Sorry .. Couldn't find anything, Maybe refine the search ?"

OR

[1] Hit a custom 404 page.

Design UX for on-boarding experience

Need to provide UX for the on-boarding experience based on @iamjessklein's work (http://jessicaklein.blogspot.ca/2015/01/shall-we-dance-on-boarding-webmakers.html).

Need a link to badges admin pages

There used to be a link to general badges admin and a way to get to admin for specific pages. e.g.

• https://webmaker.org/admin/badges
• https://webmaker.org/admin/badges/hive-community-member

Maybe these links have a place in the footer.

Fix toJSON and Buffer in diff.js

The deserialization method in diff.js was dealing with buffer with undefined data because we were passing an object instead of straight array object.

Bug 1103969 - In Profile, "Add Link" button's text should be changed to "Add Another Link"

In Profile, "Add Link" button's text should be changed to "Add Another Link". Since the original text is a bit confusing for users and the change will improve clarity of the text.

Terms page lists old MV address

views/terms.html:143

Actual results:

Mozilla Corporation
650 Castro Street, Suite 300
Mountain View, CA 94041

Expected results:

Mozilla Corporation
331 E. Evelyn Ave.
Mountain View, CA 94041

Events - Better formatting support in new event description block

The event description block in the new event form currently does not support new lines.
tags can be used for new lines nut I think there can be better alternates.

Either support only new lines
or
Add support for markdown (or BB code or anything similar)

Can't interrupt automatic typing

From @Pomax:

windows chrome/firefox: I can only interrupt the word if I click on the textbox. Otherwise, focus is on the textbox already and I can type, but the page does not "see" me do so and it interleaves "sharing" with what I type

Come up with localized tests for on-boarding CTA button

Just as we're testing the text on the button in the on-boarding experience in #1070 in English, we should also test in a handful of locales (to start).

• What locales can we test with initially? (choose 5?)
• Who are the community members from those locales that can help us choose the language? (ideally people that can jump in here and take part)

/cc @thornet, @HPaulJohnson, @alicoding

Locale not maintained when redirected to events.webmaker.org

1. Go to https://webmaker.org/pt-br
2. Click on "Eventos" in the nav.

The link's URL looks right (https://webmaker.org/pt-BR/events), but I arrive at https://events.webmaker.org without locale preserved.

Button on second onboarding screen in wrong place

Looks cramped, like it shouldn't be on a new line.

Heart graphic doesn't render (onboarding)

Using FF 35 on mac.

Slow down typing of initial word

When I first load the page, "sharing" is already mostly typed out. Could we delay the start of that animation by a couple seconds so that people can "read" the page layout before getting drawn in by the animation?

Using FF 35 mac.

Cannot "like" a make in Nightly

Hi folks!

When I visit https://sarahstang.makes.org/thimble/LTg3NzU5MjU3Ng==/postcard-for-cynthia and click the "like" heart, nothing seems to happen. In the console I see "Error: Script error for: social http://requirejs.org/docs/errors.html#scripterror"

I'm logged in (wasn't at first, but then logged in) and this is happening in Nightly. Let me know if there is more info I can provide.

Mak

I use the space bar to select checkboxes, and I can't in the sign up dialog

In this screenshot

I've tabbed over to the first checkbox, and when I hit the space bar, expect it to toggle the checkbox, but it doesn't.

Fix spacing between field and button on Success screen (onboarding)

Using FF 35 on mac.

Unable to log in to existing account (get directed to new-account flow and that breaks)

Typographic cleanup

I find the type on this dialog to be not-quite-right:

The checkboxes feel too thin; the line width on the checkbox line copy feels too thin, especially given the light blue link colors.

And I suspect this is even more subjective, but the Capitalization Of the Title seems off too. I'd only capitalize Create and Webmaker.

Bug 1103401 - Sign Out option in /me should be in drop-down list

The sign-out link at the webmaker.org/me page should in the drop-down list of the user box and should not be separate.

Send announcement to Transifex community to ask about localizing CTA

There is some concern that the CTA in the wireframe (see below) will be lost outside of the English-speaking community.

Need to send an announcement to the Transifex community to ask them to weigh in on whether or not "I ❤️ ___________" conveys the right (or any) meaning in other locales.

@iamjessklein, @HPaulJohnson thinking about saying something like this:

Hello!

We're working on a completely new design for our splash page on webmaker.org. The idea is to invite users to edit the page they see by filling in the blank in "I <3 _________". Our question to you is this: does "I <3 __________" make sense cross-culturally? e.g. "I <3 cupcakes" or "I <3 the web" to convey that I love cupcakes and the web.

Thanks!

[link to above image].

Makes profiles missing makes

username.makes.org doesn't have any makes for me (tried 2 users). Events and Badges appear, but "Makes", "Likes" and "Teaching Resources" have no information in the profile.

Dig up previous research on "Remix" vs. other CTAs

The new on-boarding experience will probably have a big button to start the saving experience. In @iamjessklein's design, the button says "Remix", but @cassiemc points out that we're not quite sure that's the word to use.

What research do we already have on this subject? What words can we test?

/cc @HPaulJohnson, @adamlofting

;

Splash page A/B tests only work for en-US

Try visiting any locale other than en-Us. You will always see the "The web is yours" variant.

• https://webmaker.org/es
• https://webmaker.org/pt-br
• https://webmaker.org/de
• etc...

This probably needs to be fixed in Optimizely. @simonwex: angular+optimizely pain-point :/ ?

/cc @HPaulJohnson

Redirect logged-in users to /explore

There's no need for logged-in users to see the on-boarding experience splash page. Let's just send them to webmaker.org/explore.

Functional QA for on-boarding experience

We need to QA the on-boarding experience before it goes live.

• Provide staging link
• Write a functional testing script (e.g. https://docs.google.com/a/mozillafoundation.org/document/d/1opODI1tfAxdWqR0nUMb69wAbnlI6Z9UFAZ-gBeNxdw0)
• Schedule a QA day and invite people to help

Explore - Headline & sub-head copy improvements

The headline and sub-head in the explore section could use some updating. Specifically, I'm curious if the headline could be shortened and if we could do-away with the sub-head altogether. Ideally and at scale this page should be constantly updating with user-generated content.

Thoughts? @edrushka @HPaulJohnson

Language button design - arrow not visible

In the dropdown menu for languages the arrow is hidden behind the words. A relatively minor design issue.

Not redirected to explore after signing up

After clicking "Let's Go" on the login modal (shown below), I just stay on the onboarding experience's second (blue) screen.

Moderation - Unable to update content within /explore

As we are starting to drive more traffic to /explore (formerly known as the gallery) we have a need to keep that content regularly updated. The existing content on that page hasn't been updated in quite some time and after talking with @keyboardkat and @cadecairos it looks like part of the problem is that the architecture of that page and the features available within the MakeAPI admin cause some serious friction.

Couple options for resolution:

• @cadecairos has a prototype called Gallery Maker that could be used to create galleries using the MakeAPIs list API. The model is a little strange as the list feature is user-centric (lists are connected to a specific user) and in that it's not a perfect fit for our needs, but seems like a good way to resolve the problem quickly.
• Another option could be to simply add a isFeatured flag to items within the MakeAPI and modify the /explore view to render items chronologically where isFeatured === true. This is my preference in the long-term as we move to having many people from the team featuring makes as to keep content constantly (ideal -> hourly) updated. With that we'd need to think about adding a way to feature content within Webmaker itself visible to staff / admins.

Looking for more suggestions.

/cc @keyboardkat @cadecairos @simonwex

Create Optimizely variants for Remix button in on-boarding experience

Let's test the button new users will push in their first step of the on-boarding experience.

A list of options from #1070:

• Get Started
• Go
• Next
• Make
• Remix

Unexpected action in headers

When clicking 'Multimedia with Popcorn' on the Make tab I expected it would filter the list of makes based on my preference for working with Popcorn.

What it actually does is dumps you in a blank version of Popcorn. Same with 'Webpages with Thimble' and 'Remixes with X-Ray Goggles'. It's kind of logical, but a bit head-scratchy at first.

Perhaps flag with 'from scratch' language/indicators?

Craft copy for on-boarding experience

@xmatthewx drew up some designs to progress the UX of the on-boarding experience, and we'd like it to include some compelling words to explain what's going on and get users to interact.

/cc @edrushka

Wrong modal after signing up on webmaker

Need to show the x-ray goggles modal.

testing webhook config

Nav styling broken for es locale

Looks like the "Tools" nav button is too long. I imagine the same problem will happen for any button in the nav.

Clean up locale strings and validation

• check strings in locale files and angular/nunjucks templates to see if there are unused or unrepresented strings
• set up better validation with grunt validate (should be connected to recent versions of grunt-gettext-finder, and grunt-angular-i18n-finder
• separate strings from locale json files into independent angular/nunjucks files so that grunt validate works properly

---

• Remove old EOY locale file and its content #1075
• separate all locales into its own file #1092
• update grunt gettext/i18n finder and integrate them #1083
• hook grunt validate for l10n with travis
• update on transifex
• make sure we add missing strings #1078

Mozillaian vs Mozillian

webmaker.org/public/views/partials/footer.html

Line 3 in 2f77834

<p class="lead hidden-xs">{{ 'Mozillaian like you' | i18n }}</p>

Shouldn't this be "Mozillian"?

Scroll wheel zooming on events page map

Consider turning this feature off, and using controls to zoom map instead. Getting to the bottom of the page may not be a priority, but right now, it's somewhat difficult to actually do. Once there, it's equally hard to get to the top again.

Wrong page linked on http://party.webmaker.org/resources under "Register your event"

On http://party.webmaker.org/resources
The "Register your event" link in the giant banner links to http://party.webmaker.org/resources/getting-started-resources whereas everywhere else it links to https://events.webmaker.org/
It confuses!

Bug 1103041 - Navbar at /explore expands(doubles) because of increased links

After logging in, at https://webmaker.org/en-US/explore , upon scrolling down, the navbar expands(doubles) because of increased links. This effect was probably not expected. Earlier the user-box and the links fixed in half the space. This messes up the UI.

Screenshot: https://bug1103041.bugzilla.mozilla.org/attachment.cgi?id=8526885