Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
My Process -
The first thing I did was decide I wanted to use an AngularJS platform. I felt more comfortable in Angular because it is what I have been using at my current company. I did a quick Google search to see if there was a good slider tutorial I could use as a base for the app I wanted to build. I found one that I liked--the git repository is https://github.com/simpulton/angular-photo-slider --and I used this for the base of my app.
I didn't want to build out the full node.js environment to run the app, so a cross origin problem was one of the first I ran into. To solve this I installed http-services globally on my machine and ran http-services from the directive where the app lives, which ensured that when I was getting the data from the gallery.json file I would no longer get a cross origin error and could use the data.
I started by setting the data from the file into the webpage. Because the images were sized differently, I had to fix how they were being set into the container. I did this by setting the max-width on the slider class, but because the width and height of each image is different I had to determine which was more important for user experience. I decided width was more important for this app, and so I kept the width size and hid the height in the div element.
I decided I didn't like the bootstrap.css for this simple webpage. I removed it and implemented a flex-box layout to center the slider on the page. In general I use bootstrap for bigger apps where I can use more than one or two of the classes. It was just not the best option for this app, and removing it requires less processing power because I no longer had to include the bootstrap file, even though this wouldn't be a problem for this simple slider application.
I loaded some of the problems and updates into the commits I made for this app. I tried to commit when I would make changes so the overall process was documented.
I believe the biggest problem I ran into was the image sizing. I feel like the solution I decided to go with was made through user testing and what I thought would be the best overall design for the application. Every user I tested figured out how to scroll through images, and there was a general consensus that the font was pleasing and easy to read. No user noticed any problems with the pictures, and they all enjoyed the experience. Granted there may have been some bias because most of the users were family members. The range of users were from a 65-year-old user with very little computer experience, who had never used a slider before, to a 28-year-old user who was very proficient with computers. There were also users in between who were able to look at the application and figure it out.
The last thing I decided to add was the automatic scrolling. I don't always love when an application runs without the user's input so, though it is set to scroll by default, if they interact with the app, the automatic scrolling will stop.