Blog posts by Darren S

Blog posts by Darren S2019-09-16T04:11:05.0000000Zhttps://world.optimizely.com/blogs/darren-s/ Optimizely World Episerver Developer Meetup Melbourne October 10th 2019Announcing I'll be presenting at an Episerver Developer Meetup again... but this time in my home town of Melbourne!!! <a href="https://www.luminary.com/">Luminary</a> will be hosting Melbourne's first Episerver Developer Meetup from 6pm on Thursday 10th October 2019. Speakers will include; Marcus Babajews (Episerver APAC) Damien Dias (Episerver APAC) <a href="https://www.linkedin.com/in/ACoAAAozRPUBV1ZjecHx1NKMdvH6TgtI4ysXLXI/">Darren Stahlhut</a> (Luminary) <a href="https://www.linkedin.com/in/ACoAAAoZ9tsBUb73SXoIajK7EsHPxROgzPJQjxE/">Matthew Boniface</a> (Empired) As Melbourne's first Episerver Developer Meetup, we will be discussing a wide range of topics and current trends in Episerver, as well as an open Q&A session. The overall goal of this meetup is to kick start the local Episerver Development Community in Melbourne and have some fun. <a href="https://www.meetup.com/Episerver-Melbourne/events/263574319/">https://www.meetup.com/Episerver-Melbourne/events/263574319/</a>2019-09-16T04:11:05.0000000Z

Blog post

Code - Blazor + Episerver blog seriesIn my last blog, I announced the start of a blog series on Episerver Blazor as a follow up to a presentation I did at the Episerver Sydney Meetup <a href="/link/651b9e1ea4f04d93bf27e8d985373068.aspx">https://world.episerver.com/blogs/darren-s/dates/2019/7/blazor--episerver-blog-series/</a> Today, I'm happy to continue the series with a massive code drop 🎉 Here is the Github repo 👇 <a href="https://github.com/DarrenStahlhut/Episerver.Blazor">https://github.com/DarrenStahlhut/Episerver.Blazor</a>  This is a work in progress, I'd love your contributions so please feel free to fork the repo and submit a PR. The next blog posts in this series will cover the following topics: <ul> <li>Getting started with Episerver Blazor, a step-by-step installation guide (for anyone that needs it).</li> <li>Concepts of Blazor, understanding the fundamental questions of why and how to use Blazor. </li> <li>Getting Episerver Content and Routing running in Blazor.Serverside</li> <li>How to call Javascript Library's from C# using Blazor Javascript Interop.</li> </ul> Please post any comments or issues here or github. Have an awesome weekend!2019-07-27T02:29:09.0000000Z

Blog post

Introduction - Blazor + Episerver blog seriesFollowing my presentation and demo of Blazor + Episerver Content Delivery API in Sydney at the Episerver Developer Meetup - July 2019. I've decided to start a series of blog posts to share the content with the global community.  For those that attended the Sydney meetup, thank you, I had a great time building the proof of concept and I'm keen to expand on it over the coming weeks. Here is the Blazor slide deck from the meetup: <a href="http://bit.ly/2LmbP3N">http://bit.ly/2LmbP3N</a>  This first post in the series is mostly just to announce the series, share the slide deck, and get some general interest going. In the next post, I'll share some code (via github) including Client-side and Server-side Blazor running against Episerver Content Delivery API I'm particularly interested in expanding the solution to add Episerver Routing (to the Server-side app) and demonstrate how Javascript interop works, to keep the front-end JS developers happy 😁. Anyone eager to get a headstart can have a look at these references (included in the slide deck); <ul> <li>Blazor Official Site: <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/client">https://dotnet.microsoft.com/apps/aspnet/web-apps/client</a> </li> <li>Blazor Official Documentation: <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.0">https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.0</a> </li> <li>Blazor Video Steven Sanderson: <a href="https://www.youtube.com/watch?v=0RfUPr0KrSM">https://www.youtube.com/watch?v=0RfUPr0KrSM</a> </li> <li>Blazor Official Blog announcing release: <a href="https://devblogs.microsoft.com/aspnet/blazor-now-in-official-preview/">https://devblogs.microsoft.com/aspnet/blazor-now-in-official-preview/</a> </li> <li>Episerver Content Delivery API Developer Guide: <a href="/link/6ffa5cb8173a414eac25740deeafdbc8.aspx">https://world.episerver.com/documentation/developer-guides/content-delivery-api/</a> </li> <li>Episerver Content Delivery API Reference: <a href="https://sdk.episerver.com/ContentDeliveryAPI/2.x/Index.html">https://sdk.episerver.com/ContentDeliveryAPI/2.x/Index.html</a> </li> </ul> Blog Series Updates:  2019-07-27 - Code available on GitHub - <a href="/link/29d25b6084304edba82322737a60c175.aspx">https://world.episerver.com/blogs/darren-s/dates/2019/7/code---blazor--episerver-blog-series/</a>2019-07-13T03:46:41.0000000Z

Blog post

Episerver Developer Meetup Sydney July 10th 2019I'm excited to announce I'll be speaking at the Episerver Developer Meetup in Sydney on Wednesday, July 10th 2019. I'm going to be talking about; <ul> <li>Blazor - <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/client">https://dotnet.microsoft.com/apps/aspnet/web-apps/client</a></li> <li>Azure Cognitive Services / Computer Vision Add-On - <a href="/link/ab0542984e38487db0206e24c6f83099.aspx">https://world.episerver.com/blogs/darren-s/dates/2019/3/using-ai-to-analyze-images-and-generate-metadata/</a></li> </ul> Damian Dias will talk about Commerce and CMS Certifications best practices. Nicola Ayan will talk about Episerver Find and share lessons learned from recent projects. Marcus Babajews will give a short update on Episerver Campaign. <a href="https://www.eventbrite.com/e/episerver-developer-meetup-sydney-tickets-62842623980">https://www.eventbrite.com/e/episerver-developer-meetup-sydney-tickets-62842623980</a>2019-06-26T04:09:17.0000000Z

Blog post

GitFlow is a natural fit for Episerver DXCIn this blog, I'll explain a little about GitFlow and why it aligns so well with Episerver DXC development. <h2>What is GitFlow?</h2> If you're not familiar with GitFlow, it's just another branching and merging strategy. It was made popular by <a href="http://nvie.com/posts/a-successful-git-branching-model/">Vincent Driessen at nvie</a> and has since been widely adopted by the development community. It's also built into the most popular Git Clients including <a href="https://www.sourcetreeapp.com/">SourceTree</a> and <a href="https://support.gitkraken.com/git-workflows-and-extensions/git-flow/">GitKraken</a> and is available via commands in Git console. What I like most about GitFlow, is not the merging strategy itself, but its things that having a standard strategy offers; <ul> <li>We can more easily collaborate with external developers and Agencies. We can simply by say "we use GitFlow" and they'll know what we mean.</li> <li>Onboarding Developers is faster, there are a lot of good learning resources around.</li> </ul> <h2>GitFlow merging strategy (in a nutshell)</h2> There are two main branches in GitFlow; <ul> <li>master - the code you have or are going to release.</li> <li>develop branch - the latest development, changes for the next release.</li> </ul> Besides the main branches, we also have; <ul> <li>feature branches - this is where you actually do your development and commits.</li> <li>release branches - a branch to get code ready to release to master.</li> <li>hotfixes - for emergency fixes for master branch to be immediately released.</li> </ul> <img src="https://nvie.com/img/git-model@2x.png" width="600" alt="GitFlow merging diagram" /> <h2>Why does this work well with Episerver DXC?</h2> Because of Episerver DXC's linear deployment path, code must be deployed from Integration > Preproduction > Production. This means we can think of our Master branch as the code ready to be deployed to Integration. Deployments above Integration are managed via the Paas Portal or via Episerver Support. If you also want to have an internal CI/CR (build and release) environment for internal QA, you can run it off the Develop branch This all means we can use the standard implementation of GitFlow. <h2>Wrapping it up</h2> I'm not saying GitFlow is perfect, but it is a decent merging strategy. It can become complicated when you aren't certain about the order that Features will be released and I have some very large scale projects that GitFlow struggles to handle so we have a customized strategy. But generally speaking, for Episerver DXC projects where the deployment chain is linear, I've found it's a great fit. This might change in the future if we are allowed to use our own DevOps tools to deploy directly to Preproduction (or even Production) which is something I've heard is on the technical roadmap.  <h2>Resources</h2> <ul> <li>GitFlow by Vincent Driessen <a href="https://nvie.com/posts/a-successful-git-branching-model/">https://nvie.com/posts/a-successful-git-branching-model/</a></li> <li>GitFlow Atlassian  <a href="https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow">https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow</a></li> </ul>2019-04-01T01:01:50.0000000Z

Blog post

Using AI to analyze Images in EpiserverInspired by Artificial Intelligence? Me too! In this blog, I'll show you how to configure Azure Cognitive Services, add the Computer Vision C# SDK to Episerver, and work with Azure Computer Vision's APIs to analyze Images. <h2>What can we do with AI in the CMS</h2> After reading the <a href="https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/home">official documentation</a> I had several cool ideas; <ul> <li>By using the <a href="https://docs.microsoft.com/en-au/azure/cognitive-services/computer-vision/concept-describing-images">Describing images</a> feature we can generate a human-readable description of the image (eg alt text) to improve Accessibility and SEO. </li> <li>We could detect and prevent inappropriate content by using the <a href="https://docs.microsoft.com/en-au/azure/cognitive-services/computer-vision/concept-detecting-adult-content">Adult and Racy images</a> feature. Imagine validating User Generated Content, or auditing an entire Media Library with a scheduled task.</li> <li>In line with the inappropriate visual content, we can use the <a href="https://docs.microsoft.com/en-au/azure/cognitive-services/computer-vision/concept-recognizing-text">Recognize Text</a> feature to read embedded text, then validate it against a list of banned words.</li> <li>We could automatically set the focal point and crop images by using the <a href="https://docs.microsoft.com/en-au/azure/cognitive-services/computer-vision/concept-generating-thumbnails">Thumbnails and Area of Interest</a> feature. I think this one is really cool. You've likely seen tools that allow CMS Editors to select a focal point for an image, we can now use AI to set it.</li> <li>We can use the <a href="https://docs.microsoft.com/en-au/azure/cognitive-services/computer-vision/concept-detecting-color-schemes">Color schemes</a> feature to allow us to automatically select a theme to complement the Image's colors (eg a light or dark theme of a hero Banner).</li> </ul> For the remainder of this blog, I will demonstrate the first idea, generating descriptive text for an image. <h2>Configuring Azure Cognitive Services Computer Vision</h2> You will need an Azure account to perform this step. In your Azure Portal, click Create a resource > AI + Machine Learning > Computer Vision (or search for Computer Vision). <img src="/link/9bf6d2f0536641d3b2d6ba8c14245204.aspx" /> Then complete the form <ol> <li>Enter a Name (eg ComputerVision)</li> <li>Select your Subscription</li> <li>Select a Location (remember it, you'll need it later)</li> <li>Select a Pricing Tier (the F0 free tier is fine)</li> <li>Select or Create a Resource Group (eg Episerver)</li> </ol> Finally, after Azure has provisioned the service, you'll need to copy Key 1 (actually either key will work) to use in your code (yes I have reset my keys, sorry!). <img src="/link/c6f38e41b7594e81b5d067fd1f5faf5b.aspx" /> <h3>A quick test using Postman</h3> At this point the AI Service is running in Azure, it's a good time to quickly confirm things are working. Using <a href="https://www.getpostman.com/">Postman</a> I made a <a href="https://australiaeast.dev.cognitive.microsoft.com/docs/services/5adf991815e1060e6355ad44/operations/56f91f2e778daf14a499e1fa/console">POST using the API</a>. This is the <a href="https://i.imgur.com/tluKsu0.jpg">Image URL</a> I sent to the service, and this the JSON result. <pre class="language-markup"><code>{ "categories": [ { "name": "outdoor_oceanbeach", "score": 0.99609375, "detail": { "landmarks": [] } } ], "adult": { "isAdultContent": false, "isRacyContent": false, "adultScore": 0.011389658786356449, "racyScore": 0.030652720481157303 }, "color": { "dominantColorForeground": "White", "dominantColorBackground": "Blue", "dominantColors": [ "Blue", "White" ], "accentColor": "0750C4", "isBwImg": false, "isBWImg": false }, "imageType": { "clipArtType": 0, "lineDrawingType": 0 }, "tags": [ { "name": "water", "confidence": 0.9997772574424744 }, { "name": "outdoor", "confidence": 0.9996986389160156 }, { "name": "sky", "confidence": 0.9993903636932373 }, { "name": "beach", "confidence": 0.9672492146492004 }, { "name": "shore", "confidence": 0.963735044002533 }, { "name": "ocean", "confidence": 0.9035242199897766 }, { "name": "nature", "confidence": 0.896171510219574 }, { "name": "wave", "confidence": 0.4871264696121216 }, { "name": "sandy", "confidence": 0.14046534895896912 }, { "name": "voyage", "confidence": 0.055084559276120444 }, { "name": "landscape", "confidence": 0.02963506257691794 }, { "name": "sand", "confidence": 0.02806604807717514 } ], "description": { "tags": [ "water", "outdoor", "beach", "ocean", "nature", "man", "wave", "board", "shore", "surfing", "sand", "body", "standing", "umbrella", "sandy", "walking", "riding", "snow", "white", "blue" ], "captions": [ { "text": "a sandy beach next to the ocean", "confidence": 0.9815995674986626 } ] }, "requestId": "26b96fb1-8b67-4bd6-b6ac-4e9621769a12", "metadata": { "width": 1200, "height": 800, "format": "Jpeg" } }</code></pre> The next step is to move from a raw web request and a JSON result to the C# SDK. <h2>Adding Azure Computer Vision C# SDK to Episerver</h2> This step is easy, it's just adding a Nuget Package to your Episerver CMS Project. Search for Azure Cognitive > select Microsoft.Azure.CognitiveServices.Vision.ComputerVision  <img src="/link/d3f3f9762c3f4f4cba0e3330c1919039.aspx" /> After the install, Build your solution to make sure everything is ok, then move on. <h2>Working with the Computer Vision APIs</h2> My example will use the <a href="https://docs.microsoft.com/en-au/azure/cognitive-services/computer-vision/concept-describing-images">Describing Images</a> feature of the API. I will register an OnSavingContent event, pass the image stream to the API, and save the data returned from the Computer Vision API into read-only properties for later use. Firstly, I need a new Class, which I called ImageFile, that inherits from ImageData to add some extra properties. <ul> <li>Description - To be populated by a Human</li> <li>UseAiDescription - An editable boolean, initially set by AI, can be later set by a Human</li> <li>AiDescription - Read-only property to hold the image description text returned by the AI analysis</li> <li>AiDescriptionConfidence - Read-only property to hold the AI's confidence in its description</li> </ul> <pre class="language-csharp"><code>using EPiServer.Core; using EPiServer.DataAbstraction; using EPiServer.DataAnnotations; using EPiServer.Framework.DataAnnotations; using EPiServer.Web; using System.ComponentModel.DataAnnotations; namespace EpiserverDemo.Models.Media { [ContentType(GUID = "0A89E464-56D4-449F-AEA8-2BF774AB8731")] [MediaDescriptor(ExtensionString = "jpg,jpeg,gif,bmp,png")] public class ImageFile : ImageData { [Display( Name = "Description", Description = "Manually populated Description of the Image", GroupName = SystemTabNames.Content, Order = 10)] [UIHint(UIHint.Textarea)] public virtual string Description { get; set; } [Display( Name = "Fallback to AI Description", Description = "If true, the AI Description will be used when Description is empty", GroupName = SystemTabNames.Content, Order = 10)] public virtual bool UseAiDescription { get; set; } [Display( Name = "AI Description", Description = "AI generated Description of the Image", GroupName = SystemTabNames.Content, Order = 20)] [Editable(false)] [UIHint(UIHint.Textarea)] public virtual string AiDescription { get; set; } [Display( Name = "AI Description Confidence", Description = "AI confidence rating for the generated Description", GroupName = SystemTabNames.Content, Order = 30)] [Editable(false)] public virtual double AiDescriptionConfidence { get; set; } } }</code></pre> Next, I needed to register the OnSavingContent event. You'll see for brevity I've hard-coded the Subscription Key (Key 1 copied from Azure) and the Computer Vision Endpoint (<a href="https://westus.dev.cognitive.microsoft.com/docs/services/5adf991815e1060e6355ad44/operations/56f91f2e778daf14a499e1fa">you can find a list of Endpoint URLs here based on the Location you selected in Azure</a>). The Computer Vision API can accept either a URL or Stream. I opted for the stream so that I didn't have to persist the Image to the database to get a URL. You will also see a bit of logic to set the UseAiDescription property to true when Confidence is greater than or equal to 90%. I found the AI Description was often good when Confidence was above 85%. <pre class="language-csharp"><code>using System.Collections.Generic; using EpiserverDemo.Models.Media; using EPiServer; using EPiServer.Core; using EPiServer.Framework; using EPiServer.Framework.Initialization; using EPiServer.ServiceLocation; using Microsoft.Azure.CognitiveServices.Vision.ComputerVision; using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models; namespace EpiserverDemo.Infrastructure { [InitializableModule] [ModuleDependency(typeof(EPiServer.Web.InitializationModule))] public class ImageAiMetaDataInitialization : IInitializableModule { public void Initialize(InitializationEngine context) { var eventRegistry = ServiceLocator.Current.GetInstance<IContentEvents>(); eventRegistry.SavingContent += OnSavingContent; } public void Preload(string[] parameters) { } private void OnSavingContent(object sender, ContentEventArgs e) { if (e.Content is ImageFile) { SetAiMetaData(e.Content as ImageFile); } } public void Uninitialize(InitializationEngine context) { var eventRegistry = ServiceLocator.Current.GetInstance<IContentEvents>(); eventRegistry.SavingContent -= OnSavingContent; } public static void SetAiMetaData(ImageFile imageFile) { // get a stream of the image from binary data var stream = imageFile.BinaryData.OpenRead(); // subscription key to use with Azure Computer Vision (found in Azure Portal) var subscriptionKey = "1774efe94d4e48ec96ad9d89d2ed4fc3"; // specify the features to return, there's some cool stuff in here List<VisualFeatureTypes> features = new List<VisualFeatureTypes>() { VisualFeatureTypes.Categories, VisualFeatureTypes.Description, VisualFeatureTypes.Faces, VisualFeatureTypes.ImageType, VisualFeatureTypes.Tags, VisualFeatureTypes.Color, VisualFeatureTypes.Adult, VisualFeatureTypes.Objects }; // make a Computer Vision client ComputerVisionClient computerVision = new ComputerVisionClient( new ApiKeyServiceClientCredentials(subscriptionKey), new System.Net.Http.DelegatingHandler[] { }); // specify the Azure region endpoint (based on Computer Vision service location in Azure Portal) computerVision.Endpoint = "https://australiaeast.api.cognitive.microsoft.com"; // analyse the image, return ImageAnalysis (sync for now, not await async) ImageAnalysis imageAnalysis = computerVision.AnalyzeImageInStreamAsync(stream, features).Result; // set Image AI Description var caption = imageAnalysis.Description.Captions[0]; if (caption != null) { // set confidence first imageFile.AiDescriptionConfidence = caption.Confidence; // set the boolean based on Confidence. Only do this the first time AI Description populated if (string.IsNullOrEmpty(imageFile.AiDescription)) { // anything less that 90% confidence is often an inaccurate description imageFile.UseAiDescription = (caption.Confidence >= 0.90); } // set the AI Description imageFile.AiDescription = caption.Text; } } } }</code></pre> <h2>The end result</h2> When your code is ready, run the CMS and drag in an Image, I used this one. <img src="/link/05c83e4351bc4d09b3a5c9de1e123105.aspx" width="400" /> This will trigger the OnSavingContent event and send your Image to the Computer Vision API for analysis, and finally populate your properties. <img src="/link/e7f343dae55b45cf971ac43d2a4974f3.aspx" /> Here's a screencast (gif) of this whole process to give you a sense of the speed of the API (it's pretty fast considering I'm using the Free Pricing Tier); <a href="https://i.imgur.com/sgBBFLg.gifv">https://i.imgur.com/sgBBFLg.gifv</a> <h2>Rendering the image</h2> The last thing left to do is to render the image, the idea here is to; <ol> <li>Use the Description property as alt text when populated (by a Human). Humans still describe Images better than Machines. or</li> <li>Use the AIDescription property as alt text if the Description property is empty and the UseAiDescription is true.</li> </ol> I won't add the View for this because it's pretty straight forward (and this blog is long enough) but let me know if you need it. <pre class="language-markup"><code><img src="/globalassets/beach.jpg" alt="a sandy beach next to the ocean" ></code></pre> <h2>Wrapping it up</h2> I hope I have inspired you to consider how can AI can be used to improve your CMS Editors experience and the quality of content. I'm pretty impressed with the AI generated Description when its Confidence rating is high. But after using the APIs, I can admit that Humans are still far better at describing Images than Machines. That said I do see a lot of potential, not just to assist the CMS Editor when they upload individual images, but especially by processing large amounts of images with a Scheduled Job. <h2>Official Documentation References</h2> <ul> <li>Azure Cognitive Services Computer Vision <a href="http://%20%20https//docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/home">https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/home</a></li> <li>Computer Vision API <a href="http://%20https//westus.dev.cognitive.microsoft.com/docs/services/5adf991815e1060e6355ad44/operations/56f91f2e778daf14a499e1fa">https://westus.dev.cognitive.microsoft.com/docs/services/5adf991815e1060e6355ad44/operations/56f91f2e778daf14a499e1fa</a></li> <li>Computer Vision C# SDK <a href="https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts-sdk/csharp-analyze-sdk">https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts-sdk/csharp-analyze-sdk</a></li> </ul>2019-03-26T01:45:46.0000000Z

Blog post

Episerver Personalization with persistent anonymous profilesEpiserver Personalization is a powerful feature to ensure your website displays relevant content to your visitors. At Luminary we needed a way to persist an anonymous visitor's personalisation profile across sessions without using Episerver Insight or custom cookies. Here's how we did it...2018-10-12T02:00:00.0000000Z

Blog post

Generating image metadata and SVG thumbnails with Episerver DXC Azure Blob storageEpiserver has an ImageData base class that natively supports images. But we needed to extend it to provide metadata fields and display SVG thumbnails. Here's how we did it...2018-07-30T02:00:00.0000000Z

Blog post