Monitoring UX in Single Page Applications

• photon

  6 2,472 6.7 Rust

  ⚡ Rust/WebAssembly image processing library (by silvia-odwyer)

  For the image, you are able to either use your webcam to take a photo, or upload a photo of your own before moving onto the filters. Image filtering is included in most image manipulation libraries. I had used ImageMagick before, but had a terrible time with it. I wanted to find a better way to do Instagram-like filtering. I came across Photon, a high performance image processing library written in Rust and can be compiled to WebAssembly, and there was already a React demo so it was easy to integrate. Once you choose the filter you want, you move onto the decoration stage.

• purrybooth

  1 13 0.0 JavaScript

  v cute photo booth

  For more info on Purrybooth please try out the app for yourself at purrybooth.com, and check out the code on github.com/rachelnicole/purrybooth. For more info on Datadog Real User Monitoring, check out Datadog's RUM documentation.

• SurveyJS

  surveyjs.io

  sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• fabric.js

  49 27,419 9.3 JavaScript

  Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

  

  This was the trickiest part to solve! I knew I needed to use a canvas element, and I would be placing the filtered image as the background, but I also needed a way to add the stickers. I ended up using Fabric.js to achieve this, with some additional custom interactions I had to integrate—such as changing the z-index of the stickers and the capabilities for removing them. Once you’re done decorating with the stickers, you go to the final page where the canvas is rendered as an image, which you can save and share with your friends.

Suggest a related project