Skip to content

Releases

Kiaalap v4.0.0 — Faster Builds & Developer Experience

Kiaalap v4.0.0 — Faster Builds & Developer Experience Latest
Latest

Choose a tag to compare

View all tags
@puikinsh puikinsh released this 13 Oct 11:34
v4.0.0
9732a89

Kiaalap v4.0.0 — Faster Builds, Smaller Shared JavaScript, Easier Customization

Released 2026-10-13. Bootstrap 5 remains the UI foundation. This release updates the tooling and libraries, reduces unnecessary JavaScript, adds a starter workflow, and resolves both production and development dependency audit findings.

Highlights

  • Shared JavaScript is about 27 kB gzipped, down from 99 kB (about 72% smaller). Chart.js is loaded automatically only on chart pages; Day.js is available on demand. These figures describe the shared shell, not the complete page including CSS, fonts, images or page-specific libraries.
  • Local production builds took 2.1–2.5 seconds, compared with 4.57 seconds before the update, using Vite’s native Oxc and Lightning CSS minifiers. Timings vary with machine and cache.
  • 63 pages, including a minimal starter.html. Run npm run page:new -- attendance to create a page safely.
  • Site metadata/demo user, page/navigation context and Sass customization each have a documented configuration file.
  • Full npm audit and npm audit --omit=dev: zero vulnerabilities at release verification.
  • 10 unit tests, 2 built artifact tests and 68 browser tests pass. External images/map tiles are stubbed in browser tests; backend operations remain demos.

Dependency updates

Runtime packages

Package v3.0.0 requirement v4.0.0 requirement
bootstrap-icons ^1.13.1 ^1.13.2
cropperjs ^2.1.1 ^2.3.0
dayjs ^1.11.21 ^1.11.23
fullcalendar ^7.0.2 ^7.1.2
swiper ^14.1.0 ^14.3.0

Development packages

Package v3.0.0 requirement v4.0.0 requirement
@eslint/css Added ^2.0.0
@playwright/test Added ^1.64.0
autoprefixer ^10.5.4 ^10.6.1
eslint ^10.8.0 ^10.12.0
globals ^17.9.0 ^17.13.0
html-validate ^11.6.2 ^11.16.2
postcss ^8.5.26 ^8.5.30
prettier ^3.9.6 ^3.9.10
sass ^1.102.0 ^1.105.1
vite ^8.2.1 ^8.3.4

Unchanged runtime packages were checked against npm’s current stable releases. Quill remains pinned to 2.0.2 because 2.0.3 has an unresolved HTML export XSS advisory. No audit findings are suppressed.

Removed development packages: stylelint, stylelint-config-standard-scss, cssnano, terser and glob. Removing Stylelint’s unpatched braces/glob chain eliminated the remaining 10 findings. Sass moved to devDependencies. CSS is checked with ESLint’s official CSS plugin; SCSS uses Prettier syntax/formatting checks and Sass compilation. This replaces Stylelint-specific SCSS rules rather than claiming identical rule coverage.

Customization and page workflow

Change Location or command
Shared metadata and demo user src/config/site.js
Titles, breadcrumbs and expanded sidebar groups src/config/pages.js
Bootstrap primary color, font and border radius src/scss/_theme.scss
Additional Bootstrap configuration src/scss/main.scss
Shell CSS variables src/css/dashboard.css
Add a page without overwriting an existing file npm run page:new -- attendance
Full validation npm run check
Browser regression tests npm run test:browser after building

The build automatically discovers root HTML pages. New page names containing template or -new are excluded. Restart the development server after adding a page. npm run clean now uses Node’s filesystem API and works across platforms. Development dependency scanning includes module entries hidden by Handlebars partials, avoiding additional optimization reloads.

Runtime, accessibility and bug fixes

  • Chart.js has a separate entry, preserving window.Chart before DOMContentLoaded on chart demo pages.
  • Lazy SimpleBar and Tom Select also load their styles. Repeated hook initialization skips initialized elements, and failed downloads can be retried.
  • Kiaalap.initLazyLibraries(root) supports dynamically inserted hooks; the loader rejects inherited property names.
  • Shared avatars use local initials by default; set user.avatar to provide an image.
  • Shared controls have accessible labels and explicit button types. Navigation landmarks and duplicate search IDs are corrected.
  • Rendered page-local styles are moved into <head> while script examples are preserved. Rendered HTML and local asset references are checked.
  • Reduced motion is respected by shell transitions, charts and counters. Counters use requestAnimationFrame; no-op timer/resize handlers were removed.
  • Department template, preview and success dialogs have been restored. User input in previews remains escaped.
  • Cropper.js export is checked using a real image/canvas operation.

Migration from v3.0.0

  1. Use Node.js 24.8+ (recommended) or 22.22+, with npm 10+. .nvmrc selects Node 24.
  2. Run npm ci with the updated lockfile.
  3. Replace custom reads of window.dayjs or Chart/Day.js imports from src/js/main.js with direct package imports or await Kiaalap.load("dayjs") / await Kiaalap.load("chart").
  4. window.Chart is available only on pages detected as containing canvas markup or Chart.js demos. Load it explicitly for charts added later.
  5. Move custom page context edits from vite.config.js to src/config/pages.js, and shared user/metadata edits to src/config/site.js.
  6. Replace any custom Stylelint workflow with the new stylesheet checks, or configure additional SCSS rules in your own project if needed.

Validation and deployment

nvm use
npm ci
npm run check
npx playwright install chromium
npm run test:browser
npm audit
npm audit --omit=dev

Build first and deploy the complete dist/ directory. Relative asset URLs support a site root or subdirectory; no SPA fallback or production Node process is needed. HTML should revalidate while hashed assets can use long-lived caching. Authentication, payment and submission screens are frontend demos and need a backend for real operations.

See CHANGELOG.md, README.md and DEPLOYMENT_GUIDE.md for the full implementation notes, usage and hosting guidance.

Assets 3
Loading

Kiaalap v3.0.0 — Security, Performance & Accessibility

Kiaalap v3.0.0 — Security, Performance & Accessibility

Choose a tag to compare

View all tags
@puikinsh puikinsh released this 07 Aug 13:46
v3.0.0
bd84705

Resolves all 25 open Dependabot alerts, removes every third-party CDN, cuts the per-page payload by roughly a third, and takes the HTML validator from ~700 errors to zero.

⚠️ This release contains breaking changes. See the migration table below.

⚠️ Breaking changes

Change Migration
window.Swiper, window.SimpleBar, window.TomSelect, window.CountUp removed const Swiper = await Kiaalap.load('swiper'); — or add the DOM hook and let it auto-initialise
Font Awesome removed Use Bootstrap Icons (<i class="bi bi-*">), or reinstall @fortawesome/fontawesome-free and re-import it in src/scss/main.scss
Cropper.js 1.x → 2.x (web-components rewrite) new Cropper(img, options) is gone. See images-cropper.html for the new getCropperImage() / getCropperSelection() pattern; $toCanvas() is now async
filepond, metismenu, animate.css removed Nothing in the template referenced them — reinstall if your project does
quill pinned to exactly 2.0.2 2.0.3 is the only version affected by GHSA-v3m3-f69x-jf25 and has no patched release

window.bootstrap, window.Chart and window.dayjs are unchanged.

🔒 Security

  • All 25 Dependabot alerts resolved — handlebars, vite, lodash, lodash-es, rollup, swiper, flatted, immutable, svgo, fast-uri, minimatch, postcss, js-yaml. npm audit reports 0 vulnerabilities.
  • Two real DOM XSS sinks fixed. The tag input on advance-form-element.html assigned raw user text via innerHTML — typing <img src=x onerror=…> executed. add-department.html interpolated nine unescaped form values into a preview.
  • All CDN dependencies removed. Prism (5 files from cdnjs) and Leaflet (2 from unpkg) were loaded with no Subresource Integrity, so a CDN compromise would have executed arbitrary JavaScript on every page using them. Both now ship from local npm packages.
  • Production security headers documented — working Content-Security-Policy, HSTS, X-Content-Type-Options, Referrer-Policy and Permissions-Policy configs for Nginx and Apache in DEPLOYMENT_GUIDE.md. A strict CSP is only achievable now that no third-party origin is involved.

⚡ Performance

Before After
JS per page (gzipped) 144 kB 97 kB
CSS per page (gzipped) 68 kB 46 kB
Web fonts 576 kB 312 kB
  • On-demand library loading. Swiper, SimpleBar, Tom Select, CountUp, AOS and FullCalendar are no longer bundled — each is fetched only when a page uses it.
  • Font Awesome removed — it shipped 264 kB of fonts and 128 kB of CSS for zero icons used anywhere in the template.
  • Duplicate 300 kB stylesheet chunk removed (the four auth pages pulled their own Bootstrap copies).
  • 5 redundant Chart.js <script> tags removed; 51 images given loading="lazy".

♿ Accessibility

npm run lint:html went from ~700 errors to 0: 164 icon-only controls labelled, 247 buttons given explicit types, static aria-hidden removed from 19 modals, accordion panels given role="region", plus password autocomplete, an untitled <iframe>, and 8 layout-only <form> wrappers converted to <div>.

🐛 Bug fixes

  • Desktop sidebar collapse did nothing — two modules each toggled .collapsed on the same element from the same click, cancelling each other out.
  • The password generator's length slider was dead — a duplicate id="passwordLength" meant getElementById returned a display div, so the value read back NaN and the listener never bound.
  • The sidebar never highlighted the active section — vite.config.js built a navigation object that no partial ever read.
  • additionalCSS / additionalJS were silently ignored, so charts-layout.css never loaded on the 11 pages that use .chart-container.
  • Structural HTML fixed across 50+ pages — scripts emitted after </html>, duplicated </body></html>, 404.html/500.html never closing their document, stray </div>s leaving <main> unclosed.

✨ Added

  • FullCalendar event calendar on events.html, replacing an alert('Calendar view would be implemented here') stub. Month and list views, colour-coded by category, clickable events. Loads on first click.
  • Kiaalap.load(name) public API for on-demand libraries.
  • .stylelintrc.json — npm run lint:css previously failed outright with no config.

📦 Dependency highlights

Vite 7 → 8, cssnano 7 → 8, html-validate 10 → 11, Swiper 12 → 14, FullCalendar 6 → 7, Cropper.js 1 → 2. Full table in CHANGELOG.md.

Full changelog: v2.3.0...v3.0.0

Loading

Kiaalap v2.3.0

Kiaalap v2.3.0

Choose a tag to compare

View all tags
@puikinsh puikinsh released this 10 Feb 20:45
v2.3.0
50d3c32

v2.3.0 - Dependency Updates, ESLint v10 Migration & Fixes

All dependencies updated to their latest versions. ESLint migrated to v10 flat config. Sidebar and charts improvements.

Highlights

  • All packages updated to latest versions (20+ dependencies)
  • ESLint v10 migration from legacy .eslintrc.js to flat config eslint.config.js
  • Sidebar improvements with better collapse behavior and responsive handling
  • Charts initialization updated for improved responsiveness
  • Deployment guide added with Apache/Nginx configuration examples
  • Fixed broken README screenshot (replaced external Colorlib URL with local image)

Dependency Updates

Runtime Dependencies

Package Previous Updated
@fortawesome/fontawesome-free 7.0.1 7.2.0
chart.js 4.5.0 4.5.1
countup.js 2.8.0 2.9.0
dayjs 1.11.10 1.11.19
filepond 4.30.6 4.32.11
fullcalendar 6.1.11 6.1.20
metismenu 3.0.6 3.1.0
sass 1.92.1 1.97.3
simple-datatables 10.0.0 10.2.0
simplebar 6.2.5 6.3.3
swiper 12.0.2 12.1.0
tom-select 2.3.1 2.4.6

Dev Dependencies

Package Previous Updated
autoprefixer 10.4.21 10.4.24
cssnano 7.1.1 7.1.2
eslint 9.35.0 10.0.0 (major)
glob 13.0.0 13.0.2
html-validate 10.0.0 10.7.0
prettier 3.6.2 3.8.1
stylelint 16.24.0 17.2.0 (major)
stylelint-config-standard-scss 16.0.0 17.0.0 (major)
terser 5.44.0 5.46.0
vite 7.1.7 7.3.1

New Dev Dependencies

Package Version Notes
@eslint/js 10.0.1 Required for ESLint v10 flat config
globals 17.3.0 Browser globals for ESLint v10 flat config

What's Changed

  • Enhanced sidebar collapse behavior with localStorage persistence and improved responsive handling
  • Updated charts initialization and sidebar navigation for better responsiveness
  • Added comprehensive deployment guide (DEPLOYMENT_GUIDE.md) with Apache and Nginx configs
  • Added Image Cropper link to sidebar navigation
  • Fixed broken README dashboard preview image (now served locally)
  • Migrated ESLint from legacy config to v10 flat config format

Technical Notes

  • CropperJS kept at v1.6.2 (v2.x has a completely different web components API)
  • Quill kept at v2.0.3 (latest stable)
  • All builds verified to complete successfully with updated dependencies

Upgrading from v2.2.0

npm install

If you have a custom ESLint config using the legacy .eslintrc.js format, you'll need to migrate it to eslint.config.js (flat config). No other breaking changes.

Full Changelog

See CHANGELOG.md for complete version history.

Loading

Kiaalap v2.1.0 - jQuery-Free

Kiaalap v2.1.0 - jQuery-Free

Choose a tag to compare

View all tags
@puikinsh puikinsh released this 30 Sep 11:50
v2.1.0
df46213

Kiaalap v2.1.0 - jQuery-Free Modernization Release 🎉

Release Date

September 30, 2025

🚀 Major Release Highlights

This is a major modernization release that transforms Kiaalap into a 100% jQuery-free, modern education management dashboard powered by Bootstrap 5, Vite, and vanilla JavaScript.

✨ What's New

🎯 Complete jQuery Removal

  • ✅ 100% jQuery-free - Entire codebase migrated to vanilla JavaScript
  • ✅ Removed jQuery dependency (reduces bundle size by ~90KB)
  • ✅ All interactions rewritten with modern JavaScript (ES6+)
  • ✅ Improved performance and load times

📊 Modern Data Tables

  • ✅ Migrated from jQuery DataTables to simple-datatables (vanilla JS)
  • ✅ Full feature parity: sorting, searching, pagination
  • ✅ Added CSV export functionality
  • ✅ Print functionality
  • ✅ Custom styling with Bootstrap 5 theme
  • ✅ Lightweight and fast

🎨 New Developer Tools Section

8 brand new pages added with modern functionality:

Code Editor (code-editor.html)

  • ✅ Full-featured code editor with Prism.js syntax highlighting
  • ✅ JavaScript, HTML, and CSS editors
  • ✅ Real-time syntax highlighting with color coding
  • ✅ Tab switching between files
  • ✅ Code execution environment
  • ✅ Console output capture
  • ✅ Copy to clipboard
  • ✅ Format code button
  • ✅ Tab key indentation support

Preloader (preloader.html)

  • ✅ Bootstrap 5 built-in spinners (border & grow variants)
  • ✅ Color variants demonstration
  • ✅ Custom CSS preloaders (spin, pulse animations)
  • ✅ Animated loaders (bouncing dots, growing bars)
  • ✅ Button loading states
  • ✅ Full-page overlay preloader demo

Tree View (tree-view.html)

  • ✅ Hierarchical tree structure with folders/files
  • ✅ Styled tree with badges and icons
  • ✅ Compact code project tree view
  • ✅ Expandable/collapsible nodes
  • ✅ Active state selection
  • ✅ Vanilla JavaScript click handlers

Notifications (notifications.html)

  • ✅ Bootstrap 5 alert components (all variants)
  • ✅ Dismissible alerts
  • ✅ Toast notifications system
  • ✅ Interactive notification triggers
  • ✅ Timeline-style notification list
  • ✅ Auto-dismiss functionality

PDF Viewer (pdf-viewer.html)

  • ✅ File upload interface
  • ✅ PDF toolbar (upload, download, print, zoom)
  • ✅ Sample PDF library with metadata
  • ✅ Iframe viewer with controls
  • ✅ File type validation
  • ✅ Zoom controls

Interactive Maps (google-map.html)

  • ✅ Leaflet map integration
  • ✅ Multiple campus location markers
  • ✅ Custom popups with info
  • ✅ Location list sidebar
  • ✅ Map controls (zoom, reset, toggle views)
  • ✅ Add marker functionality

Data Maps (data-maps.html)

  • ✅ Student distribution heatmap
  • ✅ Campus activity visualization
  • ✅ Department locations overlay
  • ✅ Research centers mapping
  • ✅ Color-coded data visualization
  • ✅ Multiple synchronized maps

Rounded Charts (rounded-chart.html)

  • ✅ Student enrollment donut charts
  • ✅ Course distribution pie charts
  • ✅ Attendance & grade distribution
  • ✅ Revenue breakdown charts
  • ✅ Library resources visualization
  • ✅ Chart.js 4.5.0 integration

🎨 Image Cropper Enhanced

  • ✅ Cropperjs 1.6.2 fully functional
  • ✅ Upload and crop images
  • ✅ Multiple aspect ratios (Free, 16:9, 4:3, 1:1)
  • ✅ Rotate left/right controls
  • ✅ Flip horizontal/vertical
  • ✅ Zoom in/out
  • ✅ Reset functionality
  • ✅ Now accessible from sidebar (Interface → Forms → Image Cropper)

🔧 Technical Improvements

Build System

  • ✅ Vite 7.1.7 - Lightning-fast build tool
  • ✅ Handlebars templating system
  • ✅ Hot module replacement (HMR)
  • ✅ Optimized production builds
  • ✅ Terser minification

Modern Stack

  • ✅ Bootstrap 5.3.8 - No jQuery dependency
  • ✅ Chart.js 4.5.0 - Modern charting library
  • ✅ Simple-DataTables 10.0.0 - Vanilla JS tables
  • ✅ Prism.js 1.29.0 - Syntax highlighting
  • ✅ Sass 1.92.1 - CSS preprocessing

Code Quality

  • ✅ ES6+ JavaScript throughout
  • ✅ Modern async/await patterns
  • ✅ Event delegation
  • ✅ Modular architecture
  • ✅ Consistent code style

Performance

  • ✅ Reduced bundle size (removed jQuery ~90KB)
  • ✅ Faster page load times
  • ✅ Optimized CSS with PostCSS
  • ✅ Tree-shaking enabled
  • ✅ Code splitting

📦 Dependencies Updated

Major Version Updates

  • ✅ @fortawesome/fontawesome-free: 6.5.1 → 7.0.1
  • ✅ swiper: 11.0.7 → 12.0.2
  • ✅ cropperjs: Stable at 1.6.2 (v2.0 tested but reverted due to breaking changes)

All Dependencies at Latest Stable Versions

  • ✅ Bootstrap 5.3.8
  • ✅ Chart.js 4.5.0
  • ✅ Simple-DataTables 10.0.0
  • ✅ Sass 1.92.1
  • ✅ Vite 7.1.7
  • ✅ All security patches applied
  • ✅ 0 vulnerabilities

🗺️ Navigation Improvements

New "Developer Tools" Section

A dedicated section in the sidebar with organized categories:

Developer Tools
├── Code Editor (direct link)
├── UI Components
│   ├── Preloaders
│   ├── Notifications
│   └── Tree View
├── Viewers
│   └── PDF Viewer
└── Maps
    ├── Interactive Maps
    └── Data Maps

Updated Sections

  • ✅ Charts → Added "Rounded Charts"
  • ✅ Forms → Added "Image Cropper"
  • ✅ All 65+ pages accessible from navigation

📋 Documentation Updates

Updated Files

  • ✅ CLAUDE.md - Full project documentation
  • ✅ README.md - Updated with new features
  • ✅ CHANGELOG.md - Comprehensive change log
  • ✅ package.json - Latest dependencies

Architecture Documentation

  • ✅ Build system & commands
  • ✅ Core technologies
  • ✅ File structure
  • ✅ Handlebars template system
  • ✅ Common patterns
  • ✅ Development notes

🧪 Testing

Verified Working

  • ✅ All 65+ HTML pages load correctly
  • ✅ All interactive features functional
  • ✅ Syntax highlighting working in all 3 code editors
  • ✅ Tab switching in code editor
  • ✅ Data tables with sorting/filtering
  • ✅ Image cropper with all controls
  • ✅ Maps with markers and interactions
  • ✅ Charts rendering correctly
  • ✅ Notifications and toasts
  • ✅ Tree view expand/collapse

Build Status

  • ✅ Production build: Successful (1.40s)
  • ✅ Dev server: Working
  • ✅ No console errors
  • ✅ No security vulnerabilities

📊 Project Statistics

Codebase

  • Total HTML Pages: 65+
  • jQuery References: 0 (100% removed!)
  • New Pages: 8
  • Updated Pages: 9 (including images-cropper)
  • Lines Added: ~5,000+

Performance Improvements

  • Bundle Size Reduction: ~90KB (jQuery removed)
  • Build Time: 1.40s (production)
  • First Load: Faster (no jQuery overhead)

Package Statistics

  • Total Packages: 442
  • Dependencies: 20
  • DevDependencies: 13
  • Outdated Packages: 0

🚀 Getting Started

Installation

npm install

Development

npm run dev
# Opens on http://localhost:3000

Production Build

npm run build
# Output to dist/

Preview Production Build

npm run preview

🔄 Migration Guide

From v1.x to v2.0

If You're Using jQuery

All jQuery code has been removed. If you have custom pages using jQuery, you'll need to:

  1. Remove jQuery references

    <!-- Remove this -->
<script src="jquery.min.js"></script>

  2. Convert jQuery to Vanilla JS

    // Old (jQuery)
$('#myElement').click(function() { ... });

// New (Vanilla JS)
document.getElementById('myElement').addEventListener('click', function() { ... });

DataTables

If using DataTables:

// Old (jQuery DataTables)
$('#table').DataTable({ ... });

// New (Simple-DataTables)
new DataTable('#table', { ... });

🐛 Bug Fixes

  • ✅ Fixed duplicate sidebar/header structures in 8 pages
  • ✅ Fixed Cropperjs v2 compatibility (reverted to stable v1.6.2)
  • ✅ Fixed syntax highlighting scroll sync
  • ✅ Fixed tab switching in code editor
  • ✅ Fixed navigation active states
  • ✅ Fixed broken HTML structures

⚠️ Breaking Changes

jQuery Removal

  • Breaking: jQuery is no longer included
  • Impact: Custom jQuery code will not work
  • Solution: Migrate to vanilla JavaScript or include jQuery manually

DataTables

  • Breaking: jQuery DataTables replaced with Simple-DataTables
  • Impact: Different API
  • Solution: Update DataTable initialization code

Cropperjs

  • Note: Staying on v1.6.2 (not upgrading to v2.0 due to breaking changes)

🎯 Browser Support

  • ✅ Chrome (latest)
  • ✅ Firefox (latest)
  • ✅ Safari (latest)
  • ✅ Edge (latest)
  • ✅ Opera (latest)

Minimum Requirements: ES6+ support (2015+)

📝 Known Issues

None at this time! 🎉

🙏 Credits

  • Bootstrap 5 - Frontend framework
  • Vite - Build tool
  • Chart.js - Charts library
  • Simple-DataTables - Vanilla JS tables
  • Prism.js - Syntax highlighting
  • Leaflet - Map library
  • Cropperjs - Image cropping

🎉 Thank You

Thank you for using Kiaalap! This release represents a complete modernization of the codebase. We hope you enjoy the improved performance, modern tooling, and new features.

Happy coding! 🚀

Loading