DEV Community: Alina Khmilevska

Simple and Effective Multilingual Implementation for Landing Pages 🌍

Alina Khmilevska — Wed, 09 Apr 2025 07:39:15 +0000

Hello, developers! 👋 Today I want to share a proven approach for adding multilingual support to landing pages without using heavy external libraries. In this article, we'll explore an architecture that allows you to quickly and easily implement support for multiple languages on static websites.

Why Multilingual Support Matters 🤔

In today's global world, even a simple landing page may need to support multiple languages:

🚀 Expanding your product's audience
🌟 Improving user experience for international visitors
📈 Increasing conversions from foreign users
🔍 Improving SEO for different regions

While specialized libraries (i18next, Angular Translate, etc.) are often used for large projects, such an approach may be excessive for a simple landing page. Instead, you can implement an elegant solution using pure JavaScript.

Architecture of a Multilingual Site 📁

To implement multilingual support on a landing page, we need just three components:

HTML structure with translation attributes
Translation file (translations.js)
Language switching system (language-switcher.js)

This architecture provides:

🔄 Easy addition of new languages without changing the core code
🔍 Improved SEO thanks to properly set language attributes
📱 Support for remembering the user's language choice
🔌 No external dependencies

Step 1: Preparing HTML with Translation Attributes 📝

The key aspect of our approach is using data-i18n attributes for elements that need translation. Here's an example:

<header>
    <div class="logo">
        <img src="images/logo.png" alt="Logo">
    </div>
    <div class="language-dropdown">
        <button class="language-btn" id="language-btn">
            <span class="lang-icon en-icon">EN</span>
            <span class="lang-text">English</span>
            <span class="dropdown-arrow">
                <!-- Arrow icon -->
            </span>
        </button>
        <div class="language-menu" id="language-menu">
            <div class="language-option active" data-lang="en">
                <span class="lang-icon en-icon">EN</span>
                <span class="lang-text">English</span>
                <span class="check-mark">✓</span>
            </div>
            <div class="language-option" data-lang="ua">
                <span class="lang-icon ua-icon">UA</span>
                <span class="lang-text">Українська</span>
            </div>
            <!-- Other languages -->
        </div>
    </div>
</header>

<section class="hero">
    <h1 data-i18n="main_title">Main Title</h1>
    <p data-i18n="subtitle">Subtitle that will be translated</p>
    <button class="cta" data-i18n="get_started">Get Started</button>
</section>

For elements containing placeholder attributes, we use data-i18n-placeholder:

<input type="email" placeholder="Your email" data-i18n-placeholder="email_placeholder">

Step 2: Translation File Structure 🔤

The translations.js file contains an object with translations for all supported languages:

// Example structure of translations.js file
const translations = {
    en: {
        "main_title": "Main Title",
        "subtitle": "Subtitle that will be translated",
        "get_started": "Get Started",
        "email_placeholder": "Your email"
        // Other translations for English
    },
    ua: {
        "main_title": "Головний заголовок",
        "subtitle": "Підзаголовок, який буде перекладатися",
        "get_started": "Почати",
        "email_placeholder": "Ваш email"
        // Other translations for Ukrainian
    },
    // Other languages
}

This structure allows:

Easy addition of new languages
Logical grouping of keys (by sections or components)
Quick finding and updating of translations

Step 3: Implementing the Language Switcher 🔄

The key part of the system is the language-switcher.js script, which handles:

🔍 Determining the initial language (from URL, localStorage, or browser)
🔄 Switching between languages
💾 Saving the user's choice
🌐 Setting language attributes for SEO

Let's look at the main functions of this script:

Language System Initialization:

// Constants for better code readability
const STORAGE_KEY = 'site-language';
const DEFAULT_LANG = 'en';
const SUPPORTED_LANGUAGES = ['en', 'ua', 'fr', 'ca', 'es', 'pl', 'ru'];

// Cached DOM elements to improve performance
let cachedElements = null;

// Language system initialization
function initLanguageSystem() {
  // Check URL for language parameter
  const urlParams = new URLSearchParams(window.location.search);
  const urlLang = urlParams.get('lang');

  // Language selection priority: URL > localStorage > browser > English
  let selectedLang;

  if (urlLang && isLanguageSupported(urlLang)) {
    // Language is specified in URL and supported
    selectedLang = urlLang;
    localStorage.setItem(STORAGE_KEY, selectedLang);
  } else {
    // Get from localStorage or determine from browser
    selectedLang = localStorage.getItem(STORAGE_KEY);

    if (!selectedLang || !isLanguageSupported(selectedLang)) {
      // Try to detect browser language
      selectedLang = getBrowserLanguage();

      if (!isLanguageSupported(selectedLang)) {
        // If browser language is not supported, use English
        selectedLang = DEFAULT_LANG;
      }
    }
  }

  // Apply the selected language
  setLanguage(selectedLang);
  updateLanguageUI(selectedLang);
}

Applying Translations:

// Set the page language and update all text elements
function setLanguage(lang) {
  // Cache elements on first call to improve performance
  if (!cachedElements) {
    cachedElements = {
      textElements: document.querySelectorAll('[data-i18n]'),
      placeholderElements: document.querySelectorAll('[data-i18n-placeholder]'),
      selectElements: document.querySelectorAll('option[data-i18n]')
    };
  }

  // Save language preference
  localStorage.setItem(STORAGE_KEY, lang);

  // Set the lang attribute for HTML
  document.documentElement.setAttribute('lang', lang);

  // Get translations for the selected language
  const trans = translations[lang] || translations[DEFAULT_LANG]; // Fallback to English

  // Update page title
  const titleElement = document.querySelector('title');
  if (titleElement && titleElement.getAttribute('data-i18n')) {
    const titleKey = titleElement.getAttribute('data-i18n');
    if (trans[titleKey]) {
      titleElement.textContent = trans[titleKey];
    }
  }

  // Update all elements with 'data-i18n' attribute
  cachedElements.textElements.forEach(element => {
    const key = element.getAttribute('data-i18n');
    if (trans[key]) {
      element.textContent = trans[key];
    }
  });

  // Update all elements with 'data-i18n-placeholder' attribute
  cachedElements.placeholderElements.forEach(element => {
    const key = element.getAttribute('data-i18n-placeholder');
    if (trans[key]) {
      element.setAttribute('placeholder', trans[key]);
    }
  });

  // Update all select options with 'data-i18n' attribute
  cachedElements.selectElements.forEach(option => {
    const key = option.getAttribute('data-i18n');
    if (trans[key]) {
      option.textContent = trans[key];
    }
  });

  // Dispatch language change event
  document.dispatchEvent(new CustomEvent('languageChanged', { detail: { language: lang }}));
}

Optimizations for Better Performance 🚀

Our approach includes several important optimizations:

DOM Element Caching:
We cache all elements with translation attributes on the first call to setLanguage(), which significantly speeds up subsequent language switches.
Browser Language Detection:
The function automatically detects the browser language to show the site in the user's native language:

   function getBrowserLanguage() {
     // Get language from navigator.language (e.g., 'en-US', 'ru', 'fr')
     const fullLang = navigator.language || navigator.userLanguage || DEFAULT_LANG;
     // Take only the first part of the code (e.g., 'en' from 'en-US')
     return fullLang.split('-')[0];
   }

Saving User's Choice:
The language choice is saved in localStorage so the user sees the site in their language on subsequent visits.
URL Updates:
Adding a language parameter to the URL for better SEO and the ability to share links to the site in a specific language:

   function updateUrlWithLanguage(lang) {
     // Don't change URL if not needed
     if (!shouldUpdateUrlWithLang()) return;

     const url = new URL(window.location.href);
     url.searchParams.set('lang', lang);

     // Use History API to update URL without reloading
     window.history.replaceState({}, '', url.toString());
   }

Advantages of This Approach Compared to Libraries 🏆

Speed and Simplicity:
- Minimal code (less than 200 lines of JavaScript)
- No external dependencies
- Faster page loading
Flexibility and Control:
- Full control over the code
- Easy to modify for specific needs
- Possibility of integration with other systems
Performance:
- DOM element caching
- Minimal repainting operations
- Optimized selectors
SEO-Friendliness:
- Proper setting of language attributes
- Support for alternative links for different languages
- Language parameters in URL

Practical Implementation Tips 💡

Structure Translations Logically: Group translation keys by sections or components for easier maintenance:

   const translations = {
     en: {
       // Site header
       header: {
         nav_home: "Home",
         nav_features: "Features"
       },
       // Main section
       hero: {
         title: "Welcome",
         subtitle: "Discover our platform"
       }
     }
   }

Use Automatic Language Detection with Opt-Out:
Automatically detect the user's language, but always provide the option to change it.
Optimize for SEO:
- Add hreflang attributes in the header
- Set the lang attribute for the HTML element
- Use language parameters in the URL
Ensure Smooth User Experience:
- Avoid flickering when changing languages
- Save the user's choice
- Provide clear language labels (with flags or codes)

Conclusion 📌

Multilingual support doesn't have to be complex or require heavy frameworks. For static landing pages and small sites, the lightweight system we've discussed in this article is ideal. It provides all the necessary functions with minimal code.

This approach can be easily extended or integrated with CMS, communication systems, and other components of your project. And best of all, you have full control over the code and can customize the system exactly to your needs.

What approach to multilingual support do you use? Share your experience in the comments! 💬

Migration from Drupal 7: Why You Should Start with a Clean Slate ✨

Alina Khmilevska — Wed, 09 Apr 2025 07:27:20 +0000

Hello to all Drupal developers! 👋 Today I want to share my experience and thoughts on migrating projects from Drupal 7 to newer versions (Drupal 9/10). Many face this challenge, especially now as official support for Drupal 7 is coming to an end. ⏰

The Drupal 7 Situation 🕰️

Drupal 7 has been running on thousands of sites for many years, but its support is gradually ending. The official end-of-support date has been postponed several times due to various factors, including the pandemic. So if you're still using Drupal 7, it's time to take action. 🚀

But an important question arises: how exactly should you approach migration? Is it worth simply transferring the existing structure to a new version? My answer is mostly no. ❌ And here's why.

Problems with Direct Migration from D7 to D9/D10 🚧

1. Architectural Gap Between Versions 🌉

There is a fundamental architectural gap between Drupal 7 and newer versions. Drupal 8 and later versions are based on Symfony components, use a plugin system, services, object-oriented approach, and many other modern practices. A simple "migration" often means you're transferring outdated design patterns to a new system without utilizing its advantages. 😕

2. Technical Debt 💸

From experience, I can say that most long-term projects on Drupal 7 have accumulated significant technical debt:

📦 Outdated or unsupported modules
🗄️ Suboptimal data structures
🔄 Convoluted business logic
⚠️ Unsafe hacks and code overrides
🧪 Lack of tests

Direct migration means you'll transfer all this debt to your new system. It's like moving all your clutter to a new house without sorting through it first! 🏠➡️🏢

3. Missed Opportunities ✨

Drupal 9/10 provides many new capabilities that may be difficult to integrate if you're constrained by the old architecture:

🔌 APIs for decoupling (JSON:API, GraphQL)
🧩 Component system and Twig
⚙️ Configuration management
🎨 Layout Builder
📝 Paragraphs and other modern approaches to content structuring

Why miss out on all the cool new toys? 🎁

4. Outdated Modules and Their Modern Alternatives 🔄

Many popular modules from Drupal 7 have been either completely redesigned or replaced with better alternatives in Drupal 9/10. It's like trading in your old flip phone for a smartphone! 📱✨ Here are some examples:

Drupal 7 Module	Modern Alternative in D9/D10	Notes
Views	Views (in core)	Now part of core, but with a different API
Context	Layout Builder + Block Visibility Groups	More flexible and visual approach
Panels	Layout Builder	Native layout system
Wysiwyg	CKEditor 5 (in core)	Modern editor with more capabilities
Features	Configuration Management	Now built into core
Webform	Webform or Contact Forms Enhanced	Completely rebuilt from scratch
IMCE	Media Library (in core)	Modern media library
Ctools	Various APIs in core	Functionality moved to core
Pathauto	Pathauto	Exists, but uses new API
Backup & Migrate	No direct equivalent	Recommended to use external tools

The change in API also means that even if the module name remains the same, how it's used may have changed significantly. Same name, different beast! 🦁

The "Clean Slate" Approach 🧹✨

Instead of direct migration, I recommend a "clean slate" approach. This doesn't mean you should throw everything away and start from scratch. Rather, it means critically rethinking your project. Think of it as Marie Kondo-ing your Drupal site! 👗

Rethinking Project Needs 🤔

Ask yourself and the client:

🎯 What business goals should the site achieve?
📈 Have these goals changed since the initial development?
📊 Which success metrics are most important now?
👥 What are the main use cases?

Time for some soul-searching with your website! 🧘‍♀️

Audit of Existing Functionality and Data 🔍

Conduct a detailed audit:

🧰 Which modules and functions are actually being used?
📋 Which content types and fields are really needed?
💾 What data is important to preserve, and what can be restructured?
📈 Which parts of the site generate the most traffic or conversions?

Put on your detective hat and start investigating! 🕵️‍♀️

Dividing into "Preserve" and "Rebuild" ✂️

Based on the audit, create two lists:

Preserve ✅ — data and functionality that definitely need to be transferred
Rebuild 🔄 — parts that can or should be rethought

Time to make some tough decisions! 💪

Practical Action Plan 📋

1. Analysis of the Existing System 🔬

Start by documenting the current architecture:

📦 All modules used and their purpose
🗂️ Content types, taxonomies, field structures
💻 Custom modules and functionality
🔌 APIs and integrations with other systems
⏱️ Load and performance bottlenecks

Know thy enemy—err, I mean website! 😉

2. Designing a New Architecture 🏗️

Based on the analysis, design a new system:

🧩 Choose core modules and create a strategy for configuring them
📐 Design the structure of entity types
🛠️ Determine which parts need to be developed as custom modules
🔌 Plan APIs and integrations
🧪 Define a testing strategy

Time to put on your architect hat! 👷‍♀️

Here's an example of how you can transform a convoluted field structure in Drupal 7 into a clean component-based approach in Drupal 9/10 using Paragraphs: ✨🧙‍♂️

Drupal 7 (old approach):

// Overly complex field with endless hook_form_alter
function mymodule_form_article_node_form_alter(&$form, &$form_state, $form_id) {
  // Add special validators for field combinations
  if (isset($form['field_related_content']) && isset($form['field_product_reference'])) {
    $form['#validate'][] = 'mymodule_validate_related_content';
  }

  // Hide/show fields based on other values
  $form['field_product_reference']['#states'] = array(
    'visible' => array(
      ':input[name="field_content_type[und]"]' => array('value' => 'product'),
    ),
  );

  // 50+ more lines of specific logic...
}

Drupal 9/10 (component approach with Paragraphs):

// Creating a paragraph type through configuration
$paragraphType = ParagraphsType::create([
  'id' => 'product_reference',
  'label' => 'Product Reference',
]);
$paragraphType->save();

// Behavior in the Parameter Entity Reference field
class ProductReferenceBehavior extends ParagraphsBehaviorBase {
  public function buildBehaviorForm(ParagraphInterface $paragraph, array &$form, FormStateInterface $form_state) {
    $form['display_price'] = [
      '#type' => 'checkbox',
      '#title' => $this->t('Display product price'),
      '#default_value' => $paragraph->getBehaviorSetting('product_reference', 'display_price', FALSE),
    ];
    return $form;
  }
}

This approach allows you to:

🧩 Separate different content types into logical components
🔄 Easily transfer these components between different content types
🖌️ Provide editors with a visual interface for working with components

Much cleaner, right? 😍

3. Data Migration Strategy 📊

Not all data can simply be transferred. Develop a strategy:

🤖 What to migrate automatically versus manually
🔄 How to transform data for the new structure
✅ How to verify data integrity after migration
🗃️ What data to archive rather than migrate

Remember, data is the heart of your website! ❤️

Here's an example of a simple migration class for transferring content from Drupal 7 to Drupal 9/10 with data transformation: 🧙‍♂️✨

<?php

namespace Drupal\my_migration\Plugin\migrate;

use Drupal\migrate\Plugin\Migration;
use Drupal\migrate\Row;
use Drupal\migrate\Plugin\MigrationInterface;

/**
 * @Migration(
 *   id = "custom_article_migration",
 *   source = {
 *     "plugin" = "d7_node",
 *     "node_type" = "article"
 *   },
 *   destination = {
 *     "plugin" = "entity:node",
 *     "default_bundle" = "article"
 *   },
 *   process = {
 *     "title" = "title",
 *     "body/value" = "body/0/value",
 *     "body/format" = "body/0/format",
 *     "field_tags" = {
 *       "plugin" = "migration_lookup",
 *       "migration" = "d7_taxonomy_term",
 *       "source" = "field_tags"
 *     },
 *     "field_image" = {
 *       "plugin" = "migration_lookup",
 *       "migration" = "d7_file",
 *       "source" = "field_image"
 *     }
 *   },
 *   migration_dependencies = {
 *     "required" = {
 *       "d7_taxonomy_term",
 *       "d7_file"
 *     }
 *   }
 * )
 */
class CustomArticleMigration extends Migration {

  /**
   * {@inheritdoc}
   */
  public function prepareRow(Row $row) {
    // Get old data
    $old_body = $row->getSourceProperty('body/0/value');

    // Transform content (example: update image format)
    if ($old_body) {
      $new_body = preg_replace(
        '/<img src="\/sites\/default\/files\/([^"]+)"/',
        '<img src="/sites/default/files/new_structure/$1"',
        $old_body
      );

      // Add Bootstrap 5 classes
      $new_body = str_replace('<table>', '<table class="table table-striped">', $new_body);

      // Update the row
      $row->setSourceProperty('body/0/value', $new_body);
    }

    // Combine multiple old fields into one new paragraph field
    $featured = $row->getSourceProperty('field_featured');
    $highlight_color = $row->getSourceProperty('field_highlight_color');

    if ($featured == 1) {
      $paragraph_data = [
        'type' => 'featured_content',
        'field_color' => $highlight_color ?: 'blue',
        'field_display_mode' => 'highlighted',
      ];

      $row->setSourceProperty('field_content_components', [$paragraph_data]);
    }

    return parent::prepareRow($row);
  }
}

4. Parallel Implementation 🏎️🏎️

It's often impossible to simply "turn off" the old site and "turn on" the new one. I recommend:

👯‍♂️ Developing the new site in parallel with the operation of the old one
📈 Creating a gradual transition plan
🔄 Preparing a data synchronization strategy during the transition period
🔙 Developing a rollback plan in case of problems

Always have a safety net! 🥽

Practical Examples 🔍

Case: Educational Portal 🎓

I worked on migrating a large educational portal from D7 to D9. Instead of direct migration, we:

Conducted a full UX audit 🔍 and found that 40% of functionality was hardly used
Rethought the course structure 🏗️ — instead of dozens of separate fields, we created components with Paragraphs
Developed a new API architecture 📱 that allowed us to create a mobile app using the same backend
Implemented incremental migration 📦 of content, starting with the most popular sections

Example code for an API endpoint that allows retrieving course data for a mobile app: 📱✨

<?php

namespace Drupal\custom_course_api\Controller;

use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Cache\CacheableJsonResponse;
use Drupal\Core\Cache\CacheableMetadata;
use Drupal\node\Entity\Node;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;

/**
 * Controller for the courses API.
 */
class CoursesApiController extends ControllerBase {

  /**
   * Entity type manager.
   *
   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
   */
  protected $entityTypeManager;

  /**
   * {@inheritdoc}
   */
  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('entity_type.manager')
    );
  }

  /**
   * Constructor.
   *
   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
   *   Entity type manager.
   */
  public function __construct(EntityTypeManagerInterface $entity_type_manager) {
    $this->entityTypeManager = $entity_type_manager;
  }

  /**
   * Returns a list of courses in JSON format.
   *
   * @param \Symfony\Component\HttpFoundation\Request $request
   *   Request object.
   *
   * @return \Drupal\Core\Cache\CacheableJsonResponse
   *   JSON response with course data.
   */
  public function getCourses(Request $request) {
    $category = $request->query->get('category');
    $limit = $request->query->get('limit', 10);

    // Base query for courses
    $query = $this->entityTypeManager->getStorage('node')->getQuery()
      ->condition('type', 'course')
      ->condition('status', 1)
      ->sort('created', 'DESC')
      ->range(0, $limit);

    // Add filter by category if specified
    if ($category) {
      $query->condition('field_course_category', $category);
    }

    $nids = $query->execute();
    $courses = [];
    $cache_metadata = new CacheableMetadata();

    foreach ($nids as $nid) {
      $node = Node::load($nid);
      $cache_metadata->addCacheableDependency($node);

      // Structure data for the API
      $courses[] = [
        'id' => $node->id(),
        'title' => $node->label(),
        'description' => $node->field_description->value,
        'duration' => $node->field_duration->value,
        'image' => $node->field_image->entity 
          ? $node->field_image->entity->createFileUrl() 
          : NULL,
        'lessons' => $this->getLessonsData($node),
      ];
    }

    $response = new CacheableJsonResponse($courses);
    $response->addCacheableDependency($cache_metadata);

    return $response;
  }

  /**
   * Gets lesson data for a course.
   *
   * @param \Drupal\node\Entity\Node $course
   *   Course node.
   *
   * @return array
   *   Array with lesson data.
   */
  protected function getLessonsData(Node $course) {
    $lessons = [];

    if ($course->hasField('field_lessons') && !$course->field_lessons->isEmpty()) {
      foreach ($course->field_lessons->referencedEntities() as $lesson) {
        $lessons[] = [
          'id' => $lesson->id(),
          'title' => $lesson->label(),
          'preview' => $lesson->field_preview->value,
        ];
      }
    }

    return $lessons;
  }
}

Result: 🎉 Instead of a simple "clone" on a new platform, we got a modern, modular system where loading speed significantly increased, and conversion rates substantially improved as well. Win-win! 🏆

Comparison of Old and New Architecture 📊

Old Architecture (D7) 👵:

🏢 Monolithic system with heavy Views
🕸️ Convoluted structure of fields and taxonomies
📚 Large volume of PHP code in the theme
🐢 Slow database queries

Example of old theme code in D7 🙈:

<?php
/**
 * Implements hook_preprocess_node().
 */
function mytheme_preprocess_node(&$variables) {
  if ($variables['type'] == 'course') {
    // Check various conditions and add many template variables
    $node = $variables['node'];

    // Custom logic for determining course status
    if (!empty($node->field_start_date) && !empty($node->field_end_date)) {
      $start = strtotime($node->field_start_date[LANGUAGE_NONE][0]['value']);
      $end = strtotime($node->field_end_date[LANGUAGE_NONE][0]['value']);
      $now = time();

      if ($now < $start) {
        $variables['course_status'] = 'upcoming';
        $variables['course_classes'] = 'course--upcoming';
      }
      elseif ($now > $end) {
        $variables['course_status'] = 'completed';
        $variables['course_classes'] = 'course--completed';
      }
      else {
        $variables['course_status'] = 'active';
        $variables['course_classes'] = 'course--active';
      }
    }

    // Heavy queries and business logic in the template
    if (!empty($node->field_course_category)) {
      $term_id = $node->field_course_category[LANGUAGE_NONE][0]['tid'];
      $term = taxonomy_term_load($term_id);
      $variables['category_name'] = $term->name;

      // Complex query for related courses
      $related_query = new EntityFieldQuery();
      $related_query->entityCondition('entity_type', 'node')
        ->entityCondition('bundle', 'course')
        ->propertyCondition('status', 1)
        ->fieldCondition('field_course_category', 'tid', $term_id)
        ->propertyCondition('nid', $node->nid, '!=')
        ->range(0, 3);

      $result = $related_query->execute();
      if (isset($result['node'])) {
        $related_nids = array_keys($result['node']);
        $related_nodes = node_load_multiple($related_nids);

        $variables['related_courses'] = array();
        foreach ($related_nodes as $related_node) {
          $variables['related_courses'][] = array(
            'title' => $related_node->title,
            'link' => url('node/' . $related_node->nid),
          );
        }
      }
    }
  }
}

New Architecture (D9) 👶:

🧩 Modular system with clear separation of responsibilities
🧱 Component approach with Paragraphs and Twig
📲 Decoupling via JSON:API for mobile clients
⚡ Caching at different levels

Example of new code using services and Twig in D9 😍:

<?php

namespace Drupal\custom_course\Service;

use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Datetime\DrupalDateTime;
use Drupal\node\NodeInterface;

/**
 * Service for working with courses.
 */
class CourseService {

  /**
   * Entity type manager.
   *
   * @var \Drupal\Core\Entity\EntityTypeManagerInterface
   */
  protected $entityTypeManager;

  /**
   * Constructor.
   *
   * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
   *   Entity type manager.
   */
  public function __construct(EntityTypeManagerInterface $entity_type_manager) {
    $this->entityTypeManager = $entity_type_manager;
  }

  /**
   * Determines course status based on dates.
   *
   * @param \Drupal\node\NodeInterface $node
   *   Course node.
   *
   * @return array
   *   Array with course status data.
   */
  public function getCourseStatus(NodeInterface $node) {
    $status = [
      'state' => 'unknown',
      'class' => 'course--unknown',
    ];

    if ($node->hasField('field_start_date') && $node->hasField('field_end_date')) {
      $now = new DrupalDateTime('now');

      if (!$node->field_start_date->isEmpty()) {
        $start = $node->field_start_date->date;

        if (!$node->field_end_date->isEmpty()) {
          $end = $node->field_end_date->date;

          if ($now < $start) {
            $status = [
              'state' => 'upcoming',
              'class' => 'course--upcoming',
            ];
          }
          elseif ($now > $end) {
            $status = [
              'state' => 'completed',
              'class' => 'course--completed',
            ];
          }
          else {
            $status = [
              'state' => 'active',
              'class' => 'course--active',
            ];
          }
        }
      }
    }

    return $status;
  }

  /**
   * Gets related courses.
   *
   * @param \Drupal\node\NodeInterface $node
   *   Course node.
   * @param int $limit
   *   Maximum number of courses.
   *
   * @return array
   *   Array of related courses.
   */
  public function getRelatedCourses(NodeInterface $node, $limit = 3) {
    $related_courses = [];

    if ($node->hasField('field_course_category') && !$node->field_course_category->isEmpty()) {
      $term_id = $node->field_course_category->target_id;

      $query = $this->entityTypeManager->getStorage('node')->getQuery()
        ->condition('type', 'course')
        ->condition('status', 1)
        ->condition('field_course_category', $term_id)
        ->condition('nid', $node->id(), '!=')
        ->range(0, $limit)
        ->sort('created', 'DESC');

      $nids = $query->execute();
      if (!empty($nids)) {
        $related_nodes = $this->entityTypeManager->getStorage('node')->loadMultiple($nids);

        foreach ($related_nodes as $related_node) {
          $related_courses[] = [
            'title' => $related_node->label(),
            'link' => $related_node->toUrl()->toString(),
            'status' => $this->getCourseStatus($related_node),
          ];
        }
      }
    }

    return $related_courses;
  }
}

Example of a Twig template for a course 🎨:

{# node--course--full.html.twig #}
{% set status = course_service.getCourseStatus(node) %}

<article{{ attributes.addClass('course', status.class) }}>
  <header>
    <h1{{ title_attributes }}>{{ label }}</h1>

    {% if content.field_image %}
    <div class="course__image">
      {{ content.field_image }}
    </div>
    {% endif %}

    <div class="course__status-badge">
      {{ status.state|capitalize }}
    </div>
  </header>

  <div class="course__content">
    {% if content.field_description %}
      <div class="course__description">
        {{ content.field_description }}
      </div>
    {% endif %}

    {% if content.field_lessons %}
      <div class="course__lessons">
        <h2>{{ 'Lessons'|t }}</h2>
        {{ content.field_lessons }}
      </div>
    {% endif %}
  </div>

  {% if related_courses %}
    <div class="course__related">
      <h2>{{ 'Related courses'|t }}</h2>
      <div class="course__related-list">
        {% for course in related_courses %}
          <a href="{{ course.link }}" class="course-card {{ course.status.class }}">
            <h3>{{ course.title }}</h3>
            <span class="course-status">{{ course.status.state|capitalize }}</span>
          </a>
        {% endfor %}
      </div>
    </div>
  {% endif %}
</article>

Conclusions 🎓

Migration from Drupal 7 is not just a technical task but an opportunity to rethink your project. Instead of simply transferring the old architecture, I recommend:

🔍 Start with an audit and rethinking of project goals
🏗️ Design a new architecture using modern Drupal capabilities
📋 Develop a clear data migration strategy
📈 Implement changes gradually

This approach may seem more complex initially, but it will significantly reduce technical debt and create a better foundation for the development of your project in the future. Short-term pain for long-term gain! 💪

Useful Resources 📚

📖 Official Drupal migration guide
🚀 Drupal Migration System

What was your experience migrating from Drupal 7? Share in the comments! 💬

Alina Khmilevska, Full-stack Drupal developer with experience in creating complex web applications and participating in open-source projects. ✨👩‍💻

The Project of My Dreams: What I'd Create With Unlimited Resources 💭✨

Alina Khmilevska — Mon, 07 Apr 2025 07:08:41 +0000

Have you ever been asked in an interview: "If you had enough money, plenty of free time, and endless inspiration, what project would you work on?" 🤔 This question recently came up during one of my job interviews, and it really made me think about the passion projects that often get pushed to the backburner in our busy lives as developers.

The Interview Question That Sparked Reflection 💡

This seemingly simple question is actually quite revealing. It's not just about technical skills or career aspirations—it speaks to what truly excites us as creators and problem-solvers. It uncovers the innovations we believe are worth pursuing, even without the promise of immediate financial reward.

My Current Passion Projects 🚀

I'm fortunate enough to be actively working on two projects that I'm genuinely passionate about:

1. Remote Data Wiping System for Android 📱

My main personal project involves developing a system for remotely removing confidential data from Android mobile devices using push notification technology. It's built with Flutter and Firebase, combining cross-platform functionality with reliable backend services.

The idea came from recognizing a gap in security options for organizations that need to protect sensitive information when devices are lost, stolen, or compromised. While there are enterprise solutions available, I wanted to create something more accessible and customizable.

This project challenges me to dive deep into mobile security protocols, push notification architecture, and creating a seamless user experience around a fundamentally technical function. 🔒

2. Volunteering with UPSA on Drupal 💪

I'm also volunteering my time to develop a project for UPSA (Ukrainian Pharmaceutical Students' Association) using Drupal. There's something especially fulfilling about applying my technical skills to help an organization doing meaningful work for pharmacy students.

Working with Drupal on this project has reinforced my appreciation for its flexibility and robust content management capabilities, while also allowing me to give back to a community that provides valuable support for future healthcare professionals. 💙💛

What I'd Build With Unlimited Resources 🌈

If resources were truly unlimited, I'd expand these current projects but also branch into something more ambitious: an integrated platform for personalized education that adapts to individual learning styles using AI. 🧠

The system would:

Use machine learning to identify optimal learning patterns for each user 📊
Generate customized content based on how someone best absorbs information 📚
Integrate with AR/VR for immersive learning experiences 🥽
Apply gamification elements that adjust based on what motivates each learner 🎮

This idea comes from my belief that education technology has enormous untapped potential. We still largely teach everyone the same way, despite overwhelming evidence that learning is highly individualized.

The Common Thread in My Projects 🧵

Looking at my current work and dream projects, I notice they share a common theme: using technology to solve human-centered problems. Whether it's securing sensitive data, supporting student communities, or reimagining education, I'm drawn to projects that have tangible benefits for people's lives. ❤️

What About You? 👋

This interview question is worth considering regardless of your current career situation. What would you build if constraints were removed? The answer might reveal more about your true interests than you expect.

Are you currently working on any passion projects? What would you create with unlimited resources? I'd love to hear about your dream projects in the comments below! 👇

Animations on Landing Pages: My Experience and Implementation Approach 🚀

Alina Khmilevska — Mon, 07 Apr 2025 06:39:42 +0000

Recently worked on a project where the client ordered a landing page for their product. The Figma design looked great, but the client specifically emphasized the need for "living" animations on the page. "Make everything move! It should be dynamic and captivate visitors from the first seconds!" ✨

Initial Challenge 🤔

As a developer, I faced a task where good code alone wasn't enough — I needed creativity and a sense of balance. The client wanted a "wow effect," but I had to consider both technical limitations and usability.

In my opinion, today's web developers need not just coding skills, but also a good sense of design and aesthetics. We essentially become part-time art directors for our technical solutions, especially when it comes to animations and interactivity.

My Solution 💡

My first step was showing the client examples of different animation types from my personal reference collection (which I've gradually built from various projects). This helped us find common ground and agree on what "dynamic landing page" meant in our case.

For implementation, I used the AOS (Animate On Scroll) library, which makes it easy to add appearance animations when scrolling. I connected it via CDN:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

And then used attributes for different elements:

<div data-aos="fade-up" data-aos-duration="3000">
  <!-- Section content -->
</div>

Custom CSS Animations ✨

While AOS handles basic effects well, for truly unique animations I created a collection of custom CSS solutions:

1. "Floating" Button Effect for CTA 👆

@keyframes moveButton {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

.cta-button {
  animation: moveButton 2s infinite ease-in-out;
}

.cta-button:hover {
  animation-play-state: paused;
}

This animation adds subtle movement to the button, as if inviting you to click it. On hover, the movement stops, creating a pleasant interactive effect.

2. Pulsing Glow for Icons in Features Section 🌟

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(255, 255, 255, 0));
  }
  50% {
    transform: scale(1.2);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
  }
}

.feature-icon svg {
  animation: pulseGlow 3s infinite ease-in-out;
}

The icons slightly enlarge and begin to glow, drawing attention to the key benefits of the product.

3. Soft Image Pulsing in "How It Works" Section 📱

@keyframes pulseImage {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(159, 123, 255, 0));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 12px rgba(159, 123, 255, 0.3));
  }
}

.how-column img {
  animation: pulseImage 4s infinite ease-in-out;
}

Images pulse very softly and get a slightly purple glow that matches the client's brand colors.

4. Connecting Lines Animation Between Blocks ↔️

@keyframes growLine {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 365px;
    opacity: 0.5;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

.how-connection-lines span {
  animation: growLine 4s infinite ease-in-out;
  animation-delay: calc(var(--line-index) * 1s);
}

Lines between "How It Works" blocks sequentially appear and disappear, creating a sense of process and movement between steps.

5. Flickering Effect for FAQ Elements ❓

@keyframes faqGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(159, 123, 255, 0);
    background: #161616;
  }
  50% {
    box-shadow: 0 0 12px rgba(159, 123, 255, 0.8);
    background: #1e1e1e;
  }
}

.accordion-item.active {
  animation: faqGlow 2s infinite ease-in-out;
}

Active FAQ elements get a subtle glow effect, demonstrating their active state.

6. "Living" Badge Effect for Section Labels 🏷️

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(58, 137, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(58, 137, 255, 0.9);
  }
}

.section-badge {
  animation: pulse-glow 3s infinite ease-in-out;
}

Badges with section names get a pulsing blue glow, creating emphasis on the page structure.

Combining AOS and Custom Animations 🔄

To achieve maximum effect, I often combined AOS for the initial appearance of elements and custom animations for subsequent behavior:

<div class="feature-icon" data-aos="zoom-in" data-aos-duration="800">
  <svg class="icon" ... ></svg>
</div>

.feature-icon svg {
  animation: pulseGlow 3s infinite ease-in-out;
  animation-play-state: paused;
}

.feature-icon.aos-animate svg {
  animation-play-state: running;
}

This way, the icon first appears with a zoom-in effect, and then starts pulsing.

Result 🎉

The landing page turned out lively but not excessive. The hero section received the most animations, and then they gradually became more restrained, keeping the user's attention on the content. The client was satisfied with the balance between dynamics and functionality.

This work confirmed again how important it is for a developer to have not only technical skills but also a sense of aesthetics and a collection of ready-made examples to show clients.

What about you? 💬

What animation libraries do you use? GSAP, Anime.js, Lottie, or something else? Do you keep examples of successful implementations to show clients later? Perhaps you have your own life hacks for finding balance between a client's creative desires and technical limitations? Share in the comments! 👇

🎧 Coding Soundscapes: Music, Podcasts, or Silence? 🔇

Alina Khmilevska — Thu, 03 Apr 2025 18:04:57 +0000

Every developer faces the choice of what fills their ears while coding. Let's explore the options and their impact on productivity! 💻✨

🎵 Coding with Music

Benefits:

Blocks distractions and creates focus 🧘‍♀️
Regulates mood and energy levels ⚡
Can trigger flow states for deeper concentration 🌊

Best Practices:

Instrumental music typically works better than lyrics 🎹
Familiar tracks become less distracting 🔄
Match music intensity to task complexity 📊

Personally, I find my productivity soars when coding to Carpetman tracks. Something about those beats perfectly matches my coding rhythm and helps me maintain focus during long debugging sessions! 🎵

🎙️ Coding with Podcasts

Benefits:

Enables continuous learning while working 📚
Creates connection to the tech community 👥
Provides mental stimulation and new ideas 💡

Works Best For:

More mechanical coding tasks 🔧
Maintenance work and minor fixes 🛠️
Less complex programming challenges 📝

🤫 Coding in Silence

Benefits:

Allows deeper concentration without divided attention 🧠
Enables clearer thinking for complex problems 🧩
Follows your natural thought patterns 🌿

Best For:

Learning new programming concepts 📘
Debugging complex issues 🐛
Architecture planning and system design 🏗️

🔍 Finding Your Approach

Your ideal soundscape likely depends on:

The complexity of your current task 📈
Your personal cognitive style 🧠
Your working environment 🏢
Your experience level with the technologies 📊

The most effective approach is often task-dependent, switching between music, podcasts, and silence based on what the work demands at that moment! 🔄

What's your preferred coding soundtrack? 🎵 🎧 🔇

🏆 Certifying What You Already Know: Why We Take Courses to Prove Our Experience 📚

Alina Khmilevska — Thu, 03 Apr 2025 12:32:09 +0000

Recently, I've been reflecting on an interesting paradox in our professional development community. After three years of working with Drupal, I find myself spending time completing courses on topics I already know well in practice, simply to obtain a certificate. 🤔

💼 The Reality of Our Industry

Why do we, as experienced developers, spend time formally validating skills we already possess? This phenomenon is especially noticeable in web development, where many of us have taught ourselves technologies and frameworks.

Recently, I completed courses on Git and front-end development — technologies I've been using daily for several years. It was strange to realize I was spending time learning what I already knew and regularly applied in my work. But the certificate became a valuable addition to my resume, confirming skills I already had. ✅

🎭 The Certification Paradox

Honestly, we live in a world where we need to "prove" our knowledge even when it's evident from our work:

Clients often trust developers with certificates more 👔
HR specialists look for formal validation when filtering candidates 📋
Even we sometimes doubt our own knowledge without an "official stamp" 📜

🌟 My Dream of Acquia Certification

My next goal is Acquia Drupal certification. Although I work with Drupal daily and know it inside out, official certification from Acquia seems like a necessary step in my professional development. Not so much for gaining new knowledge, but for formal recognition of my experience and increasing client trust. 💪

The cost and preparation time are significant, but I consider this investment justified for long-term career development and attracting better projects. 💰

🤷‍♀️ What Does This Say About Our Industry?

Perhaps this is a symptom of a larger problem: we value formal validation more than actual experience. Or is it simply a pragmatic approach to a market where competition is high and you need to quickly prove your value? 🏃‍♀️

💭 Your Thoughts?

Have you taken courses just to get a certificate, even though you already had the knowledge? How do you prove your expertise to potential clients or employers?

Share your experience in the comments! Perhaps together we can find a better balance between formal validation and actual skills. 🔄

P.S. The irony is that while writing this post, I see a message from a recruiter looking for a "certified Drupal developer" — confirming my observation in real-time! 😂

From Drupal to Laravel: My Journey Taking on Unexpected Freelance Work

Alina Khmilevska — Wed, 02 Apr 2025 10:02:32 +0000

As a dedicated Drupal developer, I've built my career specializing in creating complex content management systems. However, a recent opportunity pushed me outside my comfort zone in the most rewarding way.

The Unexpected Opportunity

A friend's company suddenly needed some modifications to their Laravel-based website. With their regular developer unavailable and deadlines looming, they reached out to me, knowing I was a PHP developer but not that I specialized specifically in Drupal.

Despite my initial hesitation—I had theoretical knowledge of Laravel but limited practical experience—I decided to take on the challenge. The urgent nature of their request and my desire to help a friend's business motivated me to step into unfamiliar territory.

Discovering the Similarities

Once I dove into the codebase, I realized the task wasn't as daunting as I'd feared. My strong foundation in PHP meant I could understand the overall structure, even if some Laravel-specific patterns were new to me.

The changes needed were relatively straightforward: modifying some forms, adjusting validation rules, and updating several database queries. The MVC architecture, while implemented differently than in Drupal, followed logical patterns that I could quickly adapt to.

The Learning Process

Rather than trying to master Laravel completely, I took a targeted approach:

I focused only on understanding the parts of the codebase relevant to my tasks
Laravel's excellent documentation became my constant companion
When stuck, I asked specific questions in Laravel communities
I set up a local environment mirroring the production site for safe testing

What surprised me most was how quickly I could be productive. The actual implementation wasn't particularly difficult—it was mainly about understanding where and how to make the changes within Laravel's structure.

The Satisfying Outcome

Within a week, I successfully implemented all the requested changes. The site worked flawlessly, and my friend's company was thrilled with the quick turnaround. What started as a favor turned into a valuable learning experience.

This project taught me that with a solid foundation in programming concepts, transitioning between related technologies doesn't have to be overwhelming. Sometimes the barriers we perceive are more psychological than technical.

What I Learned About Technology Transitions

This experience showed me that:

Strong fundamentals in programming are more valuable than framework-specific knowledge
The confidence to problem-solve is often more important than prior experience
Freelancing sometimes requires flexibility with technologies
Small projects in new frameworks are perfect learning opportunities

While Drupal remains my primary expertise, I'm now more open to taking on occasional Laravel projects. This technological flexibility has already opened doors to more diverse freelance opportunities and made me a more well-rounded developer.

Have you ever taken on work outside your specialty? How did it turn out? I'd love to hear about your experiences in the comments.