This web browser uses an HTML/CSS renderer I wrote from scratch, drawing to a JavaFX canvas. The first step in the process to render a page is making the HTTP request in an independent thread for the root HTML file. Once this is loaded, it is parsed into a tree structure of the HTML tags. From this structure, a more formal DOM can be assembled. While the DOM is being created, any external resources, such as image references, can start being fetched and processed as well. The next step is to generate the render tree, which contains information used to draw each node. The most interesting part of the render tree is that changing one element has recursive impacts throughout the tree. If a child node grows larger, the parent must grow to fit that size. But if the parent’s size is fixed, say by a CSS rule, then the child must know to make line breaks, overflows, or whatever is specified to fit that constraint. This relationship is handled by a couple of recursive functions that propagate information either upwards or downwards through the tree to make sure the rendering is true to the HTML. At the final step, each node is drawn to the canvas and the webpage is visible. This browser does not include a JavaScript interpreter, so unfortunately many modern webpages are not visible with it. I have, however, added some bookmarks to HTML-only sites that render pretty accurately.
This Jupyter Notebook steps through the process of decoding a JPEG image file. After learning to understand these files byte by byte, its clear that a very high level of engineering and foresight was needed to achieve the stability and efficiency that allows for millions of pixels created by a variety of cameras and applications to be packed into small, uniform files. However, much of the available official documentation for this process is either extremely brief or lacking real world examples; when it comes to procedures like ZRL encoding or Huffman table parsing, it takes more than a few sentences to get all of the details necessary to implement them. As such, I’ve created this repository using simple to understand functions written in Python with custom diagrams for all of the tricky sections. Hopefully this will be useful to anyone looking for an example of how the bytes are parsed in JPEG decoders.
This application provides creates a clean, minimal interface to use through flash cards that have a variable number of sides. I use them in particular for studying Chinese, which allows, for instance, having English, pinyin, characters, and parts of speech for any given word all on the same card. The visual for this is a cube, which I have animated to flip and spin to show the selected side of the cube while blurring the other sides. The webpage is hosted with AWS and using a Lambda function to store user data and accounts in DynamoDB tables.
This website provides a simple means to budget and track finances. The web application uses an API served by an AWS Lambda function. This allows the front end to interface with several Dynamo DB tables that store users’ financial records and encrypted login information. Through making API requests, the application does not require a traditional server to be utilized and is fully interactive even though it is statically hosted. In this case, I use a public S3 bucket to hold the HTML and JavaScript files. For low traffic websites with minimal connectivity requirements, this serverless design is low cost and efficient as compared to a typical cloud-based server.
3D graphics algorithms have reached a point where they can be implemented in pretty much every platform efficiently, but there was once a time where vertex buffers and pixel shaders just weren’t in the memory budget of the average computer. In these times, developers created some very clever methods of simulating 3D scenes and objects without actually calculating the distances normally necessary for such a visual. This small Java file implements one such method, 2D ray casting, to simulate a FPS view walking in a 3D maze. The entire file is around 160 lines with no 3D model, and I think gives an awesome effect for so little cost.