Skip to content

Instantly share code, notes, and snippets.

@wilmoore
Last active August 28, 2024 22:23
Show Gist options
  • Select an option

  • Save wilmoore/8cf5a6942ab9c687b7556477825797aa to your computer and use it in GitHub Desktop.

Select an option

Save wilmoore/8cf5a6942ab9c687b7556477825797aa to your computer and use it in GitHub Desktop.
Software Engineering :: Web :: Browser :: Extension :: Development :: Enhanced Gists

Software Engineering :: Web :: Browser :: Extension :: Development :: Enhanced Gists

⪼ Made with 💜 by Polyglot.

related
research

Features

On any website (i.e. YouTube.com)
  • Overlay a Gist with transparency, open in new tab or edit in place
  • Allows editing a Gist in place over the current web page
gist.github.com
  • provides a keyboard shortcut for edit
  • autosave every 10 seconds if content changed since last save

Inspiration

Summary

There are so many things to love about GitHub Gists; however, there are so many ways in which they can be improved. GitHub Gist is my favorite place to write. When I want to spike out some code, I write it in a Gist. When I have an idea for an app, I write it in a Gist. When I want to journal, I write it in a Gist. When I want to learn a new technology, I create a new Gist for it. The power of a GitHub Gist is grossly underrated.

Gist is a GitHub side-system, meaning, it is a system separate from the main GitHub service. The Gist system can be interacted with via the web UI or the GitHub API (additionally, you can append .json to the web URL of a Gist to retrieve a JSON representation of the Gist content where markdown files are pre-rendered in the response):

  1. A Git repository per gist for storing the file content of the Gist.
  2. A database entry for storing the Git repository ID, description, public/private status (not for security, but whether or not it shows up in public search), created_at, files, owner (currently useless since anyone witht the URL can access any gist).
  3. A web UI allowing users to create/manage their gists
  4. A search service (likely elasticsearch or postgresql) so gists can be searched. From what I can tell, they are only indexing on the title and maybe the description, but not the content of the files.

The Web Interface

The web interface provides the following main functions:

  1. Create a new Gist
  2. Delete an existing Gist
  3. Edit/Update an existing Gist
  4. Search for existing Gists
  5. View and existing Gist where markdown files are rendered as HTML

Creating & Editing Gists

A new Gist requires at least one file. Each file requires content (in other words, you cannot create an empty file). If you do not name the file, it will be named automatically gistfile{1..N}.txt.

There is a weird edge case where when gistfile1.txt doesn't exist, but, gistfile{N}.txt exists, if you create a new file with no name, the highest numbered gistfile{N}.txt file's contents are overwritten without warning witht the content of the unnamed file.

This behavior is not incorrect, but unexpected. I would expect gistfile1.txt to be created.

Brainstorming & Other Ideas

Inspired by Dropbox Interface

inspired-by-dropbox

I love the dropbox interface. It's clean and things seem easy to find.

image

GitHub Gist Interface

image image image image image

Google drive, not as much, but, it's also not terrible

image

GitHub CodeSpaces

Then, there's codespaces, which is really nice because it's a real editor in the browser

image image image image

Gist QuickSearch Results on YouTube

For an interface like this, we'd need OAuth 2.1 (or a Personal Access Key set in LocalStorage or IndexDB)

image


image

Expandable Search Input

image

Craft

"Search in the document"

Craft Inspiration

Table of Contents, Insert Table, Insert X

Craft Table of Contents

GitHub Expandable Search

Closed

Closed

Open

Open

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