DEV Community

I'm Chris Coyier from CodePen, CSS-Tricks, and ShopTalk Show. Ask Me Anything!

Chris Coyier on November 15, 2019

Hello! Like the title says, I am the co-founder of CodePen (I have two fellow co-founders: Tim and Alex), I am the (owner? creator? CEO? lol it's j...
Collapse
 
molly profile image
Molly Struve (she/her)

Every time I tweet I think, aw snap, that would have been more useful as a blog post.

I feel the exact same way a lot of the time!!! How do you determine what you want to turn into a blog post and what you leave as a simple Tweet?

Thanks for much for taking the time to answer questions and inspire the rest of us 🤗

Collapse
 
chriscoyier profile image
Chris Coyier

I usually won't avoid the Tweet. The tweet is a good proving ground for the blog post anyway usually. If nobody cared, eh, maybe not that good of a post. If it does get good engagement, it's like the conversation around it is useful in the creation of the blog post anyway. Plus, tweets are so easy to kick out the door. Blog posts, for me, on purpose, have a longer schedule that includes editing and scheduling and such.

Here's an example tweet. Just a silly little UI experiment. I didn't feel like waiting to blog about it to drop the demo. But from the Twitter thread, I got some interesting technical feedback, info about what parts people were most suprised by, and some other related ideas. That will, hopefully, lead to a much more robust blog post.

I mean even treat DEV like that honestly. I wrote this blog post reaction quickly here, but then refinied it for my own blog with some of the feedback.

Collapse
 
molly profile image
Molly Struve (she/her)

I like it, sounds like a solid strategy 😃 Thanks for taking the time to share!

Collapse
 
nickytonline profile image
Nick Taylor

Thanks for all the great resources you've been churning out over the years and thanks for codepen and CSS Tricks.

I'm sure you have tonnes of cool tricks you've done yourself or seen over the years, but do you have a favourite where you were just like wow!

Keep being awesome and I hope your arms are healing well. 💪

Collapse
 
chriscoyier profile image
Chris Coyier

I think "scroll shadows" in CSS is one of my favorite CSS tricks of all times. Originally by Roman Komarov, explained and improved by Lea Verou. I saw a tool the other day around the idea by Stefan Judis.

It's a real mind-bender involving four layered gradient backgrounds, each positioned, sized, and colored differently, and then behavioraly different regarding scrolling.

It's not just a neat trick, it has real UX implications. Showing a shadow of where you can scroll is important UX. Consider this story of a recent design update in iOS that led to complete confusion UI actions hidden behind a place you could scroll to, but had zero affordence on how to get there. (Happens to me all the time in Spotify, for the record.)

Collapse
 
nickytonline profile image
Nick Taylor

Awesome sauce. Thanks for sharing Chris!

Collapse
 
nickytonline profile image
Nick Taylor

Side note, but I really enjoyed your recent talk with the Keyframers on Shop Talk.

That made me think of this funny Tweet from @chriscoyier today about position sticky.

I think CSS variables are starting to gain steam. It makes a lot of sense for theming. DEV, for those who aren't aware, uses CSS variables quite a bit for theming.

@davidkpiano recently talked about his heavy use of them for animations on a recent episode of Shop Talk.

Him and David Shaw have this awesome Twitch stream where they reverse engineer animations. They're called the Keyframers and you can follow them on Twitch or on the Twitters.

It's really an amazing thing to watch.

Collapse
 
mike_hasarms profile image
Mike Healy

It's fairly common for dogs to have Instagram accounts. How would you feel about a trend towards the open web, and for more dogs to have websites instead?

Could they ever have an impact on IG's Dog market share?

Collapse
 
chriscoyier profile image
Chris Coyier

I like how you think Mike. I enjoy Instagram, but I like the open web more. Let's zero-sum this thing. If Instagram has to die for open web dog websites to live, I'm OK with this.

Collapse
 
mike_hasarms profile image
Mike Healy

Thank you for the implicit support of the Dog focused GraphQL CMS startup I have just decided to do

Thread Thread
 
thompcd profile image
Corey Thompson

Sanity and ghost are nice and all, but they don't have passion like your product. Consider me an angel investor.

Collapse
 
ryansmith profile image
Ryan Smith

Hey Chris, I just want to say thank you for all of the work you have done over the years. I started using CSS Tricks with your tutorials on converting PSDs to HTML/CSS a long time ago and those helped me level up on CSS and design. Even though some of the specific techniques may not be used anymore, the overall lessons on how to look at a design, break down each element into part of the page structure, then style it have stuck with me.

Collapse
 
chriscoyier profile image
Chris Coyier

Cheers. There is still a lot to looking at a design and considering how that's going to translate to HTML, CSS, and JavaScript!

Collapse
 
vinceumo profile image
Vincent Humeau

Hey Chris, first thank you for your work I love codepen and CSS tricks, it always been a great source of daily inspiration!

What have been the most challenging time in your dev career?

Thanks

Collapse
 
chriscoyier profile image
Chris Coyier

I've lived a pretty darn privileged life, so any challenge I've faced is nothing compared to the people fighting racism, sexism, ageism, and every other damn thing people stigmatize people with.

Collapse
 
vinceumo profile image
Vincent Humeau

Thank Chris, sorry English is not my mother tongue, might have got lost into translation. I wanted to ask you about tech challenges. Sorry about that.

Collapse
 
cookavich profile image
Paul Cook

You've built an amazing platform for yourself, and an amazing brand with CSS-Tricks.

What would be your top 3 pieces of quick advice for developers trying to follow a similar path to growing their influence and exposure?

Thanks!

Collapse
 
chriscoyier profile image
Chris Coyier

I think writing is literally the only way.

I can't think of a developer with influence who has that influence for anything other than writing. Or if it's not writing, then it's a YouTube channel or some other form of creating public stuff.

Collapse
 
kenbellows profile image
Ken Bellows

I've heard you guys talk about Houdini a few times on ShopTalk. How much do you see yourself personally playing with Houdini APIs as they are released? Which API are you most excited about (Painting, Layout, Typed OM, ...)?

Collapse
 
chriscoyier profile image
Chris Coyier

This super-low level stuff sometimes feels over my head. It's hard for me to picture the industry implications of stuff like this just by looking at specs, ya know?

To me, it seems the layout API has the most powerful potential.

What I'm imagining right now is that Houdini doesn't affect normal day-to-day front-end developers like me that much. I won't be writing much Houdini code. But I'll use fancy things that other people create, because it does something useful for me. Just like most people don't write their own libraries or have published npm packages, they just use them.

It's fun to be wow'd by Houdini. If anyone is looking for that, make sure to look at Vincent De Oliveira's showcase website.

Collapse
 
kp profile image
KP

Codepen and Css-tricks are both amazing tools/ resources, with large audiences. Curious about how you got started and the highs and lows (esp the lows). How did you stay motivated and keep going all these years? How did you find an initial team, and how did you incentivize them (money, equity, both?)
What were your biggest business challenges and learnings?

Collapse
 
chriscoyier profile image
Chris Coyier

I cheated really. My co-founders on CodePen were just friends in real life I already had, and they became friends because we already worked together at two different companies. It was a very natural transition and they needed very little incentive. We've done everything 33 / 33 / 33 since day one.

I'm a pretty even keel guy, so not a lot of highs and lows emotionally for me. But the lowest always seems to come from threat of failure. Even when failure isn't around the corner, when you're running a business, you need to be looking and projecting pretty far out. You can't get to the point where you try to run payroll one day and realize you're out of money, you need to see that coming years away and be steering away from it. That's active planning and decision making you have to do, and it's the least fun kind of planning you can do. What changes do we have to make to not fail in 18 months? Disaster planning. Way way less fun than how can we spend all these piles of money we're making?, which is a position I've never been in.

Collapse
 
kp profile image
KP

Great advice!

Collapse
 
coffeecraftcode profile image
Christina Gorton

Hey Chris!
What is your favorite thing about working at CodePen and/or CSS-Tricks?
What keeps you going?

Collapse
 
chriscoyier profile image
Chris Coyier

You know what I really like? I like getting into the office every day and having a pretty decent amount of freedom of what I'm going to do that day. I'll probably have meetings. I'll probably have some stuff on the ol' calendar. I'll probably have some team expectations I'm trying to meet. But I also usually have plenty of time to pursue things that are interesting to me at the moment.

Sometimes I'm in the moment to drill through some emails. Sometimes I want to tinker building some demo that sounds like fun. Sometimes I want to write up a thought or record a video. Sometimes I want to plan something out or document something. Sometimes I want to talk something out with other people or do some pair programming.

I'm fortunate that I'm the boss (lol) and I put myself in that position on purpose so I had that freedom.

Collapse
 
coffeecraftcode profile image
Christina Gorton

"I'm fortunate that I'm the boss (lol) and I put myself in that position on purpose so I had that freedom."

Love that. Thanks for taking the time to answer.

Collapse
 
anechol profile image
Ashley E

Hey Chris, huge fan of Codepen and CSS Tricks!

I've been trying to level up my CSS skills by learning some advanced concepts (custom properties, extending them with JS, etc.) but as CSS has so much going on, what would you say is a good part to focus on for advanced/expert level work?

Thanks!

Collapse
 
chriscoyier profile image
Chris Coyier

Howdy Ashley!

It's funny, it's very rare I choose to study up on something just for the sake of it. While I think (to go on your example of custom properties) they are cool, I'm not sure I've sat down to just study them independently. It's usually like enough reading to grasp the point of them, letting that lodge in your brain, then next time I'm writing CSS, hoping that my brain presents them as a possible solution to a situation.

Even now, my muscle memory for them has grown to the point I automatically start variable-izing CSS values as I write CSS. It's almost too strong, as I think a lot of CSS variable usage is still best left to CSS preprocessors.

Collapse
 
janetmndz profile image
Janet Mendez

Hey Chris, thank you so much for doing this AMA. Just wanna start off by saying that I admire your work a lot and thank you for your part in CodePen and CSS-Tricks. I feel that being a part of both of these platforms is what got me into learning front-end development in the first place so thank you so much.

My question is what is something that you wish we could add in CSS? and what has been inspiring you these days?

Collapse
 
chriscoyier profile image
Chris Coyier

what is something that you wish we could add in CSS?

I feel like we all should take every opportunity someone asks this and scream Container Queries! until we get them.

The idea is that we should be able to write CSS that says "When this element is this wide, this CSS should take effect" (and not just width, but whatever media queries we have at the page level already).

The best use-case demo out there is Philip Walton's page.

I want to write a card component that shuffles itself around based on how wide it is, not how wide the page is, because there isn't always a direct connection between those two things (e.g. a card component can show up in a narrow sidebar on a large screen, but be full-width on a tablet or something).

EVERY component can be in a situation like that, so for the love of CSS, let me write media queries scoped to those components. I echo a lot of other people when I saw that if we had this, the vast majority of media queries we write would be these, not page-level.

Collapse
 
peter profile image
Peter Kim Frank • Edited

Chris, thanks so much for doing this AMA. You have been doing CSS-Tricks for a while now and the consistency of growth and expansion of the project and business is awesome.

Can you describe a few of the big "inflection points" you've gone through in building the business?

Collapse
 
chriscoyier profile image
Chris Coyier

Hiring is always a big one. I remember so clearly that feeling of what it's like to hire someone for the first time. The feeling you take them on and start paying them, you're earning exactly that much less money, which is a scary feeling. I've still not really taken the full plunge on CSS-Tricks, where everyone that works there is part-time only, partially due to me needing to baby-step outgoing money to make sure the value from having people working is high enough to offset the cost. Typically, it is, but you still gotta be smart about it.

Collapse
 
itachiuchiha profile image
Itachi Uchiha

If you never thought about CodePen, probably my friends and my boss wouldn't understand what I was talking about.

The second thing I have to say about CSS-Tricks. Since university, you helped me a lot. I didn't count how many times I used CSS-Tricks for my tons of research.

There are many types of achievements, but I care about these kinds of achievements.

I hope people inspired by you.

*as irrelevant

I love these kinds of productive people. They are the Tesla of our era :)

I hope you forgive my grammar mistakes :P

Collapse
 
crigger profile image
Adam Crigger

where is the fold?

you think it's worth suggesting a { position: above-fold; }?

Collapse
 
chriscoyier profile image
Chris Coyier

I'm not sure I've ever made a big fold-based decision once in my career. Not a big fan of that thinking. THERE IS A LINE IN WHICH THIS IMPORTANT MODULE MUST NOT CROSS haha. Prioritizing the most important stuff to be higher up the page, sure, websites don't fold like newspapers.

Plus, we've got viewport units now, so if you absolutely need to position something in the top visible viewport area, you can.

Collapse
 
dewofyouryouth_43 profile image
Jacob E. Shore • Edited

Thanks for CodePen and CSS Tricks. You're awesome! I'm a big fan of yours. I've always wondered how you do it all - from the picture - looks like you don't sleep much ;)

My question:

I've been doing back end / full stack for the past "who knows how long" - even though I really love the front end and pretty much spend most of my "personal project" time doing stuff with JavaScript, React CSS, SVGs etc. I do this for fear that I'll be stuck being the "designer" and then take a pay cut. I feel like for interesting front end work maybe you need to actually be in San Francisco or New York or the like.

For example: my team has many who sometimes work on back end and sometimes on the front end - but I think there's only one person works solely front end (I have no idea how much she's making - but she does good work - and a lot of it - so she's probably underpaid).

Am I crazy? Am I wrong? Am I just a masochist?

Please advise.

Thanks.

Collapse
 
andy profile image
Andy Zhao (he/him)

Thanks for doing this AMA! Since you've been writing blog posts for so long, have you developed a process for writing one?

Collapse
 
chriscoyier profile image
Chris Coyier

Sorta! It still feels pretty casual to me (hence the, let's call it medium quality to my writing), so it's not like I'm renting a cabin in the wilderness and finding inspiration in the sunsets and cheap whiskey.

  • I write down every blog post idea that comes to me. I try to keep that list fairly public but I also have a personal list where I can be even sloppier.
  • I put as much context into those lists as I can, so I can hope to summon up the same emotion that made me write it down in the first place. If I revisit the idea a week later and can't, it's probably not a very good idea.
  • I write up the post with as much context as I can. Typically at least light research is involved.
  • We have a lead editor on CSS-Tricks, so it's reviewed by at least one person before being scheduled.
Collapse
 
jess profile image
Jess Lee

How do you juggle so many projects? What's your advice for new founders?

Collapse
 
chriscoyier profile image
Chris Coyier

I feel like I don't, actually! Quite a long time ago I scoped what I work on to just the three projects I mentioned at the top of the article. It was for the exact reason of NOT juggling too much. I still work hard, but I don't work crazy hours. I track my time with RescueTime and it's ~40hrs a week.

I'm not sure I have great startup advice. Build something people want, listen to your customers, all that. I wish I was better at it. My favorite advice is to be persistent. Any success I've had is because I kept doing the thing for years upon years upon years.

Collapse
 
avxkim profile image
Alexander Kim

Cris, are you enjoying tinkering with css/html?

Collapse
 
chriscoyier profile image
Chris Coyier

ya

Collapse
 
avxkim profile image
Alexander Kim

But what do you enjoy more, css/html or js coding?

Collapse
 
maestromac profile image
Mac Siri

Hello Chris, thanks for doing this AMA!

what are some of the things of the CodePen community has done that surprised you?

Collapse
 
chriscoyier profile image
Chris Coyier
  • I love it when we get bug reports... along with the exact code we can copy and paste to fix the problem haha.

  • Love it when people to weirdly creative things like use their 6-up grids in their profile to make the previews all go together in some cohesive way.

  • I love it when people make things on CodePen that are so mind-blowingly creative that I would have never thought of it in a million years.

  • I love it when the community takes things into their own hands, like online meetups and creative online get-togethers that we had no hand in at all other than being a fun place to build.

Collapse
 
lautarolobo profile image
Lautaro Lobo

Hi Chris, what you do think about the comeback (have they ever gone?) of the personal websites? This owning-your-content 'thing'?

Sorry if it's a too broad question.

Collapse
 
chriscoyier profile image
Chris Coyier

I don't have any data on if having a personal site have rollercoastered in popularity or usage. But I do feel pretty strongly that it's a good idea.

I think it's a mistake to not have a personal site and a mistake to not own your own content. There are a lot of people on Earth, and having a personal site for yourself is probably the best way there is to make yourself known and stake a little claim for yourself. That's where content you create should be put, even if it also goes elsewhere.

I'm not particularly worried about this comment I'm writing right now (as far as "content creation" goes), but anything that's a complete thought of mine I like to make sure I have published somewhere that I own. I feel like living breathing proof it's a good idea.

Collapse
 
itsjzt profile image
Saurabh Sharma

CSS or CSS in JS?

Collapse
 
chriscoyier profile image
Chris Coyier

I see a ton of cool stuff happening in CSS in JS. I think it solves a lot of interesting problems for certain websites. For example, I very much like the idea of having the option to write styles that are scoped to a component programmatically. And thus are tree-shaked out when the component isn't used automatically.

But the web is a big place, and dare I say most websites aren't built with JavaScript-powered component models. Thus, CSS-in-JS isn't necessary or appropriate for a lot of sites.

Two things though to be clear:

  • You can't have CSS-in-JS without CSS. CSS-in-JS is still styled that are applied to elements. It doesn't absolve you from learning CSS.
  • The CSS-in-JS landscape is wide. It's a little hard to talk about so vaguely. Each project in the bucket of CSS-in-JS handles things a bit differently and how the styles are applied to the site is even quite wide. I think it sometimes gets lost in the arguments that some of the approaches literally make a CSS stylesheet that you link up like you would any other CSS, even Sass-produced CSS, which there doesn't seem to be much argument about anymore.
Collapse
 
senthilkumarramakrishnan profile image
SenthilKumarRamakrishnan

If there's any Remote job, I can work. I have good knowledge in Dotnet and SQL dev.

Collapse
 
ibrahimfromtgddev profile image
Ibrahim Imran

Hey Do you know how to grow on Dev?

Collapse
 
ibrahimfromtgddev profile image
Ibrahim Imran

Also Chris your my first follow! I think your pretty nice.

Some comments have been hidden by the post's author - find out more