352: With Aysenur Turk – CodePen Weblog

Aysenur Turk had quite a few 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 software sooner in Retool. Visually design apps that interface with any database or API. Change to code almost wherever 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.

Hundreds 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, everyone. Welcome to a different CodePen Radio that is #352, and I’ve an unbelievable visitor on.

Initially of every yr, we publish the highest 100 most hearted Pens of the yr. Primary this yr is very notable, and he or she occurs to be in additional locations than primary, however let’s discuss 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 common. One of many only a few Pens that ever has greater than 10,000 hearts.

I’ve the creator of that Pen with me at the moment 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 blissful. I am tremendous excited to be right here.

Chris: Yeah. I simply DM’d you on Twitter to see should you’d be up for it, and also you had been. Thanks for that. In fact, I informed my staff that I would get to talk with you, too, for the podcast, they usually had been enthusiastic about it, to have a CodePen celebrity such as you.

Aysenur: Thanks.

Chris: It is nice. They’d some questions as properly, so I’ve plenty of questions, in fact. However I assumed it might be enjoyable to offer the staff an opportunity to have you ever reply their questions as properly.

Marie, on our staff, is curious to ask you. Your primary Pen was referred to as “Glassmorphism Artistic Cloud App Redesign,” and it was a little bit of maybe a pattern for a bit bit there, that Glassmorphism the place the background is blurry via the background. Is primary your favourite Pen, too, or do you may 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 expertise. Once I shared this Pen, I used to be writing CSS for under 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 blissful.

Chris: That Pen is the Responsive Social Platform UI. Yeah, attention-grabbing. Okay. Was that this yr and it did not make the record, 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 onerous for individuals to see what I see after I’m taking a look at this. A variety of your Pens, anyway — most of them, maybe — are full layouts. They’ve a sidebar and a header. They appear to be an software 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 similar to one button.

Aysenur: Mm-hmm. Yeah.

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

00:03:56

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

Chris: Mm-hmm.

Aysenur: At the moment, the illustration may be very common on CodePen. I attempted one thing, however then I made a decision to assume that it is going to 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 fearful about the best way to code simply and the place to start out. 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. Type of be taught that.

Aysenur: Sure.

Chris: Proper.

Aysenur: Simply enhance myself. I used to be a junior UI developer, and I wish to enhance my CSS expertise. I wish to use some CSS options as a lot as potential.

Chris: Take any considered one of these examples. To illustrate you discover it on Dribbble. Does it are typically 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 dimension structure?

Aysenur: No, I select huge layouts, huge, 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 alter 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 delivered to you partly by Retool.

Constructing inner instruments from scratch is gradual. It takes a variety of engineering time and assets, 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’ve got scrapped some junk collectively, and you are like, “Ah, ok. It isn’t 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 properly. Retool helps builders construct inner instruments sooner so you’ll be able to give attention to the software program you promote.

Retool affords an entire UI element library, so constructing varieties, tables, and workflows. It is as simple as drag and drop, however it’s not only a element library. Extra importantly, Retool connects to principally any knowledge supply, providing app environments, permissions, single sign-on, out of the field.

It affords this escape hatch, too. If there’s {custom} JavaScript you could write, write it. All good.

With Retool, you’ll be able to construct consumer dashboards, database GUIs, CRUD apps, and another form of software program to assist velocity up and simplify your work with out Googling for some element library that will or could not be just right for you – no matter – debugging dependencies, rewriting boilerplate code. None of that.

Simply get began with Retool for constructing these inner instruments. Hundreds 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 help.

[Guitar music ends]

00:08:07

Chris: Rachel, on our staff, 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 lovely, so do not inform me an hour. [Laughter]

Aysenur: No, no … time. Really, I discover a design first and, as I stated, from Dribbble. I add it to my favorites. Then after I’m accessible (typically on weekends), I begin coding, simply begin coding, and I normally do not begin straight away and end on the identical day. Actually, generally I begin and do not take a look at it for 2, three days, and proceed once more. Typically 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 looks like as a result of it is a variety of work.

Aysenur: Sure. Responsive interactions, animations, transitions.

Chris: Yeah. Do you may 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 wish to add some JavaScript like click on and open modal, one thing, or toggle, darkish gentle. I just like the dark-light change.

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

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

It leads into Stephen’s query (from our staff right here). Do you may have a favourite pattern to code?

00:10:41

Aysenur: I haven’t got a favourite design pattern, really. I solely code what appears 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 assumed 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 improvement 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 pattern, really.

Chris: Yeah. No favorites, however you may have a watch for design. In case you prefer it, you code it.

Aysenur: In fact, sure.

Chris: On the skateboard video platform you talked about, the hover impact is admittedly cool. It is like static photos, and also you hover over them. They develop a bit bit, however in addition they flip right into a video, which is admittedly attention-grabbing.

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 period away. It makes the avatar a bit smaller. It is stuff that you did not have to do. It will be nonetheless in all probability cool, even should you did not do it, however the truth that you probably did actually takes it to a different degree.

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: Properly, the yr converted. It is 2022 now. Do you may have something within the works? Are there any developments on Dribbble you are seeing that you’ve got your eye on? What are your favorites trying like on Dribbble now?

00:12:35

Aysenur: Sure. As I stated, I observe the design developments from Dribbble and likewise social media platforms. Actually, there isn’t any design pattern that catches my eye, really, however I see the illustrations are used lower than within the earlier yr, I believe. It appears like they’ve been changed by shapes, like fairly shapes.

Chris: Oh… Actually?! Attention-grabbing.

Aysenur: I believe … I simply do. And I typically see designs with grayish backgrounds. There are excessive distinction typographic minimal designs like my Grid … Layouts. I believe I predict that designs created by mixing fonts with shapes, images, and emojis are placing texture on it, and selecting completely different fonts with complicated fonts possibly will probably be common 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: Attention-grabbing fonts are in.

Aysenur: Extra trendy.

Chris: I believe if I needed to choose my favourite Pen of yours — and it’s a onerous factor to — I actually like that Fashionable Weblog Structure with CSS Grid. There’s simply one thing that is simply quite simple. The strains 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-Methods, however make it appear to be this?

Aysenur: Actually?

Chris: Or have that newspaper look. I assumed — I have not accomplished the design but, however I am like, “Properly, 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 nearly as good style as you do. I might replicate a bit little bit of what you may have happening, however it 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 believe fonts are possibly necessary in that UI, mixing fonts, completely different fonts.

Chris: Proper. You possibly can’t simply choose 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 attention-grabbing.

Stephen additionally requested what are your sources of inspiration. You’ve got already talked about Dribbble.

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

By the best way, I all the time … the designer’s identify and hyperlink underneath my Pen element, however nobody appears there. They assume that I’m creating the design additionally and code it on the similar time. However I’m not a designer. I’m a UI developer. I wish to say that after once more.

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

Aysenur: Sure. Additionally, on the similar 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 believe that is the best 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 appears such as you’ve executed that each time. Yeah, that is nice. God, it is so cool how that one scrolls.

Aysenur: [Laughter]

Chris: I believe it is an exquisite Pen, once more the Fashionable Weblog Structure. It appears lovely with none motion or interplay in any respect. Then you definitely do the interplay, and you are like, “Oh, wow!” [Laughter] What an sudden manner 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 standard theme.

One other theme is that it is no one’s job to make Pens. [Laughter] You understand? We do not have a solution to do income sharing from common Pens, sadly. So, individuals need to 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 isn’t precisely the form of work I do in CodePen. We’re growing our personal product, possibly you already know. We work in a extra restricted space by way of creativity. We hearken to our consumer requests, like enterprise-specific requests and including new options, fixing their issues.

I principally cope with CSS issues, too. Additionally, I deal with the UI elements 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 several methods?

Aysenur: Sure, precisely. I exploit CodePen because of this to enhance my creativity.

Chris: I am simply curious should you had been on CodePen earlier than you bought that job. Was it concerned in any manner? Was it a spot the place you can reveal, “Look. I clearly know CSS.”

Aysenur: Sure. Really, my objective whereas doing this, as I stated, was to enhance my CSS expertise. Since I’ve already made UIs that can be utilized simply in apply, individuals can use it immediately 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 executed in CodePen, many freelance job affords 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 unsure should you 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. Normally, after I come throughout an exquisite Internet template, there’s a place to go purchase it. Like, “This is a style, however do not you wish 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 do this. Have you considered making an attempt to generate profits off such a work you do?

00:19:51

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

Chris: I perceive. I really feel the identical manner. 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. Properly, thanks for that as a result of the whole lot on CodePen that is a public Pen is open-source.

Aysenur: Mm-hmm.

Chris: That implies that even your lovely Pens, individuals might take the code from and attempt to use on their very own in the event that they wished 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’ve got talked about that it is helpful to construct your expertise, in a manner. But when it wasn’t enjoyable in any respect, I can not think about you’d proceed doing it.

00:20:46

Aysenur: Sure. Precisely. Sure, it is positively helped me. Typically in my work life, a bug comes from the consumer. 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 downside like these come from our customers as properly. I can … the codes, repair the errors as a result of my velocity of … and understanding the code has elevated because of CodePen.

Chris: Aw, good.

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

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

Chris: These are the best 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 alter 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 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 believe it’s one thing that is actually requested and vital, I assume. Once I create a responsive design, I typically use a meta question to alter the doc layouts primarily based on the dimensions of the viewports. However nevertheless, many designs have widespread elements that modified structure relying on the accessible width of their container. This may occasionally not all the time relate to the dimensions of the viewports. However sure, it is as an alternative associated to various the structure, the element is positioned.

As an alternative of trying on the viewport dimension, we are able to take a look at the container dimension and make our structure changes in accordance with the house within the container. It will be nice, I believe. I actually wish to use it. [Laughter]

Chris: Sure! Sure. Sure. Sure. There’s a handsome Polyfill now, so I believe we are able to not less than get began enjoying with it. I’ve a bit bit, however I am unsure about sending it to manufacturing but. Definitely, I might play with it on CodePen.

I am curious. You write a variety of media queries. A variety of these Pens — it virtually looks like the purpose of the Pen is responsive design nature of it. There are many media queries within the code. I ponder. Do you may have a way of what number of of these media queries would change into container queries – should you might? Do you assume it is half?

Aysenur: I believe half of them.

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

Aysenur: No, I do not assume that is true. Sure, 90% is admittedly….

Chris: Properly, we’re the identical. I am actually enthusiastic about that. I am additionally excited concerning the container items, in order that should you had been making an attempt to dimension one thing within a container that you can do it primarily based on how huge the container is. I believe that goes hand-in-hand with container queries – principally for typography. If you already know that this factor has extra space, you would possibly dimension the fonts a bit larger (not primarily based on the viewport however the element itself).

Aysenur: Sure.

Chris: Properly, I believe 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 ponder if we might finish by if there’s anything that you just considered throughout this that we might share with individuals or you probably have any recommendation in your fellow CodePen individuals on maybe the best way to get higher.

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

Chris: I believe, scrolling again in your profile, your first Pen is a calculator. It nonetheless appears good. It appears good, however you’ll be able to inform that you’ve got gotten rather a lot higher since then.

Aysenur: Sure. [Laughter]

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

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

Chris: Likewise. Have an important remainder of your day. Take care.

Aysenur: Take care. See you.

[Radio channel adjustment]