icon sc-linkedinlogo of codepen-iconlogo of github-iconyoutube play button

notes by Adam Sullovey

web & mobile application developer
practicing in Toronto, ON

My dynamodb-admin fork (GUI for DynamoDB local)

I found a browser-based GUI to work with my local DynamoDB instance during development: dynamodb-admin by Aaron Shafovaloff. It’s the best I’ve found yet, because:

  • it feels fast
  • it uses an acceptable amount of RAM
  • it works

Also, it’s open source, which means…

But I can make it better

After using it for few weeks, I wanted to improve a few things:

  • better text search
  • JSON validation of documents in DynamoDB
  • reduce the amount of scrolling I do

So I went to work.

Replacing the Ace text editor with CodeMirror

I tried configuring the built-in with Ace editor, but couldn’t get it to behave the way I wanted. CodeMirror is used by CodePen which I’m more familiar with, so I switched to that. Then I made 3 changes:

  1. I set up JSON validation which will notify me about invalid JSON in the editor’s gutter
  2. Made the CodeMirror editor expand to always show 100% of the document so that my browse’s native search feature can always search the whole document instead just the content on screen
  3. Make the save & delete buttons used fixed positioning so that they are always available at the top of the screen, even after I’ve scrolled down the page.

screenshot

Sticky positioning on the Save & Edit buttons

This always trips me up. For position:sticky to work the way I want it to, I always have to make sure all parent elements of the sticky elements have a min-height of 100vh. In this case, main is the parent of nav, so main and its parents get their min-height set.

html,
body,
main {
    min-height: 100vh;
}
nav {
    position: sticky;
    top: 0;
    z-index: 100
}

Where do I get this code?

This lives in its own branch at https://github.com/adamsullovey/dynamodb-admin/tree/use-codemirror-editor while I figure out if it could be merged back into the main project.

What else could I improve?

I want Command/Ctrl + S saved the updates to the document to the DB instead of having the browser prompt me to save the page to my hard drive.


Other DynamoDB GUI tools that don’t work for me:

I tried these out and found they weren’t what I needed.

  1. dynamodb-gui

    • does not work. It is just boiler plate with no routes for actually browsing anything
  2. Toolkit for Elipse

    • poor support for our nested data, not worth the time taken to install java
  3. Razor SQL

    • more features for other DBs I don’t need eat my RAM
    • not open source, so I can’t modify it to fit my needs