Frank's Projects

A Material Design - Like Design System

I created a MUI like design system to learn about CSS and to use for various projects. I tried to make it smaller so that assets load faster. This page contains links to various components that make up most frontend design systems that you see out there. I will probably be adding more in the future. Need to create some more useful components.

Google Maps Implementation

Demonstration of the Google Maps JavaScript API, not only showing GEOJSON locations on a map, but also drawing circles and polygons on the map. This page was created because I want to include this functionality in another project. Need to fix how Google Maps API works on SPAs.

Lexical Implementation

This page contains a demonstration of my vanilla JS Lexical Rich Text Editor Implementation. It contains a demonstration and some description (which is currently not great) of how I went about implementing the editor.

Various Lexical Implementations

This page contains a demonstration of various different editors. When implementing rich text editors, you want different versions of an editor for different things - i.e., a article builder editor with all components, a comment editor with only some components, and a text-only editor that can handle links. This page shows some demonstrations of different editors. Add to this page when you create a new editor type.

Article Builder - Final Implementation

I created a few different implementations of an article builder until I created one that I feel I got right. This implementation includes a sticky navbar and an editor that has a variable height based on the amount of content in the editor. I should explain this better.

Article Builder Implementation 3

This version of the article builder allows users to insert multiple <section>s - with each section either being custom HTML and CSS or a Lexical Rich Text editor. The sections can be rearranged through drag and drop. I felt this article builder was too difficult to use on mobile devices, and also just too involved in general.

Article Builder Implementation 2

This version of the article builder is similar to the third version of the article builder, except that it doesn't allow users to insert custom HTML and CSS. This version of the article builder was again too involved and difficult to use on mobile.

Article Builder Implementation 1

This version of the article builder takes up the whole page - giving users the whole screen to write a blog post or something similar. The styling of this article builder was no good and the styling also gives users the wrong impression of how content will look on mobile / tablet devices.

HTML, CSS, and Javascript Playground

I created this page mainly to test out my codemirror (see npm) implementation. I also used the time creating this page to look into how I might safely implement user-supplied-code into my site, but I didn't find anything that I wanted to work on. This needs to be improved my implementing a view of the console of the <frame> element.

Create a Poll

Using this page to demonstrate the functionality of something I want to implement in an application - a way of creating polls and analyzing them using AI. This involves allowing users to insert multi-modal input (upload images, audio, video, and custom HTML as a response to a survey/poll question). Need to come back to this.

Record Media

Demonstration of uploading / taking / recording images, audio, and video using JavaScript web APIs. I wanted to create my own implementation of recording audio / video / taking images, and I also wanted to see how it works. You can also test out uploading images and getting suitable sizes for mobile, desktop, and tablet devices. I need to review / rewrite the content for this page.

Create Gradient

For some reason, I was really interested in CSS gradients one day so I created this page, on which you can create your own Linear and Radial gradients with any amount of colors / modifications. I think I created this page because I wanted to learn more about SVGs too.

Census Information Near You

I created this page as a demonstration of dynamically loading google maps javascript maps / dynamically loading GEOJSON and also to figure out what kind of information I alreay have about census communities around the United States. I also wanted to test out the Geolocation JavaScript API.

Markdown to HTML

I created this page to test out my Markdown to HTML system that I created with marked-js. This page contains a code editor that you can use to inert markdown and see the resulting HTML using my current system. I might switch from using marked js to pandoc in the future for markdown to HTML conversions.

Configure Font Size Adjust

I use a custom font, Anuphan, on this site, and I wanted to find the best way to configure the <size-adjust> property of a @font-face declaration to minimize the cumulative layout shift. On this page, you can sww what the optimal font <size-adjust> property would be for every font on google fonts.

Looking into Embedding Social Media Posts

I created this page in an effort to look into safe ways to embed different social media posts so that I could include that as an option in my Lexical rich text editor. I wanted to test this out in a production environment to make sure my content security policy directives were correct.

Testing CSS env Variables

I created this page to test out CSS env variables that are available to developers to make styling easier on different devices. It can be difficult to create styles for different types of mobile devices, tablets, and computers, and these CSS variables make it easier. I had to upload this in production to test out many different devices easily.

Convert File Type

I created this page so that I can easily convert images, audio files, video files, and documents to different file types, i.e., png to jpeg or docx to HTML. I created this page using imagemagick for images, ffmpeg for audio and video, and pandoc for documents. I still need to work on converting documents to HTML and making it look good for jupyter notebooks, markdown, and tex documents.

JavaScript and Python Playground

I wanted to create this page because I oftentimes go to different website to run a small snippet of JavaScript or Python code that I want to test out, and I would rather just do it here. This page also gives me the opportunity to find out more about sandboxing user-supplied (untrusted) code.