A modern, dynamic single-page application providing a comprehensive interface to browse and search through the CheatSheetz collection of developer reference guides.
- Dynamic GitHub Integration: Real-time fetching of all repositories from the CheatSheetz organization using GitHub API with pagination
- Client-Side Routing: Clean URLs with
/categoryand/category/namerouting patterns - Inline README Display: View complete cheat sheet content directly in beautiful modals instead of external links
- Auto-Hiding Navigation: Smart navigation bar that hides on scroll down, appears on scroll up
- Dynamic Statistics: Real-time counts of cheat sheets and categories from GitHub data
- Advanced Search & Filtering: Real-time search with category and difficulty filters
- Ultra-Responsive Design: Mobile-first approach scaling seamlessly from mobile to 8K+ displays
- Theme Support: Light/dark theme with system preference detection and persistence
- Enhanced Typography: Improved readability with fluid typography and optimized contrast
- Accessibility Features: Proper focus indicators, semantic HTML, and keyboard navigation
- Vanilla JavaScript: No framework dependencies, optimized for performance
- GitHub API: Dynamic content fetching with pagination support
- CSS Grid & Flexbox: Modern layout techniques with extensive breakpoint coverage
- Web History API: Client-side routing with browser back/forward support
- LocalStorage: Theme preference persistence
- Progressive Enhancement: Works without JavaScript, enhanced with it
The design scales across all screen sizes with dedicated breakpoints:
- Mobile: 320px+ (1 column)
- Small: 576px+ (2 columns)
- Medium: 768px+ (tablet optimized)
- Large: 992px+ (desktop)
- XL: 1200px+ (large desktop)
- 2K: 1400px+ (2K displays)
- 4K: 1920px+ (4K displays)
- 5K: 2560px+ (5K displays)
- 8K: 7680px+ (8K+ ultra-wide)
/- Homepage with all cheat sheets/languages- Programming languages category/frameworks- Web frameworks category/tools- Development tools category/devops- DevOps & infrastructure category/databases- Database systems category/mobile- Mobile development category/testing- Testing & security category/{category}/{name}- Individual cheat sheet modal
cheatsheetz.github.io/
├── index.html # Single-page application entry point
├── assets/
│ ├── css/
│ │ └── style.css # Modern CSS with custom properties
│ └── js/
│ └── main.js # Vanilla JavaScript SPA logic
├── README.md # Documentation
├── LICENSE.md # MIT License
└── .github/
└── workflows/ # GitHub Actions (if applicable)
# Clone the repository
git clone https://github.com/cheatsheetz/cheatsheetz.github.io.git
cd cheatsheetz.github.io
# Serve locally (any static server works)
python -m http.server 8000
# or
npx serve .
# or
php -S localhost:8000The site uses the GitHub API to fetch repository data. For enhanced rate limits:
- Create a GitHub Personal Access Token
- Add it as a repository secret named
GITHUB_TOKEN - Modify the API calls to include authentication headers
- Use browser dev tools to test responsive breakpoints
- Test with both light and dark themes
- Verify routing works with browser back/forward buttons
- Check keyboard navigation and accessibility
CSS custom properties in :root and [data-theme="dark"]:
--bg-primary: #ffffff; /* Main background */
--bg-secondary: #f6f8fa; /* Secondary background */
--bg-accent: #0066cc; /* Accent color */
--text-primary: #1f2937; /* Primary text */
--text-secondary: #4b5563; /* Secondary text */
--text-link: #0066cc; /* Link color */Add new categories in main.js:
const categories = {
newcategory: {
title: 'New Category',
icon: 'fas-icon-name',
color: '#hexcolor'
}
};Modify responsive breakpoints in style.css:
@media (min-width: YOUR_SIZE) {
.container { max-width: YOUR_MAX_WIDTH; }
.categories-grid { grid-template-columns: repeat(N, 1fr); }
}- No JavaScript Required: Core content loads without JavaScript
- Progressive Enhancement: Enhanced with JavaScript features
- Fast Loading: Minimal external dependencies
- Semantic HTML: Proper heading hierarchy and structure
- Meta Tags: Optimized for search engines and social sharing
- Chrome: 60+ (full support)
- Firefox: 60+ (full support)
- Safari: 12+ (full support)
- Edge: 79+ (full support)
- Mobile: iOS Safari 12+, Chrome Mobile 60+
- Lazy Loading: README content fetched on demand
- Efficient Rendering: Virtual scrolling considerations for large lists
- Optimized Images: SVG icons and efficient loading
- Minimal Dependencies: No external JavaScript frameworks
- Caching: LocalStorage for theme preferences
Contributions are welcome! Areas for improvement:
- Enhanced Search: Add fuzzy search, search highlighting
- Offline Support: Service worker for offline browsing
- Analytics: Privacy-friendly analytics integration
- Print Styles: Optimized printing layouts
- Keyboard Shortcuts: Power user navigation features
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Test across different screen sizes and themes
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source and available under the MIT License.
- CheatSheetz Community: For creating comprehensive developer references
- GitHub API: For providing free access to repository data
- Modern CSS: Grid, Flexbox, and Custom Properties make this possible
- Developer Community: For feedback and contributions
Built with ❤️ for developers, by developers
Optimized for every screen size from mobile to 8K displays