Quick Start: Testing New Features

This guide helps you test all the newly implemented features on your local development server.

🚀 Start Development Server

./dev.sh

Wait for the server to start, then open http://localhost:4000 in your browser.

✅ Feature Testing Checklist

1. Skip to Content (Accessibility)

• Test: Press Tab key immediately when page loads
• Expected: A “Skip to main content” link appears at top-left
• Action: Press Enter to skip navigation and jump to content
• Status: ⬜ Tested

2. Back to Top Button

• Test: Scroll down more than 300px on any page
• Expected: Blue gradient button appears bottom-right (above theme toggle)
• Action: Click to smoothly scroll to top
• Status: ⬜ Tested

3. Dark Mode Toggle (Existing, verify still works)

• Test: Click the sun/moon button at bottom-right
• Expected: Theme switches between light/dark mode
• Verify: Preference persists after page reload
• Status: ⬜ Tested

4. Code Copy Buttons (Blog Posts Only)

• Test: Visit a blog post with code blocks (e.g., /azure-batch-task-dependencies/)
• Expected: Hover over code block to reveal “Copy” button in top-right
• Action: Click to copy code, button shows “Copied!” briefly
• Note: Button always visible on mobile/touch devices
• Status: ⬜ Tested

5. Custom 404 Page

• Test: Visit http://localhost:4000/this-page-does-not-exist
• Expected: Stylish 404 page with gradient “404” text
• Verify: “Go Home” and “View Blog” buttons work
• Verify: Popular pages links (About, Blog, Categories, Tags) work
• Status: ⬜ Tested

6. PWA Manifest

• Test: Open DevTools → Application → Manifest
• Expected: See “Suprasanna Sarkar - Data & AI Engineering”
• Note: Install prompt won’t appear until icons are created
• Status: ⬜ Tested

7. Structured Data (SEO)

• Test: View page source (Ctrl+U or Cmd+U)
• Search for: application/ld+json
• Expected: Two JSON-LD scripts (Person and Blog schemas)
• Verify: Valid JSON with your name, URL, social links
• Status: ⬜ Tested

8. robots.txt

• Test: Visit http://localhost:4000/robots.txt
• Expected: Plain text file with User-agent and Sitemap directives
• Verify: References to sitemap.xml and feed.xml
• Status: ⬜ Tested

9. Focus Indicators (Accessibility)

• Test: Tab through navigation links
• Expected: Visible purple outline (2px) around focused elements
• Verify: Works in both light and dark mode
• Status: ⬜ Tested

10. Reduced Motion Support (Accessibility)

• Test: Enable reduced motion in OS settings
  • macOS: System Preferences → Accessibility → Display → Reduce motion
  • Windows: Settings → Ease of Access → Display → Show animations
• Expected: Animations disabled, particle network hidden
• Status: ⬜ Tested (Optional)

🔍 Visual Inspection

Homepage (/)

• ✅ Hero gradient animation
• ✅ Particle network
• ✅ Typewriter effect on title
• ✅ Theme toggle button (bottom-right)
• ✅ Back to top button (appears on scroll)

About Page (/about/)

• ✅ Skills badges with stagger animation
• ✅ Author sidebar with avatar
• ✅ Scroll reveal animations

Blog Posts

• ✅ Code blocks with language labels (top-left corner)
• ✅ Copy buttons on hover (top-right corner)
• ✅ Dark mode glass effect on cards

404 Page

• ✅ Large gradient “404” text
• ✅ Action buttons (Go Home, View Blog)
• ✅ Popular pages list with icons

🧪 Browser DevTools Checks

Performance Tab

1. Open DevTools → Lighthouse
2. Run audit for “SEO” and “Accessibility”
3. Expected scores: >90 for both

Console

• Expected: No errors (warnings about experimental features are OK)
• Check for: Any JavaScript errors when clicking buttons

Network Tab

1. Reload page
2. Check for:
   • ✅ custom.css loads (~XX KB)
   • ✅ anime.js loads (~XX KB)
   • ✅ Fonts preconnect (fonts.googleapis.com)
   • ✅ Anime.js with SRI integrity hash

Application Tab

• Manifest: Should show app name, theme colors, icons (missing until created)
• Local Storage: Should have theme key (light/dark)

📱 Mobile Testing

Responsive Design

1. Open DevTools → Toggle device toolbar (Ctrl+Shift+M)
2. Test on: iPhone SE, iPad, Galaxy S20
3. Verify:
   • ✅ Back to top button is smaller (44×44px minimum)
   • ✅ Theme toggle is smaller and properly positioned
   • ✅ Mobile menu opens correctly (no white wash)
   • ✅ Code copy buttons always visible (no hover needed)
   • ✅ Touch targets are at least 44×44px

iOS Safari (if available)

• ✅ Safe area insets respected (no content under notch)
• ✅ Theme color appears in browser chrome
• ✅ Add to Home Screen shows custom icon (after icons created)

🐛 Common Issues

Issue: Code copy buttons not appearing

• Cause: No code blocks on page
• Solution: Visit a blog post with code (e.g., Azure Batch posts)

Issue: Back to top button not showing

• Cause: Haven’t scrolled down far enough
• Solution: Scroll past 300px (about 1.5 screens)

Issue: PWA install prompt doesn’t show

• Cause: Icons not created yet (see IMAGES_TODO.md)
• Solution: Normal behavior until icons are generated

Issue: Skip to content doesn’t appear

• Cause: Only appears on keyboard Tab focus
• Solution: Click in address bar, then press Tab (not mouse hover)

📊 Before/After Comparison

Before Improvements:

• No robots.txt
• No PWA support
• No accessibility features
• No code copy functionality
• Generic 404 page
• Basic keyboard navigation

After Improvements:

• ✅ SEO optimized (robots.txt, structured data)
• ✅ PWA ready (manifest, theme colors)
• ✅ WCAG 2.1 AA accessibility
• ✅ One-click code copying
• ✅ Custom branded 404
• ✅ Enhanced keyboard navigation
• ✅ Back to top convenience
• ✅ Reduced motion support

✨ Tips

1. Test in multiple browsers: Chrome, Firefox, Safari, Edge
2. Test dark mode: All features should work in both themes
3. Test keyboard only: Tab, Enter, Space to verify accessibility
4. Use Lighthouse: Built into Chrome DevTools for comprehensive audits
5. Check mobile: Many features have mobile-specific behaviors

🚀 Production Deployment

After testing locally:

# Build for production
./build.sh

# Deploy to GitHub Pages (if using)
git add -A
git commit -m "feat: comprehensive site improvements"
git push origin main

GitHub Pages will automatically rebuild and deploy your site.

📝 Next Steps After Testing

1. Create missing images (see assets/images/IMAGES_TODO.md)
2. Enable Google Analytics (optional, see _config.yml)
3. Submit to Google Search Console (optional)
4. Test PWA install (after creating icons)
5. Monitor Lighthouse scores (aim for >90 in all categories)

🆘 Need Help?

If something doesn’t work as expected:

1. Check browser console for errors
2. Verify Jekyll build completed without errors (./build.sh)
3. Clear browser cache (Ctrl+Shift+R / Cmd+Shift+R)
4. Review IMPLEMENTATION_SUMMARY.md for technical details

All features tested and working = Ready for production! ✅