Season 6 Episode 3 Nov 10, 2021

New CSS Features, a New Search Engine, and Facebook’s Facial Recognition System in the Metaverse

Pitch

Enough about me, let's talk about You.

Description

In this episode, we have an update about Facebook’s Facial Recognition system, and then we get into You.com, which calls itself “the world’s first open search engine.” Then we speak with Stephanie Eckles, software engineer at Microsoft and author of ModernCSS.dev about exciting new CSS updates that were just announced at Chrome Dev Summit 2021.

Hosts

Saron Yitbarek

Disco - Founder

Saron Yitbarek is the founder of Disco, host of the CodeNewbie podcast, and co-host of the base.cs podcast.

Christina Gorton

Forem - Developer Advocate

Christina Gorton is a Developer Advocate at Forem. She is a LinkedIn Instructor and technical writer.

Guests

Stephanie Eckles

Microsoft - Software Engineer

Stephanie Eckles is the author of in-depth tutorials on ModernCSS.dev, and the creator of StyleStage.dev, SmolCSS.dev, and 11ty.Rocks. Steph has well over a decade of webdev experience that she enjoys sharing as an author, egghead and workshop instructor, Twitch streamer, and conference speaker.

Show Notes

Audio file size

26007584

Duration

00:27:05

Transcript

[00:00:10] SY: Welcome to DevNews, the news show for developers by developers, where we cover the latest in the world of tech. I’m Saron Yitbarek, Founder of Disco.

 

[00:00:19] CG: And I’m Christina Gorton, Developer Advocate at Forem. If you hear some construction sounds in the background, there’s some construction happening outside of my house that just started, but we’re going to push on anyway.

 

[00:00:30] SY: So this week, we have an update about Facebook’s facial recognition system, and then we get into You.com, which calls itself the world’s first open search engine.

 

[00:00:40] CG: Then we speak with Stephanie Eckles, Software Engineer at Microsoft and Author of ModernCSS.dev, about exciting new CSS updates that were just announced at Chrome Dev Summit 2021.

 

[00:00:52] SE: This is kind of the next layer of responsive design. It’s going to take us all collectively some time to build up essentially new best practices.

 

[00:01:01] SY: So last week, we talked a lot about the news that Meta, Facebook’s new parent company, would be shutting down Facebook’s decade old facial recognition system. Now with this shutdown, people would no longer be automatically recognized in photos and videos and more than a billion people’s facial data templates that the company uses to identify people would be deleted. And we celebrated this news last week, but the caveat, and this is a big one, is that this shutdown decision will not apply to Metaverse products. According to Meta spokesperson, Jason Grosse, who spoke to Recode, the company is also already experimenting with incorporating people’s biometrics into the Metaverse, which aims to be a virtual world where people interact through avatars. In the Recode piece, which we’ll post in our show notes, the Meta spokesperson states, “We believe this technology has the potential to enable positive use cases in the future that maintain privacy, control, and transparency, and it’s an approach we’ll continue to explore as we consider how our future computing platforms and devices can best serve people’s needs.” It’s unclear as to what the positive use cases are exactly that the Metaverse might have as opposed to the Facebook app, which had the company stating in their blog, “We need to weigh the positive use cases for facial recognition against growing societal concerns, especially as regulators have yet to provide clear rules,” before shutting it down. So Christina, what do you think about this little caveat that we just mentioned and kind of uncovered? How do you feel about that?

 

[00:02:41] CG: You know, I was reading a little bit more about this and kind of the biometrics that they’re going to start using with the Metaverse, and it’s a lot of data. And for me, I still worry about the privacy and security side of it. Facebook’s record isn’t the best in this area. What are your thoughts on that, Saron?

 

[00:03:00] SY: Yeah, exactly. I read recently “An Ugly Truth”, which is about these two reporters, I forget what media publication, but these two reporters who have been covering Facebook for over a decade, and it’s their book on kind of the Facebook scandals around privacy and security and Russia and the elections and just all this stuff that’s going on with Facebook over the years. And it was just shocking to me, the number of, “Oh, we don’t knows,” combined with the, “Oh, we know, but it will be fines.” There were just so many of those moments where it made me feel like, “Man, I really don’t think you can trust this company to do the right thing,” either because they choose not to know about it. Or when they know about it, they care more about their profits than they do kind of doing the right thing. And really at the end of the day, what they’re optimizing for is just their money. That’s all. And so the idea of these people who have a history of not doing the right thing and not putting users first being possibly the owners of our virtual lives is like horrifying, as in horrifying. And like the whole, “We’re going to get rid of our facial recognition program,” to me was like, “Okay, it’s a good sign, moving in the right direction.” But knowing that like, “Oh, just kidding for Metaverse.” It’s like, “Okay, you’re the same company. You’re the Facebook that we know.” Of course, you’re not going to get rid of the thing that is your future. You’ll get rid of what you think is going to be your past very soon, because I don’t think Facebook really believes in Facebook in terms of longevity, but you believe in the Metaverse and that’s really where you’re going to be using and directing all your AI powers and technologies.

 

[00:04:40] CG: Yeah. That’s a really great point. I definitely think I agree with you in the sense that are they thinking Facebook isn’t their future, Metaverse is their future? So was this some kind of just like PR stunt, a win for them?

 

[00:04:51] SY: Exactly. Exactly.

 

[00:04:53] CG: Of like, “Hey, look, we shut this down.” But not really.

 

[00:04:56] SY: Yeah. Yeah. Yeah. “We don’t really care about it anyway, but look how cool we are.” That’s exactly the vibes I got from that.

 

[MUSIC BREAK]

 

[00:05:20] CG: Now let’s talk about You.com, which touts itself as being the world’s first open search engine. Now what exactly the company means by open is a bit unclear. But earlier this week, the company received 20 million in funding and launched its public beta of its product. The company states that it will never sell users’ data to advertisers, and essentially wants to create a Google alternative where users can customize a lot of their search experience and search the web with more privacy and without ads. The company also hopes to be able to summarize the web for users so that they don’t have to have as many open tabs, which I think a lot of developers know is a problem. In terms of the UI, our producer, Levi Sharpe, said it was like Google and Pinterest had a baby, and I tend to agree after using it. But he did say the separation and organization of categories for the search that pop-up was interesting. So for example, when you search for something like our company, DEV, you get a category for normal web results, but you also get things like what was said about DEV on Reddit, different social media, and even music or podcasts popping up. So I also played around with this a little bit. They kind of touted that they had some cool things for developers. So I wanted to try it out. And I took some code. So one of their things was, “Hey, you can take code snippets and you can put it in the search engine and see what you get.” So I took some code from Forem, our company and our open source project, and I put it into the search engine and it was interesting. I do have to admit that when you put it in, you don’t just get normal web results. You do see exactly where that code came from. So it popped up where it was at in Forem. And then it also gave you a code sandbox. Not CodeSandbox, the company, but a sandbox for code, and you could play around with the code there quickly or it gave you some more information. So it was Ruby Code. So it popped up some stuff about Ruby Code and what was being said. So all those things were pretty interesting.

 

[00:07:24] SY: That’s really cool. Yeah. I didn’t go as far as looking at code snippets, but I just did, I don’t know what to search for, so I just Google my name, and it was actually really cool. It showed a bunch of talks that I’d given and it showed things I hadn’t seen before, specifically on Reddit. Apparently, a couple of my talks had been discussed in different Reddit posts that I never knew about. This was like years ago. This was like seven years ago.

 

[00:07:48] CG: It could be good or bad to find.

 

[00:07:50] SY: Yeah. I was a little concerned, I got to say. I saw like a bunch of Reddit hits and I'm like, “Uh-oh!” And then I read it and it was really good. It was people being like, “Oh, I saw this talk. I think we should try and implement this idea.” That kind of thing. And it was really cool on its surface, things that I just never seen before, but I really liked the Pinterest meets like Google Search because that’s exactly what it is. To be fair, I’m not a big fan of the Pinterest board layout when it comes to reading because then I’m like, “Where does my eye go?” It’s just like a grid, your eye just kind of jumps all over the place. So I’m not a huge fan of that. I think just having things in the list is just easier for my eyes, but it was pretty to look at, just visually. It looked interesting. So I thought that was cool.

 

[00:08:30] CG: What do you think about the fact that they’re kind of touting themselves as being the search engine to disrupt Google, but you have to use a Chrome extension, so a Google extension to be able to use it?

 

[00:08:41] SY: I don’t think I use Chrome extension. I just went to You.com.

 

[00:08:45] CG: Oh, really? Okay. Yeah. When I used it, and I think Levi too, for some reason, for us, we had to download that Chrome extension to be able to use it.

 

[00:08:52] SY: Really?

 

[00:08:53] CG: So that was like really interesting. I imagine since they’re new and they’re beta launch that they will probably move off of this eventually or have other things like you have the experience where you didn’t have to, but I did find it interesting that they explicitly say they want to kind of disrupt Google, but are using that.

 

[00:09:09] SY: That is weird. That is weird. Yeah, I’m on Firefox, but yeah, I just went to You.com and just searched directly there. So yeah. I don’t have to do anything.

 

[00:09:17] CG: Yeah.

 

[00:09:17] SY: But yeah. But if there’s a Chrome extension involvement, that does kind of like ruin the pitch if your whole thing is kind of going against Google. But yeah. So I’m really curious about this whole open search engine idea. I don’t really know what that means. Is that just a marketing thing? Like, “Oh, we’re open. So it sounds really cool.” Or is there actual value behind using that word? I’m not really sure what they mean by it. I don’t think they really talk much about it when it comes to what their interpretation of open is.

 

[00:09:45] CG: Yeah. I think for like, especially developers, if we hear the word open, we’re a lot of times thinking open source, like this is open source. Anyone can use it and do something with it. But that wasn’t something you could really find on their kind of marketing for it. They said they were open, and I know I’ve mentioned this to our producer, Levi, and that’s something I’ve seen before on other websites and I’ve asked before to other websites where they’ll say something like open SAS or, and it’s like, “What does that mean to you? What is open?”

 

[00:10:12] SY: What is the answer? What do other people mean by it?

 

[00:10:14] CG: When I asked one company, they said, “Well, it just means anyone can use it and it’s open to them.”

 

[00:10:21] SY: Oh, boy!

 

[00:10:23] CG: They’re just like, “Okay.”

 

[00:10:24] SY: No! That’s not what that means.

 

[00:10:27] CG: So I would go with, yes, it’s very much kind of a marketing and maybe a marketing specifically directed towards like developers, especially since they do have these extra things. That was one of their prominent things of, “Well, we have these extra developer tools for you.” So I think it was very much kind of this directing towards, “Look at this nice word, open.”

 

[00:10:46] SY: Yeah, absolutely. Well, coming up next, we speak with Stephanie Eckles, Software Engineer at Microsoft and author of ModernCSS.dev, about some exciting new CSS updates that were just announced at this year’s Chrome Dev Summit after this.

 

[MUSIC BREAK]

 

[00:11:20] SY: Here with us is Stephanie Eckles, Software Engineer at Microsoft and author of ModernCSS.dev. Thank you so much for joining us.

 

[00:11:28] SE: Yes. Thanks for having me.

 

[00:11:30] SY: So tell us about your developer background. How’d you get started?

 

[00:11:32] SE: Yes. So my first experiences with web development were actually courtesy of taking a summer camp that had to do with flash animation, and I’d always been interested in art. And so the idea of flash really appealed to me once I learned it was kind of a tool for animation. And when I realized that ideally there’d be a way to share what I had created on my own machine, that was the gateway into web development and learning at that time how to use tables and absolute positioning to display a completely flash-based site. So that was my very first intro and that kind of advanced to learning about WordPress. And I spent a good decade of my career building for WordPress. My degree is in advertising. And so I’ve spent the first eight-ish, nine-ish years in marketing and advertising doing development, and then spent the last couple of years in product before moving to Microsoft just over a year ago. And so I’m doing still front-end focused development for the team that I’m on there.

 

[00:12:43] CG: I love your blog, ModernCSS.dev. Can you talk about it a little bit? What was your motivation? How did you start with it?

 

[00:12:50] SE: So I’ve always found myself on very small teams. Even my team at Microsoft, we have three other full-time engineers on my particular team, and I’ve always had pretty much a team of four or less. In each of those environments, we’ve all had to learn a lot of skills, spanning much further than maybe what folks would think of as front of their front end. Right? An interesting thing about that is when I moved to a product team, that was my only time where I was on a little bit larger team, was the only front-end out of the rest of the team was considered full stack. Although they were mostly writing React and serverless functions and all that kind of stuff and just kind of recognizing that there was a divide in how we were able to communicate a little bit in terms of their needs of displaying data versus what we can do. And we were also simultaneously trying to build out a design system to support that. And so in working with the design system had the opportunity to talk to even more developers across my company, which was a large enterprise here in the Midwest doing financial services work and just kind of became even more aware that a lot of this gap was not being familiar with the more modern CSS layout methods. I kind of was doing my own research of course around what does exist on this education topic. And while there’s some immensely phenomenal educators in this field, one kind of gap I was seeing was there’s a lot of tricks and types of articles, but there was kind of a gap of, “Okay, but practically speaking, what are these newer methods that we have available? And how can I as someone who just needs to kind of upgrade my tool set maybe drop some older layout methods, maybe drop some JavaScript ideally? What book should I actually be reaching for?” So that’s kind of the gap that I’m trying to address with ModernCSS. So it’s intended to take you from your foundational skills or skills maybe you learned several years ago and you haven’t looked at what’s available now and help you build back up your toolbox with some more modern solutions.

 

[00:14:59] SY: So let’s get into some of the exciting new CSS features that were announced at Chrome Dev Summit 2021. First, I want to talk about container queries. What are they?

 

[00:15:09] SE: Yeah. So a container query is definitely something I’m personally very excited about. The idea is that rather than orchestrating your layout from the viewport level that we might be familiar with from writing media queries, instead a container query is going to scope down and allow you to query against the width of any container on your page. So for example, you could have a container query attached to your sidebar and a second one attached to your main area. And based on the width of those, you can change their children elements. So being able to change things like font sizes or upgrade grid layouts or flex layouts. Essentially with container queries, we’ll be able to ship our different layout variations with a component, a unique component, rather than have to worry about them again once they hit the actual page layout that they’re going to live within. So that’s kind of the power that they’re going to allow us to have.

 

[00:16:10] CG: So this actually was one of like the top feature requests for web developers for a lot of years. You talked a little bit here, but can you talk about what’s the major problem that container queries are trying to solve?

 

[00:16:23] SE: Yeah. The major problem for container queries that they’re trying to solve is just kind of offload that responsibility or take back really would be the better way to say it, take back that responsibility on the component to manage how it should behave, whether you’re on a large viewport or a small viewport and an extra advantage there is that we can just really consider all those mutations on that micro level instead of, again, having to reconsider them once they’re dropped in a page layout. So I can create an article component. And if it’s on a small layout, maybe I want the font size to be smaller and I want the author’s avatar to be positioned on top, but as it grows wider in whatever space it’s given, then I want to shift and have that avatar on the left-right and I want to have a larger font sizes, those kinds of decisions.

 

[00:17:18] SY: And is this a big problem? Is this one that you’ve personally encountered a bunch of times?

 

[00:17:23] SE: Yeah. It’s one where without if, we have components that are especially fickle. So I’m particularly hilly in my mind, I’m thinking of really complex navigation systems. Instead of having to sort of micromanage what those breakpoints are, even worry about the concept of viewport breakpoints, I can instead take it piece by piece and manage how those different parts shift within their allotted space. So definitely, that’s one that comes to mind. And also, like I said, lots of different content types of components. I mentioned the article component. I’m also thinking of forms. Maybe you have a subscription form and you want to toggle which direction the submit button or things like that.

 

[00:18:10] CG: So a lot of people talk about containing queries along with media queries because media queries are what we’ve been using for such a long time. How do you think this differentiates between media queries? How are container queries fixing the problem that traditional media queries couldn’t?

 

[00:18:27] SE: So when we are looking at a whole page and we’re talking about media queries, I think a problem I myself run into is you hit kind of unexpected results as you maybe try to create your page layout using a whole page wide grid, and that still has its place. We’ll definitely have that consideration still with container queries. You’ll still be worried about like a whole page layout. But with media queries alone, you’re not only having to deal with maybe your grid changing orientation that’s positioning the major page areas, but then you’re also having to write a second series that maybe isn’t consistent across your page layouts. Right? So you’re maybe having to do very specific scope styles just to make a minor change because you have a different grid layout on this page like on your homepage versus some sort of archive page, but you’re trying to share component. Right? So container query, like I said, will help you ship those styles that manage that sort of variation with the component itself. So with a small layout portion of your page. And so it just kind of shifts the responsibility essentially of where you’re managing those different changes across your layouts.

 

[00:19:45] SY: And when you look at container queries as a way of fixing this issue, do you see it as kind of a nice to have little bonus feature? Is that a game changer? How big of an impact do you think it will have?

 

[00:19:57] SE: Yeah. I think it will become something that is used quite often. I do think we’ll see kind of a ramp up to it. Right? I’m kind of thinking of when we, if you’ve been around since 2010, hearing about Ethan Marcotte speak of responsive design, right? This is kind of the next layer of responsive design. It’s going to take us all collectively some time to build up essentially new best practices. When I’ve been discussing container queries and doing demos, it’s hard to break that mentality of a media query. So I tend to find myself writing them in a way that’s similar to our responsive design idea of mobile first. So in other words, creating the layout that I intend to be represented for the smallest or narrowest version of that component and then increasing from there. The other difference though that makes it actually a game changer is that alongside container queries within the spec will be able to not only query based on width. That’s the easiest one to talk about. It’s kind of the easiest to maybe wrap your head around if you’re used to media queries. But we’ll also be able to query based on values of custom properties. So that’s really huge and it’s something we can’t do in media queries today. We can’t base a min width, for example, off of custom property value. We’ll be able to do that with the new set of querying capabilities from container queries. We also may be able to query based on other attributes, for example, based on whether the background color is blue. So it’s kind of pretty amazing what these capabilities are. Another feature that will push it into that game changer realm is new units that are coming along with container queries. So the example that comes to mind for me is the idea of fluid typography where you’re able to resize fonts and usually we’re basing that on viewport units. Now if we’re looking at that for say you have three cards in a grid, viewport unit isn’t quite right. It’s not contextually quite appropriate because you actually want a little bit smaller font size based on the fact that those cards are more narrow. So with container queries and the new related units they’re bringing, now you can base that font size on the actual width of your card, for example, at any given time. So again, it’s just making that more contextually appropriate. And I think that has really exciting possibilities as well.

 

[00:22:27] SE: Yeah. I’m really excited to learn more about container queries, and I think I agree with you. They are going to change a lot for developers and how we’re going to work with it. But let’s talk about some of the other features that are making the web even better. So at the summit, they talked a lot about web compatibility and it being a big challenge for web developers and Google’s defined some of the biggest pain points, their top five pain points as Flexbox Grid, position sticky aspect ratio, and transforms. Do you have thoughts around any of those? Have you had a lot of pain points with them with different browsers?

 

[00:23:08] SE: Yeah. It’s interesting to me the first two, grid and flexbox, if you are able to drop IE11, that’s always a sticking point that comes up, and we are getting super close to sort of universally being able to drop that unless you’re in a very, very niche segment of the industry. So with that said, we have had, I know for sure on grid, because I had just looked this up, but we’ve had evergreen support for grid since 2017. So I think those are definitely the farthest along both flex and grid, and flex was made available to us before that. I don’t know the date for sure. But the other ones, particularly aspect ratio, that one I’m definitely eager to see reach a full maturity across our browsers. I believe it is in all of our evergreen now that Safari 15 has rolled out and that’s going to remove quite a few different hacks that we’ve had to do over the years with absolute positioning. Those of you that have ever had to wrap a video are might be familiar with the padding hack. So you get the appropriate 16x9 aspect ratio. And so now to have that consolidated to a single property is really awesome. Another use case for that is photo galleries, kicking perfectly square images or whatever other resolution, or excuse me, aspect ratio even like, I think that transforms then one of the issues I’ve had in the past and I believe is what they’re referring to addressing is that when you define a transform property and you’re using its individual values and functions like scale and translate, I believe they’re going to break those out into their own properties. And so previously, if you were doing keyframe animations or other types of changes along kind of the life cycle of that element, you’d have to retain all of those values in your transformed property. CSS, custom properties alleviated that for us, but I’m assuming that’s the change they were referring to. I haven’t watched that yet myself, but being able to have those broken out so you can address them individually instead of having to retain that whole sequence for further changes. I think you had another one you mentioned.

 

[00:25:20] CG: Position sticky.

 

[00:25:21] SE: Yeah. Position sticky, it’s interesting to me that that’s a priority. I think that it’s one of those that can be tricky, another kind of emphasis for myself as accessibility, and that’s definitely when it then starts to get you in trouble quickly for accessibility reasons. I don’t have the stat off hand, we’re not supported. But I do know that part of where those priorities come from is different surveys such as the annual state of CSS survey. And so those are coming from developer feedback that helps inform their priorities. So just something to keep in mind for folks that are listening, like those avenues are important, and the other avenue that’s really important is actually going to the CSS Working Group’s GitHub, and you can vote on individual issues. So that’s a good way, like if you have different priorities, you can go to those places, take advantage of those opportunities to provide your own input and browser makers and like I said the working group are listening and will take that under consideration.

 

[00:26:23] SY: All right. Well, thank you so much for being here.

 

[00:26:25] SE: Thank you for having me.

 

[00:26:37] SY: Thank you for listening to DevNews. This show is produced and mixed by Levi Sharpe. Editorial oversight is provided by Peter Frank, Ben Halpern, and Jess Lee. Our theme music is by Dan Powell. If you have any questions or comments, dial into our Google Voice at +1 (929) 500-1513 or email us at [email protected] Please rate and subscribe to this show wherever you get your podcasts.