Blog posts by Elucid Labs

The Significance of Sustainable Web Design: Utilizing Optimizely CMS for Environmental Responsibility

Tue, 02 Apr 2024 07:16:00 GMT

In today's digital era, where online presence holds utmost importance, the concept of sustainable web design has emerged as a crucial consideration for organisations aiming to reduce their environmental impact. With platforms such as Optimizely CMS at their disposal, businesses have powerful tools to not only create captivating digital experiences but also to prioritise sustainability. Let's delve into how Optimizely CMS can aid in sustainable web design efforts and why it's imperative for organisations to embrace these practices.

1. Grasping Sustainable Web Design:

Sustainable web design revolves around minimising the environmental footprint associated with websites and digital products. This entails optimising various aspects of web development and maintenance to lessen energy consumption, resource usage, and carbon emissions. Key elements of sustainable web design include efficient coding, optimised assets, renewable energy hosting, and minimalistic design principles.

2. The Importance to Organisations:

Embracing sustainable web design with Optimizely CMS offers several benefits for organisations:

Efficiency and Performance: Optimizely CMS provides robust tools for optimising website performance, including content delivery networks (CDNs), caching mechanisms, and image optimisation features. By improving page load times and reducing server load, organisations can enhance energy efficiency and deliver better user experiences.

Content Management Efficiency: Optimizely CMS streamlines content management workflows, allowing organisations to efficiently create, update, and publish content. This reduces the time and resources required for website maintenance, resulting in lower energy consumption and operational costs.

Scalability and Flexibility: Optimizely CMS offers scalability and flexibility to accommodate changing business needs and traffic fluctuations. This ensures that organisations can efficiently scale their digital infrastructure without sacrificing sustainability or incurring unnecessary environmental impact.

Data-Driven Decision Making: Optimizely CMS provides robust analytics and testing capabilities, enabling organisations to make data-driven decisions to optimise website performance and user engagement. By leveraging insights from A/B testing, multivariate testing, and user behaviour analytics, organisations can refine their digital strategies to minimise environmental impact while maximising effectiveness.

3. Utilising Optimizely CMS for Sustainable Web Design:

Organisations can leverage Optimizely CMS to implement sustainable web design practices in several ways:

Optimised Content Delivery: Utilise Optimizely CMS's built-in CDN capabilities to deliver content efficiently and reduce server load, minimising energy consumption and carbon emissions associated with content delivery.

Image and Asset Optimisation: Leverage Optimizely CMS's image optimisation features to compress images and other media files, reducing page load times and data transfer, and decreasing environmental impact.

Renewable Energy Hosting: Choose hosting providers for Optimizely CMS deployments that prioritise renewable energy sources and carbon neutrality, ensuring that the digital infrastructure aligns with sustainability goals.

Content Performance Optimisation: Use Optimizely CMS's analytics and testing tools to optimise content performance, improve user engagement, and reduce bounce rates, ultimately minimising environmental impact by maximising the efficiency of digital interactions.

In conclusion, Optimizely CMS empowers organisations to not only create exceptional digital experiences but also to prioritise sustainability and environmental responsibility. By leveraging Optimizely CMS's robust features and capabilities for sustainable web design, organisations can minimise their environmental footprint while delivering compelling digital experiences that drive business success.

Moving IIS URL Rewrite Rules to .NET Core: A Practical Guide

Tue, 12 Mar 2024 21:56:00 GMT

In the fast-paced world of web development, staying up-to-date with the latest technologies is crucial. As businesses evolve, so do their digital needs. One common challenge faced by developers is migrating URL rewrite rules from IIS (Internet Information Services) to .NET Core. If you're embarking on this journey, fear not! This guide will walk you through the process in a clear and practical manner.

Understanding the Basics

URL rewriting plays a crucial role in managing web traffic and optimizing user experience. It involves intercepting incoming requests and redirecting them to different URLs based on predefined rules. In the IIS environment, these rules are typically configured in the web.config file. However, with .NET Core, URL rewriting is handled differently, using middleware within the application itself.

Step 1: Assess Your Current Setup

Before diving into migration, it's essential to understand your existing URL rewrite rules configured in the web.config file. Take stock of each rule, noting down its pattern and rewrite destination.

Step 2: Install the Microsoft.AspNetCore.Rewrite Package

To handle URL rewriting in .NET Core, you'll need to install the Microsoft.AspNetCore.Rewrite package. This can be done easily using the .NET CLI or NuGet Package Manager in Visual Studio.


dotnet add package Microsoft.AspNetCore.Rewrite

Step 3: Configure URL Rewriting Middleware

Once the package is installed, you'll configure the URL rewriting middleware in the Startup.cs file of your .NET Core application.

 
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.AspNetCore.Rewrite;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        // Add any necessary services here
    }

    public void Configure(IApplicationBuilder app)
    {
        // Other middleware configurations

        using (StreamReader iisUrlRewriteStreamReader =
            File.OpenText("IISUrlRewrite.xml"))
        {
            var options = new RewriteOptions()
               .AddIISUrlRewrite(iisUrlRewriteStreamReader);

            app.UseRewriter(options);
        }

        // Additional middleware configurations
    }
}

Step 4: Migrate URL Rewrite Rules

Now, it's time to migrate your existing URL rewrite rules from the web.config file to the IISUrlRewrite.xml file. You can keep the exisiting rewrite element with all your current iis rewrite rules in place, see the below.

Step 5: Test and Iterate

After migrating your rules, thorough testing is essential. Verify that all URLs are being rewritten / redirected correctly without any unexpected redirects or errors.

Conclusion

Migrating URL rewrite rules from IIS web.config to .NET Core as part of an CMS 12 upgrade may seem daunting, but with proper guidance, it can be a smooth transition. By following the steps outlined in this guide, you can ensure that your application's URL rewriting functionality remains intact while embracing the capabilities of .NET Core.

Remember, migration is an opportunity to optimize and improve your application for the future. So, embrace the change, and happy migrating!

HTTP/3: Fast and Secure

Sun, 09 Jul 2023 20:31:00 GMT

HTTP/3 with Optimizely DXP

In the ever-evolving landscape of web technologies, HTTP/3 emerges as a significant advancement, promising faster and more secure communication between clients and servers. As a solution architect, it's essential to stay up-to-date with the latest protocols and understand their implications. In this blog post, we will explore what HTTP/3 is, why it is important, and when we can expect its widespread availability.

What is HTTP/3?

HTTP/3, also known as Hypertext Transfer Protocol version 3, is the next generation of the HTTP protocol. It is being developed to address the limitations and challenges faced by its predecessor, HTTP/2. HTTP/3 is designed to improve the efficiency of web communications by utilizing the User Datagram Protocol (UDP) instead of TCP (Transmission Control Protocol).

The Importance of HTTP/3:

Enhanced Performance: HTTP/3 leverages the QUIC (Quick UDP Internet Connections) transport protocol, which significantly improves performance. QUIC allows for lower latency and reduced connection setup time, leading to faster loading times for web pages and improved overall browsing experience.
Improved Security: HTTP/3 incorporates encryption as a fundamental part of the protocol. This means that data sent using HTTP/3 is encrypted by default, enhancing security and privacy for users. Additionally, the use of QUIC's built-in encryption makes it more resistant to certain types of attacks compared to previous versions of HTTP.
Network-Friendly: UDP-based communication used in HTTP/3 ensures better network utilization by reducing the head-of-line blocking problem. This issue often occurs with TCP, where a packet delay or loss can affect the delivery of subsequent packets. HTTP/3's QUIC protocol eliminates this problem, allowing for parallel request and response multiplexing.
Seamless Migration: HTTP/3 maintains backward compatibility with previous versions of the HTTP protocol, making it easier for developers to transition their applications. Existing websites and APIs can gradually adopt HTTP/3 without requiring significant changes to the underlying infrastructure.

When will HTTP/3 be available?

HTTP/3 is still in development and actively being deployed by several organizations. However, its widespread availability depends on multiple factors, including browser and server support. As of the time of writing, several major browsers, including Chrome, Firefox, and Edge, have experimental support for HTTP/3. Cloudflare has added support for HTTP/3 and you can easily switch it on, below are some steps on how to achieve this.

Get started using HTTP/3

HTTP/3 is set to revolutionize the web with its improved performance, enhanced security, and better network utilization. As solution architects, it's important to familiarize ourselves with this evolving protocol to leverage its benefits for our clients and users. While HTTP/3 is not widely available just yet, you can start to experiment with HTTP/3 by enabling this in the three most major browsers.

Enabling HTTP/3 in Cloudflare involves a few straightforward steps. Here's a guide on how to enable HTTP/3 for your website:

Log in to your Cloudflare account: Access your Cloudflare account by visiting the Cloudflare website and entering your credentials.
Select your domain: Once logged in, select the domain for which you want to enable HTTP/3. This will open the dashboard for that particular domain.
Go to the "Network" tab: In the Cloudflare dashboard, navigate to the "Network" tab located at the top of the page. Click on it to access the network settings for your domain.
Enable HTTP/3: Within the "Network" tab, scroll down until you find the "HTTP/3" section. Toggle the switch to enable HTTP/3 for your domain.
Save and deploy changes: After enabling HTTP/3, click on the "Save" or "Deploy" button (the exact wording may vary) to save your changes and apply them to your domain.
Verify HTTP/3 activation: Once you have enabled HTTP/3, you can verify its activation by visiting your website and checking the network tab in your browser's developer tools. Look for the protocol being used for your website's requests. If it shows "h3" or "quic" instead of "http/1.1" or "http/2," it means HTTP/3 is successfully enabled.

Please note that enabling HTTP/3 in Cloudflare relies on the browser and client support for HTTP/3. While major browsers have support for HTTP/3, not all clients may be compatible at the time of implementation. Cloudflare automatically negotiates the best protocol available between the client and their servers, falling back to HTTP/2 or HTTP/1.1 if HTTP/3 is not supported.

Optimizely DXP Support HTTP/3

It is worth noting at the time of writing I reached out to Optimizely to see if it is possible to switch on / enable HTTP/3 in the DXP environment. Optimizely have advised that currently HTTP/3 is not supported in DXP and due to this they won't activate in cloudflare.

They did however suggest that I raise a feature request and the team will consider this in future developments.

I had a quick check of the feature requests first before creating a duplicate request and I found this has already been request. If you too would like this feature implemented I would suggest you vote for this request.

Conclusion

In conclusion, HTTP/3 presents a significant advancement in web communication, offering improved performance, enhanced security, and better network utilization. As solution architects, it's crucial for us to understand the implications of this evolving protocol and leverage its benefits for our clients and users. While HTTP/3 is still being developed and its widespread availability depends on browser and server support, it is possible to start experimenting with HTTP/3 in Cloudflare.

Enabling HTTP/3 in Cloudflare involves straightforward steps outlined in the blog post. However, it's important to note that at the time of writing, Optimizely DXP does not support HTTP/3 in its environment. The Optimizely team suggests raising a feature request and encourages users to vote for its implementation.

As HTTP/3 continues to gain traction and more organizations adopt it, we can anticipate a future where faster, more secure, and efficient web communications become the norm. By staying informed and actively exploring the possibilities of HTTP/3, we can position ourselves as forward-thinking solution architects ready to embrace the future of web technologies.

Optimizely DXP Image Optimization

Tue, 16 Nov 2021 21:04:51 GMT

Optimizely DXP is a cloud-first approach to customer engagement including high availability and performance, easy connectivity with other cloud services and existing systems, ability to manage spikes in customer demand, and a platform that is ready to seamlessly adopt the latest technology updates.

Optimizely DXP also includes a Content Delivery Network provided by Cloudflare for performance and security optimization.

I want to focus upon the optimization side of Cloudflare, more specifically image optimization.

Cloudflare has 3 products to help with image optimization, Cloudflare Image, Cloudflare Image Resizing, Cloudflare Polish. For the purpose of this post I will focus on Cloudflare Polish as this is enabled by default in Optimizely DXP, you can read more about the other products here.

Cloudflare polish automatically optimizes images upon your site whenever is is fetched from you site.

Whenever you make the first request to retrieve and image you will notice within the headers the 'cf-cache-status' will be set to 'MISS'. Cloudflare is telling us it tried to retrieve the image from cache, however it did not find it and so requested it from the origin.

If you were to wait a few seconds and refresh the image you will notice that the 'cf-cache-status' is now 'HIT'.

To confirm that Polish has been applied we can check the 'cf-bgj' header returns the image quality setting 'imgq'. We can also check the 'cf-polished' header to confirm Polish status and returns the image quality setting (qual) and original size (origSize).

The above headers can confirm that polish is working working, however we can do better and ensure that images are being served in next generation format. To do this we can review the 'content-type' header and ensure this is returning 'image/webp', comparing this to the 'cf-polished' original format (origFmt) we can see the original format of the image was png and has been converted to webp.

While Cloudflare Polish automatically optimizes images, it will only optimize the image if the webp image is smaller than the original image.

If we review the below 'cf-polished' header below. We can see the status is set to 'webp_bigger' this is informing us that the image optimization on this image would provide no benefit.

Hopefully someone else finds this information useful. If you have any questions please drop a comment below.

Working with Optimizely Projects

Fri, 05 Nov 2021 11:38:32 GMT

Optimizely has a featured called 'Projects', which allows editors to collaborate on content before scheduling to publish.

Problem

While work on a project that imports hundreds, of pieces of content. These pieces of content are added to a project for the team to review and mark the items as ready to publish.

You can see the problem here in that with hundreds of pieces of content to review, marking each content piece as ready to publish could take some time.

Solution

To over come the problem we decided to create a scheduled job that would loop over all items in a project and mark them as ready to publish.

To retrieve the projects and their project items we can get an instance of the 'ProjectRepository' into our scheduled job.

Once we have the project and its items we can then loop over the project items and use the 'IContentChangeManager' interface to update the status of the content items.

var projects = _projectRepository.List();

foreach (var project in projects)
{
    var projectItemIds = _projectRepository.ListItems(project.ID).Select(x => x.ID);

    foreach (int projectItemId in projectItemIds)
    {
        ProjectItem projectItem = GetProjectItem(projectItemId);
        if (projectItem != null)
        {
        CommitResult commitResult = _contentChangeManager.Commit(projectItem.ContentLink, SaveAction.CheckIn);
        }
    }
}

public ProjectItem GetProjectItem(int projectItemId) => _projectRepository.GetItem(projectItemId);

I just wanted to share this piece of code with anyone who was trying to achieve something similiar.

Translate Categories in Episerver using DbLocalizationProvider

Thu, 21 Jan 2021 20:52:53 GMT

While doing some investigation into localization with Episerver I came across a useful library that helps content editors easily translate resources that are normally stored in xml, by storing them within a database.

One of the areas that I investigated was translating the built in categories within Episerver. This is possible to do using a strongly-typed category definition.

[LocalizedCategory]
public class SampleCategory : Category
{
    public SampleCategory()
    {
        Name = "This is sample cat. from code";
    }
}

This may be suitable in some cases, however in some scenarios where the categories already exist this may not be the best course of action.

The DbLocalizationProvider has a way to manually create resources. Using this I set about creating a resource manually for each category.

Each resource needs a unique resource key, the translation /value and the language the translation is for.

In order to create each resource I used a stored procedure that would iterate over the categories and build out a unique resource key, whilst assigning the value and language.

using DbLocalizationProvider.Sync;
using EPiServer.DataAbstraction;
using EPiServer.PlugIn;
using EPiServer.Scheduler;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;

namespace LangTransaltion.Business.Localization
{
    [ScheduledPlugIn(DisplayName = "Category Localization Scheduled Job")]
    public class CategoryLocalizationScheduledJob : ScheduledJobBase
    {
        private readonly CategoryRepository _categoryRepository;
        private readonly ISynchronizer _synchronizer;

        private bool _stopSignaled;
        private int _categoryCounterTotal = 0;
        private IList<ManualResource> _allCategories;

        public CategoryLocalizationScheduledJob(CategoryRepository categoryRepository, ISynchronizer synchronizer)
        {
            IsStoppable = true;
            _categoryRepository = categoryRepository;
            _synchronizer = synchronizer;
        }

        /// <summary>
        /// Called when a user clicks on Stop for a manually started job, or when ASP.NET shuts down.
        /// </summary>
        public override void Stop()
        {
            _stopSignaled = true;
        }

        /// <summary>
        /// Called when a scheduled job executes
        /// </summary>
        /// <returns>A status message to be stored in the database log and visible from admin mode</returns>
        public override string Execute()
        {
            OnStatusChanged($"Starting execution of {this.GetType()}");

            _allCategories = new List<ManualResource>();

            var root = _categoryRepository.GetRoot();

            IterateCategories(root, $"Categories.{root.Name}");

            _synchronizer.RegisterManually(_allCategories);

            return $"{_categoryCounterTotal} categories checked";
        }

        /// <summary>
        /// Iterates over categories build a unique key
        /// </summary>
        /// <param name="currentParent"></param>
        /// <param name="path"></param>
        private void IterateCategories(Category currentParent, string path)
        {
            var categories = currentParent.Categories.ToList();

            foreach (var category in categories)
            {
                if (_stopSignaled) break;

                _categoryCounterTotal++;

                OnStatusChanged($"Working on category {category.Name}, child of: {currentParent.Name}");

                _allCategories.Add(new ManualResource($"{path}.{category.Name}", $"{category.Description}", new CultureInfo("en")));

                IterateCategories(category, $"{path}.{category.Name}");
            }
        }
    }
}

After running the scheduled job the new resources will be added to the database.

The final piece of the puzzle was to retrieve the resource key whenever we use the category on the site. In order to do this I created an extension method to return the resource key based on the current category.


using EPiServer.DataAbstraction;
using System.Collections.Generic;

namespace LangTransaltion.Helpers
{
    public static class CategoryHelper
    {
        /// <summary>
        /// Gets the category resource key.
        /// </summary>
        /// <param name="category"></param>
        /// <returns></returns>
        public static string GetResourceKey(this Category category)
        {
            var categoryList = new List<string>();

            GetParentCategories(category, categoryList);

            categoryList.Reverse();

            var resourceKey = $"Categories.{string.Join(".", categoryList)}";

            return resourceKey;
        }

        /// <summary>
        /// Gets the parent categories, starting a from a root category.
        /// </summary>
        /// <param name="currentCategory"></param>
        /// <param name="categoryList"></param>
        private static void GetParentCategories(Category currentCategory, List<string> categoryList)
        {
            categoryList.Add(currentCategory.Name);

            if (currentCategory.Parent != null)
            {
                var parent = currentCategory.Parent;

                GetParentCategories(parent, categoryList);
            }

        }
    }
}

Now when you are using a category and wish to retrieve the translation you can simply use

...
DbLocalizationProvider.LocalizationProvider.Current.GetString(category.GetResourceKey())
...

I would like to thank the Valdis Iljuconoks for helping me out and answering some questions I had along the way.

Episerver Visitor Group Configuration

Tue, 11 Dec 2018 11:58:22 GMT

Configuring episerver visitor groups geolocation criteria.

Episerver Visitor Group Configuration

Tue, 11 Dec 2018 10:58:22 GMT

Configuring episerver visitor groups geolocation criteria.