Skip to content

Instantly share code, notes, and snippets.

@FredKSchott
Last active June 17, 2021 18:46
Show Gist options
  • Save FredKSchott/cb3e34378e5684cb32629b02fdf1506f to your computer and use it in GitHub Desktop.
Save FredKSchott/cb3e34378e5684cb32629b02fdf1506f to your computer and use it in GitHub Desktop.
Astro User Research

Astro User Research - 06/12/2021

I joined Salma (@whitep4nth3r) on their livestream and helped them use Astro for the first time. Below are my notes on the experience.

Video

https://www.twitch.tv/videos/1054128448

Notes

  1. process.env works inside of astro files. We should probably turn that into a warning somehow to use import.meta.env instead.
  2. the people REALLY miss prettier support
  3. another example of someone trying to use fetch() inside of a .js/.jsx and having it not work! 3b. dito for top-level await, but I can't remember if it worked or not
  4. unclear where the Astro syntax docs were, this person ended up in the "publishing astro components" docs
  5. style on top of files may be more common than on bottom, for our template examples. I prefer that and just saw it slightly trip up this streamer
  6. another example of someone who wanted an easy way to log debug info to the screen,. A built-in component could be nice
  7. Collections are tough to understand.
  8. she really wanted to be able to build a collection at the top-level (/$index.astro). 8b. second example of the permalink vs. file location relationship being off (doesn't warn if permalink !== file location)
  9. source map line numbers on the error page feel off? Didn't confirm.
  10. Collections are realllllly tough to understand. I think we do too many "learn by examples" in the docs and not enough "here's what should happen in each part of the collection function return object"
  11. our docs reference $[collection] which isn't a thing
  12. lol someone in chat likes the logging
  13. ⛔️ oh god, if you add a / at the end of whatever permalink returns, it crashes the entire process.
  14. hard to find, but they did the wrong thing in their permalink function (used ({tag}) instead of ({params})) and it just really silently caused things to break (since it returns a string, hard to see that it was broke). We could add some checks for "undefined" in the final permalink URL, but also maybe we could redesign so that it isn't the lynchpin of the entire thing 14b. If two calls to the collection permalink() fn return the same URL, I'd expect that to be a bug.
  15. docs don't highlight collection.data enough. This person didn't read deeply enough into the example snippet to find the .data usage but it also shows that we're hiding/obfuscating the relevant bits in our examples. 15b. Some of docs assume you're reading through them from top to bottom so they're very diff oriented, this is rarely the case
  16. ⛔️ empty css class strikes again, killing her entire Astro process. took like 30 minutes to find that as the broken thing. Easily the most frustrating experience of the entire thing.

Astro User Research - 06/12/2021

Finally listened to Chris Coyier on Shoptalk talking about Astro, took some notes here.

Podcast

https://shoptalkshow.com/467

Notes

  • both hosts very excited about it
  • both hosts got tripped up by what .astro files are called. We need to start calling these Astro Components more consistently (new docs site should help with this)
  • both hosts talking about how weird the .astro syntax is but also how satisfying it is -- we should do a better job of showing that Astro syntax is just HTML + code fences, JSX snippets, and props. I think it comes off as a lot of magic when you just jump into your first astro file.
  • "a bit of a mind bender": console log in the Astro components runs in Node.js, not in the browser. (one thing that this made me think of: pushing node.js logs to the browser via HMR. we'd talked about this in Snowpack, but now that we're running more code on the server we should revisit)
  • a lot of love for :idle and :visible (lesson I keep learning: we can't talk about these two features enough!)
  • people do seem to get tripped up on the fact that :visible does inject a little JS in your site.
  • Both hosts loved the interoperability /w all frameworks
  • haha we got an HTML Imports reference
  • Chris found our props syntax weird (good thing that was the first thing we decided to fix/redesign in our RFC call earlier this week!)
  • "I was able to build the exact same site in 30 minutes, and I've never used Astro before, so I'm a little stoked about Astro" -- OMG SHIP THAT QUOTE
  • Chris mentioned in chat already, but he wants on-demand file builders for Netlify
  • "I hit a wordpress API to build the site, so doesn't that immediately make you think about "well, this could be an in for headless wordpress"" -- Chris can you read minds?
  • "it just feels so natural to me"
  • "what I'm big on is building in components, period. I want to build in that way."
  • Chris talks about "feeling the DX burn" whenever he goes back to Wordpress development in php for CSS Tricks fks — Today at 2:28 AM
  • "HMR / Fast Refresh is table stakes"
  • "I want my folder full of markdown files, that's what I want!"
  • Oh, sounds like Chris had a weird Markdown experience with Astro. Mentioned needing to "fetch" Markdown, didn't seem aware of the "src/pages" markdown support.
@whitep4nth3r
Copy link

I had so much fun and thanks for joining me! Just a word of warning – the video will expire after 14 days so you might want to skip through it and clip sections you want to preserve!

Good luck and I look forward to the future of Astro!

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