You Don't Need jQuery - Deploy & Usage Guide

Prerequisites

• Node.js (version 10 or higher)
• npm (Node Package Manager, comes with Node.js)
• Modern web browser (IE10+ for full compatibility)
• Git (for cloning the repository)

Installation

1. Clone the repository:

   git clone https://github.com/camsong/You-Dont-Need-jQuery.git
   cd You-Dont-Need-jQuery
   

2. Install dependencies:

   npm install
   

3. Install Puppeteer (for testing):

   npm install puppeteer
   

Configuration

This project doesn't require external API keys or complex configuration. However, you can customize the test environment:

• Test configuration: Modify karma.conf.js for test settings
• Babel configuration: Adjust .babelrc for transpilation settings
• Webpack configuration: Modify webpack.config.js for build settings

Build & Run

Development

1. Run tests:

   npm test
   

2. Run tests with coverage:

   npm run test:coverage
   

Production

This is a documentation/reference project, so there's no production build. The content is static and can be served directly.

Deployment

Since this is a documentation project, you can deploy it to any static hosting service:

GitHub Pages (Recommended)

1. Create a gh-pages branch:

   git checkout --orphan gh-pages
   git add .
   git commit -m "Initial gh-pages commit"
   git push origin gh-pages
   

2. Enable GitHub Pages in your repository settings under "Pages" section.

Netlify

1. Connect your repository to Netlify
2. Build command: Leave empty (no build needed)
3. Publish directory: . (root directory)

Vercel

1. Import your repository to Vercel
2. Build command: Leave empty
3. Output directory: . (root directory)

Troubleshooting

Common Issues

1. Test failures:

   • Ensure Puppeteer is properly installed
   • Check if Chrome/Chromium is accessible
   • Verify Node.js version compatibility

2. Module not found errors:

   npm install
   

3. Babel compilation errors:

   • Check .babelrc configuration
   • Ensure all required Babel plugins are installed

4. Webpack build issues:

   • Verify webpack.config.js settings
   • Check for missing loaders or plugins

Performance Tips

• Use document.getElementById, document.getElementsByClassName, or document.getElementsByTagName instead of document.querySelector or document.querySelectorAll for better performance
• Convert NodeList to Array using Array.prototype.slice.call() for older browsers
• Use native methods like closest() and matches() where available

Browser Compatibility

• IE10+: Full compatibility with polyfills
• Modern browsers: Native support for most methods
• Legacy browsers: May require additional polyfills for some methods

Testing

• Run npm test to execute all tests
• Check coverage/ directory for test coverage reports
• Use npm run test:watch for continuous testing during development

This guide provides everything needed to set up, run, and deploy the "You Don't Need jQuery" project for reference and learning purposes.