Lazyload, swipe and much more

I absolutely loved the design as it is clean, fresh and looks dynamic. I really thought by finishing the code following the tutorial will pretty much wrap up this project, but I was wrong. Very wrong!

Sections

As you can see on the site there are slides coming right to left for each link you click on. These are sections, although it looks that they are all different components of the page, but they are really not!
Just imagine a standard webpage as a roll of paper. As you scroll down you go through different segments of the same paper. Now imagine this roll to be cut up into a certain number of dimensions (sections) and start piling up these 'card/sections' on top of each other. They all exist the same time, in front of each other, but most of them get hidden away by the first card. As the new section slides in, the previous one stays in the back. Each slide will have classes such as 'hidden', 'back-section' or 'active' when required.
When I finished the initial project, I realized there is an issue while loading the page. The last slide that loads will be visible for a second and kind of ruining the initial animation. An easy fix would be to add an empty black section (without any characters, pictures or other elements) as the last card. When the DOM (document object model) gets loaded it will be the last card on top. The Home section is 'active' so will slide over it - that makes it look pretty neat. The problem with this solution is that as the DOM (Document Object Model) grows bigger and starts running the project not only locally, it will require more time for the DOM to load in, so for the trace of the second flashing-up some of the sections will come back. By the time we load the last sections, which is now set as a blank section won't load fast enough for us anymore. We pack the sections on top of each other, but by the time we reach the last section some of the other cards will get displayed again as we have more content to display and each section will get much bulkier and requires more time to load in.
Only the next solution to the problem was to set all not needed sections to be hidden until the DOM loaded. That worked again for a while, but every now and then it seemed the issue came back with a flash. The reason being is that the DOM loads first (line by line) and styling is after. You start putting the cards on top of each other, but you haven't yet learnt the trick to hide what you are doing. Its because DOM is partially built by the time the CSS (which contains this trick) is loaded. I realised I need to find a more feasible solution.
Rather than leave a blank section as the last slide, I should make it the first and add it as 'back-section' right away. Like this, when the HTML starts loading followed by the CSS it will eliminate the issue. By the time it finishes the load the whole DOM (put the cards down) the back-section is already set (lesson learnt) and the rest of the page would not be visible. Trickery! Although it works for this small/medium sized webpage, it would not be recommended to use this approach to larger sized webpages. It would need to be either set up component-based (React) or there needs to be an intersection-observer set up. But I will come back to this later on.

Jpeg vs. Webp

Out of interest, I wanted to see how else I can make the page load faster. I have around 5-6 pictures added to the project. By checking out in the network tab in dev mode I saw that each picture (Jpeg) takes around 600-700ms to load. Webp images have around 15-30% less data than Jpeg as it compresses more. But I also read on Stackoverflow that they are harder to decode, so the gain is not as significant. This answer was posted on the blog about four years ago, so I was not sure about its validity today. So in the end I had to make my own testrun for it as I really wanted to overcome this problem.
My original Jpegs were not that heavy, but in turning them into a Webp the size got reduced even further. I compared the page load time using Jpeg vs Webp. The result was a small reduction in loading time of around 0.0x seconds, however an improvement. Although the improvement is small, it would make a significant difference when using much larger and therefore heavier images. So it is still worth sharing my findings after I invested in researching and testing the topic.

Component-tree / think before you do!

I mentioned above the DOM and how these 'cards' get loaded on top of each other. Maybe it looks like there are only 5-6 cards in this pack, but I have much more to show. This is why the problem started to evolve. Here is the component tree if you would like to see. Component tree You can see we have over 10 cards. Each of them gets classified in 'active' or 'back-section' or in some cases to be temporarily 'hidden'. It wouldn't be a problem at all if I leave the project simple as it started. But I didn't find it sufficient as I wanted it to have multiple layers to it. It means you can click on the logo which is not part of the navigation section but still brings up a section. Same with the project-section, there are examples and even inside the examples are more links to further slides.
Is this a problem? Not really, but what we need to understand is that each click calls an event-listener. It means you click on something and will execute a function. The navigation panel is relatively straight forward: If someone clicks on a link on the navigation panel, it sets the current card as a background section and the new card as active. Simple and works smoothly. Now imagine that you are not part of this 'chosen navigation panel-group' or you may just be part of one of the sections. The original functions wouldn't know what should be the back-section and which is the active. I need to further specify it. If this and this gets clicked, do this and that. But if you are already there and something else gets clicked if this and that is true/false then do this or that. What I'm trying to say with all this salad? It means that I had to cover a whole list of scenarios to make this happen. I have five navigation links (the easy part), about four project examples with four more sections to link to them and around two to three buttons to do similar actions on the page. Now getting a bit more complicated you think? Yes and no!
Now imagine that each of your clicks not just slides in a new section, but also highlights on the side section of the page what the current content is. Wait a minute! How about each click closes the theme-toggle section on the right of the page when any of this gets clicked? Let's do that as well, totally! How about making the web page more responsive, when it's on mobile let the navigation side overflow the content, but when it's around tablet size, let the navigation side push the content on the right, it looks cool after all! You know that I want the page to be responsive to swipes - we all want that!
And here we are now with a whole lot of arrays of different outcomes. We have if-statements within if-statements and functions in functions. Here is an example. Now we have to cover a lot. What shows on the navigation panel, what will happen on small/medium/large screens, what happens if the style toggle is already open, what happens when we swipe the navigation panel to be open (all screen sizes) but we close it with the button and swipe back.
What to learn from this? One thing for certain, plan what you do! If I have had set up the page differently from the start, knowing that I want so much more from it, I could have prepared it from the beginning. That doesn't mean I am not happy with the outcome of the page, in fact I am very happy - it does look and feel nice and all grounds are covered! But if I had all these learnings and this fantastic knowledge beforehand, I would have been able streamline some of the functions and make it more simple to understand. It's a great learning curve and a valuable lesson for me. I want to return to this project and rewrite the JS for it. I'm certain I'll be able to reduce the code by 30%.
UPDATE: I have realized this objective and was able to actually reduce the script by more than 40%. Let me go into depth on this at the bottom of this page.

Hammer.js (swipe)

I used Hammer.js before in my Secrets project, so using it this time around was pretty much straight forward. The only issue I had is that although it worked well desktop, anytime I tried to use it responsively (mobile/tablet) it didn't fire the required functions. I needed to find the solution to overwrite the touch-input/mouse-input's initial behaviour. I leave the code here as it was a bit tricky to find, might offer a solution for someone who comes across similar issues.

const hammer = new Hammer(document.getElementById('gesture-element'), {inputClass: Hammer.TouchMouseInput});

Lazy-loading

Welcome to the realm of Lazy-loading! If you are unfamiliar with the term: 'Lazy-loading is the practice of delaying load or initialization of resources or objects until they're actually needed to improve performance and save system resources.'
Just imagine you are scrolling through Facebook/Instagram and that at the initial start of the app it would need to load in all the content for you. Would be quite a long ride! Furthermore you might just open the site for a second or two, but it's taking over all of your bandwidth and loading all the content even if you won't need them later on.
A solution exists! Many sites use an intersection observer. It's basically passing the message to the app what section of the site the user is currently 'consuming'. You can tell it 'if the viewport is less than 500pixels away', start loading in the images, videos etc. If you never reach that far on the site, it shall never load. A win-win-win solution.
The reason I dive into this subject is because as I mentioned above I wanted to keep this project as light-weight as possible. As soon as I embedded a few YouTube videos, it went all over the place in the network tab. YouTube/Google started to bombard the site with their scripts, figuring out which ads to load plus loading all the videos in. Remember, all sections are existing at the same time in this project. You might not look at the section where the video got embedded, but it will still load up.
I could use an intersection observer, but I didn't want to add an external library for this, especially if my only concern was the embedded videos. I went to find different solutions for this but I ended up creating my own one. Here is the work of others:

Solutions:   Example-1   Example-2

I liked the idea, but if you try it out, you can see that somehow it is not really elegant. Many times the YouTube autoplay won't even work, so you basically need to click twice for the video to start. I also didn't like that a custom icon has to be used on top of the pictures. So here is my take on this subject:
Before I dive into this, we need to know what is Iframe. Iframe is (it is in its name) a frame which lets you embed another HTML page into the current one. It has its own properties like style, history and document. It does not interact with the parent HTML. So what the guys were doing on these two examples is putting an image into the iframe with some icon on top which serves as a play button using srcdoc property.
This lets you pretty much put the whole page as an inline element within the iframe. Anyways, let's not go too deep. There is a picture once it gets clicked will start to play the YouTube video as long autoplay works..
As I mentioned, I didn't like that it looks different and you need to double click a lot of times, but my main concern was that I would have to put a lot of lengthy inner styling in my HTML and I really like the clean look of the code as it was. I started to develop an idea to move everything to the JS to later being injected into the iframe when needed. But I still didn't like that there is a lot of HTML and CSS in my JS. And playing around hit me with the simplest idea.
There is something called innerHTML. This can be set. I've done it before! What I did is that I prepped an empty div which will be injected using this innerHTML. What happens when the page loads, we have empty divs (containers if you like). But when you click on a certain project it will call a function which will set the innerHTML to the iframe we need. It works perfectly, but as YouTube is not messing around and right away starts to bombard you with the video and ads, it messed up my animation. What I did was writing another function with a loading gif image. When you click on the project, it's setting that image, but after 0.5s it's resetting the iframe again, now to the actual video. No double click or misleading icons, and furthermore my code remained clean!
I also had to write a function to stop Youtube continue playing in the background a when you click away from the section that embeds the video. In this case the iframe will be set back to the gif I just mentioned. Pretty nice solution, I'm proud of it, it's my child!

Bits and bobs'

I covered most of the real challenges above, but there were quite a few minor-ish things I wanted to sort out. I needed to set what happens when the form on the contact section gets sent off. As this project doesn't have a backend and neither I wanted to have one I found few free services that can be used. I ended up using formsubmit.co. Easy peasy!
I also wanted to make the styling more appealing. For example if you are in tablet/mobile you cant open the navigation section and the theme toggler together and even if one of them is open, if you click away to do something else it will close them. Originally it would have remained on the screen regardless what section you are heading to, blocking the content. I have done this to work by both clicks and swipes among other things.
I also wanted the page to be more responsive. Originally it was sort of responsive, but a lot of times the content got squeezed in too much, or just the space wasn't enough to fit all in. On portrait mode it was straight forward as the project had a good base, but I also needed to convert it into landscape mode as well. For example open the website on mobile, open the navigation menu and now tilt your phone into landscape mode. You will be able to see what I'm talking about.
I also added an About me section, using the logo which also animates on click and when the section is active, and I changed the style-toggler here. I think it looks pretty nice. Previously it wasn't obvious right away which particular colour you had selected. So I went the extra mile to fix this and make it look better. The colours are kind of see-trough, but when you click on it turns into solid colour with a border. Oh yes, one more thing, double tap changes the dark theme to light and back.

Takeaway

I've learnt a lot during these past few weeks. The project-tutorial was amazing, it taught me a lot about how to structure a website properly. I already used most of the technique he used, but definitely it helped me to reassure the proper use of css-selectors. Furthermorepreviously I mostly used grids or flexboxes to design and this is the first time using flex property. It was also the first time that I used before/after pseudo elements as part of the design.
I had a lot of practice creating custom functions and adding event-listeners. It was really valuable and helped me to work out the logic time and time again. This also taught me where I did go wrong with the project. I should have thought about what I really want from this prior to the work I invested. It would have made my work so much easier. Don't get me wrong, I'm not disappointed by this. I just had ideas on the way started to execute them bit by bit.
For now I say goodbye to this lovely project. We had some good times together! I plan to return and sort out the JS a bit at some point. I shall see you again soon friend! bye

UPDATE

Since I wrote What's about, I made a number of changes to the page. And I was right, I could significantly reduce the amount of lines I coded, but most importantly I made it far easier to understand. I made everything as nice and tidy as I could. What I wrote in the Takeaway section is completely right. I wanted to make It happen so badly that I didn't stop and think about it. Instead of writing several for each loop and separate functions and trying to counter the unwanted side effects each of their own, I simply linked section-links to the corresponding section regardless if it is a navigation element or button or even an image. TThis way all works within one foreach loop and hardly any unwanted animation mishaps I needed to counter.
But apart from this very valuable lesson, I made several other changes as well. I rewrote my lazy-load function, it both starts and stops the videos if needed, furthermore I made a codesandbox embed as well with it. I wrote some animation to make it more sleek. I'm happy with the outcome. I also embedded a tiny beginner project I had, which I also rewrote so it fits the iframe correctly using @media queries.
Now I consider this project to be done! It was a pleasure!