The Coding Odyssey

Post

KRO/NCRV Pers Project

Harianto van Insulinde

KRO/NCRV Pers Project

Project Overview

KRO/NCRV Pers is a web application I developed for press-related content management and presentation. Built with Vue.js 2.0.x, it features a modern component-based architecture with key features like Calendar integration and Picture View functionality. The project emphasizes simplicity in design while maintaining robust functionality through web components.

Download

You can download the project source code from: pers.zip

Technical Stack

  • Framework: Vue.js 2.0.x
  • Legacy Framework: jQuery
  • Integration: Hybrid jQuery-Vue architecture
  • Styling: SCSS/SASS
  • Architecture: Component-based with legacy integration
  • Communication: AJAX for backend integration
  • Build System: Modern frontend tooling

Core Components

  1. Calendar System
    • Vue Event Calendar
    • Inline Datepicker
    • Date Selection
    • Event Management
    • Calendar Views
  2. Picture View (Beeldbank)
    • Image Library Management
    • Detail Views
    • Gallery Interface
    • Image Search
    • Carousel Display
  3. Content Management
    • Press Releases
    • Program Management
    • People Directory
    • Search Functionality
    • Pagination
  4. UI Components
    • Carousel
    • Slider
    • Overlay System
    • Search Interface
    • Pagination Controls

Project Structure

text
project/
├── script/
│   ├── app/
│   ├── vue/
│   │   ├── core/
│   │   │   ├── component/
│   │   │   ├── directive/
│   │   │   ├── filter/
│   │   │   └── plugin/
│   │   ├── route/
│   │   └── init/
│   └── utils/
└── style/
    ├── base/
    ├── components/
    ├── kroncrv/
    ├── objects/
    └── utils/

Key Features

  1. Calendar Integration
    • Event Calendar Component
    • Date Picker Implementation
    • Event Management
    • Date Range Selection
    • Calendar Navigation
  2. Image Management
    • Picture View System
    • Image Library
    • Gallery Interface
    • Detail Views
    • Image Search
  3. Content Organization
    • Press Release Management
    • Program Listings
    • People Directory
    • Search Functionality
    • Content Filtering
  4. User Interface
    • Responsive Design
    • Modern Components
    • Interactive Elements
    • Clean Layout
    • User-Friendly Navigation

Component Details

  1. Vue Components
    • vue-calendar/: Calendar implementation
    • vue-beeldbank/: Picture library
    • vue-programmas/: Program management
    • vue-persberichten/: Press releases
    • vue-eventcalendar/: Event calendar
    • vue-search/: Search functionality
    • vue-pagination/: Page navigation
  2. UI Elements
    • Carousel.vue: Image slideshow
    • Slider.vue: Content slider
    • Datepicker.vue: Date selection
    • InlineDatepicker.vue: Embedded date picker

Legacy Integration Strategy

  1. jQuery-Vue Coexistence
    • Gradual migration approach
    • Legacy jQuery components maintained
    • New features in Vue.js
    • Hybrid state management
    • Cross-framework communication
  2. Integration Points
    • jQuery AJAX with Vue components
    • Shared DOM manipulation
    • Event handling across frameworks
    • State synchronization
    • Legacy plugin compatibility
  3. Data Flow Management
    javascript
    // Example of jQuery-Vue integration
var component = {
  template: require('./index.html'),
  data: function () {
    return {
      // Vue state
      result: [],
      images: []
    }
  },
  methods: {
    retrieveData (url, params) {
      // Using jQuery AJAX in Vue component
      $.ajax({
        dataType: "json",
        url: url,
        data: params
      })
      .then(function (json) {
        // Updating Vue state with jQuery AJAX response
        if(json.success) {
          this.result = data;
          this.images = data.data;
        }
      }.bind(this))
    }
  }
}
  4. Framework Responsibilities
    • jQuery:
      • Legacy AJAX calls
      • DOM manipulation
      • Existing plugins
      • Event handling
      • Animation effects
    • Vue.js:
      • New components
      • State management
      • Reactive updates
      • Component lifecycle
      • Modern features

Migration Strategy

  1. Incremental Approach
    • Gradual component migration
    • Feature-by-feature transition
    • Parallel framework operation
    • Legacy code preservation
    • Modern feature addition
  2. Integration Patterns
    • jQuery-to-Vue bridges
    • Shared event bus
    • State synchronization
    • Plugin wrappers
    • Mixed component hierarchy
  3. Code Organization
    • Clear framework boundaries
    • Documented integrations
    • Shared utilities
    • Migration roadmap
    • Version control strategy
  4. Best Practices
    • Minimal cross-framework dependencies
    • Clear documentation
    • Performance monitoring
    • Error handling
    • Testing strategy

Detailed Component Analysis

1. Calendar Implementation

  1. Core Structure
    • Event-based calendar system
    • Inline and popup datepicker options
    • Custom date formatting
    • Disabled days configuration
    • Event handling
  2. Features
    • Date range selection
    • Event management
    • Custom formatting options
    • Disabled dates support
    • Navigation controls

2. Picture View (Beeldbank) Implementation

  1. Core Functionality
    • Image gallery management
    • Search and filtering
    • Pagination system
    • Detail view handling
    • AJAX-based data loading
  2. Features
    • Image navigation (prev/next)
    • Image detail overlay
    • Search by date range
    • Program/presenter filtering
    • Responsive image display
  3. Data Management
    • JSON data sources
    • Program data integration
    • Presenter information
    • Search parameters
    • State management

3. Styling System Analysis

  1. Component-Specific Styles
    • _carousel.scss (12KB): Comprehensive carousel styling
    • _photo-display.scss: Image display layouts
    • _photo-definition.scss: Image detail styling
    • _hero.scss: Hero section styling
    • _nav-main.scss: Navigation styling
  2. Layout Components
    • Content sections
    • Page headers
    • Section centering
    • Responsive grids
    • Navigation elements
  3. UI Elements
    • Buttons
    • Spinners
    • Brand elements
    • Navigation filters
    • Content articles
  4. Responsive Design
    • Mobile-first approach
    • Breakpoint management
    • Flexible layouts
    • Image scaling
    • Typography adaptation

4. AJAX Integration

  1. Core Implementation
    • jQuery AJAX handling
    • RESTful API endpoints
    • JSON data processing
    • Error handling
    • State management
  2. Data Flow
    javascript
    retrieveData (url, params) {
  $.ajax({
    dataType: "json",
    url: url,
    data: params
  })
  .then(function (json) {
    // Data processing
    if(json.success) {
      this.result = data;
      this.images = data.data;
      this.pageCurrent = data.current_page;
      this.pageTotal = data.last_page;
      // Additional data processing
    }
  })
  .fail(function (error) {
    console.error("SERVER ERROR:", error);
  });
}
  3. Features
    • Dynamic URL handling
    • Parameter sanitization
    • Response processing
    • Error handling
    • State updates
  4. Integration Points
    • Image gallery
    • Search functionality
    • Pagination
    • Filtering
    • Data refresh

Component Interactions

  1. Data Flow
    • Component communication
    • State management
    • Event handling
    • Data synchronization
    • Error handling
  2. User Interface
    • Interactive elements
    • Loading states
    • Error states
    • Navigation
    • Feedback
  3. Performance Considerations
    • Image optimization
    • Lazy loading
    • Cache management
    • State persistence
    • Response handling

Styling Architecture

  1. Base Styles
    • Foundation styles
    • Typography
    • Color schemes
    • Layout basics
  2. Component Styles
    • Module-specific styling
    • Component themes
    • Interactive elements
    • Responsive design
  3. Utility Styles
    • Helper classes
    • Mixins
    • Variables
    • Functions

Development Features

  1. Code Organization
    • Modular components
    • Clear separation of concerns
    • Reusable elements
    • Maintainable structure
  2. Backend Integration
    • AJAX communication
    • API endpoints
    • Data synchronization
    • State management
  3. Build Process
    • Asset compilation
    • Style processing
    • Script bundling
    • Optimization

Best Practices

  1. Component Design
    • Single responsibility
    • Reusable modules
    • Clear interfaces
    • Consistent patterns
  2. Code Quality
    • Modern JavaScript
    • Vue.js best practices
    • Clean architecture
    • Maintainable code
  3. Performance
    • Optimized assets
    • Efficient loading
    • Responsive design
    • Fast interactions

Future Considerations

  1. Enhancements
    • Additional calendar features
    • Enhanced image management
    • Advanced search capabilities
    • Performance optimizations
  2. Maintenance
    • Regular updates
    • Bug fixes
    • Feature additions
    • Performance monitoring
  3. Scalability
    • Component expansion
    • Feature growth
    • User base scaling
    • Content management

The Coding Odyssey

Field notes on Vue, Nuxt, Docker, and self-hosted stacks · 2026