Investigate the effects of using a ResizeObverver for triggering the Tiles component when supported

👩‍💻 I'm currently working on...

Webfront Studio! There is a gap in accessible website generators that don't require development experience. So, I am aiming to produce an accessible and open source website creator geared towards small businesses and organizations.

🌈 Goals

Entirely open and transparent, including the source code
Feature a content management system that guides users into making accessible and inclusive content
Require no development knowledge from small organizations
Be self-hostable and extensible for developers

💼 I'm currently working at...

Blue Origin! I am developing web applications with delightful user experiences that put people and payloads in space. 🚀🌌

Learn more on my LinkedIn.

🕗 Some interesting past work...

Adding strong TypeScript typings for Bind Deep (bind-deep). The first draft was undoubtedly a challenge, but so worth it!

Will Mutate (will-mutate) is a Babel plugin that alerts if a mutation event occurred on inputted objects — essentially, a silly version of TypeScript read-only types... but at runtime. And oh golly, does it make use of ES6 Proxies.

My overengineered portfolio! Fun fact, the background header image is generated using an offscreen canvas using the user agent string, so take a peek at it on a few devices!

Rocketry.js is my mega project where I control RGB lights and buttons on MIDI controllers. It's an exciting take on hardware control using TypeScript.

Occasionally I will also work on my glitch art style pixel sorting web application that uses off the main thread scripting in React.

	// Trigger on page load
	// - Won't have scrollbar which may cause a jump
	// or subpixel issues (mitigated by `tileSize + 1`)
	// initialRender();

	// Trigger on window resized, zoomed, device rotated, moved to another screens, etc.
	// - `requestAnimationFrame` delays the call by ~0.5ms on x6 slow down on a clean environment but may improve the performance when multiple resize events occur at once. This occurance is rare since `render()` is quicker than a layout reflow, which occurs after requesting the frame, but I still want to protect against this edge case.
	// - I can't pinpoint any negative effects because the system must already be impacted to be noticable (e.g. large canvas, x6 CPU slowdown, no offscreencanvas, and a lot of other tabs in the same process), and even then V8 optimises the calls very quickly
	// - Basically, the reflow from all of the responsive styles of other elements have a larger impact than this component
	// If you have more information on the performance of this component, I'd love to chat :D
	window.addEventListener("resize", () => requestAnimationFrame(renderHandoff));

	// Trigger on DOM content loaded (interactive DOM, not all resources)
	// - Allows scrollbar to be included in the calculations in most cases
	if (document.readyState === "loading") {
	// Loading hasn't finished yet
	document.addEventListener("DOMContentLoaded", initialRender);
	} else {
	// `DOMContentLoaded` has already fired
	initialRender();
	}

	// Tripper after all resources (fonts, styles, images) are loaded for the last initial paint
	// - In case a layout update occurred after the first-to-the-punch `DOMContentLoaded`
	if (document.readyState !== "complete") {
	// Loading hasn't finished yet
	window.addEventListener("load", renderHandoff);
	}

evelynhathaway / personal-website Goto Github PK

personal-website's Introduction

👩‍💻 I'm currently working on...

🌈 Goals

💼 I'm currently working at...

🕗 Some interesting past work...

personal-website's People

Contributors

Stargazers

Watchers

personal-website's Issues

Investigate the effects of using a ResizeObverver for triggering the Tiles component when supported

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent