Skip to content

Instantly share code, notes, and snippets.

@panphora

panphora/feedback-from-linus.md

Last active October 15, 2020 22:56
Show Gist options
  • Save panphora/0933aabba85dce006efe8a630f6652f7 to your computer and use it in GitHub Desktop.
Save panphora/0933aabba85dce006efe8a630f6652f7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
feedback-from-linus.md

Feedback on Remake

Notes:

  • Run on Fedora Linux with Node v12 and Yarn
    • Yarn seems to break some of the dependencies so I'm on npm now.

What I did

  • Ran remake create...
  • Opened quick start guide, but I was following the tutorial so I closed it
  • Logged into trello clone
  • Saw that the tutorial made the trello, but I already have the trello, so I switched to skimming the tutorial and working on my own.
    • I looked over the Trello example to learn the basics, and started from scratch.

Onboarding + setup

  • Having to install something globally is not desirable for some, maybe just recommend npx remake --?
    • I ended up running npx remake create shelf.
    • The feedback/UX provided by remake create is pretty good, with progress updates in the CLI.
  • Very strange that a starter app is quite complex. I expected a boilerplate that I could immediately start adding stuff to.
    • Maybe that boilerplate page could contain what they should do next.
    • Quick start tells me to sign up in my app before I move on but... this isn't my app? So that's kind of weird.
  • I was looking for "so which file do I just start adding stuff to, that'll make the webpage change?" and this was not immediately obvious. I looked around a bit.
  • Can I add /username/thing page by adding /user/thing.hbs? Or is it more complicated where the only pages in /user are special predetermined?
    • This was in docs but not in README.
  • Once I started going, my first question was: here's my data schema, should I put it somewhere? What's the next step to seeing something on the screen?
    • Having that trello app was a big hindrance.
    • BIGGGG epiphany moment when I found data/user-starting-data.json. But weird that I have to pregenerate ID's for stuff? I guess the idea is copy from an existing user's data, but manual editing is sometimes nice.
    • I inferred how this works but I couldn't find docs on this data/ directory stuff.
  • A really helpful doc would be "here's everything in app/ and what each thing does."
  • Styles
    • I'm not a Sass person. I write standard CSS and SCSS sometimes if I need to.
    • I put a .css file in assets/sass/ expecting it to compile, but it didn't get moved to dist/.
    • Look in docs but found nothing.
    • I ended up just linking /scss/blocks.min.css since it was being copied across. But not ideal experience imo.
    • Did the same with main.sass -> main.css and started fresh, and that felt good!

Developer experience

  • Weird that there's so many _remake* directories at the top of my project, which I feel like is my turf. Maybe it can be hidden under a .remake/ dir or something?
    • I feel like this should be in node_modules/? How does Next.js work?
  • Should I be able to modify the package.json? I feel like I should, but it's named remake-framework, which is confusing.
  • .hbs files didn't have editor highlighting so I had to update my editor configs... might be cool to consider by default.
  • The directory structure thing is super obvious, super nice and easy to work with. The app-index seems a little inelegant but otherwise, really intuitive.
  • The per-directory README is really nice, but hard to discover and navigate. I'd consolidate into one README at the top of the project?
  • What's flashErrors?
  • Documentation about data-*
    • This was honestly pretty tough to figure out from documentation.
    • I was thinking "I need this piece of data on the page to have this behavior. What collection of tags do I need?" and the documentation wasn't very helpful.
  • Occasionally Remake would throw an error (Unhandled Promise Rejection) and it would hang the following requests for pages. Maybe just restart Remake in this case automatically or catch it earlier?
  • BUG: If the user data isn't in the correct schema and causes a template error, sometimes (not sure if always, but could be) causes a completely indecipherable error and hangs pageload.
    • It seems like I got into this state because I accidentally misused a data-o-type directive and said object where I should have said list, or something like that, and it really broke the DB.
    • When I set a wrong data attribute like this, it's really hard to understand where my mental model doesn't align with what Remake sees, so debugging is a chore and gets frustrating very quickly. I just end up putting weird data-l- attributes in plausible places in DOM and testing things until it doesn't destroy the database.
    • Still not really sure where data-o-type='s and data-o-key's should go, even though I've gotten it so far with trial and error.

Feature set

  • G Suite login or something like that?
  • Is there a hook/directive for removing something from a list without clicking on it? Click to remove seems unintuitive at times.
    • Can I add a hook before delete to confirm?
  • Can I just add a "delete" button to a list item that's always there?
  • Hot reload would be sick, but not essential.
  • I'm using blocks.css. What's the best way to make the field buttons look like blocks.css buttons?
  • Throttle if a bunch of items are added at once, instead of many network requests?
  • Save indicator?
  • Can I show computed values? Like, I want to show "X links shared" at the top of the page.
    • Probably a HBS thing.
  • Is there... a good way to do continuous integration from GitHub? Not a must, but would be really nice.
  • Is there a good way to make a property of an object editable without it being visible? Like, say, a link URL?
  • How are schema changes handled in the deployed version? What have you done in the past?
  • The objects created from my Remake app doesn't have id's.. and it's also sorted pretty arbitrarily. Are those related? Should I have ID's for everything?

Linus's notes for writing

My initial data design:

User:
    - Bio
    - Website url
    - []Topic, sorted (e.g. "software", "community")
        - Name
        - Description
        - []Entry, sorted: label, url
  • It's basically my JSON DB for polyx/etc but automatically done for you.
  • Feels almost like my data and state management is all taken care of, and I'm just in charge of rendering the view.
    • Feels like the nice UX of React, thinking of view as a function of state, not thinking of state management.
  • A really helpful thing to do right after determining the data schema seems to be to map it to a DOM structure where every JSON node has a place to anchor. This helps assign data- directives later.
  • From when I first had the idea, I had an app I wouldn't be very hesitant to launch (sans marketing material) in 4 hours, and that was my first time touching this library. That's kind of cool. I anticipate the design / layout / core logic not to change much.
  • Preview link feature -- if loaded with ?preview=1 or something pretend as if not logged in.
  • Extra referrents in one way data binding
  • How do I custom domain?

... A few days later:

TLDR:

  • I started working on an idea that I'm actually pretty excited about. Something I'll definitely use, and a few others might too. More below 👇
  • I've been writing down a bunch of feedback and some questions for you, but none are super urgent -- I've found easy workarounds for anything I needed so far. I'm sharing a GitHub repo for you but can get the feedback to you if other methods are better.

Progress

Sorry I never sent you an update over the weekend. In truth, it got pushed back a little bit b/c something consumed my entire Saturday. But I made some meaningful progress today. Here's what's being built.

  • I'm making shelf.page, basically a way better looking and easier version of https://linus.zone/technical-reading. I've attached some mockups with descriptions below if you're curious. I think it fits the Remake model pretty well and is something that I'd actually use for a while.
  • I'm pretty comfortable with the codebase now, and have gotten the rhythm down so I can just hack like normal from here. Remake is making things faster than it would otherwise take b/c I basically have no backend 🙌 More about this in the feedback.
  • Haven't hit 4 hours yet, but I'll give you an update with progress when I do. I anticipate I'll have at least an ugly-but-working version by then.

Feedback

You should let me know the best format for you, but so far I've been just putting feedback / comments / questions in a FEEDBACK.md in my github repo. I shared that repo with you if you want to see any updates real-time, but alternatively, I can share it in a google doc that I can update periodically. Just let me know. So far, it's mostly questions about why certain things are the way they are, and what I ran into during onboarding/setup.

The FEEDBACK.md in the repo is pretty disorganized atm b/c it's just what I wrote for myself to clean up later.

Besides the feedback in the repo, here are some questions I thought of:

  • Is there a hook/directive for popping up a confirmation modal before deleting? When deleting a big list (like a whole "stack" in the trello clone) it seems to easy to perma-delete a lot of stuff at once)
  • Is there a recommended way to customize the delete/save button styles offered by remake? I'm trying to stick to a design style (see: mockup attached) and would be awesome if the remake buttons were the same style.
  • What would be a good way to try to show a save indicator? Maybe an error pops up when there's error saving and I just haven't run into it yet? What I'm trying to achieve here is just offer guarantee that if something looks like it saved, it definitely did.
  • What's flashErrors in default.hbs? I haven't touched it because it seems like it's there for backend error reporting, but just curious where it comes from / why it's there.

... A few days later:

I have some extra questions I ran into here:

  • Is there a good way to make some property editable without it being visible on the page (for example, a link / URL related to a list item, where the URL might not be visible all the time)?
  • How are schema changes handled once the app is deployed? What if I want to change a property name or want to refactor a property out to a list? Am I going to have to be forever-backward compatible? This is the main reason I haven't run remake deploy yet. I guess, in general, it's very unclear how much visibility I have to a deployed remake app.
  • When are objects in my data given ID's? Some of the things my Remake template creates have ID's, other things don't, and I'm not sure what's making the difference.

... A few days later:

Lastly, I have some last questions/feedback I ran into while adding polish + deploying (also on the doc linked above)

  • Can I add a custom domain to my deployment? Was honestly kind of expecting this as a given but I couldn't find any material on it on the documentation site.
  • It would be useful to have documented somewhere exactly what files are uploaded to Remake when I do remake deploy. It looked like it copied some of my _remake-data/ which I was not expecting to happen. Also something that would be good to document: if I re-deploy to the same url, what happens? I haven't tried it, but couldn't find much written about this.
  • Actual deploy process was super slick and worked as expected, and was pretty fast. Very pleased that I literally just ran remake deploy and it just deployed, haha. But I think more documentation or visibility around what happens under the hood would definitely make it less of a scary black box.
  • It would be really cool to have some way of asking for a "preview version" of an editable page. I wanted to be able to give someone a link to a "preview version" of their page (view as if they're logged out) and had to resort to telling them to open it on incognito, which isn't ideal (ideally it's just a link with ?preview=1 set or something. Do you think this makes sense to work on?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment