Simple.css is a classless CSS framework that provides an instant, clean design for any HTML page. The entire repository consists of a single well-crafted CSS file (simple.css) that styles all standard HTML elements—headings, paragraphs, lists, tables, forms, navigation, blockquotes, code blocks—without requiring any CSS classes. It uses CSS custom properties for theming, supports both light and dark modes via the `prefers-color-scheme` media query, employs a responsive CSS Grid layout, and includes accessibility features like focus-visible outlines and proper contrast. The repo also includes a minified version, an older v1 for backward compatibility, and a comprehensive HTML test page to demonstrate all styled elements. It is a self-contained, drop-in solution for quickly improving the appearance of any website or prototype, with no external dependencies.
This repository is an interactive, cyberpunk-styled periodic table of elements web application. It displays all 118 elements with detailed data, supports multiple visualization modes (standard, heatmap for properties like radius, electronegativity, ionization energy, melting point, boiling point, density), category filtering, real-time search, and a 3D atomic model viewer. The application is fully bilingual (Chinese/English) and responsive across devices. The architecture is a single-page application built with TypeScript and Vite. The codebase is modular, with clear separation into modules for table rendering, heatmap, 3D atom, modal, media loading, search, and legend. State is managed centrally, and internationalization is handled via typed translation dictionaries. The project includes unit tests using Vitest and a CI/CD pipeline for GitHub Pages deployment. Key technical highlights include a pure-function electron configuration algorithm (Aufbau principle with exceptions), CSS 3D transforms for the atom model, and a lightweight i18n system. The code is type-safe with strict TypeScript and follows modern frontend best practices.
A browser extension (ImprovedTube) that provides 80+ configuration options to customize YouTube's appearance and behavior. It injects CSS and JavaScript into YouTube pages to modify the player, sidebar, comments, thumbnails, themes, and more. Features include ad blocking, forced playback parameters, keyboard shortcuts, a blocklist for channels/videos, smart speed based on heatmap data, and integration with Return YouTube Dislike. The extension uses a message-passing architecture between content scripts and page-world scripts via custom DOM events, and a custom Satus UI framework for the settings panel. It is localized into 40+ languages but has a high number of open issues and dependencies on fragile YouTube DOM structures. The codebase is functionally comprehensive but shows signs of maintenance drift with hardcoded API keys, heavy use of !important CSS, and incomplete locale coverage.
This repository is a comprehensive frontend visual effects collection and demonstration platform. It contains over 100 self-contained demos and tools covering CSS animations, Canvas 2D/WebGL effects, Three.js 3D scenes, ECharts data visualizations, AI/ML integrations (TensorFlow.js for pose detection and body segmentation, MediaPipe, Tesseract.js OCR), and client-side media processing (image, video, PDF). The architecture is a React 18 single-page application (SPA) using TypeScript, Webpack 5, Ant Design, and react-intl for internationalization. All processing occurs entirely in the browser; there is no backend or persistent data store. The project serves as both a personal portfolio and a learning resource for advanced frontend techniques, but it is not a single-purpose production application. The code quality varies widely: some components demonstrate high craftsmanship (e.g., custom PNG encoder, image manipulation utilities, cross-page communication hook), while many others are boilerplate-heavy duplicates or exploratory demos. No automated tests are present, and the build output includes large minified chunks alongside source code, creating maintenance overhead.
This repository is a collection of front-end code examples (HTML, CSS, JavaScript) created for video tutorials on Bilibili. It contains over 50 standalone projects demonstrating various web techniques such as CSS animations, SVG effects, glassmorphism, parallax scrolling, face recognition, Lottie animations, and interactive physics. The main entry point is a React-based navigation page, but each example is self-contained in its own folder. The code is primarily educational and not intended for production use. Dependencies are outdated (React 17, Babel 7.12) and there is no testing or CI/CD. While some components exhibit creative use of web APIs, the overall codebase is boilerplate-heavy and tightly coupled to its tutorial context, limiting reusability.