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 just a blog ok) of CSS-Tricks, and co-host of ShopTalk Show with Dave.
I think websites are great. I have a personal one in addition to the other sites I help run. I probably like yours.
Nothing has been more fun and helpful over the years than writing stuff publicly. It helps me think. It starts conversations. It gets me invited to stuff. Heck, a sizeable chunk of my income comes from sponsorship and advertising which is largely in and around that writing.
Every time I tweet I think, aw snap, that would have been more useful as a blog post.
I think of myself as a front-end developer because I mostly write code that is meant for the browser. I feel like I have a decent perspective on the trade, as I work on (and have worked on) lots of projects across lots of different stacks and at lots of different scales. There are good and bad ideas everywhere.
Ask me anything!
Top comments (55)
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 🤗
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.
I like it, sounds like a solid strategy 😃 Thanks for taking the time to share!
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. 💪
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.)
Awesome sauce. Thanks for sharing Chris!
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.
Shop Talk Show
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.
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?
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.
Thank you for the implicit support of the Dog focused GraphQL CMS startup I have just decided to do
Sanity and ghost are nice and all, but they don't have passion like your product. Consider me an angel investor.
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.
Cheers. There is still a lot to looking at a design and considering how that's going to translate to HTML, CSS, and JavaScript!
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
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.
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.
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!
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.
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, ...)?
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.
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?
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.
Great advice!
Hey Chris!
What is your favorite thing about working at CodePen and/or CSS-Tricks?
What keeps you going?
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.
"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.
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!
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.
Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more