a/A Annotations

[joyjing1-blog]

Two weeks into the job search, and I finally took the time to look at my Google Analytics stats (I had embedded trackers in my three main projects, Friendex, Pixpy and Planarity, as well as my Portfolio site).

Interesting things I've noticed:

Twice as many people visited Friendex (111 sessions, 102 users), as compared to my portfolio page (65 sessions, 47 users)

Most recruiters are interested in seeing your work and what you can build, as opposed to just your description of yourself.

If you're going to put a project on the top line of your resume, make sure it's baller.

Despite all of the interactive functionality I built, most visitors only stayed on Friendex for approximately 34 seconds.

Don't bank on users actually testing your functionality, but make sure your project looks impressive from the get-go, and that the functionality that you built is obvious even if the user does not interact with it.

A few people tested out the posting and liking functionality on the Timeline (the landing page as soon as you login), but it looks like most people merely looked at the site without interacting with it too much

5 new accounts were created on Friendex including two that were made by friends (based on the account names)

* Although the vast majority of people will not test out your functionality, some people will test all of it. So make sure all of your functionality/features are rock solid! * Most people will just use the "Demo" button, but some people will create full profiles. So make sure there are no bugs in your Login process, and that the Login user flow is smooth. * One person tested the site quite thoroughly, uploading photos, making posts, as well as adding comments and likes. 4. Of those who visited Friendex, 71% merely looked at the login-screen before bouncing off. * Make sure your splash page is impressive and clearly conveys what you built 5. My portfolio had a much higher average session duration of almost 5 minutes, and visitors looked at approximately 4 pages per session. * If someone is interested enough to look you up and go to your portfolio page, then they will also take the time to read what you've written. So make sure your content is polished, clean, and conveys what you intend to portray about yourself. 6. Half the number of guests visited Pixpy, the second project on my resume (64 sessions, 54 users) as compared to Friendex, the first line on my resume (111 sessions, 102 users) * Friendex was the first line on my resume, whereas Pixpy was the second line * Pixpy was co-developed with Matt Corley, who also listed it on his resume (although also not as the first project) * Despite two people sending traffic to the site, only half the number of people visited Pixpy * Conclusion (reiteration from before): Make your first project baller. 7. Of those who visited Pixpy, people stayed on average for 1:10 minutes, twice as long as they stayed on Friendex (34 seconds) * Maybe people like looking at pictures of cute animals more than they enjoy interacting with an empty social networking site? * We also used a setTimeout for our Demo User login, to make it appear like the user is typing in their email and password in front of the user, before logging them in. This requires a set amount of time, so may have actually retained people's attention for longer (similar to how the spinning GIF makes you feel like you're not waiting as long when pages are loading). * Perhaps if someone has taken the time to look at more projects past the first one, they're interested enough to actual dig around your work. Hence, only the really interested people visit your second project 8. One person looked at my Github code for Friendex (and talked to me about it) * Keep your Github clean/polished/professional * Even if most people won't, assume someone will look at your code. Make sure you can explain all of the reasons you chose to design/code everything the way you did. 9. Views of Friendex seem to spike at the beginning of the week * So far, what I've noticed with regards to interviewing cadence, is that recruiters will reach out the most on Mon/Tues to schedule things, and then the rest of the week tends to fill up with phone calls, technical screens, and onsites. * Granted, this may be because of my own application cadence (we first began applying on a Mon, and then I finished App Academy's requirement of submitting 150 applications this past Saturday by sitting down and blitzing through 100. You can see the result of this by the sudden increase in Friendex views) * I also tend to be too busy when I'm running around prepping for interviews and commuting to onsites, to apply to more places, and weekends have been the best time to catch up, email people, and submit applications. So perhaps recruiters are merely responding to the timing of when I submitted an application to them. 10. I do not have any analytics tracking on my Tumblr, so don't worry that I'm watching you read this. But now I'm curious!

Photos

Site traffic by day for Friendex

Stats for Friendex after 2 weeks

Stats for Portfolio after 2 weeks

Stats for Pixpy after 2 weeks

[joyjing1-blog]

Pixpy

Final screenshots from our completed photo-sharing app! Built with a Django/Python backend and a JavaScript/React/Redux frontend, and featuring the cutest pictures the internet can provide.

Web development is so much fun!!

http://www.pixpy.tech/ https://github.com/joyjing1/Pixpy

[joyjing1-blog]

Pixpy

Matt Corley and I decided to make a Django app!

We both have experience in Python, so thought it'd be fun to learn Django/refresh our Python skills/prove that we deeply understand MVC

I went through Django's Polls App tutorial

https://docs.djangoproject.com/en/1.9/intro/

Django's very similar to Rails, just with different conventions

Python's extremely similar to Ruby -- it's been super easy to pick back up again

Python's 4-space tab spacing looks very wide to my Ruby/JavaScript eyes

[joyjing1-blog]

Planarity Puzzle

https://joyjing1.github.io/Planarity/

https://github.com/JoyJing1/Planarity

Javascript Game that involves moving the notes around to make the graph planar

Used Canvas to render nodes and edges

All frontend Javascript/jQuery/Canvas/CSS/HTML - no React or any backend

Use a modified version of John Tantalo's algorithm to create graphs

For level i (where i begins at 0), draw i + 4 non-parallel lines of infinite length

Find the location of where each line intersects with all of the others

For each line, sort the other lines based on the x-value of their intersection point

Create an edge (using vertex indices) between neighboring intersection points

Once the list of edges (in [vertexIdx1, vertexIdx2] form) has been pulled, give each vertex (x, y) coordinates using sin & cos to spread vertices in a circle/polygon

Draw each edge - color based on whether they are currently intersecting.

Intersecting edges are solid

Non-intersecting edges glow

* Color vertices based on whether they are currently selected or a neighbor of the selected vertex * Set vertex radius based on the number of nodes and size of the screen 5. Dynamically set the width and height of the canvas based on the browser window upon arrival to the site * Use min(height, width), but if height

[joyjing1-blog]

Friendex - W8D4

Cleaned up the Sign-up/Login Page

Form fields are highlighted in green/red depending on whether they have been filled in correctly

If the email & password combination do not currently exist in the database, a Modal pops up with the Sign-up Form

Tried using Bootstrap, then realized that I was already writing all of the logic on my own anyway and Bootstrap was interfering with a lot of my other styling, so ended up just writing it all myself

Added the ability to update your profile & background images by clicking on them when you're on your own profile page.

Refactored all image renders to pull pre-scaled versions of the images from Cloudinary to speed up load time

Refactored all images to render using a container, to guarantee that the image covers the entire area and does not get stretched

div.user-profile-img-container { height: 75px; width: 75px; display: inline-block; margin: 16px 16px 0 16px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .1); } .user-profile-img-container img { height: 100%; width: 100%; object-fit: cover; }

Added the functionality of having a photo pop up in a Photo Modal when you click on it in an album

This caused some issues with my original method of deleting a post (by clicking an X in the top-right corner of the photo in the album)

Redesigned to have a small "Remove Photo" button to the bottom-left of the photo when it's open in a modal

Only the user who posted a photo can delete it

Fixed Newsfeed - original method of pulling friends had a typo in it

Was pulling friend.id (the id of the friendships) rather than friend.friend_id (the user_id of the friend), which was causing the wrong posts to get pulled

Before the fix, Mark Z's page had mostly his own posts as well as some by Marc A, even after he had unfriended Marc A (original reason for noting the problem)

Uploaded profile pictures & background pictures to seed the database with.

[joyjing1-blog]

W9D4 - Debugging Friendex

Friendex

Fixed bug in profile_header.jsx - was calling the wrong ._onChange function (named ._updateProfile in file)

Debugging Notes

Things get unwieldly when trying to debug a huge application

One way to narrow down where/when a bug is happening, is by commenting out large swaths of code.

Remove components from rendering one by one to see if one the components is the culprit

Remove Store Responses (to dispatches) one by one

If .__emitChange is causing the issue, look at what components are listening to that Store, and remove their listeners one at a time

Once you've removed something, if the bug is still present, keep it removed, incase there are multiple issues/bugs.

You do reach a point where there are too many console logs (especially if you're logging per index item

[joyjing1-blog]

W9D3 - Friendex Likes

Friendex

Finished Likes

Can like& unlike a post from the Newsfeed

Can like& unlike a post from the Timeline

All posts display how many people like the post

The Like icon is highlighted in blue when the current user likes a post

Search Bar - Can search for other users by username (first & last name)

Full CSS for all features

Notes

Today I ran into one of the toughest bugs I've seen so far. The issue arose after I had completed the Search Bar and was miscellaneously testing previously built functionality. I noticed that although I could like/unlike posts that were already on the page, when I created a new post and tried to Like it, the count would jump to 2 Likes. When I clicked the button again to Unlike it, the count immediately dropped back down to 0. When I inspected the Post object in the Newsfeed Store, I found that even though the object was only passing through the Flux cycle once (I checked all milestones), in the _onDispatch response it would immediately jump from 0 --> 2 Likes. The two likes in the Newsfeed store were identical, which meant that somehow the like was getting pushed onto the array of post_likes twice. When I followed the debugger, it appeared to only push the object onto the list of Likes once, and then soon thereafter delved into internal Reactland.

I added console.log() statements to track the current status and number of likes, as well as following debuggers through the entire code. Kevin spent 1-2 hours with me trying to figure out the issue, before he had to leave.

There were a few minor issues I ran into along the way -- Javascript was not happy with defining const variables with the same name but in different scopes, and was not setting the values properly. So I had to use let to define the variable in an external scope, then just reassign the value within each if/else clause:

function _removeLike(like) { console.log("in _removeLike(like) in newsfeed_store.jsx"); console.log(like); let itemIdx = -1; let likeIdx = -1; let item = {}; if (like.image_id) { itemIdx = _findItem("image", like.image_id); if (itemIdx >= 0) { item = _newsfeed[itemIdx]; likeIdx = _likeIdx(item.likes, like); item.likes.splice(likeIdx, 1); _updateItem(item); } } else if (like.post_id) { itemIdx = _findItem("post", like.post_id); if (itemIdx >= 0) { item = _newsfeed[itemIdx]; likeIdx = _likeIdx(item.likes, like); item.likes.splice(likeIdx, 1); _updateItem(item); } } else if (like.friendship_id) { itemIdx = _findItem("friendship", like.friendship_id); if (itemIdx >= 0) { item = _newsfeed[itemIdx]; likeIdx = _likeIdx(item.likes, like); item.likes.splice(likeIdx, 1); _updateItem(item); } } }

Ultimately, the fundamental issue was that even when a user is on the Newsfeed page, the PostStore was still listening and responding to the actions made by the Dispatcher. And since I was passing objects around, which are mutable, when the Newsfeed Store received the Post and a Like, it would shovel the Like onto the list of post.likes. Then when the Post Store received the Post and Like, it would also shovel the same like onto the same post.likes array. When the Post object ultimately rendered it had two copies of the same Like in its likes array. When the user clicked to Unlike the post, the same thing would happen where the Newsfeed Store would remove one Like and the Post Store would remove the second Like, resulting in 0 total Likes.

The solution to this problem, was to add conditional logic to check whether that Like existing in the list of likes for a Post, before adding or removing it. I then only pushed the Like on if it was not already a part of the likes array.

This issue could also have been solved by saving the likes as an object with keys of user_id and values of the like object. Then you could simply update or delete the likes object by user_id in constant time. Because I wanted to ultimately/eventually include a list of usernames of the users who have liked a post, I had decided that it would be easier to pull those usernames if the likes were stored in an array (that way you could just take the first 1-2 likes & usernames, rather than having to figure out the user_ids and then pull them. After some quick Googling, I found the Object.getOwnPropertyNames(obj), which may have been far easier/simpler than keeping the likes in an array. The other difficulty I was running into in trying to pursue this other method (of saving each like as a key:value pair from user_id:like in the likes object), was the ability to dynamically set a key in Ruby. I was trying to use jBuilder, but even that was proving difficult. My first attempt work partially, but did not include any likes object at all when a post had no likes. This was raising errors when I then tried to add a new Like to a Post, since that post would not have a likes property to add to. I could have fixed this by checking whether it had a Likes property and adding one if it didn't, but at that point decided that just saving an array of likes wouldn't be that bad.

All told, I ended up spending 7-8 hours on solving this one bug (~5pm-12:30am, give or take). That isn't counting the time I spent switching my likes from being stored as an array to an object, back to an array again (which happened this morning). This may not have been my most fun night, but I definitely learned from it, and it's reassuring that I was able to figure it out essentially on my own.

Main learnings from today

Facebook is complicated and has a ton of features that interact with each other in unexpected ways

Keep track of what is mutable and keep in mind that Stores will still respond to Dispatches, even if their relevant components are not currently rendered

Debugging gets more difficult the more complex your code base is

Code gets complicated fast

Keep testing your code!!

Even though 2 weeks may not be enough time to do true Test Driven Development (coding an entire one-page app by yourself), keep testing all features at every stage of the process, to see how what you just built affected any of the previous features

Make sure to allot enough time to troubleshoot and debug at the end of the project before it needs to go live/be bug free.

Don't get discouraged or cave into the desire to just throw your hands up in the air and give up; no one else will solve your bugs for you, so just keep thinking through logically and systematically, about what should be happening every step of the way, and checking to see whether it is the case or not.

[joyjing1-blog]

Friendex - W9D3

Finished Likes

Can like & unlike a post from the Newsfeed

Can like & unlike a post from the Timeline

Can like & unlike a new friendship from the Newsfeed

All posts display how many people have liked the post

The Like icon is highlighted in blue when the current user likes a post

Search Bar - Can search for other users by username (first & last name)

When the current user clicks on a name/profile pic, they are redirected that that user's profile page, where they can "Add Friend"

Full CSS for all features

[joyjing1-blog]

Friendex - W8D2

Can comment on Posts

Style comments on posts

Can comment on Posts in PostIndex and have new comment immediately appear

Can comment on Posts in NewsfeedIndex and have new comment immediately appear

Notes

Be careful what you have listening to what, and what actions a component performs when it's about to receive props

Had a SessionStore listener for NewsfeedIndex

componentWillReceiveProps() would pull ProfileActions.fetchCurrentUserPRofile()

This in turn would update the Newsfeed store, which would pass more props, and which call the action again, and etc.

Modular code is much easier to work with

Even though it may seem like a pain at the time, refactoring early, often, and as you go, will make the entire journey smoother!

[joyjing1-blog]

W9D1

Can upload photos to your Photo album and see uploaded photos in Photos tab.

Can visit other friends' photo albums, but cannot add images directly to their albums.

When there are no photos to display, displays "No photos to display" message.

Can click on "Photo" button to add a Photo Post - added to PostIndex immediately

Same post is added to NewsfeedIndex immediately when posting from the Newsfeed page

Cleaned up back-end to determine how to render IndexItems based on type (post, image, friendship)

Add links to NewsfeedLeft Navigation bar

[joyjing1-blog]

W8W7 - Build Newsfeed. Make sure users can create/destroy posts from the Newfeed, and that the Newsfeed is updated accordingly.

Add Guest Login button on Sign-in Page.

Add "No pending friend requests" in body of Friend Request Index when no friend requests.

[joyjing1-blog]

W8D6 - Friendex (cont)

Friendex

Tested and fixed Friendship Buttons

Dynamically display relevant "Add Friend", "Confirm"/"Delete Request", "Friends" button in Profile Header depending on current friendship between currentUser and currentProfile

Confirm / Delete Request - pass in "page" param to make sure the correct friend info is pulled & returned once friendship is updated (whether confirming from requestor's profile page or receiver's friends page)

Display Friend Requests only when a user is visiting their own page

Display "Remove Friend" button in FriendsIndex only when visiting own Friends page

Notes

You cannot make an :index route on a singular resource. Only the following come by default:

new

create

edit

update

show

destroy

Realized this when trying to write a route for Newsfeed - must use :show rather than :index

Make sure to specify your file types!!

Forgetting the .json.jbuilder file ending on view partials will not return anything when those views are rendered

You're going to have a bad time...

[joyjing1-blog]

Add Friendship Button - dynamically changes depending on current friendship status.

Friends page shows pending Friend Requests as well as current Friends with the option of removing Friends when a user visits their own page.

Friends page only shows current Friends (with links to their profile pages) when visiting another user's Friends page.

[joyjing1-blog]

W8D5 - Friendex 4

Friendex

Add Friending functionality - can now Accept and Deny Friend Requests

Add Friend button also dynamically adds friend request to Friend page

CSS Styling included

Notes

Make sure to include :id in .json.jbuilder file!! Otherwise, won't be able to reference the object by id

Git Branch Merging

Joys-MacBook-Air:Friendex joy$ git status On branch friendships Your branch is ahead of 'origin/friendships' by 3 commits. (use "git push" to publish your local commits) nothing to commit, working directory clean

Rather than git merging (and then having to deal with merge conflicts), if you're only ever working on branch, can just do:

git checkout master - switch to master branch git pull - make sure master branch is up to date git rebase friendships - move master's pointer to the end of friendship's commits git push origin master - update master branch on remote repo

3. Resolving merge conflicts * Go to raw code and delete the code you don't want * Will display

[joyjing1-blog]

Can create & destroy posts! Can only destroy posts that either you wrote, or have been written on your profile page. Input-box size increases dynamically as you type. Can also navigate to a user's page and click "Add Friend" to send them a Friend Request. Built backend to pull all Friends, Friend Requests Received, and Friend Requests Sent. Still need to finish styling & add checks for who can see what.

[joyjing1-blog]

W8D4 - Friendex 3

Friendex

Started refactoring so that only the App would track currentUserProfile, but was not able to pass to all the necessary components

Header received props

ProfileTimeline is not directly nested within App, so could not receive props

TA recommended if hierarchy is not direct, to just keep Store Listeners on the necessary components (just Header & NewPostForm)

Changed back to where Header & NewPostForm listen to ProfileStore separately

Refactor CSS styling to use SASS (Syntactically Awesome Style Sheets)

Set color constants

Can create posts using New Post Form

New Post Form dynamically changes size depending on how much text the user has inputted

Users can delete posts that they have written, or posts that have been written on their profile pages

Friendship CRUD / backend

Users can send Friend Requests via an "Add Friend" Button on the new user's profile page

Notes

Use git branching!!

git checkout

Removed inverse_of between posts & users

ActiveRecord was having issues finding authors & receivers sinced posts_authored/posts_received didn't follow naming conventions (author_id/receiver_id)

Must include a componentWillReceiveProps function to a component if you want it to update upon hashHistory change, without needing to refresh

componentWillReceiveProps(newProps) { ProfileActions.fetchSingleProfile(newProps.params.id); }

Do NOT name a column value "PENDING" -- SQL automatically interprets this as a column_name

Don't forget to return within your .map loops! Otherwise, nothing will be rendered...

Link comes from react-router NOT react-dom. If you accidentally request it from the wrong one, will get the following error message:

warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `FriendRequestIndexItem`.

To make debugging easier, only focus on one problem at a time.

Don't get distracted by side-problems

Make sure to follow one train of thought all the way through to the end

Do not abandon one thought process in the middle, to pick up another one - this will lead you to change multiple different things, that could break the code even further, making it even more difficult to debug (since you'll have more bugs! And won't remember everything you changed)

If you get an error message similar to the following, it probably means you have a syntax error/typo in that file:

app.jsx:7Uncaught Error: Cannot find module "./header"

If getting weird "route doesn't exist" errors, check the URL that you're refreshing - you may have accidentally ended up on an incorrect URL when a param was passed, and are refreshing the wrong page

* browser.js:50Warning: [react-router] Location "/users" did not match any routes

[joyjing1-blog]

W8D3 - Friendex 2

Friendex

Refactored Header vs Content

Current user was not getting passed to children correctly, fixed so that SessionStore tracks currentUser and currentUserProfile

Refactor Profile & ProfileAbout component - separate header from content so can use modularly

Set CSS styling so that ProfileAbout renders cleanly when in just a sidebar as well as when it stretches across the entire page

Built Post CRUD - can create, update, and destroy posts via AJAX queries

Built NewPostForm - including CSS styling

Use a textarea so that post text will wrap

Currently not dynamically increasing size of box based on how much text th user has typed

Added currentUserProfileImg to top Header as well as NewPostForm

Notes

git add . vs git add -A

git add . checks nested folders, but does not remove deleted ones

git add -A checks nested folders and removes deleted ones

Try to keep State & store listeners higher up in the hierarchy, so can just pass as props down to children

Children just need to render props, don't need to listen to store

heroku log -t

Opens "tail" of Heroku log

heroku run rake db:migrate

Must migrate to production, otherwise tables won't have data, app won't render at all (error message says that "there is an error in the source code"

Also need to heroku run rake db:reset if reseed database