{"id":20447921,"url":"https://github.com/chrisross5/supit-project","last_synced_at":"2026-04-10T03:55:35.522Z","repository":{"id":65408541,"uuid":"550882668","full_name":"ChrisRoss5/supit-project","owner":"ChrisRoss5","description":"College project (Internet technology S3): 6 versions of the same web app - built and compared UX \u0026 DX: jQuery, Vue, Vue Full, React, React Full, Svelte. Deployed on Cloudflare Pages.","archived":false,"fork":false,"pushed_at":"2024-08-05T23:23:58.000Z","size":73125,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-15T22:21:12.597Z","etag":null,"topics":["bootstrap","headlessui","javascript","jquery","jquery-ui","lighthouse","pinia","postcss","react","react-redux","react-router","react-transition-group","rendering","svelte","sveltekit","tailwindcss","typescript","vite","vue","vue-router"],"latest_commit_sha":null,"homepage":"https://supit.k1k1.dev","language":"Shell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChrisRoss5.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-13T13:33:33.000Z","updated_at":"2024-08-05T23:24:02.000Z","dependencies_parsed_at":"2024-08-06T02:05:07.223Z","dependency_job_id":"1d53f49b-f6aa-4927-a7a4-628d2ddcf15c","html_url":"https://github.com/ChrisRoss5/supit-project","commit_stats":null,"previous_names":["chrisross5/supit-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisRoss5%2Fsupit-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisRoss5%2Fsupit-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisRoss5%2Fsupit-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChrisRoss5%2Fsupit-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChrisRoss5","download_url":"https://codeload.github.com/ChrisRoss5/supit-project/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241997504,"owners_count":20055117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","headlessui","javascript","jquery","jquery-ui","lighthouse","pinia","postcss","react","react-redux","react-router","react-transition-group","rendering","svelte","sveltekit","tailwindcss","typescript","vite","vue","vue-router"],"created_at":"2024-11-15T10:30:54.957Z","updated_at":"2025-12-30T18:57:28.755Z","avatar_url":"https://github.com/ChrisRoss5.png","language":"Shell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Website hosted on Cloudflare Pages\n\n### https://supit.k1k1.dev\n\n-- OR --\n\n### https://supit.pages.dev\n\n**All versions adhere to the same design and functionality as specified in this video from my lecturer:  \nhttps://www.youtube.com/watch?v=gmr-qoq4eBU.**  \nThe given specs and the video are available in this repository as well.\n\n## Deployment\n\nEach branch of this repository contains a different version of the website.\n\nHosted on Cloudflare with automatic `build` per branch on `push` or `merge`.\n\nThis branch (supit.k1k1.dev) is built with vanilla JS \u0026 custom CSS.\n\nIt's using [PageSpeed Insights API](https://developers.google.com/speed/docs/insights/v5/about) to provide the most consistent scores from [Lighthouse](https://developer.chrome.com/docs/lighthouse/) audits.\n\n## Installation\n\n`npm i` before `npm run dev` after switching to a branch with `package.json`.\n\nAll versions are configured to `npm run build` in `/dist` folder.\n\n---\n\n# Comparison\n\n## DX (Developer Experience) \u0026 UX (User Experience)\n\n### jQuery\n\nHas more functionality at `/o-nama` and `/novost/1`\n\n- because it utilizes `bootstrap.ScrollSpy`, which highlights navbar links based on the most visible section.\n- because it utilizes `bootstrap.Carousel`, which supports swiping on touch devices.\n\nUnlike other versions, this one does not use a `Bundler`, `TypeScript`, `PostCSS`, `Tailwind`, or `Google Material Icons`.\nInstead, it uses `jQuery` and `jQueryUI`, along with `Bootstrap` and `Bootstrap Icons`.\nHopefully, I won't have to use those ever again.\n\n### Vue\n\nSimply 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).\n[Click to compare](https://github.com/ChrisRoss5/supit-projekt/compare/vue-full...vue).\n\n### React\n\nOvercomplicated 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](https://github.com/ChrisRoss5/supit-projekt/compare/react-full...react).\n\n### Svelte\n\nUnlike **Vue** and **React**, there's no support for `HeadlessUI`\nso I had to bring functionality to `modal` and `autocomplete` components myself.\nApart from that, all **Vue**, **React** \u0026 **Svelte** functionality and design should look 100% identical from a user's perspective.\nOverall, it's almost as good as **Vue** in terms of developer experience.\n\n## Performance\n\nVisit [supit.k1k1.dev](https://supit.k1k1.dev/) to run mobile \u0026 desktop Lighthouse tests for all projects and URLs.\n\nThese scores turn out to be the most common for **landing pages**:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth rowspan=2\u003eVersion\u003c/th\u003e\n    \u003cth colspan=3\u003eMobile\u003c/th\u003e\n    \u003cth colspan=3\u003eDesktop\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003cth\u003ePerformance\u003c/th\u003e\n    \u003cth\u003eAccessibility\u003c/th\u003e\n    \u003cth\u003eBest Practices\u003c/th\u003e\n    \u003cth\u003ePerformance\u003c/th\u003e\n    \u003cth\u003eAccessibility\u003c/th\u003e\n    \u003cth\u003eBest Practices\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ejQuery\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e95\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e99\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eVue, Vue Full\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e87\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e99\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eReact, React Full\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e87\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e99\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eSvelte\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e89\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e99\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n    \u003ctd style=\"text-align: center\"\u003e100\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\nFor 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%).\nBecause 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.\n\n## Todo\n\n- Angular version with Vite or Webpack\n- [Make SvelteKit bundle all chunks into a single bundle](https://www.reddit.com/r/sveltejs/comments/rqo5o2/make_sveltekit_bundle_all_ts_files_into_a_single/) (no solution as of Jan 2023)\n\n## Good to know\n\n- [Rendering Glossary](https://kit.svelte.dev/docs/glossary) by SvelteKit\n- [Bundler Glossary](https://webpack.js.org/glossary/) by Webpack\n- [State of JS 2022](https://2022.stateofjs.com/)\n- [State of CSS 2022](https://2022.stateofcss.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisross5%2Fsupit-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrisross5%2Fsupit-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrisross5%2Fsupit-project/lists"}