In Part I of this series, I stuck a cheap Android tablet to my fridge with fridge magnets. In Part II, I talked a little bit about Blazor and what makes a progressive web application. In Part III, I’m going to add an API that will let the fridge talk to the Internet safely.

The Internet Fridge is all about living in the future. The future comes in different sizes. Kitchen computers have been the dream for fifty years, but when I get up in the morning, the future I’m interested in is, “Is it going to rain today?”

This is a big step up from the Honeywell kitchen computer that inspired this project. It didn’t have an internet connection, mainly because the internet only had four nodes in 1969. None of them were fridges.

The Blazor sample app we started with comes with a tiny nonsense weather page. We can improve on that with some real data from https://openweathermap.org/

Continue reading “Internet Fridge: The Outside World” →

In Part I of this series, dreaming of the Honeywell H316 Pedestal Kitchen Computer, I stuck a cheap Android tablet to my fridge with fridge magnets, a hot glue gun, and a passing reference to Stewart Brand’s idea of “shearing layers.” That’s the hardware architecture sorted. In Part II, I’m going to put some software on it.

Progressive Fridge Applications

In the olden days, like 1969, if you wanted to program the H316 in your kitchen, you had to learn FORTRAN IV and punch it into a teletype. The Model 33 teletype used ASCII so that several other machines could understand it, and some H316s were plugged into the early Arpanet, but the dream of true interoperability still had a way to go.

Even in the not-quite-as-olden days, if you wanted to write an app for your Android tablet, you had to learn a bunch of Android-specific jibber-jabber. But not now. These days, I can write C# and run it as a progressive web application, on a .NET runtime compiled for WebAssembly, running in a browser, on a tablet, on my fridge. Things have never been better!

Continue reading “Progressive Fridge Applications” →

In the previous post, Geolocation in Blazor, I started wrapping the browser’s Geolocation API in a Blazor component. That first article showed how to get the device’s current position, including how to get prototype-based JavaScript objects back across the C#/JS interop boundary.

In this post, I’ll look at using a JavaScript callback to raise a C# event when the device moves.

GitHub: https://github.com/darnton/BlazorDeviceInterop
NuGet: https://www.nuget.org/packages/Darnton.Blazor.DeviceInterop

Continue reading “Geolocation II: Position Updates” →

One of the joys of Blazor is never having to use JavaScript again. With C# running in WebAssembly, events like button clicks can be handled by handlers written in C# and old dogs don’t have to learn new tricks.

There are some browser capabilities that aren’t exposed and these need JavaScript interop. The first of the browser Web APIs that I wanted to use in a Blazor app was the Geolocation API. This gives us the position of the device, among other things.

The goal of this project is to create a component that encapsulates the JavaScript interop malarkey. I want to create a Geolocation service that a host application can call to get its position using only C#.

GitHub: https://github.com/darnton/BlazorDeviceInterop
NuGet: https://www.nuget.org/packages/Darnton.Blazor.DeviceInterop

Continue reading “Geolocation in Blazor” →

Note: Updated November 2020 for .NET 5 and a good, hard refactoring. See the JavaScript References in .NET 5 section below for the bulk of the changes.

Wouldn’t it be nice to have interactive slippy maps in a Blazor application? Yes, it would!

Wouldn’t it be even nicer if the map component completely encapsulated all of the JavaScript interop and the page it was on was blissfully unaware that JavaScript even existed? Yes, yes, yes!

The hard work has already been by Leaflet.js. All that remains is to write a simple Blazor component to talk to the Leaflet API. (You can download my Darnton.Blazor.Leaflet NuGet package.)

Continue reading “Slippy Maps in Blazor with Leaflet” →

Babylon is a good choice for 3D graphics on the web. Anything that you can do in JavaScript you can do in Blazor, so I’m going to put some 3D in my web app using C#.

First, I’m going to create a Babylon component that I can drop onto a Blazor page and then I’m going to see if I can shift all the Babylon manipulation up from Javascript into C# with a full Babylon interop layer.

Continue reading “3D Blazor with Babylon” →

Blazor is a godsend for C# developers who want to build web applications. I’ve found building web apps in Blazor quick and easy, but there are a couple of fish-hooks that could catch you out. CORS is one.

[Update 10th January 2021: For a real-life example using CORS, see the API section (The Outside World) of my Internet Fridge project.]

I had a server-side app that was working fine. Turning a server-side Blazor app into a client-side Blazor app is mostly painless, but this time nothing worked.

The app was making a call to an API but from the client-side version of the app, all the calls failed. They’d been blocked by the browser’s CORS policy.

The answer was to build a CORS proxy. Here’s what I did.

Continue reading “How to Build a CORS Proxy for Client-side Blazor” →