Posts

Showing posts from February, 2019

Super Simplified HTML Rendering

Image
I wanted to provide a quick overview of the different ways html can be rendered. At various points I have found myself needing to explain these concepts to either non technical folks or someone just learning web development.

To begin begin our super simplified HTML rendering we need to start with a super simplified overview of web architecture.

The browser sends a "request" to a server:
Browser -> Network -> Server

A server sends a "response" to the browser:
Server -> Network -> Browser

This is done with a protocol call HTTP. The webpage you visit is an HTML document that comes in an HTTP response from a server. This web page will probably then send other requests to the server for things like JavaScript, CSS, images, or dynamic content.

If this super simplified web architecture already got the HTML to the browser, then why do we need to render it? And what does it even mean to render it?

HTML needs rendered because content on websites is almost always…

Functional, Verbose, Sensical: A Programming Language Proposal

Image
A while back I wrote up some quick thoughts on what a programming language would look like if it's identifiers could contain spaces. In my example program I also had the colon used for setting spaces and the single equals sign used for comparisons. The other day I had some ideas for a purely functional version of some of these same concepts.

Here are the features of the as of yet non existent programming language:
The only objects are modules, globals, functions and parameters.No variables. This is a purely functional language.Every global and parameter is a stream and so can have 0, 1, or more values.Modules define, import, and export globals and functions.Each module can have a single entry function which is the function that is run when the module is run.Identifiers can contain spacesSetting globals and parameter defaults uses a colonConditional equality expressions uses a single '='.If statements are streamlined as shown below for easy conditional handling.Each function…

Canvas based Web Components: Lessons Learned

Image
I recently have spent time learning html canvas and found it to be a perfect fit for web components. Finding the need to maintain simplicity while creating canvas animations I have learned the following lessons.
Setting the sceneThe web component should be responsible for creating the canvas and sizing it to fill the needed space. This will often be the size of the web component itself but might also be the full window size in some scenarios such as for website intro animations.

The the web component should pass around configuration values, maintain environment information, and run the event loop.

Configurations passed through the attributes of the element should be scaled to a value of 1. For example providing a speed of 2 should double the speed. In this way client code does not need to know that the default speed might actually be 7, for example.

Here is an example of how you can scale a provided attribute from the value of 1:
this._defaultSpeed =0.1;this.speed =parseFloat(this.getA…