352: With Aysenur Turk – CodePen Blog

Aysenur Turk had a number of appearances on this year’s Top Hearted of 2021, including #1! In this podcast, I get to catch up with her, find out where she gets ideas and inspiration, how much time it takes to build something like her amazing layouts, and what her favorites are.

Time Jumps

Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time.

Thousands of teams at companies like Amazon, DoorDash, Peloton, and Brex collaborate around custom-built Retool apps to solve internal workflows. To learn more, visit retool.com.

Transcript

[Radio channel adjustment]

Announcer: Today, on CodePen Radio.

Chris Coyier: Hey, everybody. Welcome to another CodePen Radio this is #352, and I have an incredible guest on.

At the beginning of each year, we publish the top 100 most hearted Pens of the year. Number one this year is especially notable, and she happens to be in more places than number one, but let’s talk about number one for a moment.

Has really more than twice as many hearts as even number two does, so really standout. Very unusual to see a Pen get this popular. One of the very few Pens that ever has more than 10,000 hearts.

I have the creator of that Pen with me today on CodePen Radio. It’s Aysenur. Hi, Aysenur.

Aysenur Turk: Hi, Chris.

Chris: Thanks for joining me.

Aysenur: Thank you so much. Thank you for inviting me. I’m super happy. I’m super excited to be here.

Chris: Yeah. I just DM’d you on Twitter to see if you’d be up for it, and you were. Thanks for that. Of course, I told my team that I’d get to speak with you, too, for the podcast, and they were excited about it, to have a CodePen superstar like you.

Aysenur: Thank you.

Chris: It’s great. They had some questions as well, so I have lots of questions, of course. But I thought it’d be fun to give the team a chance to have you answer their questions as well.

Marie, on our team, is curious to ask you. Your number one Pen was called “Glassmorphism Creative Cloud App Redesign,” and it was a bit of perhaps a trend for a little bit there, that Glassmorphism where the background is blurry through the background. Is number one your favorite Pen, too, or do you have a different Pen that’s one of your favorites that you created?

00:02:14

Aysenur: Actually, Glassmorphism is one of my best, but Responsive Social Platform UI was my favorite because I started this practical UI works with this Pen and it was just a Dribbble shot I found to improve my CSS skills. When I shared this Pen, I was writing CSS for only six months. I didn’t expect this Pen–

Chris: Wow!

Aysenur: Yes, I didn’t expect this Pen to get so much attention after sharing it. It makes me super happy.

Chris: That Pen is the Responsive Social Platform UI. Yeah, interesting. Okay. Was that this year and it didn’t make the list, or that was the year before?

Aysenur: Mm-hmm, this year, Glassmorphism, of course, and Grid … Layouts – maybe – is one of my best. [Laughter]

Chris: Okay. I know this is an audio podcast, so it’s hard for people to see what I see when I’m looking at this. A lot of your Pens, anyway — most of them, perhaps — are full layouts. They have a sidebar and a header. They look like an application that you’d use. This Responsive Social Platform has like a Facebook quality to it. What draw you–? So many things on CodePen are small. They’re just like one button.

Aysenur: Mm-hmm. Yeah.

Chris: Or something — but you don’t stop at just a button. What draws you to do that?

00:03:56

Aysenur: Actually, at first, I tried to CSS draw an illustration. Maybe you see my work.

Chris: Mm-hmm.

Aysenur: At this time, the illustration is very popular on CodePen. I tried something, but then I decided to think that it will be more useful for me and for people, and I had problems with responsive design and when a layout was given to me, I was worried about how to code easily and where to start. That’s why I decided to code coding dashboards, layouts, and trying to find some fancy layouts from Dribbble.

Chris: It was about responsive design. Kind of learn that.

Aysenur: Yes.

Chris: Right.

Aysenur: Just improve myself. I was a junior UI developer, and I want to improve my CSS skills. I want to use some CSS features as much as possible.

Chris: Take any one of these examples. Let’s say you find it on Dribbble. Does it tend to be the big desktop layout or do they tend to provide all–? Is it you looking at the desktop layout and then you making the choices about the smaller size layout?

Aysenur: No, I choose big layouts, big, complete layouts. But I add some interactions to them to also use JavaScript, like model opening dropdowns, hovering something, animations – something like that.

Chris: Right, so there is some. Some of these do have some JavaScript involved.

Aysenur: Mm-hmm. Yes. Small, small, kind of. But I like CSS more. [Laughter]

Chris: I like to see it because it’s the kind of JavaScript that’s like you click this, you change a class, the design changes to change the class, and it proves how powerful that is.

Aysenur: Yes, exactly.

Chris: As a design concept, yeah, it’s just changing some classes.

Aysenur: Yes. If you add animations also, it can be more powerful.

[Guitar music starts]

00:06:29

Chris: This episode of CodePen Radio is brought to you in part by Retool.

Building internal tools from scratch is slow. It takes a lot of engineering time and resources, so most small software businesses just resign to prioritizing a select few and settling for inefficient hacks and workarounds for every other business process. Don’t I know it? It’s like building admin tools for yourself.

You’ve scrapped some junk together, and you’re like, “Ah, good enough. It’s not customer-facing. This is just for me. It can be bad.”

That’s what Retool attempts to solve and it does so, so well. Retool helps developers build internal tools faster so you can focus on the software you sell.

Retool offers a complete UI component library, so building forms, tables, and workflows. It’s as easy as drag and drop, but it’s not just a component library. More importantly, Retool connects to basically any data source, offering app environments, permissions, single sign-on, out of the box.

It offers this escape hatch, too. If there’s custom JavaScript you need to write, write it. All good.

With Retool, you can build user dashboards, database GUIs, CRUD apps, and any other kind of software to help speed up and simplify your work without Googling for some component library that may or may not work for you – whatever – debugging dependencies, rewriting boilerplate code. None of that.

Just get started with Retool for building those internal tools. Thousands of companies are doing it: Amazon, DoorDash, Peloton, Brex. They all collaborate around custom-built Retool apps to solve internal workflows.

To learn more, visit them at Retool.com. Thanks for the support.

[Guitar music ends]

00:08:07

Chris: Rachel, on our team, was asking about the time. Take any one of these, like the Glassmorphism one or the Responsive Social Platform. Is it an hour? Is it hours, days? What kind of time does it take you to do these? They’re beautiful, so don’t tell me an hour. [Laughter]

Aysenur: No, no … time. Actually, I find a design first and, as I said, from Dribbble. I add it to my favorites. Then when I’m available (often on weekends), I start coding, just start coding, and I usually don’t start right away and finish on the same day. In fact, sometimes I start and don’t look at it for two, three days, and continue again. Sometimes I finish in two days, but if I say, they last about eight, ten hours on average.

Chris: Oh, wow. Okay, eight to ten hours for a layout. If I was going to guess, I probably would have guessed that. That’s what it feels like because it’s a lot of work.

Aysenur: Yes. Responsive interactions, animations, transitions.

Chris: Yeah. Do you have, you do this first and then this second and this third? Do you work on the whole layout first and add animations at the end or anything like that, or do you bounce back and forth between tasks?

Aysenur: I start creating a good layout, a good markup, HTML markup. Then after that, I add hover animations – small, small, small pieces.

Then if I want to add some JavaScript like click and open modal, something, or toggle, dark light. I like the dark-light switch.

Chris: Yeah! That dark mode thing has been a big trend the last couple of years, and probably for good reason. Something like Glassmorphism is certainly a trend. Dark mode, maybe less of a trend but more of just a good feature that’s relatively new.

Do you keep an eye on that stuff? Where do those ideas come from? Is it because you pay attention to the industry or does it come from work? Do you see that type of stuff on Dribbble?

It leads into Stephen’s question (from our team here). Do you have a favorite trend to code?

00:10:41

Aysenur: I don’t have a favorite design trend, actually. I only code what looks really good to me. When I was making my Glassmorphism Pen, I didn’t do it just because it was trending. Because it’s a really nice design and I thought that I could add more interactivity to it, and I also love coding minimal and clean designs. I also try to code things that will contribute to my development and things that I can use later in my work life, like video players, skateboard video players, that Pen, and some old hover animations and migrate directions, responsive design…. Not as a favorite design trend, actually.

Chris: Yeah. No favorites, but you have an eye for design. If you like it, you code it.

Aysenur: Of course, yes.

Chris: On the skateboard video platform you mentioned, the hover effect is really cool. It’s like static images, and you hover over them. They grow a little bit, but they also turn into a video, which is really interesting.

Aysenur: Yes…. [Laughter] Thank you.

Chris: I really like that. It kind of pushes some — there’s a lot of little detail here. It pushes the duration away. It makes the avatar a little smaller. It’s stuff that you didn’t have to do. It would be still probably cool, even if you didn’t do it, but the fact that you did really takes it to another level.

Aysenur: Yeah. It is. It’s a challenge for me. Let’s try this. Let’s try this. And it’s making it happen. [Laughter]

Chris: Well, the year switched over. It’s 2022 now. Do you have anything in the works? Are there any trends on Dribbble you’re seeing that you have your eye on? What are your favorites looking like on Dribbble now?

00:12:35

Aysenur: Yes. As I said, I follow the design trends from Dribbble and also social media platforms. In fact, there is no design trend that catches my eye, actually, but I see the illustrations are used less than in the previous year, I think. It looks like they have been replaced by shapes, like pretty shapes.

Chris: Oh… Really?! Interesting.

Aysenur: I think … I just do. And I often see designs with grayish backgrounds. There are high contrast typographic minimal designs like my Grid … Layouts. I think I predict that designs created by mixing fonts with shapes, photos, and emojis are putting texture on it, and choosing different fonts with complex fonts maybe will be popular this year.

Chris: Oh… I like that. Okay. Okay. You heard it here first, people. Illustration is out. [Laughter] Shapes are in.

Aysenur: Yes. [Laughter]

Chris: Interesting fonts are in.

Aysenur: More modern.

Chris: I think if I had to pick my favorite Pen of yours — and it is a hard thing to — I really like that Modern Blog Layout with CSS Grid. There’s just something that’s just very simple. The lines on it are–

I tried to recreate it even in Figma, like what if I was going to redesign, say, my blog CSS-Tricks, but make it look like this?

Aysenur: Really?

Chris: Or have that newspaper look. I thought — I haven’t completed the design yet, but I’m like, “Well, I’ll do like Aysenur did, and I’ll put a line here, and the sidebar will have a line.”

Aysenur: Yes.

Chris: I couldn’t get it. I couldn’t. I don’t have as good taste as you do. I could replicate a little bit of what you have going on, but it doesn’t look at amazing as this does. I just love it. That’s one of my favorites.

00:14:38

Aysenur: Yes. I think fonts are maybe important in that UI, mixing fonts, different fonts.

Chris: Right. You can’t just pick a different font and have it work. It needs to be this font. [Laughter] So, you’re a typographer too. You’re too good. Thanks for those trends. That’s interesting.

Stephen also asked what are your sources of inspiration. You’ve already mentioned Dribbble.

Aysenur: Yes…. Yes, Dribbble. There are really great designs out there, I think. I see inspiring things in there. There are some designers I follow.

By the way, I always … the designer’s name and link under my Pen detail, but no one looks there. They think that I am creating the design also and code it at the same time. But I am not a designer. I am a UI developer. I want to say that once again.

Chris: Right, so you credit the original designer in the details.

Aysenur: Yes. Also, at the same time, I am sharing the CodePen link as a comment on Dribbble so I like that it’s like, “Hey, there’s someone around here inspired by you. See, I coded your design.”

Chris: Yeah. I think that’s the right thing to do. It’s one thing to credit it where you’ve built it. Yeah. It’s cool to go back to where they originally created it and show them. It looks like you’ve done that every time. Yeah, that’s great. God, it’s so cool how that one scrolls.

Aysenur: [Laughter]

Chris: I think it’s a beautiful Pen, again the Modern Blog Layout. It looks beautiful without any movement or interaction at all. Then you do the interaction, and you’re like, “Oh, wow!” [Laughter] What an unexpected way for it to behave.

Aysenur: Minimal. Minimal design, I like. [Laughter]

Chris: I’ve talked to some other prolific creators on CodePen. Getting inspiration from Dribbble seems to be a common theme.

Another theme is that it’s nobody’s job to make Pens. [Laughter] You know? We don’t have a way to do revenue sharing from popular Pens, unfortunately. So, people have to do other work, and it’s common that the work you do on CodePen isn’t exactly like the work that you do professionally. Is that true for you too? You work at JotForm, right?

00:17:21

Aysenur: Yes. Actually, my day-to-day work is not exactly the kind of work I do in CodePen. We are developing our own product, maybe you know. We work in a more limited area in terms of creativity. We listen to our user requests, like enterprise-specific requests and adding new features, solving their problems.

I mostly deal with CSS problems, too. Also, I handle the UI parts while adding new features. So, it’s not exactly the same.

Chris: No. Does that feel healthy to you that you get a chance to explore different things in different ways?

Aysenur: Yes, exactly. I use CodePen for this reason to improve my creativity.

Chris: I’m just curious if you were on CodePen before you got that job. Was it involved in any way? Was it a place where you could demonstrate, “Look. I clearly know CSS.”

Aysenur: Yes. Actually, my purpose while doing this, as I said, was to improve my CSS skills. Since I have already made UIs that can be used easily in practice, people can use it directly in their own projects, and also I like open-source.

I like to create useful and practical things for people. But thanks to these works I have done in CodePen, many freelance job offers have come. Yes.

Chris: Great! Really?!

Aysenur: Yes. Yes. Yes. “Can you do this for me, please?” Like that.

Chris: Yeah! Oh, that’s great. I’m not sure if you do that or not. I know sometimes jobs have that kind of freedom and sometimes you don’t. We don’t have to talk about that here.

That leads to my next question. I’m curious. There are places that sell templates online. Usually, when I come across a beautiful Web template, there is a place to go buy it. Like, “Here’s a taste, but don’t you want to buy the complete dashboard set for $99?” I think of companies like Envato that have made that their whole business thing. Certainly, you’re qualified to do that. Have you thought about trying to make money off this type of work you do?

00:19:51

Aysenur: Not actually. I have never tried this kind of job because I am very busy, by the way. If I find free time, I just use CodePen and try some new things.

Chris: I understand. I feel the same way. I’m too busy to mess around with it.

Aysenur: Yes.

Chris: Maybe if I had a lot more free time.

Aysenur: Thank you. Yes.

Chris: Or was in desperate need of money, perhaps. Well, thank you for that because everything on CodePen that’s a public Pen is open-source.

Aysenur: Mm-hmm.

Chris: That means that even your beautiful Pens, people could take the code from and try to use on their own if they wanted to.

Aysenur: Oh, of course.

Chris: I’ve already kind of asked you if it’s just for fun. Is it actually fun, though? You’ve mentioned that it’s useful to build your skills, in a way. But if it wasn’t fun at all, I can’t imagine you’d continue doing it.

00:20:46

Aysenur: Yes. Exactly. Yes, it’s definitely helped me. Sometimes in my work life, a bug comes from the user. I just look back at one of my Pens, and I see how I solve it there. It has made me faster when solving bugs at work or coding a design.

It’s a similar problem like these come from our users as well. I can … the codes, fix the errors because my speed of … and understanding the code has increased thanks to CodePen.

Chris: Aw, nice.

Aysenur: Yes. At the same time, I am also having a lot of fun coding them. Sometimes I find a beautiful design and challenge myself to see if I can do it. Creating something and sharing it with people makes me really happy. It’s fun to watch interactions on Twitter and all the link likes and reading comments and getting feedback about my Pens.

By the way, thank you so much, again, to my followers.

Chris: Those are the right people to thank.

Aysenur: Yes.

Chris: That’s really fun to see that. I can see you experiment in other ways. For example, the Responsive Social Platform UI is in Sass and it uses some setup of Sass variables at the top to change stuff, things like fonts and colors. Then, a year later, here we are at the Glassmorphism being the number one Pen, and all the variables are in CSS custom properties on this Pen. There’s a little bit of difference in the technologies in use.

Do you think about that stuff, too? Do you get excited about some new technology and try it out in new Pens? Is there any technology you’re eyeing up?

00:22:49

Aysenur: Yes, exactly. I can say that I am excited about the container query.

Chris: Container queries, yes!

Aysenur: Yes, I think it is something that’s really requested and necessary, I guess. When I create a responsive design, I often use a meta query to change the document layouts based on the size of the viewports. But however, many designs have common components that changed layout depending on the available width of their container. This may not always relate to the size of the viewports. But yes, it’s instead related to varying the layout, the component is placed.

Instead of looking at the viewport size, we can look at the container size and make our layout adjustments according to the space in the container. It would be great, I think. I really want to use it. [Laughter]

Chris: Yes! Yes. Yes. Yes. There is a good-looking Polyfill now, so I think we can at least get started playing with it. I have a little bit, but I’m not sure about sending it to production yet. Certainly, I would play with it on CodePen.

I’m curious. You write a lot of media queries. A lot of these Pens — it almost feels like the point of the Pen is responsive design nature of it. There are lots of media queries in the code. I wonder. Do you have a sense of how many of those media queries would become container queries – if you could? Do you think it’s half?

Aysenur: I think half of them.

Chris: That’s my guess, too, but I want to refactor a site someday and see how many switch. That’s my guess, too, is somewhere around half. I think, in the early days, I’m like, “90%,” but I don’t think that’s true anymore, now that I’ve played with it a little bit.

Aysenur: No, I don’t think that’s true. Yes, 90% is really….

Chris: Well, we’re the same. I’m really excited about that. I’m also excited about the container units, so that if you were trying to size something inside of a container that you could do it based on how big the container is. I think that goes hand-in-hand with container queries – mostly for typography. If you know that this thing has more space, you might size the fonts a little bigger (not based on the viewport but the component itself).

Aysenur: Yes.

Chris: Well, I think I’ve asked all the questions that we have lined up to ask you. Thank you so much for that. Very useful. I wonder if we could end by if there’s anything else that you thought of during this that we could share with people or if you have any advice for your fellow CodePen people on perhaps how to get better.

Aysenur: Keep going, I think. People can see my first Pen, actually, in the CodePen in my internship process. I never deleted this Pen. They can see how I progress in the CSS. They can start in this way, I think. [Laughter]

Chris: I think, scrolling back in your profile, your first Pen is a calculator. It still looks nice. It looks nice, but you can tell that you’ve gotten a lot better since then.

Aysenur: Yes. [Laughter]

Chris: [Laughter] Ah, yes. That’s a very funny idea. All right, well, thank you so much for coming on CodePen Radio. I really appreciate your time.

Aysenur: Thank you so much, Chris. I am very happy you invited me. I am a big fan of yours, CodePen, and CSS-Tricks. Thank you, everyone.

Chris: Likewise. Have a great rest of your day. Take care.

Aysenur: Take care. See you.

[Radio channel adjustment]