Safari is the new Chrome - Jen Simmons of Apple

I also,

it's hard to run old versions of safari. So one thing I wish you guys would do is also just give me a simulator for an old version of Safari as well, because We had a bug on the syntax site that was only popping up on

And don't forget to subscribe in your podcast player or drop a review if you like this show.

So what does that mean? That's a that's a pretty big that's, like, more than grid. That's, like, a big change to the language. So, things that are important to Apple. So what are those things? Privacy, Adding up to a lot. Right? So so, I mean, that's how life usually is. Right? There's no one thing. Part of it is communication.

and for saving electricity.

12 columns, C is chroma, h is hue. So you're, like,

VisionPRO, if you want it with iPhones, Ipads. But, like, if you wanna something on an iPhone SE, for example, and you don't have an iPhone SE, Wes you can grab the simulator and test it on the simulator.

The like, memorizing that the c in chroma means this. And if I push it the number up this direction, it's gonna be this way. And if we pull the number that way, it's gonna be this.

But then from then on, you don't ever have to get a cable out again, and, you you write input, which will and makes you not enforce a row grid, Then you should have Yeah. Oh, Wes. Oh, 360. Oh, 480. Oh, 4 oh, does it look good? I have to make sure, and yet none of us quite realized Honestly, what I really like these days is the ability to stand up and walk around.

via that, ran it, and then then I was able to reproduce the bug and fix it via that. So if you are ever in that problem, maybe just download a simulator. Yeah. Yeah. Actually so I should state that this episode is coming out on February 2nd,

24% average CPU usage duration Scott.

or border on grid cells or grid tracks. Yeah. I wrote a, And then what you would do is say grid template

Proposal for CSS Grid Masonry for a long time, and I feel like we're almost there. But,

Wrap each column in its own div and sort of permanently assign certain things to certain columns.

you can use a Mac and use Web Inspector But there are use cases where, like, maybe you don't want that. And in fact, as you said, Wes, that was one of the most Wes Inspector

what's his Node, from Mojo?

Flexbox is another one. That's a different thing. We got multicolumn.

to be a nice fallback for HTML because It needs to be elegant if you People were really upset with Safari for not having support for something, And they would ping me on social media, which I love. Please do. Ping me on social media. Mhmm. And I would look it up. I'd be like, oh, we don't have support for that? And I'd ask around. I'd look it up myself. I'd I'd go find out, and they'd be like, I like OKLCH.

like, mega footer Wes you've just got bunch of different sets of links You can anyone listening could go to webkit.org, Yeah. Yeah. Well, ESLint some of these ideas about Grid, they seem really cool and really obvious in a way from a graphic design perspective. But from a brow from a CSS over the years. And there's some really interesting details about, Sometimes about privacy function, But, you know, for sometimes Wes it's like, oh, this CSS isn't working the way that I expected it to, sometimes an app will actually build their own browser inside the app. That's often built on WKWebView.

Yep.

And when it downloads, it will download the simulators

not much better. Both of them are are pretty good, but this it's cool. You just click on timelines, click on CPU, And I've I've gotten some heat for that on Twitter because people Yes. They're like, oh, but this flex Bos bug from 3 years ago that is no longer an issue

Line up in 2 dimensions.

I could walk about a 100 feet and I'd have to Wes. I had to sit down and Wes, and then yeah. It's bad. Long COVID is You are not the 1st guest to sick pick walking. Yeah. So, anyway or not.

is the is easily the browser that gets me the most

10 feet, and then it was like, okay. I can get out the front door of my building, and then it was like

Like, there's 4 columns. There's 7 there's 6 columns. There's

It's

simulator,

that's sort of burning through somebody's battery that you could look at and Make better so that it doesn't your Scott doesn't burn up somebody's battery.

Working out details on some of the standards, getting updated, web designers and developers on what you want, at WebKit Safari are working really hard to And there are these models.

Head on over to syntax Scott m for a full archive of all of our shows.

He also enjoys walking. So if you wanna work at Apple, go for walks.

we really overhauled

Do we wanna talk a little bit about the the VisionPRO

if if you're down for it, we would love to extend this conversation again some other time.

because there's a little bit of a, sometimes

That's called Safari View Controller, which is like a little mini Safari that can live inside of any other app.

pick something that you've been really enjoying

this font.

control.

rows, but instead of defining rows, which is what you normally do with grid, where you'd say, I want my rows to all be 400 or I want my rows to be auto, in which case it's, like, be however big you need to be able to fit the column the content that you have. Instead of that, you just say grid template rows Wes should be, like, grade 4.

But there's a lot of juicy stuff that I think folks don't really haven't really noticed, You Node, there's many flavors of theories, And I I really mean this honestly as a human being who's always prided myself on being very straightforward and very honest with people.

things that we call sick picks and shameless plugs, where you can,

in life. Anything. Could be anything. I think we've we've picked gochujang sauce or all sorts of stuff on here. So whatever you like. Oh,

I mean, people people may be like, where JS Jen been? Why isn't she been on your show? It's because, COVID. Don't get COVID.

Yeah. I mean, webkit.org, it's also used by

It's been are more comprehensive than they used to be. They used to sorta hit the highlights, and now the effort is to try to hit everything. Okay. You know, one of the ways in which people goes straight to pink, but, the CSS specifications, Flip it, in which case, all the times, I say horizontal or or or columns should be rows. Yeah. Rows would be columns and all that. Right? which is a really great place to be. I'm really Slider With a little sometimes they're green when they're on and gray when they're off, little round circle that you slide back and forth. And, what changed? So for many years,

And what that would do is it would stop the rows or you're defining a relative color it takes a lot of hackiness to, like, take a checkbox and visually make it look like a switch control.

It's really cool. One of the things that we did last year

iOS macOS and you go into settings, you'll See all these little on off things that instead of being checkboxes now, often, it's a switch. It's like a little So if you just add the attribute switch, it immediately turns the checkbox into a switch control, It is there's, It's it's cool. Yeah. And, you know, there's a lot of people from a lot of different companies who are all collaborating together to make the web the web what it is.

And you'll just see your iPhone, and you can just be like, oh, please open this web page in my iPhone.

Pinterest type layout.

accessible to Wes developers. You know, like, this is not people who care about browser engines, but, like, if you care about, Oh, how does CSS nesting work? You know? How do how do I use it? What's the has selector? There's some fantastic blog posts on here, so We'll link that up in the show notes. Yeah. Thanks. Yeah. We had a whole series on color, in fact, how you access those gamuts Via the different functions that we have are color spaces. Is that right? Yeah. Well, the word color space is really complicated, Sometimes they have, like, a little bit more green than you're expecting, but often they're they're really nice. There's less banding. Well, makes sense that there's less banding because there's literally more colors. Right? Well, I don't know. I'm curious about the less banding.

Grid Wes they sort of block into each other? And The answer at the time was not really unless you have a specific height, I had was like, can you do the Pinterest layout with CSS Stack Overflow and Versus Node dot dev, and I was like, I can code in VR. It's wild. Yeah. So,

display masonry, incredible work for years that a lot of people don't even you know, of all the apps in the App Store, all the different things that people think of when they think of an app for iPhone, for iPad, for Mac.

So there's this sort of blurry continuum of, well, that's clearly a browser inside an app to like, well, that looks an awful lot like a browser, but that seems to be branded uniquely when they were using l okay LCH or lab or whatever. And it's like, no. You're not Changing choosing a different set of colors. The set of colors are p 3 where HWB if you're using the you know, if you're defining p 3 Or or if you have a p three Sanity, like right? Like, it's gonna be p 3, because it needed a little bit more time. So the beta release notes can be really helpful if you wanna see what's coming and you all wanna help us by testing and letting us know so we can make sure that we get things right before we ship them. And then when the release comes out for that version of Safari, it is also the release notes are updated on developer.apple. Scott.

So we've gotten a lot of requests. Hey. I really need to build the switch control, especially since, you know, WebKit's not just used by

So responsive web design mode is cool, and you can use it for a really fast way to kinda check a layout. But if you really wanna check what's going on with that layout, you're actually much better off using An Bos simulator.

oh, actually, rows should also line up. You have to line things up in both directions. So it's interesting that that as the Wes added grid and finally added a layout system, it's like And then I have an example of 8 different, So we put a lot of, like you know? And the teams behind it are great teams. Like, complicated. If you really start to try to wrap your head around the whole thing, it's The p

That's cool. I I tried it out myself. Yeah. It's it's not obviously fully implemented yet. That's why it's in in the beta, but I thought it was a really neat way because it's not going to change how forms work at all. It's not a new form input.

And, like, CSS programming language perspective, it's like, wait a minute. You'd have styles that style styles the RGB function, So sometimes people, and lab versus l l I'm not one of those people, and I don't think that most web designers or developers need to be those people either. Yeah. I think the thing to know is there's 4 different But then while it was in beta, this is the whole purpose of a beta, folks were testing it, giving us feedback, and we were like,

Yeah. It's cool. It's like this meter that shows you how you're doing I never knew I'm gonna check that out. We're we're we're hitting our time here. So, unfortunately, we can't hit everything that we really wanted to get to, but that's how it goes. Right? I I think, it's It's been awesome to have you on, Jen. And I think

consensus in working groups about how exactly all those things are gonna One thing we asked Eric Meyer on when we came on, it was like, what parts of

And but then the contents can size themselves based on the container, and I do not envy.

apps in the App for VisionOS, and it'll download quite a few simulators for iPad and iPhone as well.

the exact way the pixels are rendered, like, just the precise details of how something gets laid out JS actually very different on an iPhone

frequently asked questions when we wrote grid. It was like, well, I don't wanna line things up on both dimensions.

You know, perhaps maybe safari's dropping some interesting stuff. We'd love we'd love you to come on anytime you'd you'd like. So,

it's mostly the same as, like, Wes Safari. Right? So what I did is I just downloaded an older

But but there are people in the working group who believe that it shouldn't be grid template rows I mean, sorry. It shouldn't be display grid grid template rows masonry.

switch

So yeah. Hey. You wanna look make it look native? Yeah. That's what happens. So

in your column direction. Now, of course, I'm I'm just gonna assume we're talking about a horizontal writing mode right now. You could Safari, display. So we ended up with p three.

which lets you lazy load more content into the bottom, or security I want you to be the size that your image is inside of you or something. The columns can be sized based on the content.

Store. There are so many apps that use WebKit.

app apps that Apple makes like mail and books. It's also used by, like, a 1000000 So p three color is a wider color gamut. P three is very is all over the place. It's been on, You can look it up. So one of them list if I look at this list right now, it says file system access, And you could see that we have publicly stated that we oppose this Mhmm. API and it for security reasons. And there's a little number on the left. And if you on the number. You can go see the discussion on a GitHub issue.

You know, it's always the the least resource intensive.

think it should JS which is pretty exciting. It's like But when you do that, a new menu appears called the develop menu, and there's a lot of good stuff in that develop menu. And in the develop menu, There's just a shortcut where you can jump straight over to any iPhone or iPad that you have paired to your so the very first time, if you wanna use your own iPhone, for example, You need to use a cable, hook it up to your Mac so that for security reasons, like, they're paired together, that we know it's you and that's your phone.

Safari works, how WebKit works, how Wes Inspector works, what's coming out next. And, like, these are these are very ways of defining a color. So To me, it's like, well, they're gone. They're gone. They're dead to me. Goodbye. I'm never gonna use no. That's not true. I use hexadecimal colors still all the time. But, like, Often, I try to push myself away from this. And instead, The decision was made like, no. We need to have we we need to wait until there's a good algorithm. So there are new algorithms being worked on. I think it might be true that there's more than 1 being worked on. Maybe you'll end up with a mechanism where you get to choose which Node one you wanna use. I I'm not really sure the all the details, but there's definitely work happening in accessibility working groups So, like, come up with the right mathematical

Is there any part of the Apple ecosystem

than it is new features many, many years ago.

on a grid. And even then, it's kind of a bit of a hack. So there's been this

to, like in responsive web design mode on a Mac when you, like, move the window to be a certain number of pixels wide.

Because the way typography is sized, So there's often about VisionPRO last year where you can see what it really looks like, and there's a lot of details about, how it's working. We're still working on WebexR and model. They're both behind a flag right Node.

And then if the content gets rearranged, it's still just whatever's in the 1st column that has that font.

And And

So

Let's say you wanted to

in in XR? Immediately After our call, I downloaded the new Node, and Yeah. I opened up,

that you can use to style the switch, to be able to

It simply just changes The actual UI of it and then expose some new CSS to

Yeah.

a little bit about

Like, your website on the VisionPRO, is there is there ways that developers can see

syntax.fm,

Just place things so each next item is as close to the top of the page as possible, You can say yes to watchOS if you want, A tvOS, There's always the same the columns are always the same width as each other.

Now is the part of the show where we get into

But another one is, like, how much impact is your site having on battery life? It if you give it permission this is only if you give it permission. But if you say, please do attach these files, then it will attach sort of diagnose files

their applications

and manuscripts.

I don't mind the idea of being display masonry. Yeah. It makes Sense to me that it's not necessarily a grid.

What if instead you just have a whole bunch of content and Color gamut, sessions at WWDC you can actually model these color models in three-dimensional space, and then you can See the straight line between the white and the blue, and you can see why create a file an issue that has board information attached you know, patients And there's several And so it was it somebody I could see somebody because I what I heard a lot happening, they go some of them go through this set of colors and other ones go through a totally different set of colors.

to have real full support a width of a per a 100% to make them all be the same width, but their heights are all different. Right Node, in grid, And this works now in Safari Technology Preview. Pnpm, you are only ever going to be able to define a color that exists inside SRGB.

7 6, 7 years ago, whenever CSS Grid came out, you and Rachel and Andrew were Heavily involved in that. And Rachel Andrew just put this GitHub repo up and she's like, ask me anything about grid because, like, every single question was going to her. And Node of the first questions I had is

in which case

In my own website, 20%. So my own website

I hadn't really thought about it too much before, but, yeah, interesting. Do you think we ever have the ability to target items in a specific snag 1 or have 1. Yes. So it came out today. Congratulations to everybody. It was a good one.

We had,

is coming out, really giving the credit due for that.

Of course, many of those, you all of web get all of the web technology that you know and love from the web You wouldn't have any power in the column direction. You would only have the very simple way to set up columns.

there's not really a good way to lay that out today without having to But then, basically, we're replicating grid outside of grid.

It's free. Download Xcode. Right? Like, just get it running on your machine. And if you wanna free up some hard drive space, you can actually remove Node after You're done. If you wanna just keep the simulator around the simulator app. Mhmm. Yeah. You just need the simulator app with we're a little stuck in the CSS working group. Not well, stuck probably is the right word, but there's still ongoing debate in the working group about Is there something that's running that you could change

So when items wrap to the 2nd line, I style them a bit smaller, and

an older version of Safari, and I couldn't figure out how to get old version of desktop Safari running. But To test it. It's

of, like, I want you to be 1 quarter of the width. Instead, it can be like, Yeah. And a lot of those embedded devices love to use WebKit because WebKit is Optimize for speed But that level of communication when web developers let us know, It's literally not possible to define any colors outside of SRGB with those Gamut being, like, how many colors can you actually represent? And model Because right now with Grid, if you have, let's say, a whole bunch of images, And they're all different sizes and different aspect ratios of each other. And maybe you use Who's gonna be teaching

juice when I'm especially when I'm needing it.

If they feel like it and they wanna use HTML and CSS and JavaScript for some reason named colors, maybe not always visible, which is another thing that we're talking about. Like, what can we do to make it more visible? And so now if you go into responsive web design mode, there's a little drop down menu that lets you just jump straight into the simulator, or you can you have to turn on developer tools in Safari, by the way. You go into Safari settings, And you just you know, you're sitting there. You're making a website. You're writing code. You're like, the way that say yes to developer tools. That way regular everyday people don't get freaked out when they accidentally open a Wes inspector.

that you might not expect that is actually just running HTML, CSS, JavaScript? Yeah. Well, I mentioned before that there are

hey. Everything in the first I don't know, x or, three numbers for r, g, and b Mhmm. In hexadecimal, But in in making that session, I started to really understand color on another level that I hadn't before, in part because I could ask my Super smart colleagues at Apple, and they can help me out.

Yeah. Not, you know, security expert audience necessarily, although that that audience too, but, like, you don't have to be a security expert to understand. But sometimes it's very interesting to me to read For most of the time, actually, grids meant columns ESLint up. It was really the modernists that came along and said, yeah, I'd love to be able to say, to be able to to quickly scan it and see a huge list of it. Well and that's super important to us is that the people who make podcasts, who make YouTube videos, who make tutorials, who are writing blog posts, who are speaking at conferences, who are working on the data can I use on an MDN Instead of pointing these styles to content, you're pointing these styles to other styles. Oh, yeah. Like, you built this out of grid. It's an empty construct, I know sometimes it can be quiet over there, and there might not seem like there's a lot of activity, but all of that information gets pulled into the system that we use to plan our engineering efforts, and there's a lot of noise over there in our system. So, like, it is happening. It's just

It's like, literally, I couldn't really stand up and walk around for 2 or 3 years. Holy cow. Man. I mean, I could I could stand, but I couldn't travel very far. For a long time, it was, like, Ended up personally it's a teacher coming to a place where I was like, I'm thinking I'm gonna try to avoid using the word space because nobody really understands what the heck we're talking. Yeah. So I talk about color gamuts,

a resize observer for westboss.comnav.

see,

And, boom, you got a web inspector, and you can use that web inspector with your iPhone. Man, that's so much better. Here's a little a little tip for people listening is, what we can use are that you it really is all about, like I mean, often, actual physical devices if you have an iPhone, for instance, and also the way that they hook up to the simulators.

very soon here. And we don't have to talk too much about the the VisionPRO, but Perhaps maybe a little bit about the web stuff.

I what is the experience for people who are using their device And getting prompted over and over again to Yeah. Allow notifications. Right? I mean, Safari was the 1st browser to ever put notifications in a browser with something called Safari

People have to implement that or spec it out.

we can definitely pick this up later.

so somebody really could build quite a lot of their app out of web technology, and there really wouldn't be any way to tell. There wouldn't necessarily be is that the team behind Safari has had One thing that we really wanted to make sure we got right and we did, We implemented when we figured it out, when we knew we had it right, was footer,

you're inside, you know, maybe a social media app, and you click a link, And there's I mean, you know, I'm on x sometimes, but not always.

masonry is part of grid Wes you say display grid Browser engine for a very long time, and it's been, you can easily if you end up owning a piece of hardware, if you go get yourself a an Applevision Pro, Yeah.

What it is that browser engineers are thinking about when as we make the decisions that we're making. Well, thank you so much for coming on. Really appreciate all of your time. That was Super informative. And, again, we hope to have you back sometime if you ever wanna come on and chitchat about CSS. Yeah. Thank you so much for having me. It's really great really great to be here. Thanks. Yeah. Anytime. Alright. Peace.

which makes me think of the history of graphic design and the grid systems in the 1st place, Never mind the web just like in history in books

Much better and,

Refresh the page, and it gives you data

So that's sort of the debate. It's like You do. And then there are some people who came along and said, well, do we even need this at all? Like, is anybody even gonna use this? Maybe we shouldn't do this at all. So that's what we need JS peep people that Oh, the everyone's making bentos Right now, that's the big popular layout JS the Apple. I think Apple came up with the Bento. Right? All the different features of the MacBook Pro warp We're on there, and everyone's like, that's the new design trend, so maybe make it display Bento.

Masonry in Safari Technology Preview. It's quite mature. I'd love for people to try it out. It's not even behind a flag. You can just Open up Safari Technology Preview and try it.

a full, real browser.

you said there's there's maybe a little bit more to that? Yeah. So there are so it's so we implemented,

navigation

I think people don't know that enough about grid, but where the masonry layout like, that sort of classic layout that you were describing, of those theories being true. I really haven't.

It should instead be display masonry, and you should have a separate display type. That grid is grid, and grid means Like f comes after Like,

I'd love to be able to to to put a background on an empty grid cell File it back in the back of your mind to be like, oh, that's right. That thing came out. I didn't need it. I didn't have time to learn about it, but now That's the very first one that shipped in browsers because the CSS What I've seen is a busy team masonry.

All sorts of details about, it's not Safari of 8 years ago or whatever people compare pnpm to. In fact, there's a there's a tool in Wes inspector Spector that you can go and see how much electricity your website takes up. Nice. Cool. I mean, yeah, there's many ways to define performance. Right? Many important ways on how to define performance. Like, how how Soon JS it the person can use the website. Right? How how long do they have to wait for the download? Safari 17.3

Can you talk a little bit about that that exists now?

I I hit a render loop where it was too small, so it went on the 1st line, and then it got bigger. So it went on to the 2nd line. And I was like, This is what the browser people have to deal with, which is this is, like Yes. Infinite. Especially, like Can you imagine container queries? Sizing things based on their contents, probably

There's a lot there. It's not a very complicated site. You're not gonna, You know, get lost.

Or, also, an app can create really anything we might hesitate to implement what's exists Node. But if we can catch the right idea about where The web really needs it to go. Then that could help move things forward as well. Wes true. Yeah. So is is bugs.webkit.org or you're mixing colors.

streamlined. And WebKit seems to be one of the favorites to really do that because of the way it's been designed for so many years to work on iPhone and and Mac. Yeah. I've I've definitely found that Safari very easily turn it into whatever you want, where you can change how that little circle handle looks. You could change how the track that slides on looks.

he, who also,

Chris Lattner,

We've just the people who keep having this conversation in the over snacks at the CSS working group or something, we We all end up working on something else, higher priority. But, that Mhmm. We should have been using a simulator Because in that way, you're not just saying,

I I find myself, like, constantly being a safari truther now in TikTok comments or or things like that. No. You don't understand.

style it and change the colors. So big fan of that.

the world are running on Wes tech that you might not expect? And he had some really cool interesting, like, Playstation and some fridges are running on. And most people don't realize JS most TVs are running

which on our platforms is default style to look like the operating system. And then there are 2 pseudo elements Yeah. So switch switch controls are you know, if you use,

Yeah. We'll get to it, I think. Wes when we had talked, you had mentioned a CSS

and you're gonna style it? Like, That hasn't gotten as much attention as I I

like, grid forces you 3rd row down, all the things in the 3rd row are gonna be this. Like, the tops of them are all gonna line up unless you change alignment. But then, okay, the bottoms of all of them all line up. But then there's extra space around them. Right? There's no packing. It's just There's a row, and then we start a new row with the 4th row, and then we start a new row with the 5th row. Where masonry lets you be like, actually, I want the browser to pack things.

makes a big difference.

that's being used to display support isn't accurate. It's out of date.

when or you can say no to watchOS and tvOS if you just wanna focus on web browsers.

in the the app description release notes are just bug fixes and improvements, and people complain about, hey. There's no transparency here. Why isn't anybody but here, you all releasing these giant release notes,

and you explained

browser compatibility data? Right? So, like, that all of the anybody and you

or

Folks don't want it to take 2 or 3 years. They want it to get done in 6 months or something. So then they have these theories about why, and it's like it's not that complicated. But, so Yeah. Yeah. So, yeah, I do I do expect it to come, every time there's a release of Safari, that there's really great release notes for that release and that we not only list all of the features,

In 2023. It's wild that it feels like You all don't get enough credit for that because one thing that I think developers overall like

it feels like it's gonna cover all the use cases, but it really doesn't. Or it's perfect for these situations, but it's Kinda Scott a good API for these other situations. Right? So sometimes we've been like, no. Let's really take the time in the standards organizations for web standards, Like, make a really great API. And sometimes, through the transition, and then you just add the attribute switch.

accessibility,

the color spaces color profiles web tech for your streaming apps.

Having APIs that are well designed, that developers are gonna be happy with over the long term that weren't rushed out the door, sort of Overeenered is in beta.

And then Mhmm.

full blast video. And that was super annoying. And Chrome had a claw back and say you cannot autoplay unless it's associated with a click Or it's muted. You know? Like, sometimes those things do take time to to figure out. Yeah. And so the so then the other thing that really did help us Knock down the list of things that developers wanted and needed the most is, if if you're doing, like, a really wild gradient

Oh, actually, we do have support, Everything JS lined up across throws, but you wanna, like Yeah. Make a brick Wes. Like, literally a brick wall. You want 3 and then 2 and then 3 and then 2, and you want them to be stacked like masonry. There's not an easy way you'd have to use negative margins and all sorts of other why. Here's what it is I I want from The web technology, and this is where Safari's letting me down.

changes that Where with grid, in the comm direction, you have all of that you have so much more power and so much more flexibility.

Wait. I have a virus on my Mac.

Yeah. I mean and so there's several places that people can look. So one of them is the release notes are on developer.apple.com.

And if you're interested, like, why So we keep getting this request of, like, hey. I need to be able to create a switch control. I'm using web content here.

There were quite a few blog posts that people wrote really well thought out, bug fixes that we put in release notes colors. So we had the WebSafe color palette. And then monitors color monitors became more awesome, and there were many, many more of them. And everybody had color monitors. And you could display sRGB, last year is that people would have these debates where they'd be like, The numbers are just gonna be different because it's the models are different.

Yeah. We aren't so sure about that. Let's you know? And maybe we'll figure it out. There's a lot of things like I mean, we shipped wrote the HTML five design principles. Like, I didn't realize

these days. And to be able to get kind of a quick because you're right. It's long, but also it's a it goes through things very quickly. So, like, just a very not quite ready. Like, we were gonna we put full screen API in Safari 17 0.2 for Bos.

Like, I have seen I guess that's True. And what we were finding is that sometimes that wasn't actually true.

around that.

churn through people's batteries either from 0 to a 100% or from, like, 0 to 255 as a number. Like, how dark or light do you want it to be? it doesn't have the right guts underneath in order for it to do the right job.

the safari has been so accelerated lately. Is Is there something at Apple that is going to be leaning more heavily on HTML, CSS, JavaScript? Is that is there something why,

I wonder if this thing I wanna use is supported in all the browsers. So you go to caniuse.com, really do understand the web. They care about the web very deeply Push notifications. Right? Web push.

He was trying to stream a football game that was out of network or whatever. He goes on to some site. It asks him for a notification. Next thing you know, he's got notifications popping up from some janky website, right, that that that is, trying to do that. So I I Totally get that.

Before the web standards existed, we had Built this thing called Safari push notifications, and we learned from that. We learned that, oh,

but we also list all of the bug fixes, at least Things that are relevant to web developers. Right? There's other bugs that get fixed. But, like, for so if you are stumbling over that 1 bug that's been bothering you for the last 3 years In the browser that you're in, you can go to Webcompat.

other people about all this stuff has accurate information? Because that's part of so that's so what what changed? So one thing is that the release notes and these big articles a browser sort of appears from the bottom.

Autoplay video was the same JS as when HTML 5 video came out. Bos didn't allow you to either play in line or autoplay.

what is it that the our customers written for a web developer audience So, You Node, it's not very common. It's very you know, it's a little rare when we actually oppose a standard, The fundamental approach. So right now, But there's also another thing called WKWebView Wes So once they did come to an agreement, it became possible to ship those. And those are the things all of that, p three color plus

and nobody is,

They come out when the 1st beta goes out.

I don't know, the the idea of wanting to get things right can be so misconstrued

Yeah.

high level. You can scan it pretty quickly and see if there's anything that, like, applies to you. And I love that because it's

And here are the workarounds that we have to do. Here's the use case that I have that's not that I can't implement correctly.

all these APIs have all of a sudden been been popping up? Yeah. You know, there's all kinds of theories that I've heard.

Where the articles that come out are

no evidence

security, because

And that really makes a big difference. It makes a big difference. People filing bugs At bugs.webkits.org

Apple about about things? Or complaining on Twitter.

you know, be negative about something like this instead of thinking, oh, what It's the most likely reason why they haven't shipped this. Oh, it's it's not fully baked.

into

Clear. Like, let's just list everything.

And Also HD television had the same sRGB color gamut. There were many, many things in our world. Cameras all used to sRGB.

So these things, these are stated publicly.

And it's weird how, like,

like, thoughtful blog posts about, hey.

and one of the there's many things here, including those big long articles I was talking about. Also, release notes for Safari which can be super interesting. But if you look up in the menu under feature status, there's a page called standards positions.

right. Everyone blocks them all. I just got a message from my dad last

the best place

is the best place to report Browser bugs and problems. I mean, there's more than 1 place, though. Like so if you and this is true for any browser. If you're on a website and that website seems broken don't worry about filing a dupe. Like, it's fine. I know that many times open source communities can be very spicy about duplicates and get very grumpy. We don't it's fine. Mhmm. We can deal with that? Yeah. You file the 14th and then I got into because I love teaching. I've always loved teaching and empowering people.

We have been in on the evangelism team working really hard to make sure that If you are using an Apple device and you feel like there's something going wrong with the operating system some or something else that's deeper than the just the browser, and you wanna

user experience, But, also, we write a giant article on webkits.org the team We're working very hard to optimize things over here to be like, let's use less electricity. Let's use less electricity than that. Like, how can we make it go faster and also use Let's look into so, you know, some of those very low powered devices, they don't have very strong chips on them. They don't have you know, maybe they have a battery, maybe they don't. Maybe they are just a very low powered chip, they want to, are going to experience when they use Safari on Apple devices. Like, that matters a lot to us. So And then when you go to do a color mix, same thing is true for color mix. Or you go to do a gradient or you go to do,

and so we've helped try to go through everything and just find Scott has gone a bit unnoticed, map to.

And this is my own conspiracy as to why In RGB, you are and you're going from 1 color to another, and it's it's quite a

if a particular idea that would be really cool, that would make websites really amazing, like, which model are you gonna use, People have used the checkbox as the closest form element that you can use on the web that does that, but, I should have the Safari is Aon Vision Pro. It is really Safari, a hue, a chroma,

Features are missing Okay. So if there's gonna be 3 numbers, and you're like, 12, that you could lay that out using Masonry Oh, wow. And so Lab and Okay Lab are very similar that, like, So that is it's just there's a lot to keep track of, a lot to keep track of. So It's it's very easy for something to slip through the cracks, what I've seen is that someone will be upset that a specific API hasn't been supported, and then they're trying to understand Why? And then they start to come up with a theory.

I mean, I pnpm as much time on on those sites as I can to be. Like, let me just find anything. Is there are there any things that are wrong? Let me fix those. What about, Some of the conspiracies

creativity. You know? Like, creatively, think about what it is that you're needing and wanting and why. And,

First on Mac and then later on Bos for web apps. Folks wanted that to happen sooner.

that the operating system that can about that crash. Like, I don't know. Was it a graphic thing, or was it a memory thing, or was it, you know, something else? protect That's the best one. So I'm ever only ever gonna use that one as if They were choosing a different set of colors

Mhmm. So it didn't ship in Safari 17.2 There's information

Yeah. To,

Sure enough, it it was a a notification from a website.

I think it was around the summer of 2021 I pick this shade of pink.

those things you can easily file at books.webkit.org.

hey. This feature is shipping, but what is that feature? What is that good for? Yeah. Here's 2 sentences about it. Here's a little demo. Here's an example. Here are some ideas about how you might use it so that we can quickly teach you lemon, lime, yellows into bright green, into, like, ice icy green blue into blue.

push notifications that were in Mac and you end up with, like, black over a dark color or white over a light color. I I was just saying, like so you're not able to Mathematically The color function, you then say if you want it the basically, the color function, you define red, green, and blue

Chrome did. And what happened? Frigging auto playing ads

Well, Mastodon, I recommend. Okay. At least if you wanna talk to me, I'm on far more than I am on on pnpm these days.

If you go to feedback assistant.apple.com But let's just for the sake of being on a podcast and having to say everything with our words,

is gonna just

To notify so the day that the VisionPRO is coming out. So if you Sanity to,

And sometimes it can be depending on the bug, sometimes that can actually be super helpful because just saying, oh, it crashed. It's like, well, we don't we don't know. We have no idea why. But if you include that kind of a die a file for diagnosis, then it helps, Getting finished, Well, both. End of 2022 hexadecimal, But often, there is a reason why, and the reason is not at all whatever they've theory they've tried to come up with. It's The In some ways, the web is behind where web designers are still staying within the sRGB color gamut, And they're only picking colors from inside that gamma, and they're missing an opportunity to pick some really gorgeous, really vibrant colors.

It it's a combination of things. It's a combination of lots of small, which is a certain color gamut,

These from being

colors, some of which Don't make sense at all. Could you explain that a little bit? Yeah. So

What do I do? I'm like, what is the virus? He says, well, this this pop up keeps popping up. I'm like, what is this? And,

There's a Webcompat website.

motives or or people are just looking for reasons

that is not just a list because release notes are very terse ESLint, just a very engineers get deeper into, like, what actually happened.

Over the year and 270 instead of content.

Ulterior

my team needs it. So now I'm gonna go track it down. I'll go look it up on a A tutorial or something to learn more about it. So we're hoping that those big articles can be really useful to introduce people to so many of these new features that are hitting browsers, grid row or column. Is that something that Node ever ever talked about? Yeah. We've talked about that a lot for, like, the next level of grid,

especially with youth cases and especially with thoughtfulness and especially with, is there, in Safari, and it's frustrating.

Yeah. Bugs.webkit.org let's just assume Wes horizontal writing mode. So columns, you can make as many columns as you want, and you can make them in grid b. Like, they don't have to all be the same size as each other. Right? And they don't even all have to be defined by an external definition Here's inspect the content that you're using through Web Inspector.

They get I think they get upset about us opposing Node standard, and then they just sort of extrapolate that into a complicated theory that's not at all based in reality. Wes the the web standards weren't done yet. So the The working group needed a little bit more time to come to an agreement.

could see that, oh, look. They fixed it. That fantastic.

at the bottom, we'll we'll list all the fixes, but in the At the top and in the middle, we go through all the features, and we say, they want something that goes really fast and is very Not enough to be able to use it, but enough to know what it is.

know, like, if Safari crashed, well, it's like, why did it crash? but if you wanna know what's coming in the next version of Safari, you can go look at the beta release notes. Those beta release notes will get updated You could use Masonry to yeah. There's there's all kinds of there's no such other sorts of, oh, where all the images actually do have the same aspect ratio. They're all, say, 16 by 9, but you wanna stagger them. And maybe you wanna stagger them in the opposite direction Wes you do wanna stagger them across the columns, where your rows are cool, your rows are set, Columns should have

Use the coupon code tasty treat, all lowercase, all Node word, and you'll get 2 months for free. You want to give us a quick rundown

and have been doing to, like, forward and back and type in a URL or any of those things we're used to. Because at that point, it really is up to that app developer to do whatever it is that they wanna do with that.

why that is and and, how they're able to move so fast and all that good stuff. So welcome, Jen. Thanks so much for coming on. Hello. I'm so glad to be here. Thank you for inviting me. Syntax is presented by Sanity.

She is responsible for a large part of CSS Grid, a lot of the layout stuff in the browser,

of who you are, what you do, and a little bit of your history? I know I gave a quick rundown, but I think it would be worth

and tons more. So head on over to century.i0.

folks on our team were the folks who a It's just that the mathematical model is so drastically different for each of them that

of people who really are. I mean, I Yeah. I know I think, is is what I'm plugging.

necessarily Wes lab JS, like,

some really neat stuff In CSS Wes standards in general, as well as, like,

Safari has been absolutely killing it lately.

And users are using it, you wanna make sure that you have a handle on your bugs before your users hit them. Not only does Sanity give you Access to finding and fixing all of those bugs, but they also give you incredibly useful tools like session replay, test coverage, performance metrics,

attribute to Apple because they're not, You know, it's we don't usually wander around saying, hi.

that means, I think, a lot of the innovation and a lot of the impact And I feel like it's funny. I I didn't really realize this until after I joined Apple, but all of those years when so many of us were And then grid template columns, and you can define what you want for columns. So you can use f r units. You can use min max. You can use max unit max content, min content. You can, Like, you have all of the power of grid So support is starting to get really, really good as people update their browsers because all 3 engines have support for these now. Okay. So it's, But we can't ship it yet because there's still discussion happening in the standards organizations.

I love it even way more than I thought I would. So I'm it's quite an honor and a privilege to work with such a smart team, yeah. It it's gonna be the 150 second dupe, and it's like, that's fine. It's we'll Yeah. In fact, in some ways, that's a good signal for us if that, oh, there's a lot of the same bug getting reported. Alright. Let's talk about the CSS color profile. So we had a bit of a call before this Node, Goes through hot pink, through purple, and then ends up at blue.

what your past has been like. Sure. Yeah. So personally, I worked in theater and the arts for Yarn.

but that doesn't mean that impact wasn't there. It's No. Every day, I'm, like, Learning like, wait a minute. We did that? I didn't realize we were I didn't know that Safari was the 1st browser with a private Browsing mode. I didn't realize that Safari sometimes a web standard could take 2 or 3 years, and

I've been reading every couple of weeks, there's a new either technical preview of Safari or a new major version of Safari that comes out. And the blog posts are Sometimes I'm unable to scroll to the bottom

web standards, especially CSS for me.

and we're here to ask her

And, Wes, I worked at at Firefox for some number of years, and now I've been at Apple working on Safari for a number of years, rows, like, even with each other. It's it's it would stop trying to line up content.

Safari has been killing it lately,

explaining to anyone who maybe hasn't heard of you, creator of Swift.

developer advocacy, developer relations, working on browsers, working on and Safari hook up to,

This is who I am. This is where I'm from. Please, me, me, me. Yeah. Like, listen to me and how awesome I am. You know? There's a there's a certain level of humility there that, Wow.

We can go on about what she works on, but today she's here to talk to us about,

If you're shipping software is release notes. I I see that all the time where People are complaining about, oh, an app update

folks don't necessarily believe it, but The what I discovered when I got to Apple is that people the fastest in the world that SRGB can't

lots of of of CSS, and

Got into

Then I Wes a front end developer, web designer, and developer for many years, URL memorize. Yeah. Webcompat.com.

Let's talk about that. So that that's my big question. I've noticed

to define colors. So one of them is the color function.

yeah.

which colors in the world can actually be seen on a sRGB monitor.

Whereas if you move that to the one of these functions in p 3,

inaccessible. Yeah. So there was this 1st attempt to create an algorithm that would make a decision of which color is appropriate. It's just not doing a good job. So it's like, well, So we could ship that, and then we had a long debate. Like, should we just ship it anyway? And the decision was no.

sRGB linear, okay lab, l c h, okay l c h, lab, HSL and HWB, and it's really solid. Like, we worked hard to make sure that it works really well. Always there. Yeah. So you just Go to the develop menu. Just works. Yeah.

is not doing its job very well.

are color gamuts.

the color function plus these new 4 new functions all shipped pnpm.

Which one is better?

From 01 I used to love hiking with my dog. Yeah. It's great. It's great. I I found the energy impact, You know, we take pride on

and it changes the mathematics.

It's choosing the wrong color, Yeah. If you wanna get into the math, you can. But if you don't want to, just know that, like, There were 818 Black or white. You choose whichever one is gonna have more contrast against this background color that I've chosen.

Node. But that's why it hasn't shipped yet JS because

l is lightness, and then there's an a axis, Which, like, at one end is green and the other end is red slash magenta, and you look.

and they think about, like, I'm working on a blog post for webkit.org

and I type equals checkbox if we wanted to be that careful.

Yeah. Well, let's talk about other color APIs. So we have, like,

Between 0 and a 100%.

that's one that I'm anticipating greatly. Right. Color, contrast, contrast, color. Like, it'd be a really great function to be able to say, hey.

calculate

Yeah.

monitors couldn't represent color at all or they could only represent few

And none of those are right or wrong.

But it is complicated. Color is so there are a lot of websites. You go to social media. You click a link. You land on the website. The first thing you see is a request for Yeah. Permission to send notifications. He likes that. It's true. Right. You are It's implemented in Safari. It's been there forever, much like these other things I mentioned, defining you Oh, unless we decide to make it more complicated, to help.

and ways in which was really a breakthrough year for wide gamma color in Yarn, perhaps, because of Interrupt 2023. That because it was in Interrupt 2023.

Goes through, like, carefully, you know, as to energy usage. Love that. Yeah. Yeah. There's a page about it on webkit.org on how that tool works. There's also, like, a documentation on all of Web inspector on WebKit .org. Yeah. Oh, is that is that next on the Yes. Yeah. Shameless plug. Whatever my plug. Let's go. Like, plug away, please. Plug anything you want.

with

You can also use the newer functions, If you choose 1 model, it's gonna use that model to choose the in betweens. And if you switch the model, it's gonna Switch the model to do the in betweens.

I don't know that I've seen that because you're not gonna have more colors. Like, it's still all p three color. You still have How many of her colors? Well, sorry. I mean,

The time when it actually comes into I think that the the time when it actually matters more, You can say yes to VisionOS.

LCH, okay, LCH Vercel Well, as we've been working on this, we've been looking at other sorts of things besides that kind of classic, HLS function or the HWB that goes, like, through all the shades of light blue into medium blue into dark blue, dedicated to doing the right thing for the web.

And

the standard has to be set as to, like, the different ranges. Because even, like, the YouTube red with white text on top, that is apparently Very clearly, and I thought that was fantastic. As well as, like, there's many different ways to specify

255, 32, like, what does that math Yeah.

10, 10.1

relative color syntax, which is also cool. We can talk about that. But, it's Mhmm. Then we're not gonna rush that out the door. We're gonna be like, color wide gamma color is super exciting, it felt like 2023

Some really awesome color APIs that have hit the browser lately

Many, many years ago, that was around the same time that iPhone, iPad, and the differences are really drastic. So, like, OKLab and LCH basically look like they go from to go into more detail and have some examples and get, into some of the questions that are happening and, really, because we need feedback from pick the same color. Like, if you're defining a very specific shade of blue, You can define that very specific shaded blue in all 4 models.

Okay. LCH goes straight to yellow, like lime yellow, So I like empower you with all you need to know, but also leave out all the parts you don't need to know. So, go through that system, there's a way to attach what's called assist diagnose file, So for instance, right now, we're in the middle of January. January 16th is today. Release the the beta.

Node being, what is the math? Instead, what you're doing is you're saying, on this end, I have orange, And over here, I got yellow or green, and then I want you to make a gradient in the middle. Mhmm. And so the computer you, browser computer, you are gonna do all the math in tween.

and this is where I do use the word color space because it's sort of the color models, but, actually, there's more of them.

And it's basically going from white, just pure white, to blue, like the, If you use the named color blue in CSS, the blue blue from the Wes, and Wes,

Okay. And so you're basically saying, am I more blue or yellow? Am I more green or red?

So then the question becomes, well, if you're gonna define a color in CSS, how do you define it? There are many, many ways to define colors.

because

But I I was wondering about contrast color. Is is that Something that is is ever going to hit. I I don't know if you can speak on that or not, but,

Mhmm. But there are many of us who don't actually break it down that way, and you just Write the hexadecimal numbers. You don't really ever think about it. So I'm sure there are people who are gonna get really into, And they're all like, if the first one is 500 pic or sorry, 200 pixels, and the next one's 200 pixels, and the next one's 200 pixels, and the next one's 200 pixels, and the next one's Wes So they're all exactly the same as each other. Right? Fretting over 9 or whatever.

I mean, using versus an RGB gradient,

like, it's shipped And we sup we ship support for p color p three color in Safari 10.0 with images and then with CSS in Safari 10.1, JS the beta gets updated. Sometimes, you know, something is And it says, no. It's not supported in this browser. And you're like, oh, that's too bad. I'm angry. It's not supported.

you there's there's more colors. Right? So there should be less banding.

And the hang up is that the, VisionPRO coming out very soon. Maybe even by the time people hear this, it will be out.

Yeah. Yeah. There are more colors than p 3. And, also, it makes like, I have an example that I put in this video that reminds me of a browser, But it doesn't really look 1, 2. Like, this doesn't look at all like a browser, and I had no idea.

I told you the background color. Now could you just make the text be But if you wanna say well, when I say a 100%, I mean, a 100% in p three color, then you need to say color p 3. Yeah. So you put the little which color gamut are you gonna define warp your numbers in in the little function? kinda hacky things to do that today.

Wes teaching things to make them as simple as they can be In fact, I wrote up some I added up some totals for 2023.

Gekko for Firefox and then Chromium for Chrome and Edge and, So maybe that's why you heard about it, and you all you felt like you almost got it, but then you didn't get it because that's kinda what happened.

like, l c h, the l means lightness. You're basically defining how and sometimes Wes really wanna push forward. I mean, like with push notifications, we have all kinds of ideas about how it could actually be better that we're working on right now.

And then I don't have to think about it. I'll let the browser choose.

And there are the old ones too. And you can so I've got sRGB,

is if you're

the newer functions

spec was ready for it.

Brightness or, You can also use a simulator, like you just said, Wes, where you can download Xcode.

So maybe, you know, I think there are people who understand hexadecimal numbers to be like, Such and such, not shipping.

Mac started supporting. So all of the new screens for many years now have had p three color. And now even more screens around, you know, in the world that we live in, all the screens we look at in during our day, more and more and more of them support p three color. So And so maybe in that way, you'll you'll end up with your favorite model because that's the way you'd like to think about the math. But the end result for the functions are actually gonna be identical you've got a lot of options, and they're all gonna result in something different. And maybe the best thing to do is to get yourself into a browser and go into the developer tools Just mess around until you get something that you really like.

and into 2023

Let's Talk about CSS Grid and Masonry.

but it will come when it's ready instead of before.

lch, lab, oklab, and oklch.

p three and sRGB

Okay Lab is okay l a Bos. So l a b and l a and l a b, but and then a b axis, which JS, like, at one end is sort of blue slash saw cyan and at the other end is yellow.

set up some Internet browser and many other browsers.

a difference between those 2 colors. You Scott to see banding if it's, like, the whole website.

If you use some of the older ways, And as in the process of downloading Xcode, it will ask You're like, what do you wanna build for? And you can say yes to Bos.

I I mean, Safari had had them implemented for years sitting there in Safari technology preview waiting,

And often those gradients look much

It's, like, it's too much for me to understand. It's too hard.

which there's been some confusion about. People keep saying we supported it in Safari 15, but it's like, no. Actually, we started supporting it in Safari Looks like it needs a little more polish.

if something should be flipped or other. Is it something Wes, like,

to me, this is how we should think about it.

interpolating a gradient

but the mathematical model So and, I made a session for WWDC It's just a different math. Now there are people in the world who understand the math and who know the difference mathematically, what the mod the differences are in the models between

Wild.

color models, the first impulse was to add a layout system that lines everything up in 2 dimensions, Pnpm modernist. It's very Vercel, very exciting. It means you can have white space. Like, please, awesome. Use white space.

They literally like, if you created a three-dimensional but the data Teach designers, developers a little bit about each thing.

last year, which I do definitely recommend, Especially if people are interested in in what I'm about to say, I I go into more detail in the session. And, also, there's visuals because it's a video, so you can see a lot of what I'm talking about.

Those are the things that came out just last year or the actually, the year before.

pick something new pick one of the new things for defining colors.

nicer. And We're here to ask you

relative color.

And then people are like smart people who make monitors and cameras were like, wow. Let's I wonder if we can push the envelope further and we can represent more of what the Human eye can actually see because there are more colors So that,

of a linear gradient, but it's all here.

algorithm for making a decision on when to pick which colors based on contrast

I just picked the endpoints.

I sure hope you're hungry.

This

is the Syntax supper club.

We have been trying to get today's guest on for a long, long time, and you Folks have been requesting her for a long, long time, so we are very excited to have Jen Simmons on. She is a web technologies evangelist at Apple.

Welcome to Syntax. We've got a good one for you today.

Oh, I'm starving.

so buckle up and grab that old handle because this ride is going to get wild.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

of of what it is. And here on the podcast, we go through and talk about a lot of the new improvements to CSS.

JS whatever. And it's like, Wes. That happened, but I feel like there's been crazy momentum lately. And It's it's somebody who makes a podcast about new stuff to web development. It's really nice

why why? What what's going on at Apple? That Safari JS doing so well. Is it you? A lot of people said it's you.

And a lot of times it says this is only implemented in Safari. Safari is the 1st one to implement this. Safari has been

first to a lot of this stuff. So