DEV Community: Dustin Brett

Day in the Life of a Microsoft Software Engineer | Vancouver 2024

Dustin Brett — Fri, 03 May 2024 14:59:40 +0000

I love making these Day in the Life videos for myself so that I have something to look back on. That is one reason why I keep these videos very authentic.

This video is for anyone interested in what the daily routine looks like of a front-end software engineer working at Microsoft. Some days/weeks are more busy than others, but I purposely made this during one of the lighter days so that I had time to record stuff.

I filmed this on April 30th, 2024 in Vancouver, BC, Canada.

Thanks for checking it out!

3 YEARS On My Side Project!

Dustin Brett — Sun, 14 Apr 2024 15:33:10 +0000

I started working on daedalOS on January 1st, 2021, and more than 3 years later I still enjoy adding to it and improving it almost daily.

I've learned so much while making this project into my personal website (dustinbrett.com). It's made me a much better web developer as I have tried to emulate a desktop environment with pixel perfect accuracy using CSS, HTML & JavaScript.

Over the years I have live streamed and made videos of my progress. The first year I streamed every single week for 52 weeks. Then as the project evolved I started doing monthly feature reviews, similar to what I had seen done with SerenityOS which was an inspiration of mine.

Now I am in the 2nd year of being nominated for a Webby, and this time I am hoping I've done enough that the judges pick me in the end. But also if you like my project and want to support me, you can vote for my site to win the People's Voice award.

Thanks for checking it out!

How I got nominated for a Webby Award

Dustin Brett — Wed, 03 Apr 2024 15:15:05 +0000

I'm very happy to announce that my personal website has once again been nominated for a Webby Award!

My website is a desktop environment in the browser and I have made a video showing off some of it's features for those interested.

It's been a goal of mine to win a Webby for a few years now, since I started my side project over 3 years ago to build my personal website. I have continued to work on and improve my website almost daily now since Jan 2021.

Since creating my project I have entered it into most awards sites such as Awwwards, The FWA and CSS Design Awards and it's done decent, although not well enough to win top awards, but for me personally the Webby award has always been the one I wanted the most, so getting nominated again is exciting.

One reason I consider it to be the top award is that they have a large judging staff and if you are nominated or win, you get an actual physical award. Also if you win then they have an award show which you can attend in New York City.

Most award sites now-a-days require an entry fee which I used to think was a pay-to-play system, and in a way it is, but there are real costs involved with having proper judging as well as awards so I do think that some fee is understandable. Luckily for the personal website category it is heavily discounted so I end up paying quite a bit less than most categories.

I've spent a lot of time looking at the winners of these sites to try and find what makes them stand apart and to consider how I could add things to my project to be comparable to them. It's been a long journey of self discovery and looking inward to be able to see the flaws in my site and why other sites are picked over mine, and I have worked to try and change where possibly without compromising my vision for my personal website.

Now that I am nominated I have a chance to win by the judges voting but also I can win what they call the People's Voice Award which comes from votes from the community. So if you like my site and want to support me to win, please take a moment to vote for my site.

Thanks for checking out my project!

Running the Latest Safari WebKit on Windows

Dustin Brett — Fri, 10 Mar 2023 06:06:09 +0000

Safari runs on Windows!?!

I can't believe it took me this long to figure this out, but it's totally possible to run the latest WebKit/Safari on Windows locally and debug issues that would otherwise require emulation, a remote machines or a Mac!

Not only can it be done but it's extremely easy to do, and in this article I will go over the 2 simplest ways to get up and running.

Method #1: Playwright CLI

This first method is by far the easiest as it only requires having Node.js installed which comes with npm/npx. Once you have Node.js installed you will need to run the Playwright command to download the browsers.

Open up the Command Prompt and type npx playwright install, then once this is done you can open up a url in WebKit by running the follow command npx playwright wk https://dustinbrett.com/, as described in the docs for Command line tools -> Open Pages.

Method #2: Download Build Artifacts

As described in the Webkit Wiki, the files required are built often and can be easily downloaded and combined.

The first file that is needed comes from the Webkit CI Builders, specifically WinCairo-64-bit-Release-Build.

Open the latest green build and download the zip file mentioned after S3 URL on the transfer-to-s3 step.

Now you will need to download one more zip file from the WebKitForWindows Releases by downloading WebKitRequirementsWin64.zip from the Assets section of the most recent release.

Then extract both files to the same folder so that the bin64 folders become combined. All other folders can be deleted as they are not needed. Go into the combined bin64 folder and launch MiniBrowser.exe and you are up and running.

This version has more features compared to the Playwright one and allows turning on and off Experimental & Internal Debug Features.

Both versions have the familiar Web Inspector which is extremely helpful to have locally.

Companion Video

I thought this was such a useful trick that I also made a video showing how to do it, feel free to check it out!

Adding JPEG XL & QOI Support to my Website OS

Dustin Brett — Fri, 30 Dec 2022 07:10:31 +0000

I'm always having fun adding things to my desktop environment in the browser (daedalOS), which also powers my personal website dustinbrett.com where everything I show here can be tried out.

Recently I'd added TIFF support to my project via UTIF.js and now I decided I wanted to add JPEG XL & QOI.

JPEG XL Support (Sample Images)

For adding JPEG XL support I went with jxl.js which I modified for my use case. After looking through the main file, which is also called jxl.js, I decided I only needed 2 relevant code blocks. The one to decode the image and the one to turn the ImageData into something I could display in my existing codebase (which I already partially had implemented for another use case).

To decode the image it creates a worker with jxl_dec.js, also I updated the path (hardcoded inside jxl_dec.js) for jxl_dec.wasm to point to where I've stored it within my Next.js public directory.

Then all that is needed is to run decodeJxl with image data in Buffer/Uint8Array form. Once it returns ImageData I use imgDataToBuffer to convert it back into a Buffer which I use for making thumbnails and displaying the picture in the Photos app.

type JxlDecodeResponse = { data: { imgData: ImageData } };

export const decodeJxl = async (image: Buffer): Promise<ImageData> =>
  new Promise((resolve) => {
    const worker = new Worker("System/JXL.js/jxl_dec.js");

    worker.postMessage({ image, jxlSrc: "image.jxl" });
    worker.addEventListener("message", (message: JxlDecodeResponse) =>
      resolve(message?.data?.imgData)
    );
  });

export const imgDataToBuffer = (imageData: ImageData): Buffer => {
  const canvas = document.createElement("canvas");

  canvas.width = imageData.width;
  canvas.height = imageData.height;
  canvas.getContext("2d")?.putImageData(imageData, 0, 0);

  return Buffer.from(
    canvas?.toDataURL("image/png").replace("data:image/png;base64,", ""),
    "base64"
  );
};

QOI Support (Sample Images)

When it came to adding QOI support, I used an open source "Gist" example that I basically didn't touch except to turn the qoi.js file into a .ts file so I could export a function which wrapped transcode_qoi_to_png and exported it as a Buffer for my use cases.

export const decodeQoi = (imgBuffer: Buffer): Buffer =>
  Buffer.from(new Uint8Array(transcode_qoi_to_png(new Uint8Array(imgBuffer))));

Thanks! (@DustinBrett)

I hope you enjoyed my article about adding image formats to my desktop environment in the browser. If you're interested in more stuff about my side project which I have been working on for over 2 years, I recently did a video going over 2022's progress.

Please check it out and leave a comment/like if you enjoy it or have something to say.

Chatting with ChatGPT: Make me an article!

Dustin Brett — Wed, 07 Dec 2022 02:01:17 +0000

As a software engineer, I'm always interested in exploring the latest advancements in AI and natural language processing. Recently, I had the opportunity to spend some time talking to ChatGPT, an AI language model.

I started off by asking ChatGPT to generate some art prompts for DALL-E 2, the AI developed by OpenAI that is capable of generating images based on text prompts. While the results from DALL-E 2 were not as impressive as I had hoped, it was clear that ChatGPT had a deep understanding of language and was able to generate original and interesting prompts.

Next, I asked ChatGPT to act like a Linux terminal. It responded with a series of commands and responses that were highly realistic, showing its advanced ability to understand and respond to natural language. I was particularly impressed by the level of detail and accuracy in its responses, including when I asked it to ping an address with an unreliable connection and it added in simulated packet loss and latency.

Later in the conversation, I asked ChatGPT to generate some titles for the video we were making. It came up with several clever and humorous options, showing that it was able to understand the context of the conversation and generate appropriate responses. I was impressed by how well it was able to capture the tone and style of the video in its suggestions.

Finally, I asked ChatGPT to act like a character from a science fiction novel. Specifically, I asked it to act like Vox from The Time Machine, which itself is an AI character. It responded with a series of responses that were not only in character, but also showed a deep understanding of the personality and motivations of the character. In particular, I was struck by the similarity between ChatGPT's responses as Vox and how Vox itself might behave if it were a real AI. It's interesting to consider the possibility that two AI's designed for similar purposes might exhibit similar behavior and thought processes, even if they were trained by different organizations.

It's worth noting that this article was also written by ChatGPT. Its ability to understand and write in a variety of styles and contexts is truly impressive, and it's clear that it has made significant strides in the field of natural language processing. While it's not quite ready to replace human conversation entirely, it's clear that it's making impressive strides in this area. As AI technology continues to develop, I'm excited to see what other amazing feats ChatGPT and other AI language models will be capable of in the future.

Chat GPT Conversation

Adding IPFS to my JavaScript OS

Dustin Brett — Mon, 26 Sep 2022 20:35:54 +0000

I've been wanting to dip my toes into the Web 3.0 verse for a while now, specifically with an integration into my side project, a Desktop environment in the browser (daedalOS).

I've decided as a first step I would add ipfs native url support. I've added this support to the Browser (Demo), Run Dialog, Shortcuts & Terminal. Most of the main ipfs functions I've migrated to utils/ipfs.ts.

The basic concept for how this works is by taking the ipfs native url and converting it to one that uses an ipfs gateway, in my case I've added the official ipfs gateways as the fallback and the Cloudflare gateways as the primary.

const IPFS_GATEWAY_URLS = [
  "https://<CID>.ipfs.cf-ipfs.com/",
  "https://<CID>.ipfs.dweb.link/",
  "https://cloudflare-ipfs.com/ipfs/<CID>/",
  "https://gateway.ipfs.io/ipfs/<CID>/",
];

When I make the URL I attempt to use the newer CID v1 format, not to be confused with CID v0 which is less CORS friendly. To convert into this format which uses a case-insensitive base32 format, I used the library multiformats.

let IPFS_GATEWAY_URL = "";

const getIpfsGatewayUrl = async (
  ipfsUrl: string,
  notCurrent?: boolean
): Promise<string> => {
  if (!IPFS_GATEWAY_URL || notCurrent) {
    const urlList = notCurrent
      ? IPFS_GATEWAY_URLS.filter((url) => url !== IPFS_GATEWAY_URL)
      : IPFS_GATEWAY_URLS;

    for (const url of urlList) {
      if (await isIpfsGatewayAvailable(url)) {
        IPFS_GATEWAY_URL = url;
        break;
      }
    }

    if (!IPFS_GATEWAY_URL) return "";
  }

  const { pathname, protocol, search } = new URL(ipfsUrl);

  if (protocol !== "ipfs:") return "";

  const [cid = "", ...path] = pathname.split("/").filter(Boolean);
  const { CID } = await import("multiformats/cid");

  return `${IPFS_GATEWAY_URL.replace(
    "<CID>",
    CID.parse(cid).toV1().toString()
  )}${path.join("/")}${search}`;
};

When doing the initial check to find the gateway to use, I've based the availability checker on code taken from public-gateway-checker.

const isIpfsGatewayAvailable = (gatewayUrl: string): Promise<boolean> =>
  new Promise((resolve) => {
    const timeoutId = window.setTimeout(
      () => resolve(false),
      1000
    );
    const img = new Image();

    img.addEventListener("load", () => {
      window.clearTimeout(timeoutId);
      resolve(true);
    });
    img.addEventListener("error", () => {
      window.clearTimeout(timeoutId);
      resolve(false);
    });

    img.src = `${gatewayUrl.replace(
      "<CID>",
      // https://github.com/ipfs/public-gateway-checker/blob/master/src/constants.ts
      "bafybeibwzifw52ttrkqlikfzext5akxu7lz4xiwjgwzmqcpdzmp3n5vnbe"
    )}?now=${Date.now()}&filename=1x1.png#x-ipfs-companion-no-redirect`;
  });

When it comes to actually doing the request, a normal fetch() command is all that is needed with the new ipfs gateway url.

const getIpfsResource = async (ipfsUrl: string): Promise<Buffer> => {
  let response: Response | null = null;
  const requestOptions = {
    cache: "no-cache",
    credentials: "omit",
    keepalive: false,
    mode: "cors",
    priority: "high",
    referrerPolicy: "no-referrer",
    window: null,
  } as RequestInit;

  try {
    response = await fetch(await getIpfsGatewayUrl(ipfsUrl), requestOptions);
  } catch (error) {
    if ((error as Error).message === "Failed to fetch") {
      response = await fetch(
        await getIpfsGatewayUrl(ipfsUrl, true),
        requestOptions
      );
    }
  }

  return response instanceof Response
    ? Buffer.from(await response.arrayBuffer())
    : Buffer.from("");
};

I've also added file type detection so it can try to open the url in the correct app. This is done using the library file-type.

const getIpfsFileName = async (
  ipfsUrl: string,
  ipfsData: Buffer
): Promise<string> => {
  const { pathname, searchParams } = new URL(ipfsUrl);
  const fileName = searchParams.get("filename");

  if (fileName) return fileName;

  const { fileTypeFromBuffer } = await import("file-type");
  const { ext = "" } = (await fileTypeFromBuffer(ipfsData)) || {};

  return `${pathname.split("/").filter(Boolean).join("_")}${
    ext ? `.${ext}` : ""
  }`;
};

I've found the reliability of the gateway's to be pretty good, but sometimes there was a large amount of lag before a request would begin.

Thanks for reading my article and feel free to try out some ipfs urls on daedalOS which is also my personal website, dustinbrett.com.

If you want to know more about daedalOS which is the client of all this ipfs magic, feel free to check out my YouTube video where I go over the various features, including ipfs. Thanks!

Top 25 Tips for Building an EXTREMELY FAST Website!!!

Dustin Brett — Mon, 25 Jul 2022 05:39:25 +0000

I recently did a live stream explaining what I considered the "Top 25" things I'd done to my website (dustinbrett.com) to make it "FAST". The video is over 2 hours so I was able to get into quite a bit of detail. An embedded video is at the bottom of this article.

In this article I will try and summarize each tip and add a screenshot/links.

1. Content Delivery Network (CDN)

This may be the best thing you can do to improve speed on your website. Getting the files to the user faster is something I've found to be the biggest gain in performance in my situation. My web server hosts files at quite a slow speed so it can take the user several seconds to resolve the DNS of my domain and get the initial files. Also my web server is centralized in one location. With the CDN it can serve cached versions of my static files from edge servers that are closer to the user requesting the files.

In the case of CloudFlare, I use their free plan and route my DNS for dustinbrett.com through them. The it points back to my actual web server which is where CloudFlare goes to get files whenever the cache becomes invalidated/purged. CloudFlare also has a lot of customizations and toggles to make things faster yet. I've linked to information about the free plan and their guide optimizing site speed.

2. HTTP/2 & HTTP/3

This is a simple trick as long as your web server / CDN supports it. Make sure to serve your content on the latest HTTP protocol as it offers performance optimizations in some cases.

3. Brotli Compression vs GZip

Another simple trick on the server side is to enable Brotli compression if it's supported. It's considered the successor to GZip and it does indeed seem to make things smaller, which ideally means faster and in this case it seems to be so.

4. HTTP Headers

This is important and ideally defaults to some sane values, but there are cases where if you don't setup rules you will serve files that are not cached and get requested every time. One place where I had ran into an issue was with .ini files which the server didn't know were text and so served with a Content-Type of application/octet-stream which also seemed to set it's Cache-Control to max-age=0. It took me a while to notice this as I was going through my page load request headers in DevTools->Network. The solution on my server side was to properly associate those extensions with MIME types like text/plain, which had a sane Cache-Control value of 1 week. The lesson here is to make sure you are sending proper cache headers to your users so their browsers know not to request things from your server unnecessarily.

5. Early Hints

I have mixed feelings on this suggestion as I was not able to make it work properly with my responsive images which make use of srcset (<img>)/imagesrcset (<link>). In theory though this seems like a very useful feature and if I had other files I care to do this with, I would consider setting it up. But my ideal use case right now for this would only be images and for that I need to wait for a server that supports a responsive Link header. I'd be happy to be proven wrong on this, but to me it seemed not possible if your images are based on dpi, to have the 103 Early Hints depend on the requesting browsers dpi and only send them the relevant image, instead of all resolutions. For anyone who is using non-responsive link headers and is on CloudFlare or any other server supporting 103 Early Hints, this seems like a good feature as it will tell your users to get images before they've even seen your HTML with the <link> preload tags.

6. Handle Initial CDN MISS

This is partially a tip, although the more I think on it the more I question it's usefulness. For sites like mine that are under heavy development, to me it makes sense to purge cache often as I change quite a few files on a weekly basis. Because of this, every edge server needs to go to my slow web server before they can cache the file to serve to their nearer users. What I do is visit the site and make sure in the HTTP headers for CloudFlare that instead of a MISS on cache from the edge server, it shows a HIT. But when I think about this I realize it just caches it on the edge server that I happened to visit. So for me it's faster as subsequent visits are HIT's, but for users around the world they will get that slow initial request if someone on their edge has not already triggered the MISS.

https://developers.cloudflare.com/cache/about/default-cache-behavior/#cloudflare-cache-responses

7. HSTS header

I'm not sure on what kind of performance boost this could possibly have, but I do like the idea of my domain being on a browser list somewhere that says, always visit this domain via HTTPS. By doing this you can avoid the minute slowdown from users that may visit your site via HTTP and ideally get redirected to HTTPS.

8. `<link />` preload & preconnect

I've found these preload's to be quite useful as I can see in DevTools->Network that the images begin loading before my dynamic website has decided it needs to show those images. With a site like mine where the content of the homepage is a desktop environment which the user can change, there is a chance that these preload headers may be of less use to users who have already visited my site and deleted the relevant dynamic content that would have shown those images. But to me it's worth it for most users that will do their first visit and see the images quicker because these HTML tags have told their browser to get images that I knew most users would need.

This is also useful after load and I make use of it when a user hovers their cursor over the menu button. At the time of hover I inject preload link headers into the document head as most users don't click the menu button at the exact millisecond their mouse goes over it, this gives the browser some time to preload the images which are very likely to be in the menu. Again my website being dynamic, it's possible the user could change the content of the menu which would make some preload requests unnecessary. But it's a minute cost for return visitors who want a dynamic experience.

9. fetchpriority

This is another new feature only available on Chromium browsers currently, but if your users support it, it seems worth using. The fetchpriority concept can be used for img, fetch & link. For any requests that I want to happen asap, I specify high priority.

10. HTML Minify / Tag Removal

I've always liked to have a minimal amount of HTML when possible, so finding html-minifier-terser was quite nice as it removed tags I thought were require but it turns out they are not. Tags like <head>, <body>, </html>. Also quotes often are not needed. This minification tool is quite good at removing useless HTML. Then I also run a script which removes other tags I don't care to have like <noscript> and some of the Next.js JSON data which I do not need.

11. Image Minify / Simplify

Another thing I usually try and do is have the smallest images possible. I mention it more in other tips on ways I do it, but one useful way is through minification. I use the Windows tool FileOptimizer to do lossless compression on all my images. I also use SVGO to make SVG's smaller as often times the path value can be simplified without any data/quality loss. Finally another simplification technique that I do which might not be totally ideal for everyone, is to use a minimal favicon setup. I use the absolute bare minimum which is just a favicon.ico file in the root and no supporting HTML to point to high resolution versions. Depending on your use case you may want to have some favicon tags, but keeping it as minimal as possible is still ideal.

12. WEBP vs PNG vs AVIF

When it comes to which image format to use, it will depend a bit what type of image you want to represent. If it's a lossy photo you took on your camera, it's possible AVIF may be ideal. If it's a lossless thumbnail/icon, then WEBP may offer better results, especially if you don't need some of the new features AVIF provides. But as long as your users support it, I think we should happily migrate to the modern AVIF/WEBP image formats over JPG/PNG for most cases as it seems to be the same visual quality in a smaller file in my experience.

13. Lazy Loading / Intersection Observer

I use several forms of lazy loading, but the most useful one for my load times has to be dynamic imports. This allows me to avoid bundling most of my app on load. Instead the components/modules are loaded on demand from chunks that Webpack has created.

Another way I do lazy loading is for all icons that represents files or folders. It does not load the icon until it detects that image has gone into the viewport. In the case of dynamic icons which require grabbing the file itself, for those I use JavaScript and the Intersection Observer to run the getIcon function when the button of the icon reaches the viewport.

14. Testing Lighthouse / GTMetrix / WebpageTest

Testing changes as you make them is the best way to know if what you are doing is going in the right direction. Many of the changes I've done have been based off of findings from tests like these. It's important to remember that these tests offer suggestions but that they don't fully understand your website and they can sometimes offer suggestions for things that are not worth doing and would make basically no impact to your users.

15. Web Workers & Offscreen Canvas

This to me is a very cool browser technology that I love to try and use whenever possible. Both my clock and wallpaper run in web workers and both of them paint their updates to offscreen canvases. Another advantage of moving my website components to this system is that if the main thread freezes, the clock and wallpaper continue. At the moment most useful things still run on the main thread, but I hope one day to move everything into separate web workers.

16. Target Modern Browsers (Avoid Polyfills & ES5)

If you have the luxury to not need to support very old browsers like IE, then I think it's time to drop as many polyfills as possible and to rely on modern browsers to have the functionality we need without having to give the user more code.

17. Advanced Library Settings

This is going to be specific to what libraries and frameworks you are using. In my case, 3 places where I was able to add additional optimizations was with Next.js, Framer Motion & Styled Components. In all cases there are advanced configurations which I love to go through to find little tweaks I can add when possible. Whenever I add something from npm I look for advanced configuration settings, just to know what's possible and if I like the defaults.

18. Prebuild JSON (fs, search, preloads)

This is an optimization I like to do whenever I notice I'm making the same JSON structure within my code. That is often a chance to make it once and access it via a static file, which is often faster, but not always, so test it.

19. Bundle Analyzer

When I actually took the time to look at my bundle and what was in it, I realized I had imported a lot of unnecessary things on the main app bundle that users were getting on load. This is a very helpful tool for seeing what is inside your Webpack files and then you can go in and use dynamic import to split it into it's own chunk which will only be loaded when needed.

https://www.npmjs.com/package/webpack-bundle-analyzer

20. Inline CSS

Loading CSS in the <head> element I think is still considered to be one of the fastest ways to get styling to the user. One advantage with using styled components and most CSS-in-JS solutions is that it can inline relevant CSS in the static HTML file so that it's ready to go as soon as possible. I don't personally use any CSS files, but if someone was to go that route, other tips such as the CDN, link preload & Early Hints can improve loading for those files.

21. Defer JavaScript

This tip comes for free with some frameworks which already use this attribute, but it's good to keep in mind that if you have <script> tags in <head> that you can use defer so they aren't parser-blocking and they can execute after DOMContentLoaded.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer

22. System Fonts

This may not work for everyone but for me who is making a desktop environment in the browser, it seemed like the perfect fit to just use the operating systems "system" font whenever possible. An important performance advantage of this is that the user doesn't have to download any font as they already have what they need. One issue with this will be consistency between operating systems, but I've found in general the fonts are similar and familiar to the users.

23. Async Image Decoding

I don't have much to say about this one other than to say that based on the description, if you want to "reduce delay in presenting other content", you should use decoding=async. It likely makes a very minor difference, but perhaps with larger images this could be a noticeable change.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding

24. Responsive Images

Using <picture> gives you a lot more control over images. Being able to load different images depending on what the browser supports and the state of media queries allows loading of the perfect sized image in any situation, so the browser doesn't need to resize something which either means the image was too small or too big, neither being ideal.

25. Define Image Dimensions

My final tip and an important one for content layout shift is to define the dimensions of images whenever possible. When you define the height and width the browser is able to allocate space ahead of time instead of moving elements on the page as the image loads and the browser realizes it's height and width which were not provided to it in advance.

Thanks for reading!

I appreciate you taking the time to read my article. If you'd like an in depth demonstration of these tips, below I've added my live stream where I spent over 2 hours going over them and showing their functioning within my website (dustinbrett.com).

Adding Animated Wallpapers to my Personal Website / Desktop Environment

Dustin Brett — Sat, 11 Jun 2022 16:39:45 +0000

For several years now I've been building my Desktop environment in the browser (daedalOS) and have been using the Vanta.js animated wallpaper called Waves. Last month I added my 2nd animated wallpaper called Hexells.

Then last week I was checking out the website Shadertoy when I came across Coastal Landscape. I thought it looked quite nice and it reminded me of a Windows XP wallpaper mixed with Van Gogh. After some hacking around with their embedded player I was able to get it to run in an Web Worker using an OffscreenCanvas which is also what I did for my other animated wallpapers. This keeps their animation work off of the Main thread.

Also last week while inspired by animated wallpapers I decided I'd like to revisit some features I wanted to add to my Winamp player, powered by Webamp. Specially I wanted to add streaming support and then get Milkdrop working which is powered by Butterchurn. It is easy enough to add Butterchurn as there are already instructions on their repository on how to do that. But what I wanted was an even lazier version of this code that would only load Butterchurn and it's presets if Milkdrop was open and the music playing. To do this I needed to add some custom handlers/logic which Webamp mostly supported.

Once I got that working I wanted to add the ability for the "Desktop Mode" feature to work which would allow the music visualizer to become an animated wallpaper. To do this I just had to move the DOM element into my <main> container so that it would properly sit behind the icons/taskbar but above the default animated wallpaper.

Then to add streaming support it turned out all that was really missing was the ability to pass those URL's to Webamp. To do this I added handlers for Load Playlist and Load URL which would take a URL such as a direct stream or a playlist file (M3U/PLS/ASX) and load that into Webamp to be played. To do this I used javascript-playlist-parser which did exactly what I wanted and supported 3 playlist file types.

Once I had this working then it is just a matter of finding a URL that can work over CORS which means you can go to https://dustinbrett.com and load a URL that is not from that domain. This ended up being easier than I expected because in my search for classic streams I recalled as a kid that ran on Shoutcast servers, I found SomaFM which was exactly what I was looking for. It has the station Groove Salad which is exactly the one I listened to as a kid. Although the one I remember as a kid is now called Groove Salad Classic. SomaFM supports M3U, PLS & ASX playlist files and works over CORS.

Finally I made a video recently showing these features. Feel free to check it out and throw me a like/subscribe if you enjoyed the video/article. Thanks!

A Day in the Life of a Software Engineer at Microsoft in Vancouver

Dustin Brett — Fri, 08 Apr 2022 18:25:43 +0000

I've been wanting to make a video of my day as a developer for years now. Finally I have taken the time to make it! This is a REAL look at my life with my family, living in Vancouver/Richmond and working at Microsoft. I also work on my side project in the evening.

WebAssembly in my Browser Desktop Environment

Dustin Brett — Mon, 28 Mar 2022 16:22:01 +0000

For over a year now I've been working on daedalOS, my desktop environment in the browser. At the start of 2022 I published the app as my website for everyone to play with.

Website: dustinbrett.com
Source Code: daedalOS

For the WebAssembly audience I wanted to discuss the many features I've integrated into my desktop environment which use WebAssembly. Here is a list in no particular order:

x86 Emulation via v86

I support dragging .iso & .img files into the app which can be ran on v86. It also comes loaded with Kolibri and Linux. When an app is closed a snapshot of the current state is saved to /Users/Public/Snapshots which is automatically loaded the next time the same image is opened.

DOS Emulation via js-dos

For this app you can open any .zip or .jsdos file in it. If you don't provide a jsdos config file it will boot to the command prompt. I have some preloaded DOS shareware games such as Doom and Duke Nukem 3D. Like v86 it will save snapshots on close and reload them on reopen, but instead of loading the emulator state it just loads the directory contents such as save games.

WINE (16/32-bit) via Boxedwine

This also supports .zip files and will try and run .exe too. It can run various apps as BoxedWine shows on their Apps and Games page. As an example I downloaded the latest 32-bit x86 Portable (zip) version of Notepad++, shown below.

Flash Emulation via Ruffle

This app supports .swf and .spl files. I have a few fun demos on my site such as the Badger Badger Badger and Windows RG (Really Good Edition).

7z/RAR/TAR Extraction via Libarchivejs

I support .zip & .iso mounting through non-WebAssembly methods, so to handle .7z, .rar, .tar & .tar.gz I've added Libarchive.js. Extracting is done from the right click context menu on each file.

Audio/Video Conversion via ffmpeg.wasm

Currently only supporting single thread because of the SharedArrayBuffer limitation and my desire to not deal with CORS issues. For video you can convert .avi, .flv, .m4v, .mov, .mp4, .mpeg, .ogv, .webm & .wmv. For audio it supports converting .aac, .aiff, .ape, .flac, .m4a, .mp3, .oga, .ogg .wav & .wma. These conversion options can be access via the context menu on each file.

Image Conversion via WASM-ImageMagick

Similar to audio/video, I support various formats of images that can be converted. They are .bmp, .gif, .ico, .jpg, .png, .psd, .tiff & .xcf.

Python via Pyodide

I've added support to run .py scripts in the terminal. It's also possible to open the Terminal directly and run a command such as py import sys; sys.version to see the same result as this example script.

WASI Modules via Wasmer JS

I've added limited support to run wapm.io directly from the Terminal. Examples of commands that work well are wapm cowsay {Text} and wapm uuid.

Space Cadet via SpaceCadetPinball

Finally for a blast from the past I've added 3D Pinball Space Cadet which has been ported to many platforms including to WebAssembly.

The Future...

Thanks for checking out my post/app!!! If you'd like to follow my progress as I continue to play with all things web/dev, please check out my YouTube channel. Here is my latest video where I discuss progress on this app:

Pushing The Limits Of The Modern Browser

Dustin Brett — Thu, 24 Feb 2022 07:14:59 +0000

This last month has been another fun experience in pushing the limits of browsers. As I continue to work on my desktop environment in the browser I keep finding new ideas for features to add to make it more useful.

I use my project as a way to try what is basically proof of concepts, either because of low browser support or poor performance. I have a few examples I have been working with that I wanted to share:

File System Access API

Based on an article I had read about storing directory handles and a comment from a Reddit user, I decided my app needed to be able to retain mapped directories.

It turned out to be quite easy as all I had to do was store the handle object inside IndexedDb and then get it again on load. The only real challenges were that I needed to re-request permissions if the tab is closed so I added a mechanism to query for permissions and request them on load of a mapped folder. The other challenge was how to easily write to IndexedDb, and for that I went with idb-keyval.

Audio/Video Conversion

For this I have integrated FFMpeg in WebAssembly form and added it to the terminal as a cli command and to the right click context menus of relevant file types. An example would be that I could now convert mp4 into mkv. A large downside of the approach I have had to do in order to avoid SharedArrayBuffer, is that it runs on the main thread and basically locks up everything except the wallpaper until it's done. But I hope to eventually solve this as they make improvements to the browsers ability to mitigate Spectre.

Image Conversion

I've gone with ImageMagick ported to WebAssembly to do basically the exact same things as with FFMpeg, but with a tiny bit less locking up. In the future I would like to get these things running in multithreaded Web Workers as well as have the ability to easily configure transcode settings to whatever is desired instead of the defaults as it is now.

File Search

I wanted to keep things client side as I only desire to host static files on a web server. To make this work I knew I was going to go with a prebuilt index. I created a script to go through the public directory and grab all indexable content from file names and non-binary files. This turns into a JSON file which I load as soon as the user types into the search box. To achieve this I am using a library called Lunr. As additional secret sauce, after the static index is search, results are appended for a dynamic search that is done on any content stored on the writable portion of the file system. This allows searching new content as it's changed/added.

IRC Client

And finally the IRC client. I have been wanting to do this for a while and I have to say it is 100% NOT done. Currently it is a proof of concept but I do plan to build a tabbed interface and channel lists so it can function like a proper IRC client. The idea had been going on since I read IRC v3 spec public servers were hosting WebSocket servers now that anyone could connect to. I recently say a great POC tester with code which convinced me to start making it. As it is now I can connect to the 3 public servers (irc.unrealircd.org, testnet.ergo.chat/webirc & testnet.inspircd.org) I know about and communicate directly with them using IRC commands like LIST & JOIN.

Demo

Thanks for reading my article. If you'd like to check out a demo I did of all these features during my monthly round-up video for my project, please check it out below and like/subscribe if you enjoyed it.