You are viewing archived messages.
Go here to search the history.

Arcade Wise 2023-10-30 14:55:56

📝 music thing

Created with Figma

Eli Mellen 2023-10-30 15:20:36

when approaching UI design, I find it really helpful to layout the goals that the UI will need to support before doing any design.

So, here, I’d ask “what are the top few activities that someone would be looking to do when using this UI?”

Eli Mellen 2023-10-30 15:23:12

inversely, I’d also ask “what actions don’t I need to support?”

that can help you decide what is a must have vs what is extra.

Arcade Wise 2023-10-30 15:29:30

I guess the main activity would be looking for a certain piece of media someone has heard about. Maybe price isn't necessary then... :>

Eli Mellen 2023-10-30 15:30:10

sort of following on that line “how will they be looking, what info do they need to find that thing?”

Arcade Wise 2023-10-30 15:39:46

Hmm, yeah

Mike Austin 2023-10-30 17:33:02

Honest feedback, good start. Design is something that you just need to internalize, and look at lots and lots of other designs and see what speaks to you. Sometimes you don't know why a design looks so nice until you break it apart. Then you can use that information to build your own.

Contrast, size, alignment, proximity, shape, etc. all work together (or not).

There's also a book (maybe overpriced but still a great read) that gets more into the details:

Mike Austin 2023-10-30 17:38:25

A few other things to try is to put yourself in someone else's shoes. "I barely know how to use a mouse. What am I looking at, what should I do?". Another is using realistic, long text in designs. If you use short ones like "genre", you'll find later that nothing fits. One more thing is you can blur the design to get a feeling of weight and hierarchy. If you can generally understand the hierarchy (without clearly seeing the text or images), it's good.

Tom Lieber 2023-10-30 17:49:17

What you have is so charming! I got noticeably cheerier after looking at it. Thanks for sharing. :)

I suspect putting real data in there might reveal a few small things to change, like I noticed that there’s probably not nearly enough room for artist and album names, for example.

If you want,!/MagicInk breaks down the user needs for a very similar store listing UI that I think is a good example of how you might answer many of the questions people are posing here like “What are people trying to accomplish?”

Arcade Wise 2023-10-31 16:16:43

Oh yeah!! I was actually super inspired by Magic Ink, though I might not have a hang on the ideas

Arcade Wise 2023-10-31 16:17:06

Thanks for those links @Mike Austin

2023-10-31 21:43:26

(hmm, the element-slack bridge is quite broken. From element, the activity in a thread I commented in left that thread, one of the replies was lost, and the rest continued as a separate thread)

2023-10-31 21:46:27

Konrad Hinsen: I worry that they they cannot see the importance of language interoperability, I also worry that it just turns out to be a lot less feasible than we'd hope, when you dig into the implementation details.

John Flockton 2023-11-02 17:27:38

Hey folks! I'm doing some research into code formatters/pretty printers, with a view to potentially building my own. Does any one have any examples of code formatters that they've found especially fast, or that they know of which have a special focus on performance?

I'm interested in learning about some of the potential techniques at play - what sort of caching and parallelization is being done, are they doing incremental parsing like tree-sitter etc..

Eli Mellen 2023-11-02 18:09:10

I’ve found fnlfmt, for the fennel language really readable.

Paul Tarvydas 2023-11-02 18:33:01

FYI, maybe - I’m not interested in speed, and this might not apply. I note that Ohm-JS has a interactive parsing mode (I haven’t tried it). I wonder if that means that one could attach semantics code (that’s the way that Ohm-JS is used) that does some formatting?

Paul Tarvydas 2023-11-02 18:33:39

[reply from John] Again, thanks! I’ll definitely take a look. Most of the formatter parsers I’ve looked at (e.g. Prettier, Gofmt), will create the AST of the full file, create an IR, and then do the formatting.

I’m wondering if each of these steps can be streamed incrementally, and if you can do each operation in parallel.

My initial thought is, possibly, but not without some difficulties. For example, Prettier formats line breaks with some awareness of parent and subsequent sibling nodes in its IR).

Jack Rusher 2023-11-02 18:34:07

This library implements a pretty expressive printer, following the algorithm presented in Porncharoenwase et al. ( 2023 ). The pretty printer is expressive, provably optimal, and practically efficient.

Full paper here:

Mike Austin 2023-11-02 18:52:20

I know that CodeMirror uses Lezer, which is capable of doing incremental parsing.

If you're not familiar with CodeMirror, it's a text-editor component that is highly customizable.

Arcade Wise 2023-11-03 01:47:29

tree-sitter is really fast, I don't know if anyone has built a formater for it?

Arcade Wise 2023-11-03 01:48:38

Looks like yes! topiary is a thing

📝 Announcing Topiary

We're happy to announce the first release of Topiary, a formatter for many languages that leverages Tree-sitter.

Slackbot 2023-11-02 17:33:06

This message was deleted.

John Flockton 2023-11-02 17:46:24

Again, thanks! I'll definitely take a look. Most of the formatter parsers I've looked at (e.g. Prettier, Gofmt), will create the AST of the full file, create an IR, and then do the formatting.

I'm wondering if each of these steps can be streamed incrementally, and if you can do each operation in parallel.

My initial thought is, possibly, but not without some difficulties. For example, Prettier formats line breaks with some awareness of parent and subsequent sibling nodes in its IR).

Benji York 2023-11-02 18:06:42

Ruff has a beta formatter compatible with Black:

Mike Austin 2023-11-02 19:37:50

Over the years, I've thought about different ways of creating an interactive tutorial about writing a simple programming language. For example, you can create a "wizard" style with next and back buttons, or you can create one single page with the code floating on the right side of the content (possibly sticky). One detail is that each example would grow in size (for the complete code), but would only focus on one sub-section. I thought about collapsing sections already covered, but being able to expand them, or just have a single button to expand all the hidden code. Has anyone had experience or have seen articles that use a "build from small to large", showing code along the way?

Mike Austin 2023-11-02 19:40:14

I realize it's a bit abstract. An example of "paged" tours wold be

Kartik Agaram 2023-11-02 20:10:50

I've always loved this walkthrough:

Mike Austin 2023-11-02 20:17:07

This looks like inline code (vs off to the side), and colored "diffs" to show the changes and also collapsed functions. I like it. Very visual.

Eli Mellen 2023-11-03 13:46:10

Similar to what Kartik Agaram shared, I enjoy how Build your own Lisp is setup.

Eli Mellen 2023-11-03 13:47:35

I particularly like that it makes evident a thought process behind the code. Many examples start with a naive implementation, and then, once the idea has been communicated the chapter concludes with a “cleaning up” section that gently optimizes what has been done before

Mike Austin 2023-11-03 16:33:35

Thank you Eli. Yes, it has a similar format and I like the build-ups. To support "visual diff" and code folding, I think I'll add Markdown code comments at the end of the line. Maybe something like:

NumericLiteral                  // >

  = value:[0-9]+ {

      return {

        type: 'NumericLiteral', // +

        value: Number(text())   // +



GitHub Markdown support adding + and - to the beginning of the line, but I want to be able to support other hints, maybe tooltips for example.

Eli Mellen 2023-11-03 16:38:23

legit, I tend to shy away from tooltips because they are a headache to make accessible — I think that is why I’m drawn to this more literate code style, but I defo see the gap it leaves in getting comments sort of right as close to the code as possible

Mike Austin 2023-11-03 16:43:27

Maybe not hover tooltips, but like static popup notes

Steve Dekorte 2023-11-03 21:22:44

Assuming you already have good reference docs on your website, you might wait for the LLMs to crawl them and then create a tutorial chat UI on your site that asks the user for simple apps or examples they'd like to write, and walks them through how to do that.

Could also periodically have the LLM generate a bunch of simple examples with descriptions, for quick tutorial browsing. Conveniently, these would update as your docs and APIs do. It's possible the docs themselves could be autogenerated...

Mike Austin 2023-11-04 04:22:30

Ah yes, I haven't done much with AI/deep learning. That could be the start of my journey.