Forem: Michael Eustace

Get to know Xperience by Kentico: Unlocking performance insights with MiniProfiler

Michael Eustace — Wed, 26 Jun 2024 16:19:47 +0000

In today's fast-paced digital world, performance is a critical factor in ensuring a seamless user experience, and as developers, we constantly seek tools that help us optimize and monitor the performance of our applications.

One such powerful tool is MiniProfiler, and when integrated with Xperience by Kentico, it offers invaluable insights into your application's performance.

In this article, we'll explore the benefits of this integration and how you can set it up to elevate your web development projects.

📟 What is MiniProfiler?

MiniProfiler is a simple but effective tool for profiling and monitoring the performance of your web applications. It provides detailed insights into the performance of your code, database queries, and HTTP requests, helping you identify bottlenecks and optimize your application's performance.

I've personally been using it for over a decade, and I find myself coming back to it again-and-again because:

It's just so easy to set up and configure
It helps you identify the most evil thing that can slow down your application...SQL queries.

✅ Kentico has an integration for MiniProfiler

Kentico's dev team, working on the Xperience by Kentico product, were using MiniProfiler internally, so they decided to open-source the integration earlier this year so that developers, like us, can use it.

Thanks Kentico dev team 🙌

🔧 How do I integrate MiniProfiler into my Xperience by Kentico web application?

Install the Kentico.Xperience.MiniProfiler nuget package into your XbyK project.
Open your Program.cs file and add the following code:

using Kentico.Xperience.MiniProfiler;

...

builder.Services.AddKentico(features =>
{
    // Kentico builder services configuration ...
});

...

var env = builder.Environment;

if (env.IsDevelopment())
{
    // After the call to builder.Services.AddKentico( ... );
    builder.Services.AddKenticoMiniProfiler();
}

...

var app = builder.Build();

app.UseKentico();

// After call to UseKentico()

if (env.IsDevelopment())
{
    app.UseMiniProfiler();
}

Underneath-the-hood, this code sets up and configures MiniProfiler's middleware, along with the script that needs adding to the HTML body
tag that renders the profiler UI when you load a page.

🏃 You're all set

Run your local website and you will see the profiler display its output in the top-left of the page.

What you are seeing here is, as MiniProfiler themselves put it:

MiniProfiler is generally setup as 1 profiler per “action” (e.g. an HTTP Request, or startup, or some job) of an application. Inside that profiler, there are steps. Inside steps, you can also have custom timings.

So, a list of profilers in the top-left of the screen is displayed. Click one to reveal a list of the steps that were executed as part of that profiler. Each step displays the total duration taken to execute the step.

If any SQL queries were executed as part of the step, then they are display as blue links. Click one and a modal popup displays the SQL query statements that were performed, which enables you to start thinking about how you might optimise your the code that creates the query. Great stuff 🙌

⏱️ Adding custom timing

This is where things get really interesting. A pretty common use case is that you might want to time a specific piece of code, and any resulting SQL queries executed as part of that code.

Say you have a widget and you want to check the duration of a call to a repository method from the widget's ViewComponent:

1. Add the MiniProfiler namespace in your using directives in the ViewComponent of your widget:

using StackExchange.Profiling;

2. Then wrap your code with MiniProfiler's Step extension method, giving the step a custom name:

IEnumerable<Coffee> products = Enumerable.Empty<Coffee>();

using (MiniProfiler.Current.Step("Custom: CoffeeRepository.GetCoffees()"))
{
    products = await repository.GetCoffees();
}

3. Now build and run the site again, navigate to a page that has that widget placed on it, expand the relevant profiler:

This is really powerful stuff as it enables you to measure the performance of your code, quickly and easily, then it's up to you to hone your code to increase performance.

⚠️ Ensuring you have caching disabled

In my example screenshot above, I'm performing these web page loads straight after having built my Dancing Goat sample project, so there won't be any cached data at this point. This means I will see all of the SQL calls profiled as they haven't been cached at this point.

Subsequent reloads of the same page will display reduced list of steps as the resultant data returned from SQL queries are cached by the system, and so the MiniProfiler UI won't show them all.

Kentico's Dancing Goat Xperience by Kentico sample site follows their best practice for data caching and output caching where the explicitly recommend disabling caching for pages when view in preview mode, so if your project has followed this approach, then you can always load the page in the preview tab when authoring the page in your website channel, and you'll see the MiniProfiler UI.

Alternatively, you might have architected your caching approach to utilise an app settings key to disabled/enable caching at a global level.

🚀 Conclusion

Integrating MiniProfiler with Xperience by Kentico is a powerful way to gain deep insights into the performance of your web applications. By following the steps outlined above, you can set up MiniProfiler and start optimizing your application's performance, ensuring a smooth and efficient user experience.

Reference

Get to know Xperience by Kentico: The Page Selector form component

Michael Eustace — Tue, 18 Jun 2024 14:19:59 +0000

Form Components are a great way of providing some pretty powerful content editing functionality to marketers and editors in Xperience by Kentico.

They enable us web developers to create fields in editing dialogues within the admin UI that, in-turn, provide functionality to marketers for them to enter and select data to display on their website.

This is achieved by programmatically assigning form components to the properties of widgets, sections, page templates, and much more, by using Form component attributes.

Xperience by Kentico provides a whole host of form components out-of-the-box, and this is really powerful as it gives us web developers the flexibility to provide different content editing experiences to suit the needs of marketers, who these days, are looking to content manage their marketing channels faster, and more effectively, than ever.

What is the Page Selector?

One of my favourite form components is the Page Selector, which enables you to provide a method for editors to select pages from the site tree in a website channel.

As a developer, you can then work with the data of those selected pages to provide functionality in custom components.

A trip down memory lane...

The Page Selector has been through a number of iterations in-line with Kentico's development of their DXP. Each time, they've added to its capabilities to make the feature more-and-more useful...

Kentico Xperience 12

The page selector started its journey in Kentico Xperience 12, where it was introduced as a straightforward method for enabling editors to select a single page from the content tree.

Kentico Experience 12 Page Selector

Under this guise, the component returned the NodeGuid of the selected page. Its configuration was fairly limited, but it did have a RootPath property that allowed you to limit the selection of pages to those that were located in a specific section of the content tree, otherwise the entire tree was available.

Kentico Xperience 13

In Kentico Xperience 13, Kentico added the ability for marketers to select multiple pages. In addition, they added the MaximumPages property that enabled developers to limit the number of pages that could be selected.

Kentico Xperience 13 Page Selector

This was a great improvement for editing efficency. Imagine you were in the scenario where marketers had to select three pages to populate a widget with call-to-action links, you could now have one form component to select all three pages to link to, instead of having three separate form components, thus reducing clutter in the widget dialog box, and producing a much more streamlined experience.

Xperience by Kentico

In Xperience by Kentico, the form component was rebuilt from the ground up to work with Kentico's newly redesigned admin UI, which is built in React, sitting on .Net.

Xperience by Kentico Page Selector

The thing I really like though is that they took the opportunity to add the killer feature of making selected pages sortable by the marketer.

With KX13, you had to select the desired pages in the order in which you wanted them to be displayed. And if you wanted to change the order, you had to deselect all pages, and then reselect them in the order.

Now with Xperience by Kentico, that issue has disappeared, with the addition of the Sortable property, which when set to true, enables the drag-and-drop handles, illustrated in the above screenshot.

A practical example

Imagine you are building an Article Cards widget for the page builder, and you'd like marketers to be able to select the articles they want to display in the widget.

Assuming you have content modelled your articles to be pages in the content tree, you can create a property for your widget, and utilise the WebPageSelectorComponent, which is the form component attribute you need to use when you want to render the Page Selector for a widget property:

using System.Collections.Generic;
using System.Linq;
using CMS.Websites;
using Kentico.PageBuilder.Web.Mvc;
using Kentico.Xperience.Admin.Websites.FormAnnotations;

public class CardWidgetProperties : IWidgetProperties
{
    [WebPageSelectorComponent(
        TreePath  = "/Articles", 
        MaximumPages = 3, 
        Sortable = true, 
        ItemModifierType = typeof(WebPagesWithUrlWebPagePanelItemModifier), 
        Label = "Select pages", 
        Order = 2)]
    public IEnumerable<WebPageRelatedItem> SelectedArticlePages { get; set; } = Enumerable.Empty<WebPageRelatedItem>();
}

As you can see, I've added the following configuration properties:

TreePath - so that it only offers up pages that sit within our Article section of the tree. We want to lead marketers to the correct section of the content tree to make their life easier. It wouldn't be a great experience if we just displayed the entire content tree, otherwise as the tree grows in size, it will make it more difficult for them to find the correct section in the tree.
MaximumPages - we've ensured marketers can only select a maximum of 3 pages, as (hypothetically) in this case the design and solution dictate a maximum limit of article cards to be displayed
Sortable - as we'd like marketers to be to control the sort order of the article cards separate for each instance of the widget.
ItemModifierType - lets us set a type that implements the IWebPagePanelItemModifier interface, and in this case, we are using the built-in WebPagesWithUrlWebPagePanelItemModifier type, which ensure that only pages that have the URL feature enabled are selectable in the content tree. Content-only pages are still displayed, but in a disabled state.

And of course, there are the generic Label and Order properties for defining the text for the property's label, and the order in which it appears in the widget dialog in relation to other properties.

In conclusion

The Page Selector is now a very useful, mature tool in the Kentico web developer's arsenal that helps to streamline the editing process for marketers.

Xperience by Kentico: 5 useful developer resources for getting started with XbyK

Michael Eustace — Fri, 31 May 2024 14:13:54 +0000

Have you tried Xperience by Kentico yet? 🤔

If not, it’s this easy to get started. 🙌 Here’s 5 useful resources to get you going:

📖 1. Read this blog post on the Kentico Community forum

It that will inform you where the documentation lives, how to access tutorials and quick-start guides https://community.kentico.com/blog/learning-xperience-by-kentico-as-a-software-developer

✉ 2. Sign-up to the Kentico Community Portal newsletter

As a developer, it’s one of the best methods for staying informed on the latest releases, useful articles and guides https://community.kentico.com/newsletter-signup

📽 3. Watch these brilliant technical spotlight videos by Kentico’s Lead Product Evangelist, @seangwright

We used these recently at our in-house agency hackathon to get developers, who were new to Xperience by Kentico, up-to-speed in minutes with setting up local environments (on Windows/Mac/Linux), creating content types, page templates, widgets, and using continuous integration https://www.youtube.com/playlist?list=PL9RdJplq_ukaIt4_V4GAbeJ_qk1AKuFrP

📄 4. Get to know the developer documentation

Kentico’s documentation is second-to-none and it’s one of the many reasons why I’ve been able to successfully build and deliver solutions for our clients, quickly and efficiently, as every aspect of the product is immaculately documented in a format that is easy to read, understand, and action. https://docs.kentico.com/developers-and-admins

📢 5. If you get stuck, you’re not alone...

Ask a question on the Kentico Community Portal Q&A forum. Other developers and Kentico MVPs, even Kentico employees, will be on-hand to help https://community.kentico.com/q-and-a

Become Kentico Developer Certified?

Once you're up-and-running, and have accrued some experience with...Xperience, why not consider becoming a Kentico Certified Developer? The Xperience by Kentico Certified Developer exam is not currently available, but will be released sometime mid-2024, but in the meantime, you can draw some learnings for the equivalent Kentico Xperience 13 developer exam in my post: 5 tips on how to ace the Kentico Certified Developer exam 😉

Good luck 👍

Kentico Xperience 13: 5 tips on how to ace the Kentico Certified Developer exam

Michael Eustace — Mon, 19 Feb 2024 00:06:13 +0000

I've been building websites using Kentico for nearly a decade, and during that time, I've witnessed the product go from strength-to-strength, evolving into the fantastic DXP that it is today.

But with an ever improving product, comes new features, new development models and, therefore, the need to keep abreast of these developments so that, as a developer, you can get the most from the product.

And of course, there’s no better way to showcase your knowledge of Kentico to the world, than by completing the Certified Developer exam.

Having sat the exam three times previously (you need to re-sit the exam every two years to remain certified), last month signalled the end of my (then) current certification, so it was time to prep' to take the exam, once again.

So, herein lies a list of my top-tips to help you enter the exam with excitement, confidence, and hopefully a few less nerves.

1. Know the format 📋

The exam format has largely been the same over the years, but at this time of writing, the current format is as follows.

It's web-based
You have 90 minutes to complete 50 questions.
The exam questions consist of single choice answers.
You can navigate forward and back through your answers, meaning if you pass on a question, you can always go back to it later if you have time left over
The pass mark is 70%, meaning you can incorrectly answer 15 questions and still pass.

Now if we're talking exam-tactics, you're probably thinking, "50 questions in 90 minutes, that's 1min 48secs I should try to complete each question in."

Well yes...and no.

Yes it's good to stay disciplined and attempt to answer questions in a timely fashion, but the cold-hard-truth is that you might well get stuck on a question (or two, or three), and spend longer than that searching for the answer. The trick is not to let this panic you, as conversely, there will be questions that you will know the answer to straight away, so it'll all balance itself out.

2. The Kentico Xperience 13 documentation is your friend 💼

Remember, this is an open-book exam, you don't need to be a complete expert in Kentico. This is as much a test on how efficent you are at searching for solutions in the documentation, as it is your knowledge of the product - kinda like the real world.

Take time to read and familiarise yourself with the Kentico docs, its layout and search functionality, so that when you are hit with that tricky question, you already know how to search and find the information you need to answer it.

3. Know the product 🧠

The exam is not something you can just sit without any prior real-world experience of developing a website using Kentico.

I often say to devs that you need a couple of builds under-your-belt before attempting the exam, and then it's a case of identifying which areas of Kentico you are not familiar with, and brushing up on them.

I often find that developers who are newer to Kentico will be familiar with features such as...

The page builder
Creating page templates
Creating widgets
Creating page types
Displaying content on live site

...but not so much in areas like...

K# and macro syntax
Content staging
Configuring Kentico in a team environment
Continuous integration
and more

That said, the exam tests your knowledge of all areas of Kentico. No stone is left unturned, so make sure you read the Kentico preparation guide (referenced at the bottom of this article).

4. Take the sample exam ASAP 📝

Once you've purchased the exam voucher, you will be given access to a shorter sample exam. Consisting of 11 questions, the sample exam is presented in the format of the actual exam.

This presents you with a great opportunity to get a feel for the exam, the questions, format, and to benchmark your current knowledge.

5. Take the day to revise 📆

On the day of the exam, take the day to revise, read through your notes, whatever you feel works best to give you best chance to pass the exam, then take the exam when you are ready.

If you don't pass, not to worry, you can resit the exam after 24 hours. Take stock and try and think about the area where you need to improve upon before re-sitting.

✅ Once you passed the exam though, enjoy the moment, and the rush, tell all your friends, and update your LinkedIn profile with your new achievement. 📢

Good luck.

Useful resources

Read the Kentico's Developer Certification preparation guide
Read more about the Kentico Certified Developer exam
Learn about training courses available for Kentico developers

How to generate a trusted local IIS certificate for .Net development

Michael Eustace — Thu, 31 Aug 2023 16:07:28 +0000

As a .Net developer, I often run .Net websites in a local IIS instance on my developer machine, and it can be useful to be able to serve the site over HTTPS.

To create a trusted, local, self-signed SSL certificate, follow these steps.

1. Generate the certificate

Open Powershell and enter the following command:

New-SelfSignedCertificate -DnsName "mysite.local" -CertStoreLocation "cert:\LocalMachine\My"

2. Trust the certificate

We now need to ensure the certificate is trusted on the local machine, otherwise you'll get a certificate warning when you navigate to your local website over HTTPS in a browser.

To do this in Windows 10:

Start -> Run certlm.msc to open the Certificate Manager tool
Expand the Intermediate Certification Authorities folder in the left window of the tool
Click the Certificates folder
Find the certificate you just generated in the right-hand window
Click and drag it over the Trusted Root Certification Authorities folder in the left window - this will set the certificate as trusted on your local machine.

3. Update IIS to use the new certificate

Now you can create/update the HTTPS binding for your local website in IIS to use the new certificate - you should see the new certificate listed in the SSL certificate: drop-down list.

That's it.

JetBrains Rider: How to stop and start an IIS app pool on solution build

Michael Eustace — Wed, 23 Aug 2023 16:48:16 +0000

I recently made the switch from Visual Studio to JetBrains Rider for my .NET Core web application projects.

Whilst I am very pleased with the new development experience, there was one issue that I had to overcome.

The problem

When building a solution where I was running the web application in a locally hosted IIS instance, the build often failed because of the error below:

Microsoft.Common.CurrentVersion.targets(4685, 5): [MSB3027] Could not copy "obj\Debug\net7.0\foo.dll" to "bin\Debug\net7.0\foo.dll". Exceeded retry count of 10. Failed. The file is locked by: "IIS Worker Process (10592)

This was because the IIS Worker Process had locked the DLL files in the bin directory, causing the build to fail when it attempted to overwrite them.

The solution

The solution is to stop the application pool for the website in IIS to release the lock, perform the build, then start the app pool again.

If you had configured Visual Studio to run using the local IIS website, then it would take care of stopping and starting the app pool for you, but JetBrains Rider doesn't do this.

The work around is to create two powershell scripts to stop and start the app pool, then configure pre and post build events when your web project build is triggered.

Here is the code for the two PowerShell scripts. Copy and paste the code into two files and store them in the root of the web project in Rider.

StopApplicationPool.ps1

$AppPoolName = "<app_pool_name>"

$AppPoolStatus = (Get-WebAppPoolState -Name $AppPoolName).Value

if ($AppPoolStatus -eq "Started") {
    Write-Host "Stopping application pool $AppPoolName..."
    Stop-WebAppPool -Name $AppPoolName

    # Wait loop to check the status of the application pool
    do {
        Write-Host "Waiting for application pool to stop..."
        Start-Sleep -Seconds 1  # Wait for 1 seconds before checking again
        $AppPoolStatus = (Get-WebAppPoolState -Name $AppPoolName).Value
    } while (($AppPoolStatus -eq "Started") -or ($AppPoolStatus -eq "Stopping"))

    Write-Host "Application pool $AppPoolName has been stopped."
} 
elseif ($AppPoolStatus -eq "Stopping") {
    # Wait loop to check the status of the application pool
    do {
        Write-Host "Waiting for application pool to stop..."
        Start-Sleep -Seconds 1  # Wait for 1 seconds before checking again
        $AppPoolStatus = (Get-WebAppPoolState -Name $AppPoolName).Value
    } while ($AppPoolStatus -eq "Stopping")

    Write-Host "Application pool $AppPoolName has been stopped."
}
elseif ($AppPoolStatus -eq "Stopped") {
    Write-Host "Application pool $AppPoolName is already stopped."
} else {
    Write-Host "Application pool $AppPoolName is in an unknown state: $AppPoolStatus"
}

Notice the script above polls the app pool status until it's actually reporting the status as Stopped, before exiting to allow the build to begin. Remember, application pools don't stop immediately, they shutdown gracefully to allow any processes that were in-progress, at the point when the stop command was issued, to complete.

StartApplicationPool.ps1

$AppPoolName = "<app_pool_name>"

$AppPoolStatus = (Get-WebAppPoolState -Name $AppPoolName).Value

if ($AppPoolStatus -eq "Stopped") {
    Write-Host "Starting application pool $AppPoolName..."
    Start-WebAppPool -Name $AppPoolName
    Write-Host "Application pool $AppPoolName has been started."
} elseif ($AppPoolStatus -eq "Started") {
    Write-Host "Application pool $AppPoolName is already started."
} else {
    Write-Host "Application pool $AppPoolName is in an unknown state: $AppPoolStatus"
}

Configure the pre and post build events

Pre build:

powershell -ExecutionPolicy Bypass -File "StopApplicationPool.ps1"

Post build:

powershell -ExecutionPolicy Bypass -File "StartApplicationPool.ps1"

In Rider, open the Properties for the project and copy and paste the above into the fields highlighted below.

That's it. Happy building 😀

Kentico Xperience 13: How to programmatically update the URL slug of a page

Michael Eustace — Sun, 04 Jul 2021 15:42:43 +0000

I recently wrote a console app to migrate data from Drupal to Kentico Xperience 13 using the Xperience APIs.

As part of this, I was required to recreate pages in Xperience so that they had the same URL as their counterpart in Drupal.

My approach was to, for each page in my Drupal data source, create a new instance of the TreeNode object and set its values based on the values stored for that page in Drupal.

I also set the NodeAlias value of the TreeNode object at this point so that it matched the page's "page alias" (aka slug) in Drupal.

I then called Insert() on my object instance to create the page in Xperience.

Page URLs work differently in Xperience 13

Now in the old days of Kentico CMS, this would have been good enough as each page's URL was based off of its NodeAliasPath but in Xperience 13 the URL of a page is controlled separately and is managed by an editor via the URLs tab in Kentico.

I found that when I called Insert(), the slug was being auto generated based on the DocumentName of the page, rather than just copying the NodeAlias.

I now needed a way to update the slug.

In search of a solution for updating the slug

Off I went in search of slugs (that's the first time I've ever said that...I promise) and I found they were stored in the PageUrlPathUrlPath column (try and say that 10 times in quick succession) within the CMS_PageUrlPath database table with a foreign key to the NodeID of the page in question.

My immediate thought was that I could retrieve the relevant PageUrlPathInfo object, update the slug et voilà! But no luck.

It's then that I noticed there is a hash stored against each PageUrlPath record and that this must be updated in conjunction with updating the slug.

Usually when you see a hash against a record in Kentico, it means there's some helper method somewhere which you can use to update the record and manage the hash at the same time. It's just a case of finding this helper method.

Having exhausted my friends Google and Kentico devnet, I guessed that the underlying aspx page which is providing the functionality for editors to update the slug in the URLs tab must be using such a method.

How to update the URL slug

Having found said aspx page in the CMS Visual Studio project CMSModules/Content/CMSDesk/Properties/Urls.aspx I followed the code through and found the PageUrlPathSlugUpdater which does exactly the job I needed.

Here's the code to update the slug:

PageUrlPathSlugUpdater pageUrlPathSlugUpdater = new PageUrlPathSlugUpdater(page, Culture);

IEnumerable<CollisionData> collidingPaths;

pageUrlPathSlugUpdater.TryUpdate(newSlug, out collidingPaths);

if (collidingPaths.Count() == 0)
{
     // Slug was updated
}
else
{
     // Slug wasn't updated
}

Pros and Cons of separating page URL from NodeAliasPath

One of the limitations of the NodeAlias property is that there is a 70 character max limit. This was a problem as some of the page aliases for pages in Drupal were longer than this so they were being truncated.

Luckily, there is no such limit on URL slugs, so I was able to replicate the URLs from Drupal into Kentico without issue.

One disadvantage now is that when you retrieve the data for a page in code, you now need to, in addition, use PageUrlRetriever.Retrieve(nodeAliasPath) to get the URL of the page, which generates another (if not more) calls to the database. Previously, you just needed to ensure you were retrieving the NodeAliasPath when getting the page data.

There's no way to retrieve URLs for pages in bulk either, so you can imagine in code that creates, say, website navigation where you are in a foreach loop scenario, some developers may end up calling this method for each iteration and, subsequently, generating a tonne of SQL queries.

Luckily there is a way to get around this. More on that in my next post.