Subdocument of Final Website Project - Webbutveckling 1
Evaluation:
The hardest problem I had to solve by far was making a masonry layout. I wanted it to work without JS so it works for everyone and so I don’t have to copy code I don’t understand. I was searching for a long while until I found a method with CSS Columns that works, sadly it only works with a Up⇒Down then Left⇒Right instead of the other way round. I achieved my goal of having a way to access and share saved links from any device so I’d say it turned out as i planned. It was easier and less complex than I thought, in retrospect I should have done something harder for my final project and done this after. I underestimated the amount of stuff I had to do in other subjects so it took longer than expected. W3 Schools, ChatGPT and CSS Tricks were my primary sources of information. I didn’t have the knowledge I needed from the start but I had the knowledge on how to search up and learn stuff I don’t know which is arguably much more important. I could add some JS to have a toggle that makes everything easier to read for people that have problems with high contrast text or certain colors as background. That’s about all the improvement I can think of apart from adding more links and categories. Validation didn’t have anything to complain about and I wrote the site with compatibility in mind so it would be a problem in the future.
Cause i don’t have any images on my website i made this to prove i know to add images properly: imageexample.arcticsnowy.com originally the images in total were 1.53 Gigabyte (61 JPGs and 162 PNGs). Compressed to .jpg with width of 500px, 90% quality and 4:2:0 chroma subsampling the total size is now 9.44 MB, that’s a 99.4% file size reduction The images range in size from 70-150 kB. the way i display them they don’t need more than 500 pixels in width, it’s actually better to have it lower cause the scale effect sometimes uses closest neighbor for scaling which looks weird with high res images displayed in a lower res. 90% quality is usually considered visually lossless which isn’t entirely true, especially at this scale but the loss is still barely noticeable. 4:2:0 chroma subsampling effectively makes all color data (hue and saturation but not luminance) half resolution as it usually doesn’t change as drastically as luminance and the human eye is better at seeing luminance differences than color differences. I prefer 4:2:0 over 4:1:1 and 4:2:2 as they have less horizontal resolution compared to vertical. although 4:2:2 can be useful if you want just a slight bit of chroma subsampling.