Hi, I'm Elio Struyf — an Solutions Architect passionate about creating innovative solutions and sharing knowledge with the developer community. With expertise in Microsoft 365, Azure, End-to-End testing, and Developer Tooling, and Productivity. I help teams build better software and deliver exceptional results.
Again we are at the end of the year and to start with the same words from my 2019 recap. WHAT A YEAR! If you read my 2019 recap, you know that it was a personal rollercoaster. At the beginning of 2020, I had a lot of energy and was pretty excited to make it a great year. I was ready
While developing the integration with Strava on our cycling club website, I wanted to use serverless functions to simplify the data retrieval from Strava. The website runs on Vercel, and if you’re going to test out your serverless functions locally, you will need to use Vercel its CLI. You can install the Vercel CLI by running the following command: npm i
One of the Doctor’s objectives, a documentation tool that converts markdown to SharePoint pages, was to make it usable cross-platform. Initially, I created this as an internal tool for Valo and would only be used on Azure DevOps or GitHub Actions. In the first release, I focussed on making the tool available to others like you and seeing if there
I love static sites! In 2020 I have created ten production sites with various static site generators and a couple of POCs. My favorites are Hugo and Next.js. Show image Doctor logo The story Internally in
For the last two weeks, I have been working on my FrontMatter extension for Visual Studio Code. This extension helps others and myself make it easier to manage their static markdown pages’ metadata. Some time ago, I received the question to enhance the tag and category experience. As when you have many tags or categories, it is not optimal to
For one of our clients, we had a Microsoft support case open for a long time. On the client, its tenant, every time they created a new site collection, our Valo application customizers appeared automatically. Most of the time, this happened between 5-60 minutes. Internally in our Valo codebase, we do not have anything which triggers this automation. We even do
I love presenting on a stage. I love to engage with people, have an audience in front of me. So you think that presenting virtually would be no big deal. Actually, it is a big deal. One of the things I miss the most is the engagement with the audience. The feeling you talk to only yourself. I was not too
Currently, I am developing my first “real” Microsoft Teams app with SharePoint Framework. In this app, I am making use of the new messaging extension capability. {{< blockquote type="info" text="what are messaging extensions? While developing a form in my extension, I wanted to cancel and submit a button. When I started implementing the cancel button, its onClick event, I was lost in
Now that my PimpYourOwnBike website has launched. I started looking at where I can do some optimizations. When looking at the Next.js build output, I spotted a red number in the First Load JS section. Show image
When you are reading this, you are looking to create a SharePoint library from the Microsoft Graph. It is straightforward but a bit confusing because you will have to use the lists endpoint. When you are a SharePoint developer, we all learned that a list is not the same as a library, and lists get created under the /lists/ URL
Last week, just went I took my bike for a ride. I got an idea. What if I create a new store for selling online personalizable bike stickers? During the two-hour bike ride, I more and more got convinced of the idea. When I was back home, I started printing a couple of stickers to test it out. I showed
To prepare my new online store’s release for selling personalizable bike stickers called: Pimp Your Own Bike. I wanted to make sure that I could test out my website before merging it to the main branch. Using a predefined custom domain would be the easiest way. Show image
This weekend I discovered a cool new tool from Microsoft called Clarity. The tool allows you to understand how users interact with your website. It can do this by using Google Analytics integration and features like session replays and heatmaps. {{< blockquote type="info" text="https://clarity.microsoft.com/ I was not looking for such a tool. I just bumped into it. As I run a online
In the previous #DevHack, I told you how to use deep links in your PWA for Microsoft Teams. This approach I currently implemented in one of my proof of concepts. Another functionality that my POC needed to have is to have dynamic manifest creating for the PWA. {{< blockquote type="info" text="#DevHack: Deep linking to Microsoft Teams in Android and iOS In this
This article recaps the CollabDays Benelux event that BIWUG and DIWUG organized together and happened on the 24th of October. We held the event virtually due to Covid-19, like most of the events in 2020. We decided that we wanted to do this as a virtual event together around May/June timeframe to make sure we could let it happen. Our initial
This week #DevHack is about opening Microsoft Teams deep links from your solution/app. For a new proof of concept, I wanted to open a chat/app from my PWA app quickly. Luckily Microsoft Teams supports this with their deep links functionality. infoRead more about Microsoft Teams deep links here: deep links documentation In the documentation, it states that you must use the https://teams.microsoft.com/l/...
We all want to be the fastest. We all want to make sure our apps outperform others, but what do you need to do for it? In this article, I will explain what the best approach is to cache your solutions. importantWhen building on top of a platform like SharePoint, you will always have to deal with the fact that you
Azure Functions do not have an out-of-the-box caching mechanism. For caching, the recommended way would be to use a distributed cache like Azure Cache or Redis. These services each come with their price tag and might be too robust for the cache you want to create or need. For Azure Function created with C#, you can use the good old memory
For a long time, I loved using Postman for API testing. Ever since the Chrome apps got deprecated, the experience was not the same anymore. Since then, I have been using Charles, Insomnia, and some other tools. This week I discovered an experimental feature in Microsoft Edge which allows you to edit and replay API calls from within the browser. The feature
Since version 85 of Chrome, the default referrer policy has changed from no-referrer-when-downgrade to strict-origin-when-cross-origin. This change might have a significant impact on your SharePoint Framework solutions when they rely on the referrer header (or better, the referer header with a single “r”). What is the referrer header? Whenever your browser does an API call, the referrer header gets used to indicate
Since the beginning of 2013, I have been using the same blog theme with a couple of small changes that I did over the years. Most of the time, I would change the primary colors, but that was all. Why would you change something which works fine? When I moved from WordPress to a static site, at first, I thought it
During the Corona crisis, Luise Freese and I was chatting about conferences and stickers. Nobody can get stickers these days, as all conferences are now virtual. That brought us to the crazy idea of opening our sticker store on which we want to sell stickers created for IT/Tech/DEV people. infothe store is called Pimp Your Own Device and is available at:
On the first of September 2020, the PnP team organized its first virtual conference. The conference had lots of great sessions, and I am sure you would have had a hard time picking the sessions you wanted to follow. You know what they say, choosing is losing. Actually, that is not true. You always gain something, no matter what you
While working on an internal Azure Static Web Site project, I needed to upload CSV files to an Azure Function to import data to Cosmos DB. When uploading a file to your API, the multipart/form-data content-type is used. The body’s format looks a bit “special” as it requires some parsing to get each file. 1-----WebKitFormBoundaryXvnFih9Jfw9ZdQNB2Content-Disposition: form-data; name': '"file"; filename="2020-9-2-localization.csv"3Content-Type: text/csv4 5id,name6test1,test17test2,test28------WebKitFormBoundaryXvnFih9Jfw9ZdQNB-- Similar like the
For the PnP Virtual Conference, I did a talk about how to start with UI testing. During the session, someone asked me why my preference is Cypress and not Selenium. As the session was only 30 minutes, it is hard to fit every bits and piece in it. That is the intention of this article to tell you why we
For one of our internal tools at Valo, I am creating a portal for managing our project localizations. The portal itself will be produced as a static website and hosted on Azure Static Web App. The great thing about Azure Static Web Apps is that it comes with hosting and the ability to create Azure Functions. The portal uses the Azure
For a Mailchimp webhook, I had to parse the application/x-www-form-urlencoded form data to JSON. Azure Functions does not automatically do this for you, so you have to provide your parser. I knew that I had already done this, so I went on a search journey through my code. To make it easier next time, I wanted to share the code snippet
I like to use static websites. It is fun to see that so many go back to the “old” way of working, but still try to find our ways to add our content dynamically. Retro tech is hip again Last year I made my move to static with my blog, which is now running on the Azure Storage static website option and
In July 2020, GitHub released a new manual trigger feature for its GitHub Actions workflows. This trigger allows you to run a workflow from the UI, or you can also use it to run it via an HTTP POST request. The HTTP POST request option makes it very useful to trigger your workflow to run from an external system. Info: Read
Static sites are cool again (actually for a long time), and Microsoft knows that. Their new Azure Static Web App - App Service is currently in preview. At the moment, it still misses some key functionalities, but I am sure that these will get added once they put it in GA (hopefully to be announced at Ignite in September 2020). Info:
For a long time, I was looking for a way to start end-to-end test solutions in Microsoft Teams. The easiest way to start running these tests is against the web experience (https://teams.microsoft.com). That way, we can use tools like Cypress. Another reason to do these E2E tests with Cypress is that internally we use Cypress for all our E2E tests. Unfortunately,
Utility/helper functions, every project uses them, but how do you get them to your projects. For our products, we use a common/shared library private npm package. By sharing this package to all our products, we do not have to reinvent the wheel every time, but also have to fix things in one place when there is a bug. Besides the internally
Something that bothers me for a long time is the comments in the SharePoint Framework component JSON manifest files. As you may know, JSON does not allow you to add comments to its content. Visual Studio Code will show some errors for it as well. Show image
Get to know what I use on a daily basis in my office to get most of my work done. In this article I share all hardware/software I use.
For three months, I have waited for the Jabra Evolve2 85 to show up. During the Corona crisis, I needed a new headset to filter out all the noise my kids make at home, so that I could 100% focus on my work. A colleague told me about this headset. When I ordered it, it was not even out yet
I do not know how many times you use the workbench, but I rarely use it. It is not that I do not like it, as the workbench is useful, but I want to be able to test my solutions in “real” pages. This way, I can see how everything comes together. Approaches There are a couple of approaches to this. Make use
During the Corona crisis, most of us had to work from home. One of the devices I saw people making a lot of fuss about was the Elgato Stream Deck. As the name suggests, it intends to make streaming easier to give you a set of buttons you can use for quickly triggering actions. These actions can be different things like
Ringing your doorbell on your Sonos speakers Ding dong!!! Earlier this week, I changed my old doorbell to the Eufy video doorbell. When it arrived and wanted to install it, I found out that my current wiring with the intercom system was not supported. Luckily the doorbell has a battery, so instead of running on power coming from the old wires,
In the previous article, I explained how you could trick Cypress and SharePoint to load the whole page instead of a page on which most of the SharePoint controls did not load. Related article: How to make your site believe it isn’t running in an iframe during Cypress E2E tests. In some cases, you might experience tests failing due to authentication issues.
Cypress is a fantastic front end testing tool but has one major limitation. I already blogged about it a while ago. The limitation is that it runs all tests within an iframe. This iframe approach makes sense, as it allows the tool to show the running tests and the page in one view. For me, this is also one of
Hey team, are we ready to release? Yes, push the button and ship it. Why are all our tests failing? Why are our builds crashing? Why can I not access our services? Sounds familiar? It seems to be a common issue when you are just about to release your solution/project/product/… Of course, these issues do not only occur during releases. They
How to use Cypress to test your SharePoint solution with an Azure AD-secured API In January 2020, I explained my approach to how you can make use of Cypress to test out your SharePoint solutions. Cypress is great to use and simple to configure. I like the capability of running individual tests on your local machine to verify if the solution
For many of us, working from home is mandatory these days. For me, nothing major changed. I was already used to work from home since I joined Valo 2,5 years ago. One thing that has changed is that my children are now at home while I am working. Luckily I was prepared for it (I thought). At the end of 2019,
Some time ago, I migrated my blog from Wordpress to a static site by Hugo. To generate the static pages, I make use of Azure DevOps pipelines. The free tier, which gives me up to 1800 minutes/month, is enough, but not this month. When I wanted to publish my blog post from yesterday, I got the following friendly message: Error: Your
While I was working on one of my hobby projects to automate our home with Homebridge, I wanted to have an easy way to publish my packages to NPM. I usually do this via Azure DevOps, but as one of the conditions to get the plugin verified is that it is published publically on GitHub, I wanted to give GitHub
Currently, the Multilingual page publishing for Modern SharePoint feature is rolling out to first-release tenants. This feature allows you to create pages on communications sites in different languages. These pages get linked to each other, and with a language switcher, you can navigate from language variant to variant. Info: Microsoft 365 Roadmap status on Multilingual page publishing for Modern SharePoint: https://www.microsoft.com/en-us/microsoft-365/RoadmapFeatureRSS/50217. Multilingual
In your SharePoint Framework web parts, you have the option to load resources dynamically. These resources could be data you want to fetch or dynamically load controls before the property pane panel gets shown. To achieve this, you implement the logic in the loadPropertyPaneResources method. Info: You can find more information about dynamically loading controls here: Special property pane dynamic loading. The
On my journey to select the best tool for our end-to-end tests for our teams, I tested out the recently announced Playwright tool from Microsoft. This tool is the new version of Puppeteer (as the core team members moved to Microsoft). Info: The benefits of E2E tests are that it validates if your features work (or keep working when implementing changes),
In my journey, selecting the best tool to automate the end-to-end tests for our products, I had been testing out Cypress for a while. Cypress is just a fantastic tool. It is easy to set up, documentation is up to date, and it makes it easy to verify features/implementations with its UI. For me, there were two downsides. The first
The preferred way to implement pipelines these days in Azure DevOps is via YAML. Which makes the pipeline part of your code and is automatically version controlled. When you were used to the classic way of creating release pipelines, you might have used environment scoped variables. These scoped variables were great to specify to which environments you wanted to provision/install/deploy/… your
When creating solutions based on SharePoint search, you best always define the source ID of the Local SharePoint results source with each call. By providing that source ID with each request, you make sure that the results you expect for your solutions are always the same. Which ID? The Local SharePoint results source ID you are looking for is: 8413cd39-2156-4e00-b54d-11efd9abdb89. How? The “how” depends
Why does your timer trigger Azure Function run at unforeseen times? Has it ever happened that your timer triggered Azure Function was running on unforeseen times? We had it for two functions, and could not immediately find out where or why this was triggered more than once an hour. Show
Last year I already wrote an article about how you could implement visual UI tests for your SharePoint solutions by using Puppeteer in combination with Jest. I still use these tools for setting up various UI tests in our products, but a couple of months ago, a tool called Cypress caught my attention. Info: Testing the UI of your SPFx solution
Let's build together
Manage content in VS Code
Present from VS Code
