initial social network #496

jwass91 · 2017-09-24T21:48:47Z

This is a big one...

Here is the start of the social network - with the homepage redesigned to show the most recently updated projects. I also included the code for the screenshot cloud function in this PR.

I think this is a good start and hopefully, we can get this into production within the next couple of weeks.

Then we can work on adding more features.
Such as:

A user profile page (with all their projects)
A project page (with the likes and comments)
More categories of projects on the homepage
The ability to follow users (and then add a section to the homepage for recent projects from people you follow)
The ability to remix a project (along with storing remix data)
And much more

stevekrouse · 2017-09-24T21:54:20Z

[This is an automated integration to preview this pull request's changes to the website.]

https://cdn.rawgit.com/stevekrouse/WoofJS/9100f80720f7ae921cf859c22808d6987a4e1034/index.html

nicolekelner · 2017-09-25T13:49:32Z

Wow! Jared this is incredible! I honestly don't have any design feedback, I think it looks amazing. I love the rounded edges and flat drop shadow behind each icon, very clean.

My only comment is the initial load time takes a few seconds to pull up the previews. This is probably a very difficult problem to solve since you are sorting through a ton of data.

Down the line it would be great to have the ability to comment, sinceI know that is a huge feature for Scratch's community as well.

stevekrouse

I've only just started this review, so I have more things to look at... stay posted...

However one issue I'm seeing is all the code duplication between /create.html and this page.

In the past, I took the same approach you took here (basically copying /create.html and changing a few things) as you can see at /team.html`. While quick, easy and simple in the short term, this does make things harder to maintain in the long term.

So what are our options?

Keep it roughly as is, potentially removing some code that clearly only belongs on the /create.html page and not here.
Pull sections of code from the /create.html page into their own scripts and link to them externally via <script> tags in both pages, such as woof-authentication.js.

I don't want to make this pull request even bigger, so I'm leaning towards doing (1) now and leaving (2) as an issue for the future. How does that sound?

stevekrouse · 2017-09-28T15:47:24Z

create.html

@@ -881,6 +881,9 @@ <h4 class="modal-body text-danger" :style="{display: !getID() ? 'block' : 'none'
      messagingSenderId: "397293370524"
    };
    firebase.initializeApp(config);
+


Please remove these three lines

stevekrouse · 2017-09-28T15:48:07Z

index.html

@@ -1,249 +1,1095 @@
-<script>


Please move the old /index.html page to /demo.html so we can still link to it (as opposed to overwriting it entirely)

stevekrouse · 2017-09-28T15:49:20Z

index.html

@@ -1,249 +1,1095 @@
-<script>
-    var getID = function() {
-      return window.location.hash.substring(1, window.location.hash.length);


Don't forget to include to include these snipets of javascript in the new /index.html page so that if a user types woofjs.com#name-of-game it will redirect them to woofjs.com/create#name-of-game

stevekrouse · 2017-09-28T15:49:44Z

index.html

+
+<head>
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:url" content="http://woofjs.com/create">


Fix the URL here

stevekrouse · 2017-09-28T15:50:50Z

index.html

+  <title>WoofJS</title>
+  <link rel="shortcut icon" type="image/png" href="./favicon.png" />
+
+  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


Seems like you copied and pasted this from /create.html. Please go through and delete the ones you don't need on /index.html

stevekrouse · 2017-09-28T15:52:35Z

index.html

+      projects: [],
+      temprecentlysavedprojects: [],
+      recentlysaved: [{
+          url: "https://s26.postimg.org/7135l6qeh/placeholder.jpg",


We don't use postimage. If we need this image, add to our repo

stevekrouse · 2017-09-28T15:54:08Z

index.html

+      tempuser: '',
+      projects: [],
+      temprecentlysavedprojects: [],
+      recentlysaved: [{


There's a lot of duplication in this array. Could you create this object once and then add it to the list a number of times?

Why do you need to add fake data to this array at all? Can we handle the data-loading state in VueJS by detecting that this array is empty?

stevekrouse · 2017-09-28T15:56:08Z

screenshot-cloud-function/functions/index.js

+
+        var config = {
+          action: 'read',
+          expires: '01-01-2050'


stevekrouse · 2017-09-28T15:58:21Z

screenshot-cloud-function/functions/index.js

+
+        file.getSignedUrl(config, function(err, url) {
+          if (err) {
+            console.error(err);


Are these logs saved somewhere? If not, can you delete this (and the console.log on line 16 above)?

stevekrouse · 2017-09-28T16:00:59Z

index.html

+      })
+
+      // // this puts the user's most recent project under their name
+      firebase.database().ref('/code/').orderByChild("--uid").equalTo(user.uid).once('value').then(function(snapshot) {


This code doesn't belong on this page

stevekrouse · 2017-09-28T18:06:34Z

Social Network Homepage Feedback

This is a big pull request and there are lot of moving parts. Below I walk through my thoughts on how to move forward here, both by 1) simplifying the code and 2) by focusing on the design of the new homepage. There's a lot here, so after you've read through this (a few times) ping me on slack to set up a time to chat about it all and create a plan of attack :)

0) You're doing great!

To be clear, I think you've done a great job here. If you are wondering how it could be possible that you both did a great job and I'm also basically asking you to start over from scratch, I don't blame you -- that does seem contradictory. The reason this is not contradictory is threefold:

The state of the codebase doesn't lend itself well to being extended. This is 100% my fault. I've known this day would come when I'd have to reckon with this. I apologize for not noticing sooner that we should solve this issue before creating this page.
You've done a lot of amazing work here and everything is functioning! All I'm really asking you to do is delete code (but not forever, just for the short term) so that we can focus on getting things right.
If you were a solo developer on this project, it would make sense to do things as you did them. Given that this is a collaborative open source project, I am trying to keep the code standards quite high. The only way I can do that is if we keep pull requests focused and simple. I should've been more insistent the last time we talked, asking you then to remove hearting projects from your code.

1) Simplification

As mentioned above, this pull request is made significantly more complicated by allowing users to sign up and login on the homepage. This is not your fault. The monolithic /create.html page has led us directly into this trap. The only way out of it is to start refactoring sections of it into their own files that we can then import into /create.html and index.html.

However, that refactoring is it's own large project. Adding it on here would make this pull request -- which I would argue is already overly complex -- even more complex. At the same time, I don't feel comfortable adding so much new code into our codebase in this messy way -- even with the intention of refactoring it later. It's just too complex. So what's the way around this? Simplification.

Leave this pull request as is for reference but do not continue working on it.
Create a new pull request. Treat the new homage as setting the bare bones for the social homepage we'll have eventually, but make it complete enough that we can ship it. Keep it very basic. More specifically, don't allow users to login or sign up on the home page on this pull request. All this pull request would do is: 1) link to the /create page, 2) show a few recent projects, 3) link to a few other places (like /demo, /teach and the announcement post). In this way, we will be able to focus much more the the design of the homepage and the screenshot saving code and get to put off the complexities of sharing authentication and signup code between /create and /index. Yes, this would mean that we won't allow users to heart projects on the homepage on this pull request.
Copy the /index.html file. Rename one of the copies /demo.html. Use the remaining old version of /index.html as the basis for the new /index.html (as opposed to /create.html).
Delete the code in /index.html irrelevant with the new homepage, like the Ace editor stuff.
Create the new simplified social network homepage as articulated in this post and to your taste, copying and pasting code from this pull request as needed.

2) Homepage design

Call to action

When designing a homepage, it's important to think about the key action you want users to take. In our case, while viewing the projects of others students is indeed fun and important, I think that is probably less important than getting students to "start coding".

However as things currently stand, the "Start Coding" button is quite small and the projects are quite large. I would suggest decreasing the size of projects (closer to the size they are in Scratch's homepage) and increasing the size of the start coding button

Codepen's homepage below, which on the whole is an example of poor design, does show more what I'm thinking in terms of a big "Sign Up" button (which in our case I think should be "Start Coding") and smaller "Picked Pens" (in our case "Recently Updated Projects").

Jumbotron

The top section of a website is really important. When using Boostrap, people often use the Jumbotron component.

Usually there's 1) some big text, 2) some smaller text, 3) a button.

1) Some big text

Some options:

a) WoofJS is a Scratch-inspired JavaScript library for making games.
b) Transition from Scratch to JavaScript
c) Make and share JavaScript games

2) Some smaller text

Some options:

i) WoofJS is a learnable JavaScript framework for creating games by The Coding Space.
ii) WoofJS was created to be the next step after block-based coding in Scratch. For more details, you can read our announcement post.

3) A button

"Start coding" seems to make sense to me here.

initial social network

9100f80

stevekrouse reviewed Sep 28, 2017

View reviewed changes

stevekrouse mentioned this pull request Sep 28, 2017

save photos of projects on save #284

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

initial social network #496

initial social network #496

jwass91 commented Sep 24, 2017

stevekrouse commented Sep 24, 2017

nicolekelner commented Sep 25, 2017

stevekrouse left a comment

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse Sep 28, 2017

stevekrouse commented Sep 28, 2017

initial social network #496

Are you sure you want to change the base?

initial social network #496

Conversation

jwass91 commented Sep 24, 2017

stevekrouse commented Sep 24, 2017

nicolekelner commented Sep 25, 2017

stevekrouse left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stevekrouse commented Sep 28, 2017

Social Network Homepage Feedback

0) You're doing great!

1) Simplification

2) Homepage design

Call to action

Jumbotron

1) Some big text

2) Some smaller text

3) A button