Complexity Simplified by Sherry

I love meetups. But I hate finding out about a cool meetup the week of (or week before), after their RSVP list is completely full. What I wanted was to have an RSS feed of every event for all my groups, as they're posted, which I could review with all my other rss feeds.

Unfortunately, Meetup doesn't have a native way of getting an rss feed with events from all your groups. However, they do have a pretty cool API that returns a json object of all events that match specified parameters. I wish I could have used their events api directly, but the available formats were json and xml.

Thankfully, someone else has already partially solved the problem of creating an rss feed from json object (instructions, code). From that, I was able to create my own json to rss feed generator for meetup: https://script.google.com/macros/s/AKfycby-nBW5B0zaP8mFSoytWwZyPEzoqo4SnfeM-OJdhWakciMTN9S8/exec (code).

How to Use:

If you want to subscribe to a list of events from my groups, just go directly to that google script url.

However, the beauty of this url is that it also accepts parameters. All you need to do is get the url you want to generate an rss feed from using the API Console

Then, add that url as a parameter to the google script url:

https://script.google.com/macros/s/AKfycby-nBW5B0zaP8mFSoytWwZyPEzoqo4SnfeM-OJdhWakciMTN9S8/exec?url=>

That's it! Use this url as the RSS feed url for any feed reader (I personally use Inoreader) or automated program (like IFTTT)

Code Writing Process:

Making A Google web app

Get Google Apps Script

Making a web app is actually super easy. I had to go to Google Drive and add the Google Apps Script format.

Write doGet function for Get method

Then, using a the doGet() function, I could define what would be returned when the user visits the web app. Once I publish > deploy as web app, the web app goes live.

Use URL parameters

To make the web app dynamically change the url it generates the feed from, I accept a parameter in doGet(). This parameter has access to the url parameters.

Making a Valid XML

Validating my XML was an annoying process. I used Feed Validator and read up on formatting RSS feeds on RSS 2 specifications.

The one downside with using Google web apps to create the rss feed is that I had to keep re-deploying in order for the xml validator to be able to validate new code.

Escape special characters

First thing about XML, contents needed to be escaped (`````` did not work). To do this, I used an escapeXml function on data within xml tags other than <link> and <pubdate>:

function escapeXml(unsafe) { return unsafe.replace(/[&'"\n\r]/g, function (c) { switch (c) { case '': return '>'; case '&': return '&'; case '\'': return &apos;'; case '"': return '"'; case '\n': return ''; case '\r': return ''; } }); }

Notice especially that while documentation doesn't explicitly mention this, escaping newlines and carriage returns are also important.

Making a Valid RSS Feed

Use RFC-822 date-time

Turns out RSS feeds need to have RFC-822 date-time within the <pubdate> field. Thankfully, this is easy to do in JavaScript, just use new Date().toUTCString()

Use dc:creator

Also, for each RSS feed item, I originally used <author> field, but turns out that RSS feeds expect this field to be an email link. So instead, I switched to <creator> for indicating the author of each post. This meant I also needed to specify <rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/">

Add a description

One of the last things that I needed to do to make my RSS feed completely validated was to add a description.

Questions

I've been meaning to write a response to a [Washington Post article](http://www.washingtonpost.com/news/to-your-health/wp/2015/08/11/the-most-depressing-statistic-imaginable-about-being-a-new-parent/?tid=sm_tw) (from now on abbreviated as WPA) that covers a [recent research paper](http://link.springer.com/article/10.1007/s13524-015-0413-2/fulltext.html) (from now on abbreviated as RP) regarding happiness and babies. One of the reasons I first pursued biology was just how darn interesting it all was: the scientific method, the cool research, the mental gymnastics involved in designing an experiment. However, now that I'm not mired in research or even research management, it's harder to find the time to keep up with interesting research (and let's be honest, it was always hard to keep up with research from fields other than your immediate one). So I rely a great deal on science/health articles and podcasts for up-to-date coverage on research. Which is why this WPA was so frustrating. The WPA cherry-picked information from the original research paper to support what it believed to be the more interesting story, it was shoddily edited, casually interspersed with un-cited studies and surveys, and generally an uninformative piece of sensationalism. # Off-topic much? I strongly believe that coverage of science papers should vaguely be about the same topic as the science paper. Science articles are not a "based on a true story" movie, they're supposed to be simplified, layman summaries of the key findings within long and complex research papers. The key benefit of reading a science article is that you get a glimpse of the big picture without having to examine each pixel. So how did a paper called *Parental Well-being Surrounding First Birth as a Determinant of Further Parity Progression* get transformed into a headline blaring that *It turns out parenthood is worse than divorce, unemployment — even the death of a partner*? The RP was a retrospective study on how changes in parents' happiness around their first pregnancy/birth (parity 1) could be predictive of whether the couple will have a second child (parity 2). The paper also looked at which sub-groups within the study population (which happened to be Germans who had children from 1984 to 2010) showed strongest correlation between changes in happiness and having a second child. In the study, the changes in happiness of parents who had a 2nd pregnancy were compared to parents who only had 1 pregnancy. The WPA pulled out one statistics from the study (overall change in happiness around pregnancy of all parents in the study); compared it to (most likely) unrelated studies on divorce, unemployment, and death; and then framed the whole article around that comparison. Why would any article about this RP do this? The RP says nothing about how the changes in happiness associated with pregnancy compares to those associated with divorce, unemployment, or death. All the RP says is that people who have a more significant drop in happiness after a first birth are less likely to go on and have a second child. Common sense stuff. # Inconsistent To Boot Considering that the whole WPA is framed around the uber-significant drop in happiness associated with having a child, it seems strange that the number it cites fluctuates throughout the paper.

What the article's graph says What the article's text says

Perhaps this is because the actual drop in happiness immediately following the first childbirth is much less? > Those who have a second birth gained more in life satisfaction around the time of a first child’s birth than those who stayed at parity 1 (.20 compared with .12 units higher than baseline in the year of the first birth) and had a smaller drop in well-being in the year after the birth than the group that stays at parity 1 (−.08 compared with –.18 units lower than baseline in the year after the first birth).

emphasis mine

A drop of 0.08 and 0.18 sound much lower than the drop of 1.4 or 1.6 quoted by the WPA.

To be fair, there is a 1.4 drop in this RP (Table 1), but it's the "Mean life satisfaction drop around first birth". The paper explains that this variable describes: > Drop in well-being over the transition to parenthood. We calculate the size of the drop in subjective well-being around a first child’s birth. We measure the difference between the maximum level of life satisfaction before a child is born (from two years before the birth through the year the child’s birth is reported) and the minimum level of life satisfaction after the birth (measured in the year the child is reported and the year after the birth is reported).

emphasis mine

As another blog post points out, "Mean life satisfaction drop around first birth" is a very strange metric to emphasize since the researchers are biasing the number by looking at the difference between the highest rating of happiness up to 2 years before having a child, and the most unhappiest rating up to a year after having the child.

This number was made for sensationalism -- I bet you could get a pretty significant drop in happiness using this methodology even if you decided to frame it around a generally positive experience (vacationing, new marriage, rant about a sub-par Washington Post article).

Lack of Citations

There are numerous places where the WPA could have easily cited its source (In an online article, a hyperlink is just an <a href> away). Instead, the WPA spouts off statistics from other studies or surveys without citation, as if they were common knowledge. As a result, its "facts" have to be taken on faith alone and can't be crosschecked by anyone but its editors (who don't seem the most reliable).

Some Examples of Citation Needed from WPA:

"In Germany, most couples say in surveys that they want two children."

When was this survey taken?

How many people were surveyed?

"To put things in perspective, previous studies have quantified the impact of other major life events on the same happiness scale in this way: divorce, the equivalent of a 0.6 "happiness unit" drop; unemployment, a one-unit drop; and the death of a partner a one-unit drop."

Were these studies also using data from German Socio-Economic Panel Study (SOEP)?

Did they have similar sample sizes?

Did they calculate drop in happiness with the same strange methodology used to calculate the "mean life satisfaction drop" being touted in this article?

How much were these numbers rounded? The happiness drops for these other studies seem suspiciously round.

But wait, the WPA does know how to cite articles (sort of), look at how well it cites the source of data in its one and only graph:

Too bad this causes more confusion than it clarifies -- the one citation implies to a casual reader that all 4 numbers come from one source. Hard to believe since the RP only has statistics on happiness in relation to childbirth.

Misleading Statements

Lack of citation and inconsistency aren't the only problems in the WPA. There are a number of misguiding statements.

According to Washington Post What Paper Actually Says "The study's goal was to try to gain insights into a longstanding contradiction in fertility in many developed countries between how many children people say they want and how many they actually have." "A standing puzzle in demography is why fertility in many developed countries is so far below replacement level." (Note no mention of the disparity between what people say they want versus what they actually have) "The consequence of the negative experiences [of pregnancy] was that many of the parents stopped having children after their first." While this implies that a majority of parents don't have more children after their first, the paper's total study population of "2,016 persons" included only 853 who did not go on to have a second child. That's less than half of the original population, less than a majority.

Lack of Critical Analysis

Perhaps the WPA did ask these questions behind-the-scenes, and they were simply not included in the final version. However the fact that none of these possible criticisms were even considered in the article was pretty strange.

How well does this German study translate to WPA's mostly American audience? Does America have similar birth rates? Same average age of parents? Same education level? Similar demographics?

In Table 1, the standard deviation to significance (standard deviations are in parenthesis, statistically significant differences are indicated with an asterisk in the last column) seem a bit strange. How can a standard deviation of 1-2 translate to a p-value of

As always, correlation ≠ causation. And even more than that, this RP doesn’t really clarify why some people are less unhappy after a childbirth than others. It finds an interesting difference between people who have only one child and those who go on to have more. It then identifies some subgroups where these differences are more pronounced (Table 3 is particularly interesting in that regard). That’s it. At the end of the day, this was an interesting data mining experiment.

Why did the researchers choose their very biased method of calculating “Life satisfaction drop around first birth”? It ensures that there will be a drop while loosening the link between drop in happiness and childbirth – who know what caused the increase in happiness up to 2 years before the childbirth and up to a year afterwards?

One issue I ran into when completing my Exploding Numbers game was geting the numbers to fall at different speeds depending on the difficulty of the game at that time. I'd originally set an interval using a variable that changes throughout the game, but since the interval is calculated once, using a variable in my "setInterval" function call did not mean that the intervals changed.

//My original code var that = this; this.movingObjects = setInterval(function(){ that.game.moveFallingNumbers(); that.canvas.renderAll(); }, 100 / that.game.difficulty);

There are apparently a number of ways to solve this problem. The method I ended up using was to set a very short interval and then create an if/else statement inside the setInterval function call that would be used to run the main function only if certain conditions were met.

var that = this; //Save the setInterval call as an object property for clearing later this.movingObjects = setInterval(function(){ if ( 5/that.game.difficulty < that.iteration) { // Only move objects when condition is met that.game.moveFallingNumbers(); that.canvas.renderAll(); that.iteration = 0; } else { // Otherwise increment an object property that is responsible for remembering how many iterations have run that.iteration++; } }, 20);

Another way of getting around this problem is to use setTimeout and call this function repeatedly (As seen on stackoverflow)

One of the near-final things to do (or maybe it's the first thing!) is generate an logo for your website. This can be very difficult (if you overanalyze it) or very easy (if you just want something that will make the site look legitimate and professional). I went with the latter option. There are a couple of sites for generating logos that I found and a couple of sites for generating favicons (to get rid of the ugly empty document icon on the tab next to your website's name).

Logo sites

I personally used SquareSpace. They create a square (thus their name) logo that can be prepended to the site's tagline. While it was good enough for me, especially since it's search function for discovering icons that could describe your site. If you use the free logo, it does require you to display their logo on top.

I've heard Logo Garden is good, but can't try it out because it requires flash, which apparently I don't have updated to the latest version.

Favicons

Two features of Instacation that still nag a bit at my perfectionism is the fairly hacky method of search I set up (there's got to be a better way) and the bootstrap styling of my page. Below are some websites I have saved that provide ways of improving my site.

How to get a real search going

HideSeek is a jQuery plugin that will search text/title/attributes on a page. Unfortunately, this only searches on the page, so it doesn't do much more than what I am doing now anyways.

Sunspot is another option, but for Ruby primarily, that indexes objects and allows quick searchs of them. The benefit of this is that you can search for strings within a model. It seems like SQL, but making it easier to do more complex searches.

Fuzzily is a ruby gem that allows fuzzy searches for certain table columns. This is probably what I would go with if I were to implement search on my site.

Good Bootstrap Themes

StyleBootstrap is perhaps the best site for creating custom themes that I've found. It will allow you to see instantly what you have defined, so you can get a preview for how your theme will look.

Bootstrap Magic is similar, but doesn't show you exactly what each option is changing, so I prefer the StyleBootstrap layout.

I originally was going to follow this tutorial on WebDesign for making my webpage look more instagram-y, but decided to go in a different direction. Nonetheless, the website is still a good tutorial of what css you'd need to add.

Finally, BootSwatchr is a very powerful, and much better way of manually changing the Bootstrap CSS and seeing immmediately what is happening. It's like StyleBootstrap but for more advanced control. I quite like this site and would probably use it once I have the time to customize the layout of Instacation.

Stock Images

Finally, I could always use more stock images! A great website to get started for a list of good, high-quality stock images is medium.com. I did find that while the images there were beautiful, they were so large and high quality that I often needed to resize and compress them.

A good site I found for finding images for specific locations or topics was Public Domain Pictures. They have a huge repository of great images, and while they try to push you towards the professional stuff, the free images are in many cases good enough for my purposes.

Pagination and infinite scroll

One feature that will be necessary for larger collections of albums is pagination. Google only allows 10 maps queries per second, and unless I set a sleep interval every 10 map queries (completely possible), people could potentially go over that limit. This is hy I should eventually get pagination set up on my albums and photos. THe gem to do this with seems to be kaminari

Tooltips

[Shepherd[(http://github.hubspot.com/shepherd/) seems to be the go-to JavaScript solution for setting up tooltips to guide users through a website tour. I tried for a good half-day to make this work on my site. It doesn't seem like it was meant to be. The tooltips wouldn't disappear and they would appear transparent and in weird places.

Across platforms

Finally, I need to test my website across browsers. There's a simple way to do this using BrowserStack. Unfortunately, the trial requires your personal information, so I don't know if I would use the site.

A free option I found was BrowserShots.

I've played around with a lot of Tumblr themes (I could technically make my own, but that might be too much work for a platform I'm not that attached to).

My core requirements for a theme * Make my code look good! * Link to my webpage, linkedin, etc * The blog should be searchable * Each blog post should have links to favorite the post, access the specific post, and share it.

Turns out there's really only one or two themes that use Google Prettify to decorate code. Out of those two themese, Orenda was not the prettiest out of the box, but it was the most feature-filled and customizable. The best part is the ability to customize the HTML for the theme (I wanted to add custom links that they did not provide)

How to Prettify code on Orenda

You can make code red by either using 3 tick marks ´´´code text´´´ for inline code or the <code > code text < /code> tag for code block

You can write colorized codeblocks using the <pre class=“prettyprint"> < /pre> tag/class.

How to Customize HTML

Go to the "customize" button on the dashboard (it should be on the right)

Click the "Edit HTML" button

Edit anything you need to! Tumblr has a description of this feature on their website. Most custom themes don't allow you to do this (at least previous ones I've tried haven't).

After I created [Instacation](http://instacation.cssherry.com/), the site needed some guest data, particularly since most of the cool features are really only apparent after having albums and photos to play with. I handled this by populating new accounts with minimal sample data, and also creating a guest account that will automatically reset itself once a day. # Automatically create data on new accounts _Demo Album for New Accounts_

Whenever a new user is created, I run a method that will generate some sample data for them.

after_create :create_seed_album def create_seed_album demo_album = albums.create!(title: 'Demo Album', location_id: 'ChIJ60u11Ni3xokRwVg-jNgU9Yk', description: 'You can add a description of your album here!') demo_album.photos.create!([{ caption: 'Photos can have caption!', order: 0, photo_url: 'jpeg_url1.jpg', cloudinary_id: 'cloudinary_id_here', location_id: 'ChIJHa4yoSf0t1IR53T-C55D0yY' }, { caption: "Drag this photo!", order: 0, photo_url: "jpeg_url2.jpg", cloudinary_id: "cloudinary_id_here", location_id: nil }]) end

Create a guest account

Instacation's Guest Account

There's two ways to create the seed data.

Make the seed file from scratch

Make the account and data on your machine, and then export it

I went with the second option and created a pretty good user account on my computer. Then I then created a seed file using Seed Dump (Thanks Ander for the suggestion!)

Finally, to ensure that the guest account is more-or-less static, I set up a scheduled task in Heroku to run a reseed this guest account every day.

How to Seed Dump

Install seed dump (you only need to do this for the development environment.

group :development do gem 'seed_dump' # SEED DUMP! gem 'better_errors' gem 'binding_of_caller' gem 'pry-rails' gem 'quiet_assets' end

run $bundle install on the code and then create a db/seeds.rb file by running $rake db:seed:dump

I updated this seed file so that it would delete the user if it already exisits (otherwise rake db:seed will throw an error), and set the ID of my guest user, albums, and photos (otherwise, the associations will break).

# Delete user if it already exists user = User.find_by(username: 'worldtraveler') user.destroy if user ### CODE! ### # Update the User and it's albums # There's a more concise way to do this, save the user created and make the albums ontop of that user. # However, that does not work for my purpose, because I am bulk-creating a bunch of albums at one time user = User.find_by(username: 'worldtraveler') user.update(id: '1') album1 = Album.find_by(title: 'Philadelphia - The Journey Begins!') album1.update(id: '1') album2 = Album.find_by(title: 'The Great Plains - Heading Into Danger') album2.update(id: '2') album3 = Album.find_by(title: "Dakota - Racing Against Winter") album3.update(id: '3') album4 = Album.find_by(title: 'Rockies - Rockies in Sight') album4.update(id: '4')

Now, I created a task in the lib directory that would seed the guest account.

# lib/tasks/scheduler.rake desc 'This task reseeds the guest account' task seed_guest_account: :environment do Rake::Task["db:seed"].invoke end

So yesterday we had an engineer from RealScout come talk about what to expect during a technical phone interview. The slideshow and video from the talk are now available online.

Basics

The technical phone interview is usually the 2nd stage of the interview process (After the general screeningin).

What the interviewer is looking for is the ideal: someone who is smart, effective, and easy-to-work-with

It's also a chance for interviewees to get a sense of the company/position and what growth opportunities there will be

~1/5 phone interviews continue on to an on-site.

Basic Tips

These are tiring, try not to schedule more than 2 in a row

Schedule every single interview possible -- they'll be good practice if nothingn else.

Pre-interview

Make sure to figure out who the interviewer will be, what the interview will be covering, and any special requirements (programming language, etc)

Scout out quiet area with good Internet for the interview

Prepare some questions for the interviewer about their work and the company culture. Some other good questions could be what a typical work day is like, what the engineering team is like, how the business works, how technology drives business for the company.

During the Interview

There will be 2-3 minutes for explaining your background, don't waste this on reiterating your resume. Explain what technical challenges or interesting solutions you used for a project and what topics you learned while completing the project.

Make sure to learn what the next steps are, when you expect to hear back, and who you should hear back from.

After the Interview

Send a follow up and thank you email immediately (at least the day of). It's apparently especially flattering if you say the interview was fun and that you enjoyed learning about the company.

Types of Interviews

Knowledge

This will test knowledge of coding syntax, how to interact with the database.

Some topics that could come up is dependency injection (how dependencies are passed on) and implementing quicksort.

Evalation: These types of interview apparently don't hold much weight (unless you completely bomb I guess)

Prepare: Chris recommends smarterer.com to get a sense of how much you know.

Experience

This will test yur experience by digging into projects or items listed on your resume. The important thing here is to not have BS on your resume and be excited/exciting.

Prepare: Have 1-2 interesting points prepared for each item on your resume.

Code design

This type of interview will test how to design complicated systems (hint: split it into smaller parts). THis will include creating classes and databases. Projects can include making a deck of cards, a filesystem, or method for tracking page views.

Evalation: This is a very important type of interivew.

Prepare: Talk through everything, ask clarifying questions, and make sure to question what the problem is and what the requirements will be.

Remote coding challenge

This will be a coding challenge conducted on an online code editor, similar to a pair programming exercise.

Some possible coding challenges: sum a file of integers, use regex to find keywords in document, count down timer, or implement different algorithms.

During most of these interviews, you should be able to search stackoverflow, etc for answers. Check with your interviewer, but the experience is supposed to mirror pair programming experience, so you should have resources available during paired programming.

Think of alternative solutions

Prepare: Be prepared by familiarizing yourself with the different online code editors. During the interview, be prepared to break problems down into smaller pieces.

Take home coding challenge

These will be 1-4 hour projects, usually without access to google searches. The phone interview will involve a dicussion about the solution and other possible approaches.

Prepare: Make sure to source control (USE GIT/GITHUB!), add a detailed readme.

Learn more

FREE: Read the Five Essential Phone Screen Questions for an idea of what interviewers are thinking

NOT FREE: Read Cracking the Coding Interview

NOT FREE: Practice questions from interviewcake.com

FREE: Review bigocheatcheet.com

I went through a bit of a panic attack when I thought that my App Academy Repository on Github would have to be somehow converted into individual repos. There were some great tutorials on how to separate out folders into separate repos (see below), but that was definitely going to be a pain if I had to do that for my ~40 sub-folders.

Github Organization - Subdirectories fine except for Rails apps

However, after talking to others, it seems fine that all my App Academy projects are in one large folder. They are related and this helps reduce clutter on my Github account. The only reason I might want to separate them out into individual repos is if I want to push to heroku (make a live link), or if they were an important repo whose changes should be tracked separately.

So all my individual Ruby and JavaScript projects will be staying in the App Academy Repository for now!

If I do want to separate out Rails projects to push them to Heroku, stackoverflow has a great explanation of how to do this without losing git commit history.

1) Clone repo and change remote url to new GitHub repository. 2) On cloned repo, filter-branch to select a specific subdirectory.

// 1) After copying and renaming repo, set a new remote url in "OTHERREPOSITORY" $ git remote set-url origin https://github.com/USERNAME/OTHERREPOSITORY.git // Check to make sure it's actually changed $ git remote -v // 2) Assume project1 is a subfolder of a larger repository $ git filter-branch --subdirectory-filter project1 HEAD

Reduce folder renaming

I store some of my Tumblr images on Github (and then link to them again on the blog). However, turns out that the images urls are dependent on the name of the folder(s) they are in. This means renaming even one of their container folders will cause massive headache in remembering to go back and fix image links. Lesson for next time: Don't rename Github folders that are being linked to from elsewhere

Use actual image link

I felt like today was a wealth of adding hacky features to my website. There were many styling issues, some of which I just ended up solving with JavaScript functions (suboptimal). I think I'm also getting the hang of bootstrap and good CSS principles, I'll be spending a portion of tomorrow just going through my website and removing the sub-optimal styling that I'd implemented previously.

Other than that, I've gotten a lot of features implemented today-- making photos inherit an album's location if it does not have a location of it's own, the search feature, the map view on everything, the log-in/sign-up page styling, and the guest account log-in.

Today’s issues

There was an issue where Google Maps would not render properly-- it would zoom in on the wrong location and then only load the upper left corner of the map. The map would properly load if the page was resized. Turns out this was an issue with how I had my swapview set up and when I was rendering my page. Basically, render each page only once, and render Google maps only once it's finished loading.

// app/assets/javascripts/routers/user_data_router.js _swapview: function (newView) { this._oldview && this._oldview.remove(); this._oldview = newView; //Put element on page before rendering this.$rootEl.html(newView.$el); newView.render(); Instacation.resize(); } // app/assets/javascripts/views/maps/map_item.js // Only render map once it's loaded google.maps.event.addListenerOnce(this._map, 'idle', this.zoomOrResize.bind(this));

My footer would just not sit flush to the bottom of the page. After much tinkering, I finally used a combination of CSS and Javascript to get the behavior I wanted. The problem was that even if the footer sat at the bottom of the page, sometimes the html on the page was smaller than the actual window (due to use of modals).

// app/assets/javascripts/instacation.js // I run this upon initializing the Instaction object and window resize changeHeightForFooter: function () { var docHeight = $(window).height(); if ($(".modal-dialog").length !== 0 ) var modalHeight = $(".modal-dialog").height() + $(".modal-dialog").offset().top ; var footerHeight = $('footer').height(); var footerTop = $('footer').position().top + footerHeight; if (footerTop < docHeight) { $('footer').css('margin-top', 10 + (docHeight - footerTop) + 'px'); } else if (footerTop < modalHeight) { $('footer').css('margin-top', 100 + (modalHeight - footerTop) + 'px'); } }, // app/assets/stylesheets/application.css.scss // I'm not sure which of these setting were relevant, but the combination did the trick! html, .container, #main, .main, .main > .row { height: 100%; width: 100%; } body { padding-top: 50px; width: 100%; height: 100%; overflow-y: hidden; } .backdrop { position: relative; height: 100%; width: 100%; } .navbar { padding-left: 50px; padding-right: 50px; } .navbar-bottom { width: 100%; margin-bottom: 0; }

In a similar vein, I modified a JavaScript function I found online so that it would resize my font to fit within an element that had a defined height.

// app/assets/javascripts/instacation.js // I run this upon initializing the Instaction object and window resize resize: function () { $('.fitable-text').each(function (index, textArea) { while( $(textArea).height() > $($('.fit-container')[index]).height() ) { $(textArea).css('font-size', (parseInt($(textArea).css('font-size')) - 1) + "px" ); } }); },

One large time-sink today was manipulating my MapsItem view so that it can recognize and distinguish between the photo's location and the album's location. When there is no photo location defined, the photo's location should default to the album.

One little feature that was nice to implement was closing previously opened Google Map infowindows when a new one is opened either through a hover event on the images or a click event on the map's marker. That was completed by storing a "lastOpened" marker in the User show or Album show page, and then updating it whenever an event is triggered.

Google Maps apparently only allows 10 queries per second, which I was exceeding for no good reason when I queried the database every time I needed to retrieve a parent album's location for the photo. To solve this problem, I first stored the google place_id as a key in a hash, with the values pointing to all the photo items or album items that have that place id. Then, I had a separate hash that stored the place_id and the google-place object. After that, it was just a matter of going through the hash and adding a marker for each of the locations.

Today, I finally added a guest account to my webpage. By clicking on "guest login", the form inputs are deactivated and they user gets to watch a phantom user fill in the user name, password, and signin to the website.

// app/assets/javascripts/instacation.js // There's an event listener that will trigger the guestLogin function upon clicking the guest login button guestLogIn: function () { //collects the username and password fields $username = $("#username"); $password = $("#password"); //makes the fields readonly (as opposed to disabled, in which case the input will not store inserted values) $username.attr("readonly", "readonly"); $password.attr("readonly", "readonly"); $button = $("#signin-button"); //initiate typewriter method which will pretend to type out the username, then password, then click the signin button this.typewriter($username, "worldtraveler", function () { this.typewriter($password, "testtest", function () { $button.click(); }); }.bind(this)); }, typewriter: function ($el, string, fn) { var stringLength = string.length; var char = 0; $el.val("|"); this.type(char, string, $el, fn); }, type: function (char, content, $el, fn) { if (char < content.length) { var typingSpeed = Math.round(Math.random() * 120) + 10; setTimeout(function(){ char++; var type = content.substring(0, char); $el.val(type + "|"); this.type(char, content, $el, fn); }.bind(this), typingSpeed); } else { $el.val(content) fn.call(); } },

I was being lazy and didn't feel like creating a custom search route and possibly installing gems to help return search results. So instead, I implemented the search on the current user's page by assigning a bunch of classes (state, city, and country) to each album-item. When a user selects a location, all other album-items are hidden by appending a "hidden" class to album-items that do not have the location class specified.

Goals for Tomorrow

Attach button for creating new albums and new photos to the navbar.

Put all the form on modals.

Add a pretty header to user page. This might just consist of removing the user name and instead making the location selector more prominant.

Hide markers for hidden locations.

Maybe update map upon updating album/photo location. This seems like a pain, but could be interesting.

I really want to add the ability to share links to albums with others.

Fix view of albums with only one location? I've solved this problem already, but sometimes the map won't zoom properly for some reason.

Add pagination? This will mess up the current implementation of instant-location search, but it's worth looking into since Google Maps will reject more than 10 queries a second.

Consider making links from location descriptions that show all photos/albums in the same name/state/country

If there's time, add search for picture captions

Today was all about making the app look better and putting Google Maps everywhere. First, I figured out how to add a small Google Maps image to the blueimp gallery slideshow.

Then I reorganized my user's page to mirror the AirBnB view, with Google Maps on one side and albums on the other side. I even added some small (slightly excessive) animations for when hovering over images.

Finally, I redid my sign-in page using Bootstrap (which was much more painful than I imaged it would be).

Overall, I'm pretty happy with the progress today. 1 more day of feature-adding and then Thursday will be all about making the app look presentable!

Today’s issues (where do I begin?)

Adding a small Google Map to blueimp was not as hard as I thought it would be. I basically used the buit-in "description" option to force Google Maps into the image.

//app/assets/templates/albums/show.jst.ejs <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"&gt <div class="slides"> </div> <h3 class="title"> </h3> <a class="prev">‹ </a> <a class="next"> › < /a> <a class="close"> × < /a> <a class="play-pause"> < /a> <ol class="indicator"> < /ol> //THIS IS THE IMPORTANT LINE <div class="description google-map"> < /div> </div&gt // Then render the map in the album show view app/assets/javascripts/views/albums/album_show.js //This is copied from bluimp docs openGallery: function (event) { event = event || window.event; var that = this; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event, stretchImages: true, onslide: function (index, slide) { //this function generates the description that.displayDescription.call(this, index, slide, that); }}, links = this.$('.link'); blueimp.Gallery(links, options); }, // Generates description for the gallery displayDescription: function (index, slide, albumView) { var text = this.list[index].getAttribute('data-description'), node = this.container.find('.description'); node.empty(); if (text) { node[0].appendChild(document.createTextNode(text)); } //gets photo and map element var photoId = $(this.list[index]).attr('id'), photo = albumView.model.photos().get(photoId), map = this.container.find('.google-map')[0]; //Sees if the photo has a picture, if so, render map. Otherwise, hide google map div if (photo.escape('location_id')) { $(map).removeClass("hidden"); albumView.renderMap.call(albumView, map, photo); } else { $(map).addClass("hidden"); } ... //Additional code simply renders Google Map according to Google's documentation },

I felt like today, I added a bunch of css through sheer trial-and-error. When something didn't work, I kept on adding and changing properties until they did. Some things that I learned: jQuery's sortable function does not work when the body does not have a height. To make map view on one side and every thing else on the other side, I had to keep changing properties of every single element on the page.

You can trigger an event on a model within any view. This was useful for detecting when hovering over an image. The event was then used to find the Google Map marker and move it.

// In my album item view app/assets/javascripts/views/albums/album_item.js events: { 'mouseover .image': 'triggerMarker', 'mouseout .image': 'closeMarker', }, triggerMarker: function () { if (this.model.get('location_id')) { this.model.trigger('selectImage', this.model); } }, closeMarker: function () { if (this.model.get('location_id')) { this.model.trigger('unselectImage', this.model); } }, // Then in the album show view, listen for this event from the model initialize: function (options) { this.listenTo(this.model.photos(), 'add', this.render); this.listenTo(this.model.photos(), 'remove', this.removePhotoItem); },

Goals for Tomorrow

Fix location column so city is not required. Reconsider what fields are required.... Sometimes you just want to tag a region or a country.

Add dates column to albums (and photos?) and allow searching by date.

Create index view for different locations.

Set default location of photos as location of album.

Consider adding search option for finding albums/photos.

Add pagination.

Continue making pages prettier.

Today was very productive. I've completed Phase 3 essentially-- all albums and photos can have location tags, these location tags can be edited or removed, and the location tags can be displayed for photos. Now I just need to figure out a good way of displaying this information in a pretty fashion. Originally, I was thinking that perhaps locations for albums can be mapped on the user's main page. Then, locations of photos can be mapped on the albums show page. Selecting markers in Google Maps will select the album or photo show page. # Today’s issues * Today's main issue was fidgeting with the Google Maps/Places API. I got location to save AND update. Updating was tricky since I needed to keep the current location if a new location isn't selected (in other words, NOT save the location name that I automatically fill the update form with) AND I need to delete the location tag if the location name is erased. Saving the location was a bit easier. I just saved

// app/assets/javascripts/views/albums/album_form.js render: function(){ // If updating the album, and if there is a location for that album, get the name of the location if(this.albumView && this.albumView.model.locations().first()) { var location = this.albumView.model.locations().first().escape('name'); } // Put the location into the album form template var content = this.template({albumView: this.albumView, location: location}); this.$el.html(content); // Store the input for the location as a variable and pass this into a new Google Autocomplete object var input = this.$('.location-picker')[0]; this.autocomplete = new google.maps.places.Autocomplete(input); // Add a listener for the autocomplete object, which will call the "setLocationChanged" method when a new location is selected from the autocomplete field google.maps.event.addListener(this.autocomplete, 'place_changed', this.setLocationChanged.bind(this)); return this; }, // This setLocationChanged method is just responsible for toggling a switch that says yes, the location has been changed, please update the location association setLocationChanged: function (event) { this.locationChanged = true; }, // When the album is saved, this saveLocation method is called saveLocation: function (callback) { // This will grab the details for the location entered from Google var place = this.autocomplete.getPlace(); ... //The rest of this method is very long, but you essentially just save the location the "place" variable. } });

Adding a google image to the photo show page was a pretty fun exercise, mainly because Google provides a pretty good demo of their mapping and autocompeleting as part of their documentation.

Originally, I was saving location associations for albums and photos as the location ID. Turns out this is horribly convoluted, so I just decided to save the "location_id" as the Google places_id. This makes my fetchOrGet method much simpler for my collection of locations (in app/assets/javascripts/collections/locations.js)

I think I'm fairly decided on the fact that there will be no user/album following as I originally intended. Eventually, I would like people to be able to share albums with others through a url and password, so I leave the option of having comments enabled for albums and photos. However, that will be a bonus feature that I might or might not implement.

I discovered a plugin called Blueimp, which helps make beautiful image galleries. The only trouble is that it's difficult to display information like Google Map location on the slideshow overlay. I'm playing with the add-on now and hoping to find a way to integrate my location information into this slideshow. Otherwise, I might have to try creating slideshow from scratch or stick some more navigation bars in my current photo show page.

Blueimp My Current View

Making the Blueimp plugin work was a production onto itself. Originally, it broke my cloudinary widget (unacceptable), but turns out this was because I needlessly required jquery as instructed in the readme. I ended up following the readme almost-exactly. 1) Require the blueimp-gallery css file and js file. 2) On the page that the slideshow will appear, add a blueimp gallery view. 3) Put all images inside a ".list" element. 4) Create an event listener for when the ".links" element is clicked.

// 1) Require blueimp in app/views/layouts/application.html.erb <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"> <script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script> // 2) On app/assets/templates/albums/show.jst.ejs, add div for blueimp gallery <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> // 3) Put all images inside a ".list" element in app/assets/templates/albums/show.jst.ejs <div class='photos' id='links'> <!-- Images will be inserted here --> <!-- using format: --> <!-- <a href="full_photo_url" title="caption" data-gallery> --> <!-- <img src="thumbnail_url" alt="text to display if thumbnail doesn't show up" /> --> <!-- </a> --> </div> // 4) On app/assets/javascripts/views/albums/album_show.js, create an event listener that will open the gallery when an image is clicked events: { 'click .links': 'openPhotoView', }, openPhotoView: function (event) { event.preventDefault(); event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); },

I've been using branches to make changes to my app without worrying about breaking key functionalities. Then I test everything out rigorously before merging the new branch with my master branch. However, sometimes I decide that there are key changes that I want no matter what. These changes I make on my master, and then merge over to the new branch. While this is great, it sometimes causes merge conflicts, but thankfully, turns out that Atom has a built in merge conflict resolver. Just press shift + command + P and search for "Merge Conflicts: Detect". Technically, there is a hotkey for this, but I haven't gotten it to work. Then, just go through each of the files, and accpet merges, commit them, and merge with master!

I thought that I had the photo uploading figured out, but turns out there was a bug that would redirect users to the home page if they physically clicked on the "Click or Drag Photos Here" button when creating a new Album or Photo. Turns out I forgot to "preventDefault" on the event handler for that button.

Goals for Tomorrow

Create index view for locations. Then display albums and locations on Google Maps layout. Also, just realized that photos without specific location should inherit the location of their albums.

Figure out way to display location in blueimp Gallery. Then switch over to using the much cooler gallery-view for albums.

Consider adding search option for finding albums/photos. Some plugins people have suggested: HideSeek, Sunspot, Fuzzily

Today my time was spent realizing that Filepicker was not going to give me the tools necessary for creating quickly-loading galleries. Another App Academy student suggested using Cloudinary, so I decided to try out the service.

Not only does switching to Cloudinary allow me to create thumbnails, but it also drastically increased the number of pictures that could be uploaded per month (from 500 through Filepicker to 7,500 through Cloudinary). Turns out that I could have also tried using Amazon services to upload pictures-- they seem to also offer image transformations. However, Cloudinary still seems like the better options because of the sheer variety of transformations allowed. I could really make the pictures instagram-able through Cloudinary using some of their filters and other options.

Overall, I'm much happier now with the speed at which the user and album show pages load (since those images are cropped and thus quicker to load). I also finished creating a page for showing just the photos (which display the full-sized photo). The basic functionality of my site is now working, I just need to add the tagging functions now!

Today's Issues

Today's main issue was figuring out how to switch over to Cloudinary as my photo-uploading service. This turned out to be simpler than I thought it would be. In my main layout file (application.html.erb), 1) I required the cloudinary widget (for uploading photos) and 2) set my cloud_name and api_key (for downloading them). Then, in the main JavaScript file (application.js), include a bunch of the cloudinary files that were downloaded from their (github page)[https://github.com/cloudinary/cloudinary_js/tree/master/js] (these files are needed for downloading photos using their api). On the form view, I then created 2 event listeners which would be triggered when the "upload photos" button was clicked. These event listeners would call a method "selectPhotos", which would open the Cloudinary upload widget. Finally, on the album item and photo item pages, I retrieved the url for cropped images from cloudinary, to be inserted into my album/photo item templates.

//app/views/layouts/application.html.erb //1) include the cloudinary widget JavaScript file <%= javascript_include_tag 'application', '//widget.cloudinary.com/global/all.js', 'https://maps.googleapis.com/maps/api/js?libraries=places' %> //2) use the "script" tags to include the following information var cloud_name = "<%= ENV['cloud_name'] %>"; var upload_preset = "<%= ENV['upload_preset'] %>"; var api_key = "<%= ENV['cloudinary_api'] %>"; $.cloudinary.config({ cloud_name: cloud_name, api_key: api_key }) //app/assets/javascripts/application.js //= require jquery.ui.widget //= require jquery.iframe-transport //= require jquery.fileupload //= require jquery.cloudinary // Event listeners in album form (app/assets/javascripts/views/albums/album_form.js) events: { 'click .choose-photo': 'selectPhotos', 'dragenter .choose-photo': 'selectPhotos', }, // selectPhotos method in album form (app/assets/javascripts/views/albums/album_form.js) selectPhotos: function () { cloudinary.openUploadWidget({ cloud_name: cloud_name, upload_preset: upload_preset}, // results are returned as an array of saved cloudinary objects, so a function "savePhotos" is then called to save the url and cloudinary_id of each uploaded photo function(error, results) { this.savePhotos(error, results); }.bind(this), false); }, // retrieve url for cropped images in photo item view (app/assets/javascripts/views/albums/photo_item.js) // cloudinary_id is retrieved for the photo model var cloudinaryId = this.model.get('cloudinary_id'); // requesting url (src) for the cropped version of the image with specified cloudinary id. Note that cloudinary returns an array of cloudinary objects, each of which have a variety of attributes, including the src (url) attribute. var photoUrl = $.cloudinary.image(cloudinaryId, { width: 300, height: 300, crop: 'fill' })[0].src;

I almost forgot the purpose of join tables (It's to connect multiple objects from table 1 to multiple object from table 2). I'd originally planned to have a joins table called "location_taggings" which would be used to link photos or albums to locations. However, after I began creating this joins table, I realized that since each photo or album would only have 1 location, I could link a photo/album to a location directly using a location_id foreign key. No need to use a joins table!

I was torn on whether to allow people to change the album a photo belongs to. It seems unnecessary, since people will be uploading photos from one vacation all to one album, why would they need to change a photo's album? In the end, I haven't added that feature, though maybe I'll add it if I realize it's a useful feature to have.

Goals for Tomorrow

Figure out how to pull Google Places information from the Google Places Autocomplete field. Currently, I can autocomplete place names, but this gets returned as a string rather than a Google Places object. It seems like I will need to use an event listener to recognize when that places input field changes.

Revise the AlbumForm and PhotoForm views to accept location tags.

Itegrate location information into the PhotoShow and AlbumShow views.

Today didn't feel like it, but it's the third day working on the final project. I've been working on this for half a week already!

While things are going well (I now have user and album views!), I ocassionally got stuck on some issues-- like how to make personalized forms for saving versus editing information (I ended up just passing in different views and sending to 2 different methods depending on which view was present). I felt like I made a lot of progress, developed some very hacky solutions, but overall moved like molasses.

Today's issues:

I already mentioned this, but having 1 form template that will then either save a new album or edit an existing one was a challenge. There was a hacky solution where I: 1) edited the template with some if/then statements to reflect different actions of form, 2) created helper methods that were called depending on whether the parent view was from the user (in which case a new image was created) or from an album item (in which case that album item was edited)

Using comparators for collections when I want to sort by 2 fields. I still don't think I have this down, I've tried this multiple ways and gotten different results on different albums depending on the time of day and mood of my app. I've finally settled on what should have worked in the first place:

Instacation.Collections.Photos = Backbone.Collection.extend({ ... //For photos, I want to sort by first the order, then the updated date. //I accomplished this by creating an array //That first list the order number (lower numbers should appear first) //then the amount of time ago when the photo was last updated (smaller integers should appear first) comparator: function (photo) { return [photo.get('order'), new Date(Date.now()) - new Date(photo.get('updated_at'))]; }, ... });

Since people would most likely upload photos and albums together, I edited the 'add new album' form to also allow for upload of photos for that album at the same time. This was pretty complicated because the album also had to show an image of the first photo uploaded. Also, once the feature was perfect for creating a new album and its photos at once, the form would no longer just create the album by itself. I had to put some if/then statements to check to see if there were photos, and skip all the photo saving code if there wasn't a photo.

I had to parse filepicker's urls into an array that would then be used to create multiple photos when multiple photos were created. I eventually came up with the following:

Instacation.Views.PhotoForm = Backbone.View.extend({ ... createPhoto: function (event) { event.preventDefault(); //collect all the model parameters from the form var params = $(event.currentTarget).serializeJSON().photo; //find the album_id from the album backbone model passed in to this view var album_id = this.albumView.model.id; params.album_id = album_id //split up all the urls from the photo_url field of the form (it's returned from filepicker as a string, where multiple urls are separated by commas) var urls = params.photo_url.split(","); //Create a new photo model in anticipation of a lot of saves var photo = new Instacation.Models.Photo(); //Now, for each url, save a photo! urls.forEach(function (url) { //by overwriting the photo_url attribute of the params object with the specific url params.photo_url = url; //and saving all the photo photo.save(params,{ success: function(){ //adding the photo to the album sub-collection this.albumView.model.photos().add(photo); //as well as it's sub-views, so that the photo will immediately show up on the page this.albumView.addPhotoItems(photo, this.albumView.addSubviewFront); //and finally, empty out the div that contains the form this.$el.empty(); }.bind(this) }); }.bind(this)); }, ... });

I kept on wanting to change rails model attributes that I didn't permit in the rails controller. I ended up adding "permit" for every field, even some ones I didn't think I would need (created_at times for one and foreign keys for another)

It was difficult determining how much of the design I should have established at this point. For example, I don't want just 1 image on the album display page, I want multiple images to be overlapping each other. For the user page, I want the header to include a collage of their photos. For the footer, I don't want it to have a fixed position, but that's currently the only way I can get it to span the full width of the page. For the user and album pages, the thumbnail view is wonky-- images need to be resized to the same height, not the same width. I need to find a better place to put the "make new photo" or "make new album" buttons-- they're currently not obvious. Most of these things I think is appropriate to shuttle off to the future. But sometimes, I still get stuck trying to find a solution.

I had a mid-project crisis about the goal of this webapp. If it was truly instagram, people should be able to discover other users, follow them, and see other user's albums. That was how I originally planned this project. However, the more I think about it, the less interesting/useful this model seems. Who really wants to view other people's vacations? Only those that are coerced. This app would be most useful if it was a repository for people to see where they've been on a map or through a timeline. Perhaps they can send their albums to others, or invite their family to see their vacation photos, but that functionality should be separate from the web app-- it should be done through a url + password interface where the person sends others their url and user-assigned password so that others can use it to see view the albums. I think I will be moving in this direction, making this app simply a place for users to collect their own vacation photos rather than a place for users to social-media-ize their vacation.

Goals for tomorrow

Make photo views (still haven't done that! Blah)

Make form for editing photos and edit current form to allow reassigning photos to albums

Create location tags and link to Google

I can't believe we're already on the second day of the final project. Luckily, I have just finished the bulk of my main rails/backbone elements for making albums and images.

There were definitely some pretty tricky elements of this-- primarily:

1) I originally couldn't create any albums because my controller was relying on the id from the url, which was not actually present in backbone. I ended up automatically adding a user id for albums based on the current user's

2) I had trouble figuring out how to make different views depending on whether the user owned the album, or was viewing another user's profile or album. I ended up creating a variable that was passed into various Backbone views that was purely for the purpose of telling the view whether the album belonged to the current user or not.

3 I had issues where certain Backbone models or views were "not a function". Turns out I tend to forget to call the functions constructor style with a "new" in front. This is funny since I tend to prepend my ruby classes with "new" unnecessarily.

5) I had a lot of problems implementing filepicker. First, since I had to install a gem, I thought that I would also have to require the gem in the application.js file. Turns out I actually just have to require a script and set the key within my application.html.erb file. Then, two lines need to be added to the "render" function.

render: function(){ var content = this.template(); this.$el.html(content); //The next two lines are the IMPORTANT ones var $filePickerInput = this.$('input[type=filepicker]'); filepicker.constructWidget($filePickerInput[0]); return this; },

Re-setting up a computer for development is very, very, very unpleasant... It took me a good 3 hours just to get the programming environment set up (you'd think I'd be faster now seeing as how this is the 4rd time I've had to do this.... Once was even on a Windows laptop).

At least I'll be able to take the assessment tomorrow on my own computer (though atom is still not set up as I'd like).

On the bright side, today we completed the final App-Academy-driven project. Starting tomorrow, we'll be working on our own projects! We finished off by making a Trello clone that could be sorted and rearranged at will. I can't wait to create my own project that will take pieces from all our previous work to create something on my own.