So I have figured that the best way to carry out the rest of the semester's reflection is not to take it week by week but more task by task. As I write this at the end of week 9 I can say that for the last 2 weeks I have been developing the website and apart from explaining step by step what I have done, there isn't much that I can say that is meaningful in terms of reflection each week and it would be better suited to do it on the task itself.
My job with the website was to code in everything that comes underneath the situation generator. A big part of it is that it has to be responsive so that no matter what the screen size is, the site will maintain its look and things won't go out of order. We have planned to have a mobile version but that is time permitting as so far just a desktop version has taken 2 weeks and we have a lot to get through to finish up the project (such as the generator content and finishing off our book) so that is on the back burner at the moment. However, if there is time before Open Studio I will get round to making one if Liam also has time to make the generator mobile friendly. As I am in my 3rd year and web development is something I am interested in and would like to do for work later in life, I wanted to make a website that I would be able to put on a portfolio, which means that it would have to be properly responsive but also be functioning completely as well as implementing good code practice. The result is that I had some pretty sharp learning curves such as using external Javascript (JS) files to keep the code separate and easy to read and working out the most efficient ways to do things.
Josh had made the design on Adobe XD so I just had to build it from scratch from the guide which was interesting as in the past (the one or two times I have made websites which never went live) I have always made the design up on the fly and never had guidelines to work from. From what I understand out in the real world you normally have a design to work from so being able to work with a "client", which was Josh in this case, was a great learning experience. I had also never written or implemented JS in any web development I had done before which was a pretty big jump for me on this project as we have a fair amount of it and it is a brand new language I have never worked in. If you don't know, JS or JavaScript is the code that makes stuff happen a bit more behind the scenes on a website. In the video at the end of this where I show the completed site you can see these parts but essentially the large chunks of our JS control: The google maps function, the scrolling to the top of the page when clicking the home button and the scrolling through the videos and Instagram feed at the bottom.
So this is the guide that Josh gave me to work off:
I won't walk through step by step each section because like I said it took 2 weeks but there are a couple things I want to talk about. Firstly, in the completed site you will see in the last video, the white excuses in the first pink box next to "What's stopping you" aren't there. This was Liam's only other job as well as the site in terms of looks (Liam is in charge of the backend and getting the site to actually be live on our database) and at the time that I captured the video we hadn't yet merged both sides yet. The majority of the site was pretty straight forward in terms of styling and getting things to look right, except for the sliders of Youtube and Instagram content which I will mention later on. I am pretty impressed with myself at the fact that I was able to replicate this design almost exactly in code and a lot of people have asked why we didn't use something like SquareSpace or even a template to work off but because I wanted to develop my skill and actually learn something I chose to do it from scratch. And just to see how pain staking this process is, I recorded one little section. This video shows me making the buttons you see on the top right of the header that link to our social media accounts, and the code I wrote for it is at the end. Except as soon as I finished recording my screen I realised that they didn't actually have the links active so I have added an image after that shows what the final HTML for them is, it was only 1 addition on each line. Now I know the video is only 45 seconds long but that is because it was been sped up by 4000%, the whole process took me 20 minutes but it accurately shows how I go about it, even testing if it is responsive in different browser windows.
The main thing I had difficulty with was the Instagram and Youtube side scrolling galleries because as it turns out it is not as straight forward as I initially thought. It would be easy to make them change position without any transition time and have them just jump as they change but that wouldn't have a polished professional feel to it. My first thought was to use BootStrap CSS to make a carousel that changes when you click the buttons.
I was going to have a video showing this here, however I completely forgot to record it while I was developing the site and it would take me several hours to get it back to that point so you will jsut have to believe me, but for an example of what the carousel looks like here is the bootstrap documentation: https://getbootstrap.com/docs/4.0/components/carousel/
You can see in the example there that the carousel would take up the whole window which cannot be resized. This made it an issue for us as per Josh's design I wouldn't have the other videos poking in from the sides, which he said was fine but as I wanted to do it properly and per the specifications I was not happy with this. Due to the nature of Bootstrap it would be very difficult to go into their style sheets and change the code to fit what I wanted and if I tried to remove their styling, the interactive element wouldn't work, so that was no good. I decided to revisit it at a later date as I wanted to get the bare minimum finished for the site before I went and started finessing things. With the instagram slider it was a bit different because I had 3 images that had to be shown on screen at once but when the previous and next buttons are pressed, they need to shift over by one and not have 3 new ones replace their spots. This apparently is not something that people often use so there wasn't a great deal of help online and on the one instance that I found that appeared to have the code I needed, the JS was incomplete with everyone in the comments asking for the finished version but no one had it so I was back to square one.
In the end I decided to make my own but it was a lot harder than anticipated. I realised there were two ways I could do it. The first was that I could change the styling of the elements on each click to have new positions and appear and disappear when they are needed and not. The main issue with doing it this way is that I would have to use the JS to change multiple values in the CSS for each element. The second way and the method I ended up going with was to assign the images classes when the page is loaded and the classes are where the positioning and display attributes are stored. Then with JS, each time the buttons are clicked the elements change class and because the classes have transition times on them it'll be a smooth change. I wish I had recorded it because it was a mammoth process but it took me 3 days to work out so it would be a long video. I am really proud of this code because even if it might not be the most efficient way of doing it, I achieved the desired effect from scratch with having never dabbled in JS before and doing it in a way that I can understand it and therefore be able to make changes to it in the future. I used the same method for the Youtube videos but just changed the positioning and sizing of the side ones to meet the design document specs. You will also notice that in the video one the videos pass behind each other but on in the image one, that's because there are only 3 videos in this example and there are 6 instagram posts so when they are not on the screen they are not visible but already behind where they will appear from, so their "behind movement" happens invisibly. Also the videos used are just a couple of our favourites from Youtube and not actually our content, that is still in the works.
Here is the completed site walk through:
Update
I realise that in these last few weeks the only thing that is worth talking about is the site development as everything else we are doing is just producing our content and curating our exhibition so that it looks good for NZ Blood. And because most of my time is spent with Liam sorting this site, I will just keep this as my final blog and add on to it. But before I get into the rest of that, I just want to make a note for no one in particular that the reason why we are treating the Open Studio as a Showcase is because NZ Blood is going to be coming to see our project in its entirety and we are really hoping that they will take it on.
On with the website though, Liam and I have been working on integrating the situation generator with the rest of the site. While I have been working on building the front end of the site with all the information and links, Liam has been getting the generator mechanic working but it is very bare bones and has no styling to it. Because it is a dynamic section of the site and it changes based on the length of phrases and what is entered, different elements are created and disappear on the fly so it is a bit more complex than any of the current styling I have been doing, hence why Liam and I are working together on it. It is certainly interesting working with someone else because everyone has their own way of writing code and often I find myself going in to change something that Liam has done and I can't find where he has done it because he has used a different method, which is why it is important to use logical names for Classes and IDs as well as comment complex or confusing sections of code so that the other person is able to understand how to change it.
After seeing how long it has taken us to develop the site so that it looks right and functions as we intend, we decided we wouldn't have time to develop a mobile version before Open Studio. Which is not actually the end of the world as we have been developing the sight so that it is fully responsive and looks the same on any device, except of course elements get bigger or smaller. While it has made it a lot more difficult to style and means it takes longer, it pays off because it doesn't matter how you view it, it will always look as we intended. Having said that, because the majority of the styling was tested on my laptop, we didn't take into consideration that not all screens are the same and so when viewed on say Josh's or Liam's laptops, it looks a little different, but that isn't a huge problem. The same is with different browsers as it was developed on Chrome, so in Safari things like the social icons don't show up, this is just down to different browsers using different syntax. As we were just making the MVP to show how it will work, it will be fine but if we take it further and NZ Blood want to take it on we will have to overhaul the whole thing so that it is both scalable and works across browsers and devices.