Blog posts by John Ligtenberg2021-03-09T10:00:00.0000000Z/blogs/john-ligtenberg/Optimizely WorldReducing image file size using ImageProcessor in an Episerver websitehttps://www.sentiatechblog.com/reducing-image-file-size-using-imageprocessor-in-an-episerver-website2021-03-09T10:00:00.0000000Z<img width="300" height="300" src="https://images.ctfassets.net/9gzi1io5uqx8/41BYMR8eO6qxcz9D4TD1ME/9e7ab7ebffd5295ed867fd58ea95d9dc/rubberduck-main-image10.jpg?fit=scale&w=300&h=200" />Large images can greatly reduce the loading speed of your web pages. Luckily for us there are many tools to reduce the file size of your images. In this blogpost I will show you how to do this in an Episerver website with the help of ImageProcessor, a free to use open-source image manipulation library.
Installing ImageProcessor in Episerver
Start by installing the Episerver Nuget package ImageProcessor.Web.Episerver made by Vincent Baaij. Also install the ImageProcessor.Web.Episerver.Azure Nuget package if you use Azure blob storage for your images. At this point you can already check if ImageProcessor works correctly by adding an ImageProcessor query parameter like "?width=200" to an image url on your site.
The packages come with 3 configuration files; cache.config, processing.config, and security.config. You can put this configuration in your Web.config if you want. I didn’t have to change anything in the configuration, because the default options are already quite good. Still, it Common Caching Pitfallshttps://www.sentiatechblog.com/common-caching-pitfalls2020-10-29T15:00:00.0000000Z<img width="300" height="300" src="https://images.ctfassets.net/9gzi1io5uqx8/5yZNZOXvFiPQyZUMfpoyob/64c96399cc27edc364cd9519f7921acc/caching.jpg?fit=scale&w=300&h=200" />We all know and love caching, right? It makes all of our complex algorithms and expensive database or filesystem lookups seem so fast and simple. But there are downsides to caching. For example, how do you handle invalidating? Or distributing it over multiple systems? Or what happens when process A is reading the cache, while process B is writing to it? Those downsides and more will be the topic of this blog.
Caching benefits
The benefits of caching stuff are lots. For example, making it so you do not need to do an expensive to call to an external system. No matter if we're talking about a database or an external webservice, you'll gain at least hundred milliseconds of latency. The same could be said about reading something from the filesystem. A hard disk easily takes 10+ms to read something, more if it's in a cloud environment.
When you have to get data like this, it's often relatively easy to cache it. Most, if not all, web frameworks will have some kind of cache system included. ASP.NET OIDC session lifetimeshttps://www.sentiatechblog.com/asp-net-oidc-session-lifetimes2020-09-30T00:00:00.0000000Z<img width="300" height="300" src="https://images.ctfassets.net/9gzi1io5uqx8/3FpoWNvvALiYPiZ8geTQjD/e5e6120ef1bd64b445f2058d1df1ae0c/image.png?fit=scale&w=300&h=200" />ℹ️ OIDC = OpenID Connect
The problem
This story starts with a dual bug report.
When users submit a form, their input is sometimes lost.
After a user logs in, they sometimes get the following error message. If they then reload the page, then they're logged in just fine.
> IDX21323: RequireNonce is '[PII is hidden]'. OpenIdConnectProtocolValidationContext.Nonce was null, OpenIdConnectProtocol.ValidatedIdToken.Payload.Nonce was not null. The nonce cannot be validated. If you don't need to check the nonce, set OpenIdConnectProtocolValidator.RequireNonce to 'false'. Note if a 'nonce' is found it will be evaluated.
The reporter of the bug already expected these problems to be related. Therefore, we quickly suspected that #1 was caused by the user's session expiring while they were filling out their form.
A bug's not actionable if you can't reproduce it, so the first step was to find steps to reproduce.
Reproducing the bug
With the help of the reporter, we were able to clearly repApplying a custom TinyMCE configuration to an Episerver page property with an attributehttps://www.sentiatechblog.com/applying-a-custom-tinymce-configuration-with-attributes2020-08-31T00:00:00.0000000Z<img width="300" height="300" src="https://images.ctfassets.net/9gzi1io5uqx8/oMDjMzcFlQqgmye8MgeQY/82d80473e87fa00156419b818a5eadb8/epi_server_logo_detail.png?fit=scale&w=300&h=200" />Configuring TinyMCE in Episerver
Episerver uses the TinyMCE as the editor for rich text input. Since 2018 the Episerver TinyMCE package has been upgraded to version 2. The current version, 2.12.1 at the time of writing, corresponds with TinyMce 4.8.5. The Episerver TinyMCE package comes with some default configuration, which can be changed through an Episerver initialization module. In the Alloy sample project this initialization module is called ExtendedTinyMceInitialization, and can be found in the Business/Initialization folder.
In this initialization module it is possible to define customized TinyMCE configurations for specific properties on specific page types. For instance, you might want to remove the button to insert an image for some rich text fields, or you might want to add additional formats to the formatting list.
To apply a custom configuration the following syntax is used:
config.For(x => x.MainBody, simpleConfig);
where config is the TinyMceConfiguration object, an