You can visit the site at seechen.github.io.
This website is hosted on Github Pages (github.io) and developed using HTML5 + CSS3 + Native JavaScript.
It is a Single Page Application (SPA), with all code available in the Github repository. All of the implementation has been independently completed by the author. While no open-source libraries were directly used, certain solutions were adapted from forum discussions and optimized for the website’s specific logic (some optimizations might still require refinement). Additionally, AI tools were occasionally leveraged to assist with code improvements and debugging.
The repository for this project was initially created on August 25, 2021, and has recently undergone significant updates.
This website serves as a personal challenge for the author to explore and understand modern JavaScript and CSS features. The current objective is to develop and maintain the entire website solely with native JavaScript and CSS, without relying on any frameworks or external libraries.
If you have any suggestions or ideas for improvement, please feel free to visit my Github repository and submit an Issue. Your feedback and support would be greatly appreciated!
The site currently supports English and Chinese, with more languages to be added in the future.
All access states are handled using route.js. This operation mimics the behavior of a back-end system.
To view the currently assigned paths, check the Sitemap.
All data is stored as static files (e.g., JSON, TXT, etc.) in a GitHub repository. The content is fetched and parsed only when the relevant data is accessed, simulating a front-end and back-end interaction.
This project utilizes several modern technologies to enhance performance and user experience. Below is a list of key technologies employed in the development of this static website.
The Virtual DOM is used to optimize the rendering process. It allows for a lightweight, in-memory representation of the UI, reducing the need for full-page reloads. By minimizing direct manipulation of the actual DOM, the performance is significantly improved.
In this project, new content is fetched and compared with the old content to identify the differences (or "diffs"). Only the necessary changes are then rendered, reducing the overhead of directly manipulating the DOM and improving efficiency.
The related code can be found in VirtualDOM.js.
The Event Bus is used to manage communication between different components of the website. It provides a centralized system for emitting and listening to events across the entire application, which promotes a decoupled and scalable architecture.
Additionally, because this website uses the SPA (Single Page Application) model, without an Event Bus, managing all events directly can lead to excessive background listeners, which may degrade performance. By using the Event Bus, when switching between "different pages," events that no longer need to be listened to can be unsubscribed immediately, reducing performance overhead.
By utilizing the will-change property in CSS, GPU acceleration allows the website to leverage hardware capabilities to render complex animations and graphics more efficiently. This results in smoother user interactions and improved visual performance, especially for intensive animations or transitions.
The animation-timeline property allows for advanced sequencing of animations, providing precise control over the timing and order of visual effects. This capability helps create engaging and dynamic user experiences by allowing animations to be synchronized more effectively.
Compared to JavaScript-controlled animations, this feature is rendered directly by the browser’s rendering engine. As a result, the browser has more control over memory allocation and rendering processes, significantly improving animation performance without the need for JavaScript event listeners. This offloads animation handling to the browser’s optimized rendering pipeline, reducing performance overhead.
However, the main drawback of this property is that it is not yet fully supported across all browsers, leading to potential issues such as page crashes or visual inconsistencies in unsupported browsers.
The @starting-style directive is used to define the initial styles of elements before any transitions or animations occur. This ensures that elements have a well-defined starting state, preventing layout shifts or visual glitches during the animation sequence.
The advantages and disadvantages of this property are similar to those of the animation-timeline property, so they will not be discussed further here.
Pre-loading is used to load essential assets (such as images, fonts, and scripts) before they are requested by the user. This reduces waiting times and ensures a faster, smoother user experience, ultimately providing a higher-quality user interaction.
In the future, I'll optimizations for resource requests will be implemented to continue improving performance.
In situations where multiple child elements need to listen for events, event delegation is used to attach a single event listener to the parent element. By checking event.target, the event can be triggered on the appropriate child element. This approach helps reduce the number of event listeners, minimizing memory usage and improving performance. As a result, it can help reduce the chances of lag or performance issues, particularly in cases with many child elements or dynamic content.
A routing system is used to manage different views or pages in a static website. Routing allows users to navigate between different parts of the site without reloading the entire page, enhancing the user experience with seamless transitions.
Using GitHub Pages’ rule for handling 404 errors, when a page is not found, GitHub will automatically redirect users to a custom 404.html page if it exists. To achieve a similar effect for routing, you can create two identical HTML files: one named index.html and the other 404.html. When a user tries to access a non-existent path, the 404.html file will redirect to the route handler, allowing the user to reach the desired page without the need to create separate HTML files for every path. This approach ensures users are always directed to a valid route, except when a true 404 error occurs.
Unlike a real backend server, this method may result in noticeable 404 errors appearing in the browser console and network tab, as the browser still attempts to access the non-existent path before being redirected to the appropriate page.
The spa.html file is not necessary for the current project. It was created during the transition to a Single Page Application (SPA) in order to maintain the functionality of the original project without disruption. Even after the full migration to SPA, this file remains as a symbolic reminder of the project's evolution.
The currently accessible sitemaps are as follows:
seechen.github.io
/spa/spa.htm/spa.html/index/index.htm/index.html/home/home.htm/home.html
-
/travel/travel/{countryID}(e.g.,/travel/CNor/travel/中国)/travel/{countryID}/{provinceId}(e.g.,/travel/CN/BeiJingor/travel/CN/北京)
-
/travel.htm -
/travel.html -
/我的旅行
Pay Attention
The countryId and provinceId can only be accessed when I have traveled to those places. For example, you can't visit
https://seechen.github.io/travel/USunless I've been to USA."
/lens/lens.htm/lens.html
/services/services.htm/services.html
/projects/projects.htm/projects.html/project/project.htm/project.html/项目/我的项目
- The interface has been updated to make the user experience smoother, smooth like butter.
- The new interface looks more refreshing and more beautiful!
- The new operating logic is developed using single-page application (SPA).
- Let us bid farewell to the old version that worked for us for a few days.
- Ah~~ Finally I don't have to read the garbage written by someone unknown (it's laggy, the code is not optimized, and it's bloated, ugh!)🌚. Cool! Cool!! Cool!!!
- SeeChen Lee is so Handsome.
- Completely abandon all frameworks and use native JavaScript to implement all functions.
- Create this repository.
- index.html
Thank you to everyone who provided me with help and suggestions.
Currently, no suggestions have been provided yet. I warmly welcome your ideas and feedback to improve this project!
Assistance in fixing CSS layout bugs, such as misalignment or misplaced elements.
| Angus Tan | Websites | GitHub |
Suggestions on creating responsive designs to ensure optimal performance across different devices.
| Angus Tan | Websites | GitHub | |
| Eugene Yip | Websites | GitHub |
Enhancements to CSS animations, including optimizations for keyframe animations and transitions.
| Angus Tan | Websites | GitHub |
Suggestions for addressing cross-browser compatibility issues to ensure consistent display across different browsers.
| Angus Tan | Websites | GitHub |
Suggestions on designing layouts for cross-device compatibility, ensuring a good user experience on phones, tablets, and desktops.
| Angus Tan | Websites | GitHub |
Shared best practices for writing CSS, including naming conventions, performance optimization, and maintainability improvements.
| Angus Tan | Websites | GitHub |
Introduced the application of new CSS features.
| Angus Tan | Websites | GitHub |
Currently, no suggestions have been provided yet. I warmly welcome your ideas and feedback to improve this project!
GNU GPL-3.0 License © 2024 LEE SEE CHEN