Future Enhancements Roadmap

Future Enhancements Roadmap

Overview

This document tracks potential enhancements, refactoring opportunities, and feature requests for the Matt Blogs IT blog. Items are prioritized by impact and effort required.

Last Updated: January 2025 Status: 7.5/10 - Production ready with optimization opportunities

🔴 High Priority (Critical Impact)

1. Image Optimization Infrastructure ✅ COMPLETED

Status: ✅ Implemented (January 2025) Priority: Critical Effort: Medium (1-2 weeks)

Implemented Solutions:

Results:

Next Steps:

  1. Run 
    1

    ./scripts/optimize-images.sh
    on existing images
  2. Monitor PR image optimization compliance
  3. Review and optimize GIF files manually

2. Code Duplication Refactoring

Status: 🔶 Planned Priority: High Effort: Medium (1-2 weeks) Impact: Improved maintainability, reduced bugs

Issues Identified:

Proposed Solutions:

Extract Reusable Components

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!-- _includes/category-list.html -->


  <a href="/category/administrator/">
    Administrator (29)
  </a>

  <a href="/category/athletics/">
    Athletics (1)
  </a>

  <a href="/category/developer/">
    Developer (5)
  </a>

  <a href="/category/microsoft/">
    Microsoft (65)
  </a>

  <a href="/category/out-of-band/">
    Out of Band (35)
  </a>

  <a href="/category/review/">
    Review (1)
  </a>

  <a href="/category/user/">
    User (13)
  </a>

  <a href="/category/vmware/">
    VMware (2)
  </a>


<!-- _includes/archive-years.html -->



  <a href="/archive//"></a>


<!-- _includes/mobile-menu.html -->
<nav class="combined-menu" id="mobile-menu">
  <!-- Mobile menu structure -->
</nav>

Files to Update:

Estimated Time: 2-3 hours Testing Required: Full site regression test

3. CSS Consolidation

Status: 🔶 Planned Priority: High Effort: Low (15-30 minutes) Impact: Reduced HTTP requests, improved LCP

Current State:

Proposed Changes:

  1. Merge 
    1

    analytics.css
    into 
    1

    main.css
  2. Remove separate stylesheet link in 
    1

    _layouts/default.html
  3. Test production build

Benefits:

Command:

1
2
3

cat assets/css/analytics.css >> assets/css/main.css
rm assets/css/analytics.css
# Update _layouts/default.html

Estimated Time: 15 minutes Risk: Low

🟠 Medium Priority (Significant Impact)

4. JavaScript Initialization Cleanup

Status: 🔶 Planned Priority: Medium Effort: Low (15-30 minutes) Impact: Reduced complexity, cleaner code

Issue: 

1

theme-switcher.js
has 4 redundant initialization strategies

Current Code (Lines 137-153):

1
2
3
4
5
6
7
8
9
10
11

document.addEventListener('DOMContentLoaded', initThemeSwitcher);
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initThemeSwitcher);
} else {
    setTimeout(initThemeSwitcher, 10);
}
window.addEventListener('load', () => {
    if (!document.documentElement.hasAttribute('data-theme-initialized')) {
        initThemeSwitcher();
    }
});

Proposed Solution:

1
2
3
4
5
6

// Single, clean initialization
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initThemeSwitcher);
} else {
    initThemeSwitcher();
}

File: 

1

assets/js/theme-switcher.js
Estimated Time: 15 minutes Testing: Verify theme switching works on page load

5. Lazy Loading Implementation

Status: 🔶 Planned Priority: Medium Effort: Low (1-2 hours) Impact: Faster initial page load, improved LCP

Proposed Changes:

Update all image templates to include:

1
2
3
4

<img src=""
     alt=""
     loading="lazy"
     decoding="async">

Files to Update:

Benefits:

Estimated Time: 1 hour Testing: Verify images still load correctly

6. Conditional JavaScript Loading Enhancement

Status: 🔶 Planned Priority: Medium Effort: Low (15 minutes) Impact: Reduced JavaScript on post/about pages

Current Implementation:

Proposed Change:

1




File: 
1

_layouts/default.html


Estimated Time: 15 minutes
Impact: ~5KB less JavaScript on post pages






7. Template Complexity Reduction



Status: 🔶 Planned
Priority: Medium
Effort: Medium (1-2 hours)
Impact: Improved maintainability



Issue: 
1

_layouts/default.html

 is 173 lines and handles multiple concerns



Proposed Refactoring:


    
  
  1. Extract mobile menu to 
    1

    _includes/mobile-menu.html

    2. 
  
  2. Extract breadcrumbs to 
    1

    _includes/breadcrumbs.html

    3. 
  
  3. Simplify main layout structure
    4. 




Benefits:




Estimated Time: 1-2 hours
Testing: Full site regression






🟡 Low Priority (Nice to Have)



8. Progressive Web App (PWA) Features



Status: 💡 Proposed
Priority: Low
Effort: High (1-2 weeks)
Impact: Offline support, app-like experience



Features:




Implementation:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// sw.js - Service Worker
const CACHE_NAME = 'mattblogsit-v1';
const urlsToCache = [
  '/',
  '/assets/css/main.css',
  '/assets/js/theme-switcher.js',
  '/offline.html'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});




Estimated Time: 1-2 weeks
Benefits: Works offline, installable, faster repeat visits






9. Critical CSS Implementation



Status: 💡 Proposed
Priority: Low
Effort: Medium (2-3 hours)
Impact: Faster initial render



Approach:


    
  
  1. Extract above-the-fold CSS
    2. 
  
  2. Inline critical CSS in 
    1

    <head>

    3. 
  
  3. Defer non-critical CSS loading
    4. 




Tools:




Example:


1
2
3
4
5
6
7
8

<head>
  <style>
    /* Inlined critical CSS */
    :root { --bg-primary: #ffffff; ... }
    body { font-family: -apple-system; ... }
  </style>
  <link rel="preload" href="/assets/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>




Estimated Time: 2-3 hours
Impact: Improved First Contentful Paint (FCP)






10. Enhanced Search Functionality



Status: 💡 Proposed
Priority: Low
Effort: Medium (3-4 hours)
Impact: Better user experience



Current: Basic client-side search
Proposed: Enhanced search with:




Options:


    
  
  1. Lunr.js (client-side, no backend)
    2. 
  
  2. Algolia (hosted, fast, free tier)
    3. 
  
  3. Pagefind (static search index)
    4. 




Recommendation: Algolia for best UX



Estimated Time: 3-4 hours
Cost: Free tier (10k requests/month)






11. Responsive Image Implementation



Status: 💡 Proposed
Priority: Low
Effort: Medium (2-3 hours)
Impact: Optimized images per device



Approach:


1
2
3
4
5
6
7
8
9
10
11
12
13

<picture>
  <source media="(max-width: 480px)"
          srcset="-400.webp"
          type="image/webp">
  <source media="(max-width: 1024px)"
          srcset="-800.webp"
          type="image/webp">
  <source srcset="-1200.webp"
          type="image/webp">
  <img src="-800.jpg"
       alt=""
       loading="lazy">
</picture>




Requires:




Estimated Time: 2-3 hours
Impact: Smaller images on mobile devices






🔮 Future Considerations



Platform Migration Analysis



Trigger Points:




Alternatives Researched:




  
    

      Platform
      Best For
      Effort
      Cost
    

  
  
    

      Hugo
      Large sites (>500 posts), speed
      Medium
      Free
    

    

      Eleventy
      JavaScript teams, flexibility
      Low-Medium
      Free
    

    

      Astro
      Modern web apps, interactivity
      High
      Free
    

    

      Next.js
      Full web applications
      Very High
      Variable
    

    

      Ghost
      Professional blogs, monetization
      Medium
      $9-29/mo
    

    

      Hashnode
      Developer community blogs
      Low
      Free
    

  




Current Recommendation: Stay with Jekyll



Reasons:




Reconsider when:







📋 Enhancement Checklist



Immediate (This Week)




Short Term (This Month)




Medium Term (This Quarter)




Long Term (This Year)







🎯 Success Metrics



Performance Targets




Code Quality Targets




Automation Coverage







📝 Notes



Completed Enhancements




Deferred Enhancements




Monitoring & Review







🤝 Contributing



To propose new enhancements:


    
  
  1. Create GitHub issue with 
    1

    enhancement

     label
    2. 
  
  2. Describe problem/opportunity
    3. 
  
  3. Propose solution with effort estimate
    4. 
  
  4. Tag with priority level
    5. 
  
  5. Discuss in issue comments
    6. 




For questions about this roadmap:







Document Version: 1.0
Last Review: January 2025
Next Review: April 2025