Website hosted on Cloudflare Pages

https://supit.k1k1.dev

-- OR --

https://supit.pages.dev

All versions adhere to the same design and functionality as specified in this video from my lecturer:
https://www.youtube.com/watch?v=gmr-qoq4eBU.
The given specs and the video are available in this repository as well.

Deployment

Each branch of this repository contains a different version of the website.

Hosted on Cloudflare with automatic build per branch on push or merge.

This branch (supit.k1k1.dev) is built with vanilla JS & custom CSS.

It's using PageSpeed Insights API to provide the most consistent scores from Lighthouse audits.

Installation

npm i before npm run dev after switching to a branch with package.json.

All versions are configured to npm run build in /dist folder.

Comparison

DX (Developer Experience) & UX (User Experience)

jQuery

Has more functionality at /o-nama and /novost/1

• because it utilizes bootstrap.ScrollSpy, which highlights navbar links based on the most visible section.
• because it utilizes bootstrap.Carousel, which supports swiping on touch devices.

Unlike other versions, this one does not use a Bundler, TypeScript, PostCSS, Tailwind, or Google Material Icons. Instead, it uses jQuery and jQueryUI, along with Bootstrap and Bootstrap Icons. Hopefully, I won't have to use those ever again.

Vue

Simply the best, 10/10. The only difference between branches vue and vue-full is that the former uses lazy routing and async components (Contact.vue). Click to compare.

React

Overcomplicated with too much boilerplate. As with Vue, the only difference between branches react and react-full is that the former uses lazy routing and async components (Contact.tsx). Click to compare.

Svelte

Unlike Vue and React, there's no support for HeadlessUI so I had to bring functionality to modal and autocomplete components myself. Apart from that, all Vue, React & Svelte functionality and design should look 100% identical from a user's perspective. Overall, it's almost as good as Vue in terms of developer experience.

Performance

Visit supit.k1k1.dev to run mobile & desktop Lighthouse tests for all projects and URLs.

These scores turn out to be the most common for landing pages:

For the landing page, lazy loaded versions of Vue and React score the same as their fully loaded counterparts. However, they save a significant amount of bytes (~30%). Because the website isn't large, user experience is in all likelihood better with fully loaded versions. To find Bytes Usage from served files, open a report and press the View Treemap button below the metrics.

Todo

• Angular version with Vite or Webpack
• Make SvelteKit bundle all chunks into a single bundle (no solution as of Jan 2023)

Good to know

• Rendering Glossary by SvelteKit
• Bundler Glossary by Webpack
• State of JS 2022
• State of CSS 2022