Support for Node.js 16 for Azure Pipelines custom pipelines task extensions has arrived. From a TypeScript perspective, this post documents how to migrate from a Node.js 10 custom task to one that runs on Node 16 using azure-pipelines-task-lib
.
Using Application Insights with Bicep to monitor Azure Static Web Apps and Azure Functions
Application Insights are a great way to monitor Azure Static Web Apps and Azure Functions. But how do you deploy that using Bicep? Let's find out!
Serving Docusaurus images with Cloudinary
Cloudinary offers an image CDN which can improve performance of your site. This post details how to get Docusaurus v2 to use Cloudinary to serve optimised images. There is a follow on post that details migrating this plugin to Docusaurus v3.
Azure Static Web Apps: dynamic redirects with Azure Functions
Azure Static Web Apps can perform URL redirects using the routes
section in the staticwebapp.config.json
. However it is limited. This post will demonstrate dynamic URL redirects with Azure Functions.
Azure Static Web Apps: build app externally
Azure Static Web Apps can generally build themselves with Oryx. If you need finer grained control of your build, you can with skip_app_build: true
and some GitHub Actions.
Publishing Docusaurus to dev.to with the dev.to API
The dev.to API provides a way to cross post your Docusaurus blogs to dev.to. This post describes how to do that with TypeScript, Node.js and the dev.to API.
Deep linking with Azure Static Web Apps and Easy Auth
Azure Static Web Apps doesn't support deep linking with authentication. The post login redirect parameter of post_login_redirect_uri
does not support query string parameters. This post describes how to work around this limitation.
Docusaurus: Using fontaine to reduce custom font cumulative layout shift
Custom font usage can introduce cumulative layout shift (or "jank") to your website. This post shows how to use fontaine to reduce this with Docusaurus sites.
Adding lastmod to sitemap based on git commits
This post demonstrates enriching an XML sitemap with lastmod
timestamps based on git commits. The sitemap being enriched in this post was generated automatically by Docusaurus. The techniques used are predicated on the way Docusaurus works; in that it is file based. You could easily use this technique for another file based website solution; but you would need tweaks to target the relevant files you would use to drive your lastmod
.
If you're interested in applying the same technique to your RSS / Atom / JSON feeds in Docusaurus, you may find this post interesting.
XML: read and write with Node.js
This post demonstrates reading and writing XML in Node.js using fast-xml-parser
. We'll use the Docusauruses XML sitemap as an example.
Azure AD Claims with Static Web Apps and Azure Functions
Authorization in Azure Functions is impaired by an issue with Azure Static Web Apps linked to Azure Functions. Azure AD app role claims are not supplied to Azure Functions. This post will demonstrate a workaround.
Debugging Azure Functions in VS Code on Mac OS
VS Code's debugging mechanism for Azure Functions on Mac OS frequently breaks. This post documents an approach to get it working.
Getting started with the Web Monetization API
The Web Monetization API is a JavaScript browser API that allows the creation of a payment stream from the user agent to the website. This post walks through getting started adding it to a site.
Bicep: Static Web Apps and Linked Backends
Azure Static Web Apps can be linked to Azure Functions, Azure Container Apps etc to provide the linked backend for a site. This post will demonstrate how to do this with Bicep.
TypeScript Unit Tests with Debug Support
Faster Docusaurus builds with swc-loader
This post demonstrates how to speed up your Docusaurus build by using SWC and the swc-loader
for webpack.
React: storing state in URL with URLSearchParams
The React useState
hook is a great way to persist state inside the context of a component in React. This post demonstrates a simple React hook that stores state in the URL querystring, building on top of React Routers useSearchParams
hook.
Reverse engineering the Azure Application Insights Transactions URL
Logs matter. In Azure, logs generally live in Application Insights, in the Transaction Search section. This post reverse engineers the Azure Application Insights Transactions URL, and details how to construct a link to take you directly there, using both TypeScript and C#.
Swashbuckle and schemaId is already used
Swashbuckle can fail to generate a swagger / Open API document with the message "The same schemaId is already used...". This post explains what that means, and offers a way to work around it.
Terry Pratchett and the Azure Static Web Apps
Terry Pratchett is remembered on the internet. A non-standardised HTTP header: X-Clacks-Overhead
is broadcast by websites seeking to pay tribute to the great man. This post shows how we can make Azure Static Web Apps join in.