#OpenToWork Available for new opportunities! Let's build something amazing together.

Get in touch

Archive for 2021

archy

Taking the good out of the bad experiences, wrapping up 2021

What!? It is already the end of 2021! All I can say about 2021 is that life takes you to unexpected places. Even in the last two weeks of 2021, things happened for which I far from prepared. In some circumstances of the events that occurred this year, I wish I could give myself the potential of just taking a break.

Read more

Use React in your VSCode WebView with hot module replacement

For Front Matter and another extension, I am currently developing. I use the Visual Studio Code WebView API heavily as it provides fully customizable views for your panels or tabs. It allows any company and developer to create their own unique experiences. One of the things I did for a long time was manually hitting the refresh button each time I updated the code.

Read more

#DevHack: check how your VSCode extension is running

When developing Visual Studio Code extensions, it might come in handy to know when running a production- or debug-build. Typically in Node.js projects, we verify this by using the NODE_ENV environment variable. Unfortunately, this approach cannot be used as VS Code runs in a different instance, and environment variables are lost.

Read more

Change is here - Rapid API here I am

Over the last couple of months, I have been working at a great company. When the time comes, I’ll be able to tell you more about it. Some of you might know where I moved. For the ones that don’t, I can say it wasn’t a Microsoft focussed company. I have been interested in seeing how other companies and technology stacks are progressing.

Read more

Can an AI be used as a ghostwriter for your articles?

The power of AI is rising everywhere. More and more, you see services popping up which will help you write code, content, understand code, and so much more. Last week I woke up and asked myself if an AI would already write the content I wanted. I was already sure it could write content, but I was unsure if it would be able to write it the way I would like it to be written.

Read more

Reviewing Cloudflare Pages to show what it has to offer

Cloudflare is a name that probably does not need any introduction. It is a well-known service that provides one of the fastest and massively used content delivery networks (CDN). Cloudflare developers have been busy as they have been building a lot of valuable new services like the one that I am talking about in this article Cloudflare Pages.

Read more

A look at the features and benefits of the Front Matter CMS

Front matter CMS is a new, fresh and easy-to-use content management system with a sleek frontend. It can be used for any type of website - blog, portfolio, landing page or even an online store. Without any dependencies to websites, APIs, and databases. The system is open-source and can be installed within seconds.

Read more

How a broken vertebra got me healthier working from home

Catchy title, isn’t it? Well, actually, it really happened. Let us go back to June 6th, 2021. I was cycling with a couple of people, wherein in an unfortunate circumstance, the rider in front of me accidentally hit me while he moved to the middle of the road. In the move he made, he took my front wheel with his back wheel, and I hit the road pretty hard with the right side.

Read more

Integrating Algolia DocSearch into Next.js like Docusaurus

For the new Front Matter website, I needed to integrate search capabilities. Instead of building my own search experience this time, as I did on this website. I wanted to give Algolia a try. The first time that I noticed Algolia was on the Docusaurus website. Docusaurus uses the service to search through all the documentation and works pretty fast and efficiently.

Read more

Demystify Microsoft Viva Connections its extensibility model

Microsoft Viva Connections is a new experience to inform employees in your company and keep them engaged all from within Microsoft Teams. The nice part about Viva Connections is just a name, and you will have to brand it yourself. Meaning, it will be your experience, for your company. Another significant part of Viva Connections is the extensibility.

Read more

#DevHack: language-specific settings in a VSCode extension

When working with Visual Studio Code and different types of languages, you might want to change some settings only for one specific language. In my case, this was what I wanted to achieve for Markdown. VSCode is my primary editor, which I use for coding and writing this article. I tried to optimize it for writing blog posts, like increase the line height, different font, and more.

Read more

#DevHack: How to rename a file from a VSCode extension

Renaming a file is something that we do very often, but in my case, I wanted to do it from within a Visual Studio Code extension. When I first looked at the APIs and available documentation, I found the vscode.executeDocumentRenameProvider command and RenameProvider. Info Documentation from this can be found here built-in commands.

Read more

#DevHack: Check if a VSCode extension is running in WSL

For the Front Matter Visual Studio Code extension, I needed to know if the current instance opened a Windows Subsystem for Linux (WSL) located project folder. By knowing this context, I could ensure that certain functionality works similarly to the default behavior on Windows and macOS. The solution The solution is a very simple one-liner:

Read more

Generate open graph preview image in Code with Front Matter

Since I moved my blog to Hugo, I created a Front Matter - VSCode extension which makes content/article management easier within Visual Studio Code. A couple of versions ago, I added the ability to integrate your custom scripts. These will show up as actions in the Front Matter side panel. This functionality allows total flexibility to your content management workflow.

Read more

#DevHack: Installing Hugo on Windows with WSL

There were a couple of reasons for me to test out Windows 11, but the main reason was to give a new life to a device I hardly used anymore. Ever since I bought my Mac Mini for the office, my previous desktop device (running Hackintosh) kept turned off. To make sticker printing easier in the office, I thought to give it a new life and install Windows 11.

Read more

#DevHack: Authenticate Azure Web PubSub with Azure Functions

This week, I tested out the Azure Web PubSub service, which is still in preview when writing this article. The Web PubSub service is a real-time messaging service that allows you to use the WebSockets APIs and the publish-subscribe pattern. It is excellent for collaborative applications. Documentation You can find the developer documentation at Azure Web PubSub Service - Github.

Read more

Creating a PWA for your Microsoft Teams app

Progressive Web Apps (PWA) are nothing new, but you see more and more websites implementing them. PWA provides you a way to bring your site as an app to your desktop/tablet/mobile. For Squarl, I first thought of creating a mobile app, but at the beginning of a new product. There is a lot to take care of, which made me feel a native mobile app is a right thing?

Read more

#DevHack: Get the shared file info with Microsoft Graph

When you copy and share links from files, it creates a URL from which you cannot determine which file it is. For Squarl, I wanted to find out which file was behind a shared link to show the information about the file. First of all, the shared links look like this:

Read more

Let us go back to the basics. Why I started building Squarl.

Pen and paper, that is all that we needed years ago to start send messages or information from one person to another. This way of communication is still available, as it is effective. People like to go to their mailbox to see if some envelopes are waiting to be opened. At least, that is when we are not expecting bills.

Read more

Deploy your Azure Functions as a package from GitHub Actions

For Squarl, I started to implement a couple of improvements for the back-end running on Azure Functions. I created these functions with TypeScript. In the past, I used webpack and later Azure Funcpack to bundle my functions to one file per function. That way, the host does not have to do all those read actions for retrieving the dependencies.

Read more

Deploy your site to Vercel using GitHub Actions and Releases

One of my favorite hosting companies is Vercel as they can provide simplicity and flexibility at the same time. I wanted to control my site’s deployment process on Vercel entirely for a new product I am building. Usually, when you use Vercel in combination with GitHub. It will automatically trigger new deployments when you push code.

Read more

Securing your Azure Functions with an existing Azure AD app

This article continues the previous article about using the OAuth On-Behalf-Of flow in your Azure Functions. In the last article, the Azure Function only verifies the JWT Token, and if valid, uses it to request an access token and get data on your behalf. Info Link to the previous article about Using OAuth On-Behalf-Of flow in a Node.

Read more

Using OAuth On-Behalf-Of flow in a Node.js Azure Functions

While implementing a couple of Azure Functions, I needed to use the OAuth 2.0 On-Behalf-Of flow. With this flow, you can allow, for instance, an API to perform tasks on your behalf. This flow is great when you want to offload some of the work from the front-end or perform additional calls on the back-end when processing data.

Read more

#DevHack: Using Raycast to speed up my productivity

It does not happen often I write an article about a tool, but this time, I felt this tool deserved some extra attention. Raycast is a tool that you can compare to Spotlight from macOS and Alfred, and yes, it is macOS only. Many people use Alfred, and I have been using Alfred since I had my first Macbook.

Read more

Microsoft Graph Essentials extension released for VSCode

Recently I started working more and more with the Microsoft Graph again and the related toolkit. While I began to use a couple of the Microsoft Graph Toolkit (MGT) components, I wanted to change the styling a bit and add some custom templates. I noticed that there was not yet a Visual Studio Code extension that helps you with building apps with MGT.

Read more

#DevHack: Caching data for your VSCode extension

For my Visual Studio Code extension to autocomplete the Microsoft Graph APIs, I wanted to improve the speed of the suggestions by implementing a cache. That way, you would not have to do the same API calls each time. In-memory cache has its limits Initially, I started with just an in-memory cache.

Read more

VSCode extension for autocompleting your Microsoft Graph API

While working on a project which uses Microsoft Graph APIs, I found myself opening the Microsoft Graph Explorer a lot to check which paths/parameters were available. The Microsoft Graph Explorer is a great tool, but I love not to change context too much. As I like to create Visual Studio Code extensions, I did not have to think long to start building a new extension.

Read more

Publishing your VSCode Extensions from GitHub Actions

Automation is key! That is how I think anyway. I’m not too fond of repetition, but for some reason, I had not yet automated my Visual Studio Code extension publishing. I always did this manually from my terminal by running vsce publish. With my latest extension, I thought, now is the time to automate this as well.

Read more

#DevHack: Skip GitHub Actions on specific commits messages

In the doctor project, I try to do as much as possible in one GitHub Actions workflow. Having all logic in one workflow makes it more convenient but comes with a couple of complexities. Like, do you want to run each action for every type of commit/PR/…? The whole GitHub Actions workflow Why I want to skip actions/jobs in my workflow I host the documentation on Vercel.

Read more

DIY: Building a busy light to show your Slack presence

Going back a year in time, I created a post about building my Busy Light, which I connected to the Microsoft Graph. Homebridge is used to control the busy light, its colors, and statuses. Busy light controlled by Slack presence Info The related article: Building a busy light to show your Microsoft Teams presence The busy light has been running without issues since I hang it at my office until earlier this week.

Read more

Goodbye Valo World it is time to explore something new

For the last 3,5 years, I have been working at Valo. I started as a developer and eventually became the Engineering Lead. Every single day I enjoyed working at Valo. It has been an exciting ride. Oh, and we all change over the years. That is what you can see in the following pictures.

Read more

Restart your GitHub Actions workflow when something failed

Sometimes it happens that your GitHub Actions workflow fails. When this happens, it is appropriate to check what exactly went wrong before you restart it. Sometimes it could be a timeout or something that was incorrectly configured on the site to test. This issue is precisely the case for my doctor build/test/release GitHub Actions workflow as I do so many changes to test out the tool.

Read more

Use environment variables in Hugo to show branch information

For the new documentation website of Doctor, I wanted to do something similar like I did for Pimp Your Own Bike to show a message depending on the version/branch of the site I am using. For the doctor documentation, I wanted to use this method to show a beta message when using the beta site (beta.

Read more

To write code comments or not, it should not be a question

Comments, just do it. I write this post because I read a couple of articles, and messages on social platforms about stop using comments in your code. In some cases, there is good reasoning behind it, but even with this reasoning, I believe that comments are too valuable for your DEV team.

Read more

#DevHack: Open your VSCode extension settings from the code

For my VSCode Front Matter extension, I wanted to implement a link that allows you to open the VSCode settings to the extension quickly. Front Matter - Quick link to settings I could not find anything in the documentation but found a reference on Stackoverflow mentioning you could use: vscode.commands.executeCommand( 'workbench.

Read more

Using Doctor on Azure DevOps to generate your documentation

GitHub Actions is hot these days, but still, Azure DevOps is being used in many companies, and I do as well. Doctor a tool for publishing your markdown documentation on SharePoint, works nicely on Azure DevOps as well. Info I will use the doctor sample as the blueprint for this article.

Read more

#DevHack: GitHub Actions do not run step on schedule

When creating a whole new Github Actions workflow for Doctor, I wanted to do as much as possible from one workflow and be able to limit specific actions depending on how it triggered. I wanted my GitHub Actions to run on each push to the dev and main branch and run the tests on a schedule.

Read more

#DevHack: Using Azure CDN with SAS on Verizon Premium

In the previous article, I explained how you could use the Shared Access Signature (SAS) in Cloudflare. The reason that I use this approach is to make sure the Azure Storage cannot be publicly accessed. Only via a SAS token blobs can be retrieved or updated. If you want to do this for Azure CDN, I pointed to the documentation to configure this, but it seems that it has changed a bit over time.

Read more

Using Cloudflare to serve your private Azure Storage Blobs

Recently I wrote about how to use Cloudflare as a CDN for your Azure Storage Containers/Blobs. The process for setting up Cloudflare for Azure Storage is straightforward. Info Use Cloudflare CDN for your Azure Storage caching Now to make this work, you need to configure the Azure Storage to be anonymously accessible.

Read more

Using Doctor in GitHub Actions for your documentation

Doctor is a tool that you can use to write your documentation in markdown and push it to your SharePoint. That way, you have one location to use and share the documentation in your company. In this article, I want to tell you more about how you can set up GitHub Actions to do automated documentation deployments.

Read more

#DevHack: CORS for Cloudflare cached Azure Storage blobs

In the previous post, I told you why we moved to Cloudflare CDN to serve our Azure Storage files instead of Azure CDN. During the testing of Cloudflare, I found out that CORS headers were not present for the files. Usually, this is not needed if you only retrieve one file, but if you want to retrieve another file, for instance, a template from your site, these cross-origin resource sharing headers are required.

Read more

#DevHack: Use Cloudflare CDN for your Azure Storage caching

Getting your files faster to your clients is very important. There are various options for this. Last year, we started to look into Azure CDN to quickly and reliably provide our source files to our customers. The Azure CDN is put in front of an Azure Storage account on which we host the files in different blob containers.

Read more
Back to top