CSS is a goldmine waiting to be tapped.
In this episode we talk about little-known things you can do with CSS with UX Developers at Shopify, Hui Jing Chen and Ananya Neogi.
Jess Lee is co-founder of DEV.
Ben Halpern is co-founder and webmaster of DEV/Forem.
Hui Jing Chen is a UX Designer at Shopify. She is also a self-taught developer and designer and has an inordinate love for CSS. She used to play basketball full-time and launched her web career during downtime between training sessions.
Ananya Neogi is an UX Developer at Shopify working at the intersection of code and design. Writing CSS sparks the most joy for her. She's an occasional writer, speaker, and an aspiring dog mom amongst other things.
[00:00:24] BH: Welcome to Dev Discuss, the show where we cover the burning topics that impact all our lives as developers. I’m Ben Halpern, co-founder of Dev.
[00:00:32] JL: And I’m Jess Lee, also a co-founder of Dev. Today, we’re talking about little known things you can do with CSS with Hui Jing Chen and Ananya Neogi, UX Developers at Shopify. Thank you both so much for joining us.
[00:00:44] HC: It’s great to be here. Thanks for inviting us.
[00:00:46] AN: Thank you for having us. It’s so fun.
[00:00:48] BH: Ananya, tell us a bit about your background as a developer.
[00:00:53] AN: So right now I’m working as a UX developer, but before this I was working more into web and like the whole full spectrum for the past like three going four years now, I think working as a frontend developer in like various companies. Like my first job was in a small design agency and from there I moved to different places, but I’ve mostly worked at the frontend because I love it so much and I never want to change that ever again. So yeah, I love doing it.
[00:01:23] JL: Awesome. I don’t think you ever hear those words come out of my mouth loving frontend so much. What kind of projects have you been working on at Shopify?
[00:01:31] AN: I specifically work on the admin side of things. So if anybody knows like if they’re using Shopify, the dashboard that they see and they manage their orders and stuff. So that’s the thing that I’m generally working on. Most of the day to day work just goes into like just working on features and just like doing a lot of accessibility stuff, writing like CSS and contributing to the design system, but we have Polaris. I hope a lot of people will know about it. Yeah. That’s it.
[00:02:03] BH: Admin work at Shopify is pretty mission-critical. That sounds pretty cool. It’s not exactly like some email template that goes out. You’re working on the real goods.
[00:02:15] AN: Definitely. Definitely. Yeah. So like one of the main pages that most of our merchants like view, which is like the orders page where they basically control everything about like their store, mostly like the backend side of things, like managing orders and fulfillment and all that. Yes. I work on like bad area. I mean, even that area is divided into like smaller sub-teams, but it’s like the real deal.
[00:02:42] JL: Yeah, the Dev shop is powered by Shopify. So we’re familiar with what you’re describing.
[00:02:49] AN: That’s great.
[00:02:50] BH: And Hui Jing, can you tell us a bit about your background?
[00:02:54] HC: I also started out at a small web agency. It was more specific. It was like a Drupal agency. That was back in, I think, 2013. I see that as a milestone for official implement because people started to actually pay me. Even though it was a Drupal agency, I think I gravitated toward doing the frontend, like building a lot of custom themes about a year in, and I kind of just sat in that frontend space ever since, also moved around a bit. I’m too a UX developer at Shopify. I am set in Singapore. So I’m actually part of the international R&D. I think that’s the official title. And different from an Ananya, I’m working more on the brochure sites. So for me specifically, because I’m on the China team, I’m working on the brochure site for our Chinese audience, and it hasn’t really been a very interesting experience. I think A lot of times most folks who are not familiar with China or at least have been to China or even develop anything in China is that there’s a very unique set of constraints that developers face, especially if you’re working on the web and that has been super interesting for me.
[00:04:10] JL: I’d love to learn about how you found yourself becoming a CSS expert, just how it became a part of your own development as a developer.
[00:06:19] BH: So with where CSS is today versus sort of the timeframe you were talking about when you were first up and coming in frontend development, is the choice to go with CSS for some of these things is a little bit more practical with some of the newer things that are shipping in CSS versus that period of time and what you’re describing?
[00:08:23] JL: So Ananya, you wrote a piece on Dev titled “CSS Can Do That”, which was really popular with the community. I’d love to hear how you ended up taking a deeper look at CSS.
[00:11:02] BH: Before you got so into CSS, did you think of the visual side of what you do and the computer science side of what you do as somewhat distinct or did you always know there’d be a bit of interplay there?
[00:11:15] AN: I always thought that there is like this disconnect and I always had this like notion in my mind that the visual stuff is done by designers. I don’t know, like I just had that notion in mind and like developers are people who are just going to like code things and like shouldn’t really bother about the visual things. But I don’t know where that thought came from. I have no idea, but it was there in my mind. But when I started to actually look into like frontend and like web dev and CSS and everything, so from there it was like the light bulb moment when I thought, “Well, hey, this is for me because I love coding.” So I don’t want to become a designer, even though I love visual stuff, but I love coding so much more. So that’s where it like hit me, “Okay, I can do both things,” and that’s where like CSS comes in.
[00:12:23] JL: So I think you both mentioned just some hidden tricks with CSS. I love to hear about which tricks you find the most interesting. Hui Jing, would you like to kick that off?
[00:12:33] HC: I actually have a ranking of like my favorite CSS properties. This is such a nerd thing to have, but I do. I’m going to talk about the top two. I think Ananya covered that in her article. I loved that article by the way.
[00:12:45] AN: Oh, thank you.
[00:12:46] HC: So I’m Chinese, if you can tell from my name. So I grew up in Malaysia and our street signs are in Malay, which uses the alphabets, the A, B, C alphabets, and then also Jawi, which is a form of like Arabic writing. So you have like already alternate directions. And then like the books that we had were some of the older ones. So there was a mix, right? So Chinese can be written both horizontally or vertically. I think the novels would be like vertical. So there were all these like really interesting layouts that you see in real life. So I was in a crowded train and there was this dude and he was reading a novel. I mean, it’s crowded, like I didn’t want to look over his shoulder. His shoulder was just right there. So he was reading this Chinese novel and you can imagine like a phone is portrait, right? And the text was vertical, but on a phone, it’s actually so narrow, I was like, “If you type it vertically, it would feel nice. It would look nice. I wonder if we could do that on the web.” It turns out that we could, and then I’m going to sank into a rabbit hole with that, the second one, and because Ananya also mentioned this in her article, shapes, CSS Shapes. So good. My elevator pitch for CSS Shapes is you can now let your text flow around Beyoncé’s elbow, like you could in a print magazine. I guess I’m going to hand this off to Ananya to elaborate a bit more about the beauty of CSS Shapes.
[00:14:18] AN: I totally like the second that. So you don’t now have to actually set your text and your image in boxes. They can just have this like free flowing personality on your website, which is just so cool. You can like let your creativity flow and you don’t have to be confined to boxes, which is like amazing. You can do these amazing things and just have these like really random shapes and those shapes can actually be like images or SVGs or anything. It doesn’t just have to be like some image and you can add lots of like interaction to it and you can just create this like beautiful experience on the web.
[00:15:03] BH: Hit us with another great, hidden trick.
[00:15:06] AN: Another thing would be like gradients. I love gradients. It’s not just like the linear gradients that we can see, but now we can do like so much more with gradients. I think I covered this in my article, but there is this called conic gradient where you can actually create pie charts with CSS and that just like blew my mind when I found out about it. I mean, you can’t really do like super complex stuff in it, but if maybe you’re like writing an article or you have like a really static page and you know like these values for the pie chart, you can just like immediately add them directly in your CSS. And you have like a really beautiful pie chart. Also, like you can add gradients to text, which I think creates a really beautiful effect. The text gradient does not really have that much of support, but you can still like do it and have fallback to just like normal colors.
[00:19:00] JL: So I think a lot of people actually really dislike using CSS. I’m curious if you have any theories as to why people have an unflattering view of the language.
[00:19:09] HC: This is based on anecdotal personal experience. I get the feeling that a lot of us, again, “hardcore programmers”, they don’t think CSS is a thing. They’re like, “Yeah, it’s not even programming. What are you talking about?” And I say that these opinions to me, I find them, they’re just conflicting because you don’t like CSS because it’s too easy, but then you don’t like it because it’s too hard? That doesn’t make sense. Make up your minds. Again, I would say that it’s a very distinct paradigm from let’s say the more traditional programming languages where you write a lot of logic. I mean, there is logic in CSS, but it’s kind of different because if you think about like selectors, right? There’s logic in there. How would you I would say even structure your selectors? You’d have to think about the math behind it if you’re thinking of more specific, complicated selector logic. There’s some logic there, but I would say that CSS, when it first started, it wasn’t that. It was really literally for presentational purposes. Right? And because I’m more of a rabbit hole kind of person, I actually have read quite a lot of CSS specs over the years. What I discovered, fun fact, the first version of CSS that came out in ’96, there was a line that said that CSS wasn’t meant for doing layouts.
[00:20:32] JL: Wow!
[00:20:34] HC: And that just blew my mind because at the time it was more of like the web in and of itself coming out of an academic environment, like certain, right? It got pushed through because it wasn’t means for other researchers to be able to share the academic papers. So it was very text heavy, like the focus on the presentation or text. Right? So a lot of the CSS styles were catered for that. So they had a lots of things out of the box, like font size early on. You could change their texts and colors. They were basic like margins and paddings and stuff like that. But it wasn’t really meant for doing like the types of creative layouts that you see coming out of say maybe ad agencies, those really graphic designing stuff, that wasn’t a use case at the time. So a lot of the technology that you had was added on later. The complaint of each time is that, “Why can’t CSS do X?” And I would like to plug someone who’s a member of the CSS working group. I would call her the CSS advocate, Rachel Andrew. She mentions it best. She says that, “The statement today should be CSS can’t do that yet because the way things are developing.” There are more features coming in and browsers have helped this a lot because the release cycle has shortened considerably. So I think this is something that people need to start getting used to because I feel that a lot folks are still married to the mindset that like, “Oh, it’s not working, so I’m not going to use it.” And that was fine. That was fine for five years ago because if it wasn’t working, it was probably not going to work for the next six months. But it’s very different now. If it’s not working this month, it might work next month. I think a lot of it is really not the technology’s fault. It’s our mindset around the technology, right?
[00:22:25] JL: For anyone listening that is open to changing their mindset or at least interested in digging deeper into CSS, could you share some ways they can get started? I know that you have given a talk before called “How I learned to CSS” at CSSconf in Asia.
[00:22:42] HC: So my suggestion is just look at the things around you. Maybe you walk by a cinema and then you see a poster or you see some, I don’t know, a conflict box or whatever and think of ways that you could recreate that in CSS. For me, I find this an extremely fun activity. As you try to build this slightly unorthodox design and then you’re not constrained by, “Oh, I have to write beautiful code.” No. Write the shittiest code you want. As long as it looks like what you want it to be, go ahead. And that’s where you expose yourself to all these different CSS properties. You’d be like, “How can I make this overlap with that?” And there are so many different techniques. You can use negative margins. You could use Grid. And you can just explore. Again, I’d say because there’s limited stress and you’re not constrained by, “Oh, I have to write the most beautiful.” No. Write the most terrible code you want and that I think is a safe space to explore CSS in that kind of context.
[00:23:45] JL: Yeah. I mean, it sounds like CSS art was also, like Ananya, you were inspired by that, right?
[00:23:52] AN: Yeah.
[00:23:52] JL: And that’s how you got into CSS.
[00:23:55] AN: Yes. Yes. Definitely. I completely agree with that. So with learning CSS, it stands true with everything, right? No matter what programming language and learning, you’re only going to get better, the more and more you practice. Without practice. You’ll know just like the bits of story here and there, but you won’t actually be better at it. So it like directly applies with CSS as well. For example, I would say that when I was learning Flexbox, I decided to like recreate this thing from my childhood. So if anyone who knows me knows me, they know that I’m like a very big Harry Potter fan and I’m like obsessed with it. So like the Harry Potter series that is this like newspaper called The Daily Prophet. So I tried to recreate this like whole newspaper with Flexbox. And at that time, I didn’t have the opportunity to use Flexbox at like the place of work. But I learned in my own time, I created this like really fun project where I was like creating this like newspaper thing. And that was a great learning experience. And it was so fun.
[00:25:07] BH: I really love throw-away code as a means of accomplishing thing, being given the opportunity to write code that you know doesn’t have to last forever. It’s a really freeing opportunity. CodePen is really cool because of that. You’re not building code that has to build on to other code, which is usually what our jobs are for and any opportunity to write stuff that doesn’t have the support future functionality is really liberating and the best way to write CSS and other kind of code, if you ask me.
[00:25:56] JL: Now we’re going to move into a segment where we look at responses that you, the audience, have sent us to a question we made in relation to this episode.
[00:26:03] BH: The question we asked you all was, “What are some of the coolest things you’ve made using just HTML and CSS?” Our first response from Suzanne, “As part of the 100 Days Project Scotland, I’ve been doing a hundred-day challenge to create some new art from only HTML and CSS each day. I’m over a third of the way through, and I’ve learned so much and made some fun things. The 100 Days Project is about celebrating art and creativity and I really want to show the developers create art too.” The whole collection is here and there’s a link we’ll put in the show notes. My favorite one so far is my washing machine.
[00:26:44] HC: That’s amazing.
[00:26:47] BH: Washing machines are perfect blend of different sorts of shapes and motions and personality and an inanimate object in a way. I think that’s a good idea. That’s a good one.
[00:27:19] HC: That’s so fun. Oh my God.
[00:27:24] AN: It’s like playing a prank on Dev is amazing.
[00:27:28] HC: Five stars.
[00:27:29] BH: In terms of cool things you can do as CSS along these lines, if anyone leaves their computer open, I think a good prank is to install a script or browser extension that subtly modifies their whole web experience in a way they might not notice at first, but it was kind of like impossible to ignore and hilarious that they won’t notice it right away and they’ll eventually ask why all the images in their web browser look like in such a way or there’s no more color anywhere or anything like that.
[00:28:02] JL: Ben, it sort of sounds like you’ve maybe done this to someone.
[00:28:05] AN: I was just going to say that. You sound so confident.
[00:28:09] BH: I’ve done this to great results each time. I’ve never done anything overly malicious of course. It’s a good way to teach people lessons about leaving their computers unattended, which is just good security practices, but it’s all in good fun.
[00:28:24] JL: Janet wrote in, “Last year, I took part in Codevember and use their prompts to try to make CSS art every day. I sadly didn’t finish the challenge, but my favorite creation was this coy fish. I was actually able to talk about it in a few interviews, so that really helped during my job hunting.” That’s a topic we didn’t really talk about, and it’s really cool that Janet was able to leverage her CSS art for interviewing.
[00:28:48] AN: It’s like when you talk about like practicing CSS, so if you create these like really cool things, it just establishes you as like sort of an expert in that area and you can leverage that in your interviews and getting jobs. That’s like an added bonus.
[00:29:05] BH: Yeah. I was going to say that as well. Ananya, I’m sure your incredibly popular Dev posts have to be a big boon to your interview opportunities to be able to show off just what you’ve done and how much you’ve taught other people along the way.
[00:29:21] AN: Yeah, for sure. Like that article, I have no idea like why it blew up. I did not expect it. I mean, I think it’s almost been a year now. Like I wrote it last year, and even today I like get Twitter DMs or emails saying that they learned something from it. And every time they say, “Oh, I’m so amazed. I had no idea that we could do that.” And it just makes me like so immensely happy that people are discovering this. Maybe it’s like a tiny nudge in their direction. Now they can like go ahead and explore these things and then they can create like more great things and like share with other people.
[00:30:05] JL: That is awesome. And it’s cool to hear that you’re getting fan mail.
[00:30:09] AN: Yes. True.
[00:30:12] BH: So these responses are inherently quite visual. So everyone will have to check out the show notes to get a little bit more about what’s going on, but Sharky writes in, “This super cool pixel dragon took ages, but I had so much fun doing it.” And they embedded a code pen.
[00:30:29] AN: I love pixel art. It’s like one of my favorites.
[00:30:32] HC: Same. My avatar that I use everywhere is like this pixelated version of myself. And people are like, “Oh, how did you generate it?” I’m like, “No, I clicked for four hours and that’s why I use it everywhere. I need to advertise the four hours of my youth I spent clicking.” But yeah, I do like pixel art.
[00:30:54] JL: I first learned about pixel art through actual like painted pixel art. So I think it was painted at least, but Jenn Schiffer will take like pixel art, but then like actually draw it.
[00:31:07] HC: Oh, Jenn Schiffer is amazing.
[00:31:10] JL: You know, she’s so fun.
[00:31:12] HC: I was lucky enough to be in attendance at a Frontiers Conference in Amsterdam last year, and Stephen Cook, so he’s a friend and engineer and his presentation around CSS Mario Kart, but he had created like pixel art with box shadows, which is nuts because for box shadows, it’s one of those things that, because it’s a pixel, right? Box shadows, you can recreate unlimited the same shape. So if you’re just doing squares, pixel art, it’s nuts, I think he used the generator for it, but still, that’s kind of like the most, I would say, performant way you could do pixel art with CSS is that you don’t have to use like 1,000 dithers. Just use box shadow. So shout out Stephen Cook for showing the world that this technique exists.
[00:32:20] HC: Oh my God! High five!
[00:32:21] AN: Brilliant.
[00:32:22] HC: Good friend, best friend!
[00:33:43] AN: I personally do not like it. I don’t think I’ve actually used a CSS in JS in like large scale applications. But yeah, I mean, if it fits your use case, then sure, go ahead. But if I have to choose, I think I would stick with CSS separately because, I don’t know, that’s my opinion. Yes.
[00:34:07] BH: I think some problems arise when folks think in a sort of misguided way that CSS is kind of fading and CSS in JS is kind of like the future. And there’s sometimes this feeling of pressure that if there’s some new idea that the old one is going to fade away and I think to some of the points you made waging earlier about the journey that CSS has been on from the beginning in terms of how it’s evolved and everything, it would be a real shame to think that we can’t leverage all the great stuff that’s come out, all the ideas that have been built around in terms of both what you can do with CSS and then how it’s meant to be cached in the browser and all that stuff. So if you really know why CSS in JS is the right choice, that’s probably a really good one, but I think there’s a lot of developers out there playing follow-the-leader and doing whatever their favorite Twitter developer is saying.
[00:35:07] HC: Yeah. I recently came across the term hype-driven development. I said, “Oh, that’s so true. Oh my God.”
[00:35:13] AN: Yes. I see a lot of people tweet about like that if you’re not doing CSS in JS, like you’re doing it wrong. And I do not like when people say that.
[00:35:25] HC: I’m offended by that.
[00:35:28] AN: Yeah. I mean, it fits their use case, that’s great, but deriving their opinion and sharing with people in a way that says that if you’re not writing CSS in JS, you’re doing it wrong. And so these like up-coming developers who don’t necessarily have that much guidance. They are definitely misguided. It’s doing more harm than it’s doing good.
[00:35:54] HC: For sure. I hundred percent agree. I think for me, personally, I really don’t like people telling me what to do. So if someone told me, “Your table is really messy, you should clean it up,” even if I was going to clean it, I’m like, “No.” I will walk away. I don’t like the shit part. If you phrase it in that, I’m sharing with you, this is what worked for me. I love that. I think that’s great because you’re sharing one more idea, but to force your opinion on others, that’s the part that I disagree with again. Again, for me, it boils down to, it’s not even about CSS in JS as a technique anymore. It’s more of that people seem to be adamant and trying to insist that this is the right way, but I think the nature of CSS in and of itself already is there is no one right way because CSS is very contextual. I feel that with the types of properties that we have now, it’s even more like content aware than before. Without understanding the context, you are in no position to say what is better or not.
[00:36:56] JL: Ananya, Hui Jing, thank you both so much for joining us.
[00:36:59] HC: Thank you so much for having us. This has been great. It’s worth talking about CSS.
[00:37:03] AN: it was so much fun. Yes.
[00:37:14] JL: I want to thank everyone who sent in responses. For all of you listening, please be on the lookout for our next question. We’d especially love it if you would dial into our Google Voice. The number is +1 (929) 500-1513 or you can email us a voice memo so we can hear your responses in your own beautiful voices. This show is produced and mixed by Levi Sharpe. Editorial oversight by Peter Frank and Saron Yitbarek. Our theme song is by Slow Biz. If you have any questions or comments, please email [email protected] and make sure to join our Dev Discuss Twitter chats on Tuesdays at 9:00 PM Eastern, or if you want to start your own discussion, write a post on Dev using the #discuss. Please rate and subscribe to this show on Apple Podcasts.