352: With Aysenur Turk – CodePen Weblog

Aysenur Turk had quite a lot of appearances on this yr’s High Hearted of 2021, together with #1! On this podcast, I get to meet up with her, discover out the place she will get concepts and inspiration, how a lot time it takes to construct one thing like her wonderful layouts, and what her favorites are.

Time Jumps

Customized dashboards, admin panels, CRUD apps—construct any inner instrument sooner in Retool. Visually design apps that interface with any database or API. Change to code practically anyplace to customise how your apps look and work. With Retool, you ship extra apps and transfer your small business ahead—all in much less time.

1000’s of groups at firms like Amazon, DoorDash, Peloton, and Brex collaborate round custom-built Retool apps to unravel inner workflows. To be taught extra, go to retool.com.

Transcript

[Radio channel adjustment]

Announcer: Immediately, on CodePen Radio.

Chris Coyier: Hey, all people. Welcome to a different CodePen Radio that is #352, and I’ve an unimaginable visitor on.

Firstly of every yr, we publish the highest 100 most hearted Pens of the yr. Primary this yr is very notable, and she or he occurs to be in additional locations than primary, however let’s speak about primary for a second.

Has actually greater than twice as many hearts as even quantity two does, so actually standout. Very uncommon to see a Pen get this standard. One of many only a few Pens that ever has greater than 10,000 hearts.

I’ve the creator of that Pen with me immediately on CodePen Radio. It is Aysenur. Hello, Aysenur.

Aysenur Turk: Hello, Chris.

Chris: Thanks for becoming a member of me.

Aysenur: Thanks a lot. Thanks for inviting me. I am tremendous completely happy. I am tremendous excited to be right here.

Chris: Yeah. I simply DM’d you on Twitter to see for those who’d be up for it, and also you have been. Thanks for that. After all, I informed my crew that I would get to talk with you, too, for the podcast, and so they have been enthusiastic about it, to have a CodePen famous person such as you.

Aysenur: Thanks.

Chris: It is nice. That they had some questions as effectively, so I’ve a lot of questions, in fact. However I believed it would be enjoyable to present the crew an opportunity to have you ever reply their questions as effectively.

Marie, on our crew, is curious to ask you. Your primary Pen was referred to as “Glassmorphism Inventive Cloud App Redesign,” and it was a little bit of maybe a development for a bit of bit there, that Glassmorphism the place the background is blurry by means of the background. Is primary your favourite Pen, too, or do you will have a unique Pen that is considered one of your favorites that you just created?

00:02:14

Aysenur: Really, Glassmorphism is considered one of my greatest, however Responsive Social Platform UI was my favourite as a result of I began this sensible UI works with this Pen and it was only a Dribbble shot I discovered to enhance my CSS abilities. Once I shared this Pen, I used to be writing CSS for less than six months. I did not count on this Pen–

Chris: Wow!

Aysenur: Sure, I did not count on this Pen to get a lot consideration after sharing it. It makes me tremendous completely happy.

Chris: That Pen is the Responsive Social Platform UI. Yeah, fascinating. Okay. Was that this yr and it did not make the checklist, or that was the yr earlier than?

Aysenur: Mm-hmm, this yr, Glassmorphism, in fact, and Grid … Layouts – possibly – is considered one of my greatest. [Laughter]

Chris: Okay. I do know that is an audio podcast, so it is exhausting for individuals to see what I see once I’m this. Quite a lot of your Pens, anyway — most of them, maybe — are full layouts. They’ve a sidebar and a header. They seem like an utility that you just’d use. This Responsive Social Platform has like a Fb high quality to it. What draw you–? So many issues on CodePen are small. They’re identical to one button.

Aysenur: Mm-hmm. Yeah.

Chris: Or one thing — however you do not cease at only a button. What attracts you to try this?

00:03:56

Aysenur: Really, at first, I attempted to CSS draw an illustration. Perhaps you see my work.

Chris: Mm-hmm.

Aysenur: Presently, the illustration could be very standard on CodePen. I attempted one thing, however then I made a decision to suppose that it will likely be extra helpful for me and for individuals, and I had issues with responsive design and when a structure was given to me, I used to be frightened about how you can code simply and the place to begin. That is why I made a decision to code coding dashboards, layouts, and looking for some fancy layouts from Dribbble.

Chris: It was about responsive design. Form of be taught that.

Aysenur: Sure.

Chris: Proper.

Aysenur: Simply enhance myself. I used to be a junior UI developer, and I need to enhance my CSS abilities. I need to use some CSS options as a lot as attainable.

Chris: Take any considered one of these examples. As an example you discover it on Dribbble. Does it are usually the massive desktop structure or do they have a tendency to supply all–? Is it you trying on the desktop structure and you then making the alternatives concerning the smaller measurement structure?

Aysenur: No, I select massive layouts, massive, full layouts. However I add some interactions to them to additionally use JavaScript, like mannequin opening dropdowns, hovering one thing, animations – one thing like that.

Chris: Proper, so there may be some. A few of these do have some JavaScript concerned.

Aysenur: Mm-hmm. Sure. Small, small, form of. However I like CSS extra. [Laughter]

Chris: I wish to see it as a result of it is the form of JavaScript that is such as you click on this, you modify a category, the design modifications to vary the category, and it proves how highly effective that’s.

Aysenur: Sure, precisely.

Chris: As a design idea, yeah, it is simply altering some courses.

Aysenur: Sure. In case you add animations additionally, it may be extra highly effective.

[Guitar music starts]

00:06:29

Chris: This episode of CodePen Radio is dropped at you partially by Retool.

Constructing inner instruments from scratch is sluggish. It takes a variety of engineering time and sources, so most small software program companies simply resign to prioritizing a choose few and settling for inefficient hacks and workarounds for each different enterprise course of. Do not I do know it? It is like constructing admin instruments for your self.

You have scrapped some junk collectively, and you are like, “Ah, ok. It is not customer-facing. That is only for me. It may be unhealthy.”

That is what Retool makes an attempt to unravel and it does so, so effectively. Retool helps builders construct inner instruments sooner so you may give attention to the software program you promote.

Retool provides a whole UI element library, so constructing types, tables, and workflows. It is as straightforward as drag and drop, but it surely’s not only a element library. Extra importantly, Retool connects to mainly any information supply, providing app environments, permissions, single sign-on, out of the field.

It provides this escape hatch, too. If there’s {custom} JavaScript it’s essential to write, write it. All good.

With Retool, you may construct person dashboards, database GUIs, CRUD apps, and another form of software program to assist pace up and simplify your work with out Googling for some element library that will or could not give you the results you want – no matter – debugging dependencies, rewriting boilerplate code. None of that.

Simply get began with Retool for constructing these inner instruments. 1000’s of firms are doing it: Amazon, DoorDash, Peloton, Brex. All of them collaborate round custom-built Retool apps to unravel inner workflows.

To be taught extra, go to them at Retool.com. Thanks for the assist.

[Guitar music ends]

00:08:07

Chris: Rachel, on our crew, was asking concerning the time. Take any considered one of these, just like the Glassmorphism one or the Responsive Social Platform. Is it an hour? Is it hours, days? What sort of time does it take you to do these? They’re stunning, so do not inform me an hour. [Laughter]

Aysenur: No, no … time. Really, I discover a design first and, as I mentioned, from Dribbble. I add it to my favorites. Then once I’m accessible (usually on weekends), I begin coding, simply begin coding, and I often do not begin instantly and end on the identical day. In reality, generally I begin and do not take a look at it for 2, three days, and proceed once more. Generally I end in two days, but when I say, they final about eight, ten hours on common.

Chris: Oh, wow. Okay, eight to 10 hours for a structure. If I used to be going to guess, I in all probability would have guessed that. That is what it seems like as a result of it is a variety of work.

Aysenur: Sure. Responsive interactions, animations, transitions.

Chris: Yeah. Do you will have, you do that first after which this second and this third? Do you’re employed on the entire structure first and add animations on the finish or something like that, or do you bounce backwards and forwards between duties?

Aysenur: I begin creating a superb structure, a superb markup, HTML markup. Then after that, I add hover animations – small, small, small items.

Then if I need to add some JavaScript like click on and open modal, one thing, or toggle, darkish mild. I just like the dark-light swap.

Chris: Yeah! That darkish mode factor has been an enormous development the final couple of years, and doubtless for good cause. One thing like Glassmorphism is definitely a development. Darkish mode, possibly much less of a development however extra of only a good characteristic that is comparatively new.

Do you control that stuff? The place do these concepts come from? Is it since you take note of the trade or does it come from work? Do you see that kind of stuff on Dribbble?

It leads into Stephen’s query (from our crew right here). Do you will have a favourite development to code?

00:10:41

Aysenur: I haven’t got a favourite design development, really. I solely code what seems actually good to me. Once I was making my Glassmorphism Pen, I did not do it simply because it was trending. As a result of it is a very nice design and I believed that I might add extra interactivity to it, and I additionally love coding minimal and clear designs. I additionally attempt to code issues that may contribute to my growth and issues that I can use later in my work life, like video gamers, skateboard video gamers, that Pen, and a few previous hover animations and migrate instructions, responsive design…. Not as a favourite design development, really.

Chris: Yeah. No favorites, however you will have an eye fixed for design. In case you prefer it, you code it.

Aysenur: After all, sure.

Chris: On the skateboard video platform you talked about, the hover impact is actually cool. It is like static photographs, and also you hover over them. They develop a bit of bit, however in addition they flip right into a video, which is actually fascinating.

Aysenur: Sure…. [Laughter] Thanks.

Chris: I actually like that. It form of pushes some — there’s a variety of little element right here. It pushes the length away. It makes the avatar a bit of smaller. It is stuff that you did not have to do. It might be nonetheless in all probability cool, even for those who did not do it, however the truth that you probably did actually takes it to a different stage.

Aysenur: Yeah. It’s. It is a problem for me. Let’s do that. Let’s do that. And it is making it occur. [Laughter]

Chris: Effectively, the yr converted. It is 2022 now. Do you will have something within the works? Are there any developments on Dribbble you are seeing that you’ve your eye on? What are your favorites trying like on Dribbble now?

00:12:35

Aysenur: Sure. As I mentioned, I observe the design developments from Dribbble and likewise social media platforms. In reality, there isn’t a design development that catches my eye, really, however I see the illustrations are used lower than within the earlier yr, I feel. It seems like they’ve been changed by shapes, like fairly shapes.

Chris: Oh… Actually?! Fascinating.

Aysenur: I feel … I simply do. And I usually see designs with grayish backgrounds. There are excessive distinction typographic minimal designs like my Grid … Layouts. I feel I predict that designs created by mixing fonts with shapes, images, and emojis are placing texture on it, and selecting totally different fonts with advanced fonts possibly might be standard this yr.

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

Aysenur: Sure. [Laughter]

Chris: Fascinating fonts are in.

Aysenur: Extra fashionable.

Chris: I feel if I needed to decide my favourite Pen of yours — and it’s a exhausting factor to — I actually like that Fashionable Weblog Format with CSS Grid. There’s simply one thing that is simply quite simple. The traces on it are–

I attempted to recreate it even in Figma, like what if I used to be going to revamp, say, my weblog CSS-Tips, however make it seem like this?

Aysenur: Actually?

Chris: Or have that newspaper look. I believed — I have never accomplished the design but, however I am like, “Effectively, I will do like Aysenur did, and I will put a line right here, and the sidebar may have a line.”

Aysenur: Sure.

Chris: I could not get it. I could not. I haven’t got pretty much as good style as you do. I might replicate a bit of little bit of what you will have occurring, but it surely does not take a look at wonderful as this does. I simply find it irresistible. That is considered one of my favorites.

00:14:38

Aysenur: Sure. I feel fonts are possibly necessary in that UI, mixing fonts, totally different fonts.

Chris: Proper. You possibly can’t simply decide a unique font and have it work. It must be this font. [Laughter] So, you are a typographer too. You are too good. Thanks for these developments. That is fascinating.

Stephen additionally requested what are your sources of inspiration. You have already talked about Dribbble.

Aysenur: Sure…. Sure, Dribbble. There are actually nice designs on the market, I feel. I see inspiring issues in there. There are some designers I observe.

By the way in which, I all the time … the designer’s identify and hyperlink beneath my Pen element, however nobody seems there. They suppose that I’m creating the design additionally and code it on the identical time. However I’m not a designer. I’m a UI developer. I need to say that when once more.

Chris: Proper, so that you credit score the unique designer within the particulars.

Aysenur: Sure. Additionally, on the identical time, I’m sharing the CodePen hyperlink as a touch upon Dribbble so I like that it is like, “Hey, there’s somebody round right here impressed by you. See, I coded your design.”

Chris: Yeah. I feel that is the correct factor to do. It is one factor to credit score it the place you’ve got constructed it. Yeah. It is cool to return to the place they initially created it and present them. It seems such as you’ve accomplished that each time. Yeah, that is nice. God, it is so cool how that one scrolls.

Aysenur: [Laughter]

Chris: I feel it is a phenomenal Pen, once more the Fashionable Weblog Format. It seems stunning with none motion or interplay in any respect. You then do the interplay, and you are like, “Oh, wow!” [Laughter] What an sudden means for it to behave.

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

Chris: I’ve talked to another prolific creators on CodePen. Getting inspiration from Dribbble appears to be a typical theme.

One other theme is that it is no person’s job to make Pens. [Laughter] You realize? We do not have a option to do income sharing from standard Pens, sadly. So, individuals must do different work, and it is common that the work you do on CodePen is not precisely just like the work that you just do professionally. Is that true for you too? You’re employed at JotForm, proper?

00:17:21

Aysenur: Sure. Really, my day-to-day work will not be precisely the form of work I do in CodePen. We’re growing our personal product, possibly . We work in a extra restricted space when it comes to creativity. We take heed to our person requests, like enterprise-specific requests and including new options, fixing their issues.

I principally take care of CSS issues, too. Additionally, I deal with the UI components whereas including new options. So, it is not precisely the identical.

Chris: No. Does that really feel wholesome to you that you just get an opportunity to discover various things in numerous methods?

Aysenur: Sure, precisely. I exploit CodePen for that reason to enhance my creativity.

Chris: I am simply curious for those who have been on CodePen earlier than you bought that job. Was it concerned in any means? Was it a spot the place you could possibly display, “Look. I clearly know CSS.”

Aysenur: Sure. Really, my objective whereas doing this, as I mentioned, was to enhance my CSS abilities. Since I’ve already made UIs that can be utilized simply in observe, individuals can use it instantly in their very own initiatives, and likewise I like open-source.

I wish to create helpful and sensible issues for individuals. However thanks to those works I’ve accomplished in CodePen, many freelance job provides have come. Sure.

Chris: Nice! Actually?!

Aysenur: Sure. Sure. Sure. “Are you able to do that for me, please?” Like that.

Chris: Yeah! Oh, that is nice. I am undecided for those who do this or not. I do know generally jobs have that form of freedom and generally you do not. We do not have to speak about that right here.

That results in my subsequent query. I am curious. There are locations that promote templates on-line. Often, once I come throughout a phenomenal Net template, there’s a place to go purchase it. Like, “This is a style, however do not you need to purchase the whole dashboard set for $99?” I consider firms like Envato which have made that their complete enterprise factor. Definitely, you are certified to try this. Have you considered attempting to generate profits off one of these work you do?

00:19:51

Aysenur: Not really. I’ve by no means tried this type of job as a result of I’m very busy, by the way in which. If I discover free time, I simply use CodePen and check out some new issues.

Chris: I perceive. I really feel the identical means. I am too busy to fiddle with it.

Aysenur: Sure.

Chris: Perhaps if I had much more free time.

Aysenur: Thanks. Sure.

Chris: Or was in determined want of cash, maybe. Effectively, thanks for that as a result of all the pieces on CodePen that is a public Pen is open-source.

Aysenur: Mm-hmm.

Chris: That implies that even your stunning Pens, individuals might take the code from and attempt to use on their very own in the event that they needed to.

Aysenur: Oh, in fact.

Chris: I’ve already form of requested you if it is only for enjoyable. Is it really enjoyable, although? You have talked about that it is helpful to construct your abilities, in a means. But when it wasn’t enjoyable in any respect, I am unable to think about you’d proceed doing it.

00:20:46

Aysenur: Sure. Precisely. Sure, it is positively helped me. Generally in my work life, a bug comes from the person. I simply look again at considered one of my Pens, and I see how I clear up it there. It has made me sooner when fixing bugs at work or coding a design.

It is a comparable drawback like these come from our customers as effectively. I can … the codes, repair the errors as a result of my pace of … and understanding the code has elevated due to CodePen.

Chris: Aw, good.

Aysenur: Sure. On the identical time, I’m additionally having a variety of enjoyable coding them. Generally I discover a phenomenal design and problem myself to see if I can do it. Creating one thing and sharing it with individuals makes me actually completely happy. It is enjoyable to look at interactions on Twitter and all of the hyperlink likes and studying feedback and getting suggestions about my Pens.

By the way in which, thanks a lot, once more, to my followers.

Chris: These are the correct individuals to thank.

Aysenur: Sure.

Chris: That is actually enjoyable to see that. I can see you experiment in different methods. For instance, the Responsive Social Platform UI is in Sass and it makes use of some setup of Sass variables on the prime to vary stuff, issues like fonts and colours. Then, a yr later, right here we’re on the Glassmorphism being the primary Pen, and all of the variables are in CSS {custom} properties on this Pen. There’s a bit of little bit of distinction within the applied sciences in use.

Do you consider that stuff, too? Do you get enthusiastic about some new know-how and check out it out in new Pens? Is there any know-how you are eyeing up?

00:22:49

Aysenur: Sure, precisely. I can say that I’m excited concerning the container question.

Chris: Container queries, sure!

Aysenur: Sure, I feel it’s one thing that is actually requested and vital, I assume. Once I create a responsive design, I usually use a meta question to vary the doc layouts primarily based on the scale of the viewports. However nevertheless, many designs have widespread parts that modified structure relying on the accessible width of their container. This may increasingly not all the time relate to the scale of the viewports. However sure, it is as a substitute associated to various the structure, the element is positioned.

As an alternative of trying on the viewport measurement, we are able to take a look at the container measurement and make our structure changes in response to the house within the container. It might be nice, I feel. I actually need to use it. [Laughter]

Chris: Sure! Sure. Sure. Sure. There’s a handsome Polyfill now, so I feel we are able to at the least get began taking part in with it. I’ve a bit of bit, however I am undecided about sending it to manufacturing but. Definitely, I’d play with it on CodePen.

I am curious. You write a variety of media queries. Quite a lot of these Pens — it virtually seems like the purpose of the Pen is responsive design nature of it. There are many media queries within the code. I’m wondering. Do you will have a way of what number of of these media queries would turn into container queries – for those who might? Do you suppose it is half?

Aysenur: I feel half of them.

Chris: That is my guess, too, however I need to refactor a web site sometime and see what number of swap. That is my guess, too, is someplace round half. I feel, within the early days, I am like, “90%,” however I do not suppose that is true anymore, now that I’ve performed with it a bit of bit.

Aysenur: No, I do not suppose that is true. Sure, 90% is actually….

Chris: Effectively, we’re the identical. I am actually enthusiastic about that. I am additionally excited concerning the container models, in order that for those who have been attempting to measurement one thing inside a container that you could possibly do it primarily based on how massive the container is. I feel that goes hand-in-hand with container queries – principally for typography. If that this factor has more room, you may measurement the fonts a bit of greater (not primarily based on the viewport however the element itself).

Aysenur: Sure.

Chris: Effectively, I feel I’ve requested all of the questions that we now have lined as much as ask you. Thanks a lot for that. Very helpful. I’m wondering if we might finish by if there’s the rest that you just considered throughout this that we might share with individuals or in case you have any recommendation on your fellow CodePen individuals on maybe how you can get higher.

Aysenur: Maintain going, I feel. Folks can see my first Pen, really, within the CodePen in my internship course of. I by no means deleted this Pen. They will see how I progress within the CSS. They will begin on this means, I feel. [Laughter]

Chris: I feel, scrolling again in your profile, your first Pen is a calculator. It nonetheless seems good. It seems good, however you may inform that you have gotten lots higher since then.

Aysenur: Sure. [Laughter]

Chris: [Laughter] Ah, sure. That is a really humorous thought. All proper, effectively, thanks a lot for approaching CodePen Radio. I actually respect your time.

Aysenur: Thanks a lot, Chris. I’m very completely happy you invited me. I’m an enormous fan of yours, CodePen, and CSS-Tips. Thanks, everybody.

Chris: Likewise. Have a fantastic remainder of your day. Take care.

Aysenur: Take care. See you.

[Radio channel adjustment]