Hey, everyone, and welcome to Developer Team. My name is Jonathan Cottrell, and in today's episode, I interview Yuna Kravitz. Yuna is a front-end developer at IBM, where she works on the Bluemix project. She also hosts a podcast. We talk about that later on in the episode. She is a speaker, and she has a blog where she writes a lot about really deep, interesting CSS topics. And I highly recommend you go check it out. Of course, that will be in the show notes at spec.fm. Today's sponsor is Hired.com. If you are a designer or a developer and you are on the job search, I recommend you go and check out Hired.com. We will talk more about what Hired has to offer specifically for Developer Team listeners. You all have a special offer from Hired. We will talk more about that later on in today's episode. But first, I want to get straight into the interview with Yuna. Yuna. Yuna. Yuna. Yuna. I'm really thankful that you came on the podcast. You've been doing some really interesting stuff, and we're going to get into all of that in this episode. And who knows, we may go over into a second episode. So I want to start out, you were on the Code Newbie podcast. You've been doing this kind of stuff for how long now? How long have you been a web developer? That's a hard question to answer. It depends on what you count as experience, because I feel like I've been doing it for a long time. But technically, I graduated college a year and a half ago, to be perfectly honest. So professionally, outside of school, not very long. But I think I've been doing it maybe seven or eight years. Sure. Yeah. And I think there's a lot of people in that same position. Congratulations, by the way. You've moved very quickly. Yeah. It's been a roller coaster for sure. And you work at IBM, correct? Yes, I'm at IBM. I work on the cloud. I'm part of the cloud platform team within the design studio in Austin. Is that related to Bluemix at all? Yeah. So Bluemix is a part of the cloud platform in general. So right now, what I've been doing is working on a pattern library for multiple teams to use and sort of consolidating icons. That's been my goal and task in the past two weeks, sorting out how we're going to use this icon system within this pattern library. But also, that's sort of been my focus at work is creating this system for us all to with an awesome team. It's been a lot of talking about architecture and sort of trying to figure out what the best method is to create these really nice modular components without being explicit about too much when it comes to code decisions, if that makes sense. Yeah. I mean, this is a really complex problem. It's difficult to sum it up in a short period of time. If you have experienced these kinds of things, you're going to want to take a look at the whoever's listening to the podcast, you know that when you start talking about pattern libraries and when you start talking about architecture of CSS, things get really kind of complex. There's so much to think about, so many variables to deal with. I mean, an amazing amount of decision-making occurs. And it's not just about choosing what particular type of CSS architecture. Are you going to use BIM? Are you going to use Atomic? It's not just about that. It's about larger-level decision-making about the dynamics of the team, for example. Right, and the thing that happens when you're building a pattern library, or especially any sort of architecture, is everybody has an opinion. Because everybody that you're working with is a developer, you're developing something for developers, and of course everyone's opinion is valid. It's just how do you make the right decision for the team? And on a big team like the cloud platform and IBM, that becomes really challenging. So it's definitely been a journey. Sure, yeah. And so are you using any particular tools that you want to share, or is it mostly just kind of writing documentation? We're definitely using a BEM-style syntax. We're using a lot of interrelated components and extends. And I've written blog posts about how I at least architect my CSS and how we're sort of doing it, breaking things up as much as we can. We have these base elements, some components, just taking some of these best practices and trying to decimate them into our style of using them. Sure, yeah, that totally makes sense. Now, I mentioned that you were on CodeNewbie, but you were starting your own podcast, correct? Yes, I started a podcast in October called Tools Day, and it's co-hosted with one of my coworkers, Chris Donarage, and it's just intended to be a short podcast, a little, a little phrase I like to say is 20 minutes of tech tools on Tuesdays at 2. Wow. Yeah, alliteration is on point there. But it's just a short podcast about all these different tools that we have as developers and introducing them into people. So maybe someone who wasn't super familiar with Express, they could just get a brief glimpse of it and see where it's useful. Or we even talked about pre and post processors for CSS in one episode. We talked about style guides. It's there's a variety of topics there. Yeah, I mean, there's so many tools that can be covered. It's kind of a compliment in some ways to developer tea because I typically don't talk about specific tools. Every once in a while, I'll talk about a tool, but I like the idea of having a tool specific show. I don't think that that is really covered super well in the industry. But then again, there's a ton of space for it because there's so many tools. I mean, there's just, an enormous number of tools available to us. Yeah, the last three shows were all different JavaScript frameworks. Just, I mean, micro frameworks or, you know, these massive frameworks and everything in between. There's hundreds of these, thousands probably. Yeah, and a big part of why I like to do it is because every episode I learn something. So when we have a guest, like when we had Iani on the show a couple of weeks ago, he was talking about Ember.js and I probably have never, used it before his show. And after the show, I was kind of convinced that there's real meaning behind this. And it sounded like a really good system. So I get so much value out of just doing the podcast. Sure, yeah. Well, I mean, it forces you to, and this is actually one of the reasons why I enjoy doing a podcast. I don't have a lot of opportunity in my normal work day to participate in the community. It's a little bit difficult to do that when I'm focused on client work. And so I use Developer Tea to kind of involve myself in the community in some way and stay aware of what's going on. And it's actually a really good way to do that. I mean, you know, I could also spend my time going through issues and I could spend my time fixing bugs. And those things are good things. And if you are looking to get into open source or into the community, that is a really good way to do it. But I really, really enjoy talking to people. And I really enjoy talking about things, about programming, about the job, but also about all the ancillary parts of the job. At the same time, you're creating a resource for people to get that same information. So you're not just sitting there talking to people one-on-one, learning it yourself. You're spreading that news, which is really what I love about the developer community is there's so much sharing involved. And there's so many people writing blog posts and making screenshots and you can get all the information you need to learn to become a developer from the internet right now because people are making this content and sharing it and wanting other people to learn from it. Yeah, it's one of the only industries where that's true as well. And, you know, there's a lot of reasons for that. But I would say, you know, one of the reasons is because the actual work lends itself to being shared. It just so happens that software development, you know, we don't cannibalize it. We cannibalize ourselves very often in the industry. The most competitive part of the industry is probably hiring because there's so much demand and being able to attract talent in the industry is somewhat difficult. But other than that, you know, participating in open source, there's really not a good excuse to not give back to the community. Or there's really not a good reason why you shouldn't, I guess I should say. There are plenty of good reasons why you shouldn't. Definitely. And I feel very fortunate to be in this community that does that. It's really rare to find in a lot of jobs. And honestly, development isn't really a job so much as, I don't want to call it a lifestyle because I think it's important to have your own life outside of work. But it does transcend just your nine to five. Oh, totally. I mean, I think it is. I think it's one of those things that when you become a developer, you understand that. Once you start working on projects, especially if you have side projects and things you're interested in, you get that extra piece of understanding that development isn't just, you know, it's not the same kind of thing as going and being a bank teller. Full respect to bank tellers. I don't mean any harm towards them, but this is a different level of intimacy with the content that you're working with on a day-to-day basis. It is very much so interwoven into your brain, the work you're doing every single day. Yeah, that's a great way to put it, an intimacy with your work. And you're thinking about that work when you're just going about your day too. That's where you probably get most of your ideas. It takes a high level of energy, right? A high level of mental energy. And you're right. Everything in this show comes from either another person's experience or my own experience, right? Like that's where these ideas come from. That's where probably a lot of your, a lot of the things that you've shared online come from, which actually leads me directly into the next part of the interview. I'd love for you to talk about some of the stuff that you've posted recently. Specifically, some people listening right now are probably familiar with CSSgram. This is a Instagram filter. Well, you tell everyone what it is, CSSgram. So CSSgram is a library for Instagram filters that uses the CSS properties of filter and blend modes to filter your content. So you can filter your content and you can filter your content and you can filter your content and you can filter your content in your browser. And it's been really cool to see how much that's grown because I initially just did it as a test case for a talk that I was giving about filters and blend modes and like working with images in the browser. And I put in my slide decks some of these filters that I recreated and people asked for them. So after the talk, I just put it on GitHub and I expanded it a little bit and did a few more filters and then shared it. And now I see people building web apps using this as a part of the web app. And I've seen a lot of people doing that. And I've seen a lot of people doing that. And I've seen a lot of people doing that. I've seen it as an Easter egg on some pretty big websites. And it's been really, really cool to see it grow and people embrace it. That's really cool. How long did it take you to build it? It didn't really take that long. I don't remember exactly, but I think the hardest part was figuring out the filters and how to recreate them because in CSS, you don't have channel manipulation like you do in SVG. In SVG, you can manipulate red channels, green channels, blue channels, and alpha channels individually, which is required for a few of the Instagram filters. But with CSS, you don't have that opportunity. So you have to get kind of creative with the blend modes. And initially, I just had one pseudo element that I layered on top of an image and used a blend mode plus some sort of filters to recreate these Instagram filters and just look at them side by side and make sure they looked right. But then some of the more complex filters required a few more techniques that I sort of just, developed as I was going. And it got a lot easier once I started practicing and being able to disseminate what was happening in that image and look at the lightness and the shadows of the image and sort of figure it out. It's very much figuring it out as I did. Yeah, I mean, I'm sure that that is not, that's not an easy thing. You know, if you use Instagram, then you're probably familiar with these filters. If you don't, just a quick update for you. Instagram allows you to apply filters. to images that you post and you have people who follow you. It's kind of like Twitter, except instead of 140 characters, you get one image with a description. You also can do video on Instagram. So the deal is, the filters that Instagram uses, they have a lot of different things going on. There's blend modes, which is basically like taking, taking a color and putting it on top. Maybe not necessarily just a color. You could also duplicate the photo. And put it on top of the photo itself. Or you could put a color underneath the photo. And essentially use some math to determine what the outcome is between blending those two layers together. So for example, if you put a, well, I'll let you guys go and look at Yuna's implementation. But it's not just one blend mode that Instagram is using to create these filters. They could be using a series of steps to create a filter. To create a given filter. Which is why it's so, it's such an intense process that Yuna had to go through to actually create these filters. Instagram is probably using some of the channel manipulation. It's very much just like Photoshop-esque levels. But kind of like with CSS, you don't have that manipulation capability. What you can do though, is use gradients as backgrounds if you need. And those create different patches of color as a layer on top of an image. And then use a various blend mode to make the pixels from that layer interact with the image below it. And that's what you can really start to get a lot of variance in your outcomes with that. Sure, yeah. I actually wrote an article about blend modes. It's a really interesting science. And there's a really cool, there's actually, I say it's cool. There is a spec for this. It's really fun to read actually. It's, you go through it and you start understanding, okay, these are the different types of blend modes. There's some that work with one dimension, one particular color channel. And there's some that work unilaterally across all of the color channels. And it is interesting to read how that stuff works because it comes down to math in the end to determine what the final color for a given pixel is. And then you do that for each pixel. Yeah. So kind of after that CSSgram campaign, came out, I started playing more with these blend modes and seeing how they interact. And I did a series of CSS image effects posts. And one of them was like 3D glasses. So I used a blend mode to colorize two images. And then the way that they interacted, one was dark and one was lighten. When you overlaid them, the blend modes canceled out. So you were able to just color like the shadows on either side of the image. And half of it on the left was blue. Half of it on the right was red. Like you would see in one of those like 3D images. Like it's called an anaglyph. And then you can use like Z transforms to move the images back in space on the page and recreate these sort of 3D things. And then you can use animations to animate them. So you can really get crazy with the filters. I had a lot of fun with that. Just sort of recreating some of the most popular image effects I saw in Photoshop with code. Yeah, that's really cool. I never thought about actually like doing the shadow portion of that and isolating those particular pieces. That's really cool. Yeah, it's a fun technique. Check out the post series. I put them all together and bundled them onto this site that I created called arttheweb.com. A-R-T-T-H-E-W-E-B, arttheweb.com. And it's just a bunch of these posts. I don't know if they're really meant for production, but I think... I think somebody will one day find a productive use for them. And they're also just really cool to experiment with. Browsers are getting better day by day. So implementing these is going to be a lot easier for your computer to handle eventually. I agree with that. I just spoke with Rachel Neighbors last night, actually. And we were talking about what is required to push the web forward. And of course, we talked about the reality of technology and creativity kind of having this symbiotic relationship where you go and create these filters that work in one third of the browsers. And enough people do that. And typically, that kind of drives the other browsers forward because you start creating demand for these new features. It is a worthwhile experiment. And you learn a lot by doing these kinds of experiments that you're doing, whether it's with images or with anything else, really. Yes, I completely agree. I completely agree with you. And one of my favorite examples of that is Leah Vrew. And she has recently made this polyfill for conic gradients. So those are gradients that aren't just up or down. They start from the center of the image. And you can create sort of like, if you think about the color wheel and how it starts at the center with the red hues that kind of go darker on the edges and brighter on the inside and how that spans in a circle. Having that conic gradient allows for checkerboards and for a lot of different gradients. So it's really cool to see how that sort of transforms the future of the web in a way. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. Thank you. manipulation in the browser. Yeah, and I think we're just beginning, to be honest. We're going to see a lot of augmented reality, virtual reality in the future of tech, and that's going to manifest in our day-to-day tools. And when that becomes a part of our day-to-day tools, we'll see browsers adapting to that. Who knows what the future of HTML and CSS even could be if it starts to veer into that direction. Yeah, I mean, it's wide open. I think VR kind of brings together the qualities of video and animation with the idea of responsive design. And I think there's some hesitation, especially with the traditional design community, towards VR because it seems kind of like Google Glass, right? In the traditional design community, they seem to be resistant to it because it seems like such a big jump. But there's so much possibility with VR that isn't a huge jump from where we are. It could just be a few steps from where we are. And it's not so much about entirely changing the context, but instead it's about how can we incrementally use VR without freaking people out? And I think that was one of the big downfalls of Google Glass and why it's not, you know, on everybody's faces right now. Yeah, I think it has a lot to also do with utility. And when Google Glass came out, it was very expensive. People didn't really find a use case for it day to day. It didn't become a need for the price point that it was at. So it's going to be a long time, I think, until VR and AR become a part of our lives. But I don't see how the direction of technology could really go in any other way because it's definitely not going to stay stagnant. Sure, yeah. So who knows? It's exciting times. Yeah, it is. It's a good time to be alive. It is. It really is. It really is an amazing time to be alive. It's all going to accumulate faster and faster thanks to Moore's law, right? We have memory chips that are getting smaller and smaller and things are getting faster and more cheap. And so, you know, the things that cost a lot yesterday to put on the web, for example, are not going to cost that much tomorrow. That's the idea. It's really cool also to see all the work that Google and really all the browser vendors are doing with performance. Yeah. I think that's going to be a really big step forward for us. Yeah. I think that's going to be a really big step forward for us. Because they're trying to open up the web to these markets and to third world countries who right now cost a lot of money to just use a web browser. An example that I can give is I was at the Chrome Dev Summit a couple of months ago and they were talking about India and how it costs to load 15 web pages the minimum wage for one hour of work. So that's so... Can you imagine working for an entire hour just to be able to load 15 web pages? But there, so many people are getting online. They're getting online on mobile devices first. And they're a huge consumer, a huge market. So it's really cool to see how these performance improvements are not just to increase speed. They're to make the internet cheaper and more accessible to more people. So not only is technology moving forward in what are we capable of doing, but also moving forward in how we're capable of... Optimizing what we've been doing. I actually saw that same... It may have been actually from your tweet. I'm not sure. But I saw the same stat. And it kind of led me to two things. One was we can approach this from, well, maybe we need to figure out a way to make it cheaper for them, right? So that they can access and have more data. And then the other side was, well, I also need to take responsibility and build... My side so that it doesn't cost them an entire hour's wage to load one of my pages, right? That would be terrible. And so, you know, progressive enhancement and all those other buzzwords that you hear, they have real ramifications. And that's what that kind of said to me was, this is somebody's actual quality of life that you're messing with. Yep, exactly. Really interesting stuff. And again, it's headed in an exciting direction. I mean, we have gigabit internet. In the States is going to become a very real and very normal thing. Hopefully. Soon. Sooner, rather than later. Yeah. The biggest hurdles right now are mostly related to bigger businesses and that kind of thing. But we will stay out of the politics on this show because that's not what we're about here. Instead, we're going to talk... We're here to talk about big ideas. No, we're here to talk about your resolutions for this year, actually. That's what I'm excited to talk about next. Thank you so much for listening to today's episode, this first part of the interview with Una Kravitz. I really appreciated Una coming on the show. Hopefully you are enjoying it as well. If you want to miss out on the second part, make sure you subscribe to Developer Tea and whatever podcasting app you use. Pretty much every app allows you to subscribe, so you will be automatically notified when that next episode comes out. Which is just in two days from now. Thanks so much again to Hired for sponsoring today's episode. If you are a designer or a developer and you're looking for a job, Hired may be the perfect place for you to start. Go to the show notes at spec.fm and click on the special link in those show notes. And you can get a double bonus from Hired if you end up getting a job through the platform. Make sure you go to spec.fm and click on that special link. Thank you again to Hired.com. And thank you for listening to the show. Until next time, enjoy your tea.