Live CEOing Ep 713: Language Design in the Wolfram Language [Elegant Code]

A livestreamed design review (Live CEOing Ep 713) led by Stephen Wolfram with John Fultz and Jeremy about "elegant code" rendering in the Wolfram Language. The group iteratively experiments with fonts (Wolfram Modern for math; Source Sans code for base), font tracking, line spacing (multipliers adjusted in-session), operator/bracket coloration and weight, comment/string styling (including background-color proposals), and UI affordances (annotations, delimiters, and style environments for an upcoming 13.3 release).
Questions this video answers
Wolfram Modern.
Effectively Source Sans Pro with a monospace toggle, called 'Source Sans code'.
Previous multiplier 1.1, changed to 1.2 and then to 1.3 during the demo.
April 19, 2023.
Guy Kawasaki.
Chapters
Okay. Hi everyone. We are talking about elegant code and its rendering. So let's take a look. Oh yeah, let's take a look at some of these. That's pretty nice looking actually, I think. Could you go back to standard size?
Oh, yeah, sure.
Okay, go, go back to the lodger again.
Okay, that was 150 that I was at.
Do we have some code that was written by ChatGPT?
I don't have any.
There must be some in that post that I wrote.
Michael just sent something. Let me. This is, this is my, this is my one.
It's not chat gdp.
I can provide one in five minutes.
Yeah, with all those commenting and so on. Okay, so scroll down a bit and, and by the way, I assume that this font, whatever it is, what is that font anyway?
So this, so the, the, the math font is Wolfram Modern. What is the base font, Jeremy? I don't remember.
It's effectively Source Sans Pro, but it's got. Got a toggle to make it mono. Right. So it's called Source Sans code.
Right, right. And with my changes we probably won't need to do that because I, that's what. One of the things that I added was a parameterization that. I mean, you were doing that because you wanted to be able to pick up the monospace version of the, of the Wolfram font. And I, I now have that. Completely parameterizable.
Okay.
By the way, that slash app looks really sucky.
Sorry. Oh, here, here. Yeah, yeah. So now you, you sent email with something that was kind of similar to this. And in that case, I think it had to do with, you know, maybe spacing, you know, like this sort of spacing and such. I mean, you know, this is the consequence of taking a, you know, sort of a shotgun approach at just monospacing all the operators.
Well, we could make that operator not be. I mean, we don't have to make inside the operator. It doesn't have to be monospace, does it?
That's tricky.
Seems like it can't possibly work to be monospaced inside the operator. If you type, just type on a new line F AT X.
Yeah. But AT is taking the full width of the monospace to take F slash.
Slash, X. Yeah, that's sucky.
Yeah, yeah. And the arrow is too bold.
Which arrow?
Any. Yeah, my eye again goes only to the arrows. The only thing I see when I look at this. Oh, well, you know why that is? Because we grade down these guys. But it doesn't look like I grade this down.
Yeah.
So that's fixable.
Right. Michael, Christopher, others. You know, on the surface, this looks quite elegant, but I'm worried that not knowing where there's a brace and where there's a bracket question is. Okay, here's the real thing here. Is there an implicit semantic grammar of Wolfram language that is in our heads? We know that most of those brackets have to be brackets. They can't be braces. There's very little ambiguity, if you understand what I mean. So you barely need them. You know, you need them only to precisely define what you mean. In other words, there's redundancy in the way that those are there, and therefore, if we grade them, it's not going to make any difference. Do you agree with that statement? Or to what extent do you, like, need the bracket, need the braces to understand what's going on? And to what extent is it, like, you could just fill it in in your mind easily enough?
You definitely need the braces.
No, no, you need them. I mean, Michael, you need them. The question is whether, when you first read this, your first impression, for example, in that list plot, those braces strike me as more necessary than the square brackets. And I'm kind of wondering if the braces should be darker than the square brackets, because I think square brackets, they. You know, you can always fill in where they have to be. If you make. If you. If you. If you see what I'm saying.
Yeah, I think I know what you mean.
I mean commas similarly, John, do we have any control over this in real time? Can we. Can we make the braces darker?
Well, it's everything.
No, that's not going to work. So, I mean.
Well, I'm sorry. What I mean is all of the gray operators would. Gray would. Would change color together.
Okay, but. Fine, but that's not what I was looking for. What I'm saying is, I would make an argument, as I'm looking at this, that the square brackets are purely sort of. They're like. They're like guidelines of some kind. They're like. They're like, you know, the. The. You know, the little blue lines on. On. On paper or something. They're things that are useful, you know, that they're just infrastructure. Whereas I claim that the braces and the commas are more important making sense, and therefore, I would suggest.
But not black. Right? You're saying you want them some. Yeah.
Well, yeah, go ahead.
Like, if you see salt, opening square, random sample, I think there, the spacing looks pretty good, but on the left, listboard square, curly, that looks too large for me.
That looks unpleasantly large.
Well, it might not look so large if the brace was darker. I don't think the spacing is so terrible, I have to say. I mean, I think. Oops.
Made it lighter. Sorry.
Meant to make it darker.
There we go.
Yeah, well, I mean, that doesn't really have the effect because everybody got doggo. Yeah, right.
Yeah, yeah.
So make it back to the lighter again.
Okay. There we go.
Yeah, so I think having the braces be darker will be useful. Slightly darker. And I think the commas as well, especially because they're kind of small.
So the. I mean, you know, we talked about the rule characters popping. Of course, now that's, you know, the only things that. The only operators that I touched were basically the match fix operators and the commas. I mean, you know, there are, you know, like, you know, that's still black as well, and that's still black as well, and so on.
No, that's okay. I mean, that's okay. I think those are black. I think that the multi character operators have to be tweaked. Slash at and those things. Those have to be tweaked.
If you want, I can drop some more code that Michael sent me from Chat GPT.
Yeah, fine. Okay. And then scroll. Scroll down this one to just see this one. Now let's take a look at Christopher's one and so on. There we go. Looks pretty nice to me.
There's quite a lot of code here. I'll screw up a bit.
Michael, what do you think? I think this looks significantly nicer than it would do if everything was black and more closely spaced.
I agree. I wouldn't mind a little bit more color difference of the comments. Like, the comments now look a little bit too much like user functions to me.
Well, I mean, there's also the possibility of a different font for comments. Is there a possibility of a different font?
Oh, absolutely, Absolutely. Yeah. I mean, give me. Give me something and I'll throw it in.
I don't know. Jeremy, what do you think?
I don't know. It's source. I don't think another similar sans would work. If you just want to see something different, you throw in Georgia. It'll just be a serif.
It was just changing for something to do.
Interesting.
What was that?
That was just a size change.
Okay. I don't think that really helps.
Okay, font family. Georgia.
Just.
Just Georgia, right?
Yeah.
There we go.
Wow. Reminds me of that program Mongo.
It does seem like a lot of the brackets are really far apart.
But is that a problem?
I mean, I think both the closed brackets at the end, like where there are four, you know, five closed brackets, I think that looks a little strange. But also like if you look at the plot, open bracket, open list and the plot, all six functions together, I think that looks pretty weird.
It looks very readable. I mean it, the fact that it looks unusual, I mean it's going to look different. The question is whether it looks more attract, you know, more. Because I feel like the floor, ceiling, square root, blah, blah, blah, blah, blah. It just looks more literate than it did before.
Well, I don't know.
I think it's. I think, I mean the useful thing is when you can sort of semantically have some things be closer and some things be further right, which there already is a bit of. With some of the sort of auto formatting stuff in input cells.
There we go. There we go. I set font tracking just on the, the structure operators. I can get even a little more.
So what does that, what did that just do?
I had set font tracking on everything to get better letter spacing for the font.
It was tight, but it.
Yeah, I was adding a little bit too much space for the operators.
Yeah, so. So this is font tracking just on the, on the gray stuff. The square brackets form the part extraction. They are too near on the characters. Like on the right. Most X range. I don't like them.
Yes, those look wrong.
Which ones?
Near the bottom. The thing that sticks out furthest to the right. They basically touch the E. Yeah, that's wrong.
Yeah, yeah.
Yeah.
I can, I can blow it out a bit too. I just, I never remember what the values are. I have to go look them up. Condensed, semicondensed. Okay, that's, that's.
It's not something you can do in real time to make the, the braces darker, is it?
It's all the gray stuff together. I can make any changes to all the gray stuff together at once.
Okay.
So this is tighter than normal, but only marginally tighter than normal.
Sorry, what were you doing?
Which, Sorry, I just, I just loosened up the font tracking. So on the structure operators or what I've been calling them, you know, the match fixing commas. So it's tighter than normal tracking, but only a little bit.
I'm totally confused. What.
As opposed to three that. So that's normal tracking.
Okay, now go back.
Okay, I think. Yeah, here we go.
Could you scroll up and, and show some of that older code we were looking at?
Sure. The.
Yeah, keep going. The stuff from Jeremy, for example. I think it will help to have the braces be darker and the commas.
Okay.
And. And remember that.
Okay, that's a little darker. I can go darker.
Yeah, but you're adjusting everything. Yeah, okay. Right, but. But I'm just. I'm saying I think a variation of the darkness of the brace relative to the bracket will be important.
Oh, okay. Okay. Yeah. Can you hit a couple of point thesis somewhere. At around some characters, some function. Just a couple of parentheses. Okay. There you go. They seem to have a much wider spacing than the one we saw earlier with the comments. They will.
Very tight. Okay. We didn't finish the discussion about comments.
Right.
What about. Here's another crazy idea for you. Maybe it's not doable. What about a background color for the comments?
Sure, yeah, that's totally doable. Let me. Let me get a comment on screen. Okay. Were there no comments in this section?
You can make a comment there.
Michael had lots of comments.
Okay. Yeah. Get rid of the Georgia, bring it back to.
Okay.
And also, it doesn't help that the spacing of the. The paren star is crazy.
Yeah, yeah. That I can't do anything about. See? So we want background. Give me a color.
Jeremy. Very, very light. Very, very light blue. Okay.
Oh, it's too late, apparently.
Is that something. Oh, that's.
That's.
Jeremy, do you think this is going to work or do you think it's crazy?
I'm worried the padding is going to be really tight and make it look ugly.
I see. It might be right. What else can we do to these?
Sorry, sorry. That's. I expected to be able to change the background and it's not. And I'm not sure why the. Yeah, I'm not sure why.
Okay. All right. Jeremy, what else could we do here with these? I mean, what about changing the font tracking a lot for these. For these things to make them much more textual and much less kind of.
Cody, plain text or. No, Is it code? Is that a font style now, John, without the mono.
So it is. It's using the same font font as this, you know, so.
Yeah, maybe plain Source, no mono.
Right.
Won't change much, but the brackets will.
And the try change.
Maybe italic too?
Yeah, no, I don't think so. Sorry. You want what? Source Code Pro, Source Sans or Source Sans? It like.
Not italic.
No.
Okay.
I think that's a faux italic. That doesn't look real to me.
It's also. I mean this isn't. We're talking about changing the tracking, so this is. It just looks like code.
You have to get rid of the font. The tr. The font tracking.
Okay, the. I mean, you want it tighter.
Yeah, we want normal. I don't think it's that.
No, that. What? That was normal.
Oh boy.
That's. That's super tight.
Okay, loosen it a bit. But this is much better. This is what we want. Is that looser again? Okay, there. That's much better to my mind. And then that really distinguishes it from the code, don't you think? Anybody else, Jeremy?
I think it's maybe a little tight. It's better. It's a little too tight. I could see it being slightly smaller too.
Yeah, I agree. Slightly smaller will be good. Although we're looking at this in a magnified size. Yeah, that's just down a point.
There we go. There. So that's, that's one tracking level.
That looks good to me. That looks better.
And then you want me to try a size.
Yeah, just down point.
Oh, sorry, that's up.
That looks pretty good to me. Okay, so. And by the way, those italics for the, you know, function, the pattern names. Yeah, that's some kind of faux italic presumably.
It's. I mean it's whatever the system is giving us for this font which. Sorry, I just don't remember off the top of my head. Entirely possible. Synthesized. Yes.
See. Okay.
I'm a little bit worried with this change because frequently people do comment out a piece of code and it changes it a lot. So I would rather prefer to keep the sites and not maybe so change the sites size.
But you're not worried about the, about the tracking?
Not so much. But the sides.
Well, I don't know. Let's try. Just take a piece of that code, John, and comment it right now. Not that one, a bigger one. Go ahead. It's not that bad actually. I think. Could you unselect it please?
Yeah, I just wanted to toggle it again without the scroll bar jumping so you could see the difference.
Okay, now, now toggle it back again.
Okay.
And unselect. Doesn't seem that terrible. I mean we should. We should. Can we see this at 100%, please? No, not magnified. Jeremy, what do you think about the color of the comments? Why do we go other than gray?
I don't know, it feels like we're fighting. Wanting them to be seen versus not wanting them to see, seen. I think it depends on the use case.
Can we try just plain gray, John? Yeah, like gray level 0.4 or something.
For the comments you said.
Yep. Okay, seconds.
I feel like the code with like English commentary That's a different use case than just commenting out a piece of, you know, non functional code or some older piece of code.
Right.
That's great.
Oh.
What I am.
I think I may be running into some kind of bug here because this is. This. Oh no, no. Sorry, sorry, sorry. I see what's going on. Okay.
And now I want to see some of Christopher's code here.
I was tweaking the wrong value level of 0.4. Yep, there we go.
I think it looks better than the green. I do too. Want to change the gray level, Jeremy?
I'd have to see it on my machine. This looks okay, but I'd want to see it on my Mac to be sure.
Yeah. Okay. And we have to see how it agrees with the gray levels of the brackets and things.
Yeah.
Okay, let's see some of Christopher's code. Okay. Bigger chunks. Actually, let me, let me look at some of those other ones. Sorry, you were just scrolling down. Can we just look at the, the.
Which one?
The Michael Michaels. No, no, no, the SHA 256 one.
Yeah, that's Christopher's. Yeah.
Ah, strings are gray. That may be what we wanted to distinguish in the, in the comments. Yeah. The problem is here that seeing this with so much blue. Could you switch off the blue? Just make the blue be black?
If I can find it, yes.
Oops. Now I mean, what happens to output here? You just take one of these things and say hold of that whole giant, like hold of that width or something and let's just see it as output. See what it looks like.
This for example.
Take the whole width and just stick in the hole. That's just weird looking. I mean, so that doesn't have any of the, of the. I don't even understand why it doesn't have any of the syntax coloring yet.
Oh, because output cells never have syntax coloring.
Okay.
I mean it's an easy thing to play with, but it's a decision that you know, we made a long time ago, which I think is a pretty good decision.
Maybe for the brackets. It's not the right decision here. I mean, because that's. It's surprisingly unreadable. In that case. Ok, can you scroll down through some more of this code?
Yeah, and I can. That was. That was it. There wasn't that much.
All right. Okay, can we see. Did Jeremy have sample code there? Wait a minute. That was the.
Yeah, there's some big chunks at the bottom of mine.
Yeah. So let's take a look.
Okay, so let's see like roundness is what you were thinking?
No, no, even more there's, you know.
What Are you able to just make this a narrower notebook?
There you go.
Yeah, there we go. Ah, here we go. I think that's what you're looking for, Steven.
Yep. Yeah. Boy, it's pretty hard to read. What would happen if we increase the line spacing?
Code is pretty hard to read though. I mean I think it's just that the format that like unformatted. Yeah, I'm not sure how, how easily that can be help.
I mean this is hard to read. There's no. Yeah, I mean would you say the same thing about math? Well, probably it's different because math is usually human, really human written. Whereas this is sort of semi. Says this is sort of semi machine. Did you, did you make it? Did you increase the lines? Basically?
No, I didn't. But let me just remind myself what the current numbers are. So I know. See?
0, 2. Okay. So do. You figure it out?
I thought I was changing it, but it does not seem to be changing. So let me just do it this way. There we go.
Change it to be slightly smaller, please.
Okay, so that's just a tick above what it was originally.
Yeah. Now just so what are the parameter values? We got a multiplier, right.
1.2. The previous multiplier was 1.1. I ticked it up to 1.2.
That's 1.2. Yeah.
This is 1.2.
Go to 1.4. Too much I think. I mean this code is really hard to read. Okay, 1.3. Okay, let's scroll through some other code please.
Okay.
I did you globally.
No, I did not. That's. That was what I was struggling with is I didn't remember where this was coming from. But. But I can change anything else you want change.
I mean that one is going to already have some. Just scroll, scroll up. I mean that, that seems to me at 1.3 was okay, but this may go crazy if you have the linear. Is that 1.3 there?
It's now 1.3. I just changed it.
I think you scroll to a different one. Scroll up.
Here we go. This is unchanged.
This one change. Okay, that was the change.
There we go.
Well, that's better in my view. Jeremy, Christopher, others.
It'S better for this case. Just have to balance this versus you know, smaller chunks.
Well, let's look at some for something that's a two line chunk. Could you go scroll up please?
Sure. Let's see something like this.
Yeah, that one. And then make the line width smaller.
Increase the size that's the increase size.
Now make the line width smaller.
Yeah.
Where was it? Sorry? Which one was it?
The selected one here.
And that's the 1.3 case.
That's 1.3. Yeah.
Looks okay to me. We need to think about comments versus strings and what we can do there. I think the strings look pretty good in gray. What can we do with the comments? Well, the tracking helps because we're not. Are we? We're not. The tracking for the strings is the same as the tracking for the. For the functions.
Correct? Correct.
Okay, you scroll up in this thing, please. Yeah, it needs that 1.3 for that one at the top. It's obscure. Try, try, try changing that again to 1.3.
I'll change both of these.
It's better. Honestly, this looks pretty good to me. You know, there's a few glitches we're noticing here. Okay. Michael, My feeling is that. Perens. Okay. Braces, I claim, should be the darker gray. Do you agree or disagree? What? Parens, I guess, should also be the darker gray. Because they are necessary. You. You have to. Yeah, I agree. Association brackets probably like the.
Sorry. Braces and parens, you said?
Yeah, braces and parens are the darker one. So the only one that's really lighter is the square brackets.
What about arrows like the braces? Dark.
Yeah, they should be like.
They should be dark gray.
Yeah.
And these operators just need to be clean. The multi character operators just need to be clean. They should be black. I think. I mean, I admit that some operators like at. AT could conceivably be gray. Michael, what do you think about that?
Oh, some of them I would be a little bit concerned.
Well, let's talk about which is which. I mean, to me. AT and at. At. Go ahead and slash.
At I consider to be the same.
Fine, but do you think dark gray? That seems right to me.
Yeah, I think that is fine.
But I mean, something like a slash is obviously black. Just a single slash or plus sign is black. Do you agree?
What about slash, slash? It.
Should go gray. Just for consistency, the whole thing.
Not just.
Yeah, yeah, yeah, yeah, yeah. So I'm saying that, that these things which are essentially structural operators that are sort of morally similar to brackets should be the dark gray color. Brackets themselves should be the light gray color. Yeah, but.
But then AT is morally similar to square brackets.
I know, but it should be a darker gray. Okay. Yeah.
I think the moral similarity is breaking down.
Yeah. And the colon equals. Should be black.
Yeah, that was, that was. I was trying to think whether it might Be a difference of single character operators versus multi character operators. But I realized colon equal. You don't want to be different from plus.
Sandra is asking, should the vertical spacing caused by explicitly using enter be different from the one caused by overflows but by. By line wrapping? I don't think so.
All right, so. So, you know, I mean, this maybe speaks a little less elegant code, but as. As you're well aware, I mean, we have this situation where, you know, you might have multiple inputs, you know, one plus one and two plus two. And these are in the same cell, but they actually create two outputs.
Yeah. Which I hate. Yep.
But, you know, one could imagine having some kind of visible delimiter to kind of magnifisorial clue you in that these are.
I think that will be magnificent. Like a dotted line.
Yeah, yeah.
I think that'll be great.
So I can.
I mean, also remember what's really going on there is that there's an in three that's implicit. Exactly. That maybe that's where we should do something. We can have. Could we get an N3 in there?
Yes.
Because it's just an annotation to the cell and we just have to put another annotation on that side.
Right, right. The. Yeah, there was a bit of a technology problem around this, but that was. That was kind of solved a couple versions ago.
Okay, well, then I would strongly favor that.
I'm not sure that with actually, I mean, the technology problem was related to what we did to solve the line numbering in the package editor.
Okay. Okay, I got another comment. If you can put an annotation, can't you just increase the space between the things which are distinct? Yeah, and that would be fine.
I mean, when I say annotation, I'm including that sort of possibility.
Yeah. Okay. But I think that will be fine. That together with the fact that when you actually evaluate, you get different N numbers, that will be just fine.
Yeah.
That means if you.
If you might not be totally obvious in just a two input case with lines that don't wrap.
I understand that, but it's better than nothing. So it will be much more obvious when you evaluate.
And something related that came across my radar recently, someone making this sort of mistake. And here the syntax coloring is helping you a bit. You know, the colon equal being magenta. Telling you that that's not a complete expression. But we could maybe emphasize this sort of thing even more.
We could. Look, I think, look, percent modernization somehow relates to all of that. I'm so keen on percent modernization. You are Going to start working on.
It as soon as I can find any freaking time. You know, it's all the priorities.
Yeah, okay.
Frankly, I'd rather work on that than some of the other things that I'm asked to work on.
Well, fair enough. Okay. What else do we need to cover? We're going to run out of time here. What else do we need to cover in this meeting?
Well, okay, so the, I mean, there's a question of what, if anything, we're going to do for 13.3.
We're going to have this in there somehow.
Yeah, so, so, so the, the, the distinct, you know, some operators are this color and some operators are that color. We're not going to do that for 13.3. So, you know, there's a partial thing.
So then, then, then I suppose it should just be a style sheet which will, which we will not advertise yet.
Right, so, so right now, right now it is a. And environments. And just for your purpose, we also threw a menu item in here. But all the menu item does is it just creates a notebook with that environment set.
I don't think we shove the menu item yet if we're not ready with all these features.
Okay, okay.
I think we should have a style environment.
Okay, well, I'm not fine working elegant.
I think you've got a better idea.
Throwing the environment in 13. 3 and it may not be fully baked yet, but, you know, it can be there.
Could you throw an elegant print too?
Yeah, yeah, yeah, I can do that.
Okay.
Yes, yes, Elegant print would be very worthwhile. Okay, well, I mean, we clearly need to incrementally. Is this packet updatable at all?
Not as presently implemented.
It's a shame because, I mean, we should. Yeah, this is, this is an important thing. This is going to be a big win and I can guarantee that I'm going to be asking you for this, for things that I'm writing and so on, to render this way.
Well, and of course, I mean, I'm only going to deliver to you the desktop front end for, you know, web, cloud, whatever. We're going to have to pull in other people.
Right, who need to be informed about this going on.
Yeah.
All right, well, I think this is, this is good. I think. Anybody want to make any further comments here? We do need to think some more about. Well, I think we've. We figured out something about the comments, although maybe they need to go a slightly different gray. Jeremy, what do you think about that?
I can try it. I'm not convinced. It might not look intentional.
Right. Fair enough. Well, I think the tracking change and the size change will help.
I'll look at that. Maybe we can tone back the current color just a little more desaturation of the blue and it's not as loud.
I'm not sure why the background setting didn't work. I would consider that a bug. That having been said, I'm not sure that changing the background is the right call.
Well, but Jeremy's point is it's going to be too shrink wrapped around the characters.
Yeah, it's always way too tight.
That is true. That is true. Yes.
Right. Okay, good stuff. Thanks guys and see you later. Okay, bye.
More from Guy

Cheryl Strauss Einhorn | The Human Edge: Smarter Decisions in the Age of AI | Talks at Google

Rachel Glennerster | Innovation and the Center for Global Development | Talks at Google

Rebecca Winthrop | Rethinking the Purpose of Education in the Age of AI | Talks at Google

Dr. Robert Wachter | A Giant Leap: How AI Is Transforming Healthcare... | Talks at Google






