#instacation

[msperryk]

📍 It’s been real, Vegas ✌🏽 ••••• •••• ••• •• • #vacation #vacaymode #vdara #girlstrip #vegas #weekendvibes #bachelorette #bacheloretteparty #trip #travel #lasvegas #nevada #westcost #travelgram #instatravel #instacation #hotels #weekend #vacay #travelmode #vegasresorts #resorts #bestview #summer (at Vdara Hotel & Spa Las Vegas)

[katexi-blog]

Gooodmorning! Lets have breakfast! Late breaky haha #Instacation (at Sky Lounge @ The Vivere)

[cssherry]

Furthering Instacation (in the future)

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.

A good summary of the options is available on OptimusInfo

[djgdubb]

Ok 1 more. Now that Carnival is over, for those of you who have been following my antics on IG, you'll know that too made a trip to Trinidad. I would just like to take a moment to thank all the friends and complete strangers who made my #InstaCation possible. Photo Credits: @socaqueen30 @carnivalbella @frenchcocoa @soca_nick @instaval_tt @jussbusstv @oscarswanson @trinibelle111 @tata_shango_dina @50_shades_of_t @akinyelestephen @trinirebel @mr__f0xx @galerak & @justbeaver_seoul - s/o to @rushinent @mpfirm @energysquadintl & @kevinseep for tagging along lol!

[cssherry]

W9D3: Hacking Site To Size

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

If there's time, solve the problem of the disappearing navbar in Firefox.

[cssherry]

W9D2: Maps everywhere!

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.

Figure out what happened to navbar -- it's too large in Chrome and invisible in Firefox...

[cssherry]

W9D1: Overcoming Google Places/Maps

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

Make everything prettier using Bootstrap and modals (My goal is to have every form on a modal). There's also a cool site called Bootsnip, whch has some interesting Bootstrap snippets that I might use. I also found some good sites for creating Bootstrap themes (StyleBootstrap will let you see the theme as you change it).

[cssherry]

W8D5: Instacation Albums + Photos

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.

Seems that some photos have location information attached-- I should see what metadata Cloudinary can keep, and perhaps autofill the location tag using the photo's longitude/latitude information.