Hey everyone and welcome to Developer Tea. My name is Jonathan Cutrell and in today's episode I interview Una Kravets. Una 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 T-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 Una. Una 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 experienced. 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. That's 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 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 in task in the past two weeks, sort of, at how we're going to use this icon system within this pound library. But also that's sort of been my focus at work is creating this system for us all. 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, 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. It's not just about choosing what particular type of CSS architecture are you going to use BAM or you're 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. 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 BAM 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 just sort of doing it, breaking things up as much as we can. We have these space elements and components. Just taking some of these best practices and trying to like, dismate them into our style of using them. Sure. Yeah, that totally makes sense. Now, I mentioned that you are on Code Newbie, but you are starting your own podcast, correct? Yes. I started a podcast in October called Toolsday and it's co-hosted with one of my co-workers, Chris Donarage. And it's just intended to be a short podcast, 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. We even talked about pre-imposed processors for CSS in one episode, talk about style guides. 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 develop a tool 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 a, I mean, micro frameworks or these massive frameworks and everything in between, there's hundreds of these thousands probably. Yeah. The part of why I like to do is because every episode I learn something. So when we have a guest, like when we had Iyani 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. And 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 too. It's 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 Teato 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, 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 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 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 screencasts. 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 there's a lot of reasons for that. But I would say one of the reasons is because the actual work lends itself to being shared. It just so happens that software development, we don't 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, participating in open source, there's really not a good excuse to not give back to the community. There's really not a good reason why you shouldn't, I guess I should say. There are plenty of good reasons why you should. Definitely, and I feel very fortunate to be in this community that does that. It's really where to find and 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 in 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? 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 CSS Graham. This is an Instagram filter. Well, you tell everyone what it is. CSS Graham. So CSS Graham is a library for Instagram filters that uses the CSS properties of filter and blend modes to recreate Instagram filters in your browser. And it's been really cool to see how 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 are recreated and people asked for them. And then 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 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 to blend mode, plus some sort of filters to recreate these Instagram filters. And just like, look at them side by side, 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 do. Yeah, I mean, I'm sure that that is 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 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 UNAS 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 given filter, which is why it's such an intense process that UNA 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, Esk 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. 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 CSS Graham 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 when was dark and when was lighten, when you overlaid them, the blend modes canceled out. So you were able to just color 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 3D images, it's called an anaglyph and then you can use Z transforms to move the images back in space on the page and recreate these 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 like ART, THE, 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 somebody will one day find a productive use for them and they're also just really cool to experiment with. Brasers 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 with you and one of my favorite examples of that is Leah Vrew and she has recently made this polyfill for Conant 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 the center with like the red hues that kind of go darker in the edges and bright on the inside and like how that spans in a circle. Having that Conant Gradient allows for checker boards and for a lot of different creativity with CSS you can create pie charts out of it and so this idea she just started talking about a lot at conferences and sort of had people send in their interest to the browser vendors and I think because of that rallying it's going to be a thing. It takes that. It takes the people deciding that yes, this is the idea we want this in the browsers. The vendors will listen. So it's really cool to see how that sort of transformed the future of the web in a way. Today's episode is sponsored by hired dot com on hired software engineers and designers can get five or more interview requests in a given week. Each offer has salary and equity at front and they have full time and contract opportunities from over 3000 companies. These companies range in size from small startups to large publicly traded companies and they have employers from 13 major tech hubs in North America and Europe. So the best part for you is that it's totally free and if you get a job through hired they normally give a $1,000 thank you bonus but just for Developer Tealisteners they have a very special offer. If you click the special link in the show notes which is hire dot com slash Developer Teathen you can get a double bonus a $2,000 thank you bonus when you accept a job through hire dot com so go to spec dot fm find the show notes or go to hired dot com slash Developer Tea and sign up today again it's totally free for you thanks again hired for sponsoring today's episode of Developer Tea. Have you seen the there's a letter to get hub that has been circling circulating and there may be a couple of these but one of the one of the letters to get up includes a request to have like a feature voting basically feature voting feature I don't know how I was to say yes I love that one so instead of commenting if you're if you're a common user of get hub you've seen these comments that have the you know plus one or thumbs up or whatever and that's something that we've all kind of gotten used to but that's just kind of a cultural way at this point of voting and saying yes we should do this what these people are asking for in this open letter to get up is a way of doing this more formally and providing a way of like sorting you know feature requests based on the number of votes from the community and that kind of stuff so that is a real thing that happens in open source and it's not just an open source it also happens at the browser vendor level it happens you know another great example of my opinion is the temperature on iOS 9.3 I think they're going to let you change the temperature like f dot lux or flux I don't know how to say it. Yeah I just started using that about two weeks ago it's an amazing thing and actually once you use it once or twice and you get used to it I really love it I like it a lot too especially because I use my computer a lot before bed and when I do use it and turn it off for a second I realize how dramatic the difference it makes with that blue light I have it on now and I'm sort of used to it so I don't really see the difference but when I turn it off because that's an option it's just so stark in contrast and I mean there's there's a bunch of science around this that I'm not going to quote you know verbatim or anything but basically late at night if you have really blue light like what your computer typically gives off is a very high temperature in terms of where the white temperature is if your computer is set to that high temperature then scientifically they've proven through a series of studies that you're not going to sleep as well as if you were exposed to lower temperature light or no light at all right and that's so that's the the backing for this so f lux or flux they created a a menu bar application for macOS and I think they've created it for Linux and possibly windows I'm not sure now I just wanted on my phone yeah yeah well now we have it on our phones oh I had no idea and ultimately apple has now introduced some of the exact features in nine dot three in iOS nine dot three they're putting it into the iOS system and it's not directly taken from flux but it is almost certainly because of flux there's plenty of these things that have happened right for example you know pulling the drawer up from the bottom or pulling the drawer down from the top these are things that jailbroken iPhones had for many years people are always getting inspiration from each other sort of long same lines of flux CSS is getting ambient light queries so soon we're going to be able to use the light around us to transform the CSS that you're seeing in the browser on your phone that's amazing with Rachel neighbors and I once again last night we were we were speaking and she let me know that they're actually coming out with a battery level API that browsers will be able to use in JavaScript nice that's awesome so assuming that you have a phone or a laptop that is relying on battery power if your battery power is let's say below 10% then maybe we shouldn't load that you know high intensity animation yeah that's a that's that's really excited actually that's so good oh I'm excited for that so bring that together with things like ambient light and now we have a site that can really truly respond to the environment right right that's real responsive design responding to where you are as a user like physically in time and space and your battery level of your phone and time of day like everything yeah responsive design is not how big or small a screen is responsive design is interacting with your user and as many ways as you can yeah I'm really excited because we've gone past the kind of base level in CSS and we've gone past the base level in JavaScript and when I say base level I mean you know representing these things call it paper or call it boxes or whatever you want to call it items that was what most of the energy of the browser was put into in the early years and up until now and we've kind of moved past that now we're onto animation now we're onto true responsive design where we have information that tells us what that paper or what that box should be and it goes significantly beyond that when you start talking about SVG and when you start talking about you know things like photo 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 be or into that direction yeah I mean it's 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 the 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 accessibility 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 so yeah who knows it's exciting times it's 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 optimization because they're trying to open up the web to these markets and to third world country is who right now costs a lot of money to just use a web browser and 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 wage minimum wage for one hour of work so that's so like can you imagine working for an entire hour just to be able to load 15 web pages but there are 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 and 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 the same stat and you know it kind of led me to two things one was you know 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 hours wage to load one of my pages right that 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 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 a exciting direction I mean we have gigabit internet in the states is going to become a very real and very normal thing hopefully soon soon to rise later yeah the biggest hurdles right now are mostly related to 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 gonna talk we're here to talk about big ideas yeah no we're here to talk about 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 Unicrevates I really appreciated Unic 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 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 doubled 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 hire.com and thank you for listening to the show until next time enjoy your tea