Skip to content

Instantly share code, notes, and snippets.

@mike-pete
Last active May 16, 2024 18:38
Show Gist options
  • Save mike-pete/3565ee0b38963f8e792f12199677d1d8 to your computer and use it in GitHub Desktop.
Save mike-pete/3565ee0b38963f8e792f12199677d1d8 to your computer and use it in GitHub Desktop.

Webpage Layout Builder (proof of concept)

Why is it cool?

  • The canvas can be resized, allowing you to see what your design would look like with different screen sizes and aspect ratios
  • The elements of your design are stored in an object/tree, maintaining the page hierarchy while allowing constant time access to each element
  • The elements in the design canvas (center) and hierarchy (left sidebar) are recursively rendered
  • Design elements can be deeply duplicated (including all children in the duplication) (which involves some fun tree traversal)

Repo (with GIFs) | Demo

Type Safe RPC Library (for iframes)

Why is it cool?

  • It allows cross-domain frontend function invocation (you can invoke functions that live in an iframe)
  • It's a nice abstraction of postMessage
  • It has TypeScript intellisense support (achieved with generics and a proxy)

Why is it useful?

It's super helpful for Chrome extension development. If you host your extension's UI with Vercel and inject it into the current page with an iframe, you can just push updates to Vercel and your users will get the updates as soon as they refresh their page (bypassing the slow Chrome Store review process).

Now that your extension's UI lives in an iframe, you can use Bime to facilitate communication between the iframe and the content script on the current page.

Repo | NPM

Bolt (Chrome Extension to Track Job Applications on LinkedIn)

Why is it cool?

  • Client-side webpage scraping
  • Most updates can bypass the Chrome Store review process (thanks to Bime)
  • Has a handful of users
  • Analytics and user interactions are tracked with Posthog

Website

CSS Only Light/Dark Mode Toggle

A webpage that allows you to toggle between light mode and dark mode without using any JavaScript.

Why is it cool?

  • Seriously, there's no JS involved
  • Involves some whacky CSS

Repo | Demo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment