Live Beach Cams
Jonginenge - Live Cams

https://www.livebeachcams.co.za/livecams/

https://www.youtube.com/@livebeachcams

The website was expanded to support displaying on life 4K cams of the beach, after having limited bandwidth to live stream.

The sites support multiple form factor devices and screen resolutions, desktop and mobile for the display of thumbnail images of static photos taken every 2 minutes.
Originally it start out as cams to watch the surf, because we stayed far from the beach spots and need to go to the right beach and not waste time and fuel being super expensive nowadays, many expensive wasted trips to the beach.

The idea evolved to deal with bandwidth limitations and lack of internet speeds for fiber back live streaming in 4K and into many other things.
This results in the development of the website to support the display of static images, that could be visited as there is limited bandwidth to live stream.
The ideas were then pushed further as we thought of new things to do with the content and using the content to attract more tourists to the beach and East London.

Then later some clipped catalogues, and Daily Weather, where we could just focus in on the things and areas in the 4K images we were interested in, without having to visit and zoom-in to each image. We could just scroll back through the focused clipped area of the image on the waves for the last hour and see exactly what the surf was doing. Then we expanded it to many other areas for the convenience of the public to make informed decisions, because we could and like the ideas.

The layouts have been re-designed and tested to be mobile-friendly and responsive, not to have the browser hang or lag at all, in which case certain layouts
couldn't dynamically re-lay themselves out without lagging, hanging the browser. To avoid this alternative approach to the DOM architecture was done for the grid which allows grid-item dependency decoupling in the rendering pipeline. This allows it to display and have super fluid motion using little CPU power.
Originally it was developed using flex and the ability to scale, but it had performance issues and wanted a more consistent layout, so we tried grid. We wanted the same functionality as flex-shrink and grow, but with grids implementation, it doesn't support the same attributes to allow it to grow, shrink, align and perform well(CPU usage) out of the box.

The goal was to totally use CSS and no back-end dynamically generated content processing to achieve the different layouts on the client browser.



Ultimately,we hope that it shall draw in more tourists.

6-column layout for wide screens, just an idea wanted to see if was possible in grid.