I am Chris Coyier. Ask me anything.
Chris Coyier is the creator of CodePen and CSS-Tricks.com. He is a well known author, speaker and hosts the Shop Talk Show podcast. If you are a front end developer, you most likely use CodePen everyday. This is a great opportunity for you to get in touch with Chris and ask any questions you want him to answer.
Learn Something New Everyday,
Connect With The Best Developers!
This might sound cliche, but are you a fan of CSS frameworks? What do you think of them?
Maybe a telling fact: I've never used one for a real project.
When I'm the CSS lead on a project (kinda my thing), I feel most comfortable when I'm intimately familiar with everything happening in the stylesheets. I get that intimacy by writing it (and reviewing what other people write). Not to mention I enjoy writing CSS.
I get squirmy when using any outside CSS at all.
But as usual, I'm of two minds. I'm also extremely impressed by some CSS frameworks. Bootstrap is kind of amazing and I feel like the "ugh, bootstrap is everywhere blah blah" sentiment is overblown and unnecessary. I'm super impressed by Foundation. I think it's approach is probably my favorite (I get good results applying it to raw semantic markup.) It's starting to get a little weird though recently with all the different varieties native apps and stuff.
For the teams out there that don't really have a CSS lead, or don't have one that is excited about that being their job, you can likely get a lot of productivity out of a framework.
There are also about 20 billion of them because of this weird thing that happens where people that have some success writing CSS from scratch want to turn their thinking into a framework for the rest of the world.
Great to see you here! How do you maintain and manage both CodePen and CSS-Tricks?
A photo was recently taken of me proving that I actually have three hands.
Also a tiny monster forces me to code quickly.
But really, this is my favorite quote about productivity.
I just work on stuff and that's it. I don't even work particularly hard. I just checked my RescueTime and it's kind of embarrassing actually. It's not even 8 hours a day. I need to up my game there.
Also, if it's not clear, I'm a founder at both CSS-Tricks and CodePen, but many people work on both projects. Here's the CSS-Tricks Team and the CodePen Team. I also do ShopTalk Show with my friend and co-host Dave Rupert.
What are your thoughts about Atomic CSS (acss.io)?
With the introduction of so many similar frameworks (like Tachyons), do you think the CSS industry is moving away from OOCSS and towards single purpose styling units like ACSS?
It weirds me out.
I'm not super compelled by it.
But, I know some very smart people that ARE compelled by it. I would use this kind of thinking:
- Can we be comfortable and productive with this thing?
- Does it seem like this thing will serve us well into the future?
If both of those questions get confident YES's, use the thing and ignore the nay-sayers.
Thanks for hosting this AMA.
What, according to you, made CodePen a huge success? (given that the front-end world already had jsFiddle, Plunker etc)?
Thanks for having me! I'm digging this site.
Also thanks for considering CodePen a huge success. Time will tell, on that one, but I'm very confident!
It's true that tools like jsFiddle and JSBin predate CodePen, and CodePen was born in their shadow. We had this consideration: "What are the coolest demos people have made on jsFiddle, TODAY?" How do you find them? Who decides that?
Based on that, we decided to make the homepage of CodePen a showcase rather than the editor itself. We decided to have user accounts and make CodePen a social network in addition to a code editor. We decided we'll pick some of the best work on CodePen and show it to you. We decided we'll use algorithms to determine popular work, so you have a voice in what is popular as well. The community that came out of that is what makes CodePen different. Well, one of many things ;)
1) As far as I know you are a self taught developer (the best one) how have you done that? I know it's a long journey to become an expert in one field but sometimes we we need guidance.
2) Could you please mention what tech/language/framework you're going to utilize in the next 6 months?
3) What's the tech stack of CodePen?
4) How many programming books do read per month?
One more thing, I started off my programming with CSSTricks :) Thanks for all the tricks you taught us :)
1) There might be a little too much mystique around "self taught". A guitar player might be deemed "self taught" because they didn't take lessons. But in actuality, they downloaded a bunch of tabs, watched YouTube videos, ask fellow musicians questions, listened to a huge variety of existing music. They had teachers, they just didn't call themselves teachers.
Development is the same thing. Even if you didn't go to school for it, you learned along the way through reading, googling, co-workers, whatever.
As for me, I'm absolutely not self-taught. In high-school I took programming courses and loved them and excelled at them. In college I took both programming, art, and design courses. I've taken online courses. I've read a ton of books on design and development. All that in addition to the normal course of learning through community and doing. I'm very much a product of teaching.
2) The biggest project going right now is Rails, but React/Redux inside of it, and SCSS/PostCSS.
3) We have a podcast called CodePen Radio that talks about this stuff a lot. It's that stuff above, plus some Node, MySQL, loads of AWS servers.
4) I probably skim at least one.
CSS Tricks was the first blog that ever encouraged me, as a designer, to learn to develop.
The amazing thing is that in all those years the tone of css tricks remains the same (logical straightforward and un-intimidating) but I do wish you would have have more code pen meetups in SF.
Sorry for the long intro.
question: I have hit a spot in my career where it seems like I have to decide on dev or UX. Very few companies have team lead roles that are hybrid (it's kind of a new concept).
I know I can always learn on my own time but I can't imagine not using code as a design tool and vice versa. I would love to know how you have stayed firmly in between the two worlds and what steps I can take make it easier for people to accept more fluidity within a leadership role.
What do you think? Is there a place on the market for frontend developers only with CSS + HTML knowledge?
"Only" is the trick word there.
I hope companies have roles that are specifically focused on HTML and CSS. Those are vital components to any website. Having true experts focusing on them seems pretty smart. I see consultants like Harry Roberts making a good living helping companies with this.
The reason I'm tripped up with "only" though, is that if you're a smart person and already an expert with HTML and CSS, there is no reason you can't expand you're skillset a bit into other things. If you're like "Nope, I know this stuff, I'm not learning anything else" - that's probably not signaling very well.
Here's the /libs/ directory on CodePen.
Sorry that wasn't very accessible, but the point is: yes, many. Those aren't all used on every page of CodePen, and there might be some stuff we've stopped using in there, but I'd say most of it is used.
That doesn't include our latest thinger we're working on that is in React/Redux and the smattering of libs that come with that.
I've recently been thinking about the future of CSS and JS division of responsibility/functionality on modern webapps. Currently, there seems to be a trend for migrating functionality that has traditionally been the responsibility of JS and Jquery libraries to CSS. In the last couple years, CSS only implementations of menus, columns, counters, media queries, and animations have become widely known and common place (thanks to services like Code Pen and Css Tricks) since they are cleaner and more fluid especially on mobile.
I often find that developers in your position, those considered to be gurus in their field, respond to these questions the same way. "I just love doing what I do".
You have a fair share of large projects. How do you keep from burning out? How do keep it all manageable? Is it as simple as never getting tired of it all because you enjoy it so much?
Interested in any tips you have. Are you a goal oriented person who keeps track of progress? Does that keep it all in perspective? Or do you have any other good advice on the subject?
This transcends design and development. It applies to anybody working on anything for long periods. People figured it out a long time ago. Take a break sometimes, come back refreshed. If you ain't refreshed, the break wasn't long enough, or you truly don't like what you're doing and you need to do something else (if you have the means).
I love CSS-Tricks and CodePen! And it's been a while for me, but Shop Talk has always been a joy to listen to. Thanks for all the work you've put out!
On that note, since you've dirtied your hands with so many different web techniques: How do you get yourself in the right mindset to learn new skills/technologies?
How much did you suck at developing the first 3 years of your life? And what would you say helped you improve the most overtime?
First of all I need to thank you for being the person from whom I've learned the most this past 4~5 years since I started my career in Web Development. I learned more from your Lodge videos on the CSS Tricks redesign than from many of the books I've read and tutorials I've followed. So, thank you forever for that!
I always find myself not knowing what to do when trying to learn some new framework, library, language. I end up reading lots of docs, blog posts, watching youtube videos but not building anything. I know I should build something to incorporate new knowledge, but I always ask myself: "What should I build?" I know I could always go with the Todo app or the Weather app, but those tend to became repetitive even when using other frameworks, libraries or languages.
I wanted to ask you: whenever you try to learn some new language or new framework, what is your approach? Do you just start building something while reading docs and watching videos? Do you first read documentation and some books or blog posts?
I have the same problem. Even if you do pick some random thing to build (e.g. todo app) it won't be any fun and you'll lose interest. The trick is to care about what you're building. Maybe pick something that is inherently personal. Like build a section of your personal website that uses the new thing you're trying to learn, so there is something important at stake.
As someone who is just now starting to get into web development. Should I still be worried about compatibility with old IE browsers? Every time I google something I end up with posts saying things like "Can't use that yet because I have to support IE 8 or below" Of course these are usually are old posts from stack overflow.
I guess I'm asking should I learn all the old school tricks of centering things or can I flexbox the shit out of my site and use fancy things like border-radius?
As a side note, just wanted to thank you for everything you've done for the community. CSS-tricks always goes at the end of my google searches.
Every question about browser compatibility should be grounded in what the users of that particular website are using. Which a free analytics service like Analytics can tell you.
It's so tempting to think about and talk about global usage of browsers, but don't let that leak into your decision making on any individual site.
If your statistics for your website show that you have a significant number of users using IE 8, then you better as hell support IE 8, because that's the job, and if don't then you're probably not doing buisness good.
Best of luck!
Hey Chris! My question is an extension of a question here, nonetheless I'll ask it in my context and words. It's not related to CSS tricks and Codepen (which are awesome by the way!)
I learn something new, keep reading the blogposts, tutorials, docs, follow up on forums; but when I have an idea, I never follow up properly on it, because either
- I convince myself that I won't be able to do it
- I convince myself that I need a mentor to help me make it.
- I get intimidated by people who are better than me and are making things.
- I always force myself to do something alone, not asking many people to join on the idea, because I think I'd only be able to learn something properly if I do it alone.
Background: I'm 4 months old to web development.
Have you ever faced emotional bogging down challenges like these while starting up? How do you suggest I eliminate these for good and actually convert an idea into reality for good?
There has been a few rumblings about "failed" web standards recently (https://www.peterkrautzberger.org/0186/ for one), I've recently run into it myself with https://www.w3.org/TR/speech-synthesis/ and the patchy/broken support that currently exists in browsers.
I was wondering what you're take is on this working group issue, and if you think it's going to get better or worse while all our attention seems to be focused on ES6 and beyond.
Is Value Based Pricing suitable for new freelance developers? Or should we first see what limits we can reach with an hourly structure?
Why did Object-oriented CSS (ala Stubbornella) never take off?
I think it did! Just in a more insidious and effective way. Nicole's lessons were things like...
- Be very careful about specificity
- Think in patterns
- Use classes a lot
- Use tools and analytics and heuristics to inform CSS choices
If any of these things seem obvious now, know that they weren't always. Even if we don't call it OOCSS much anymore, Nicole was way ahead of the curve on this stuff and influenced how the community thinks about CSS immensely.
Have you ever seen Snap.svg fail like this on Chrome - logo in the bottom left:
works on safari
At a conference one time, Pamela Marie said (paraphrased):
Golden rule asking a question: imagine trying to answer it Golden rule in answering: imagine getting your answer
I only mention this because I think it's useful for everyone in increasing how good of answers you get you when you ask questions. For your question, it's not immediately obvious what "fail like this" is referring to. I was able to see the problem because you mentioned it behaves as expected in Safari and I could compare and see the difference, so that's good, I'd just error on being even more clear.
I'm afraid I don't know what's going on there. I see the
<path> isn't a stroke though, it's a shape, even though it's doing the "draw itself" trick. I think if I was going for this effect I'd make it a stroke on the path and use drawSVG.
Hey Chris, our job - is all day watching to the monitor... and I want to ask how to prevent eye strain and other issues... Maybe good monitor? or anything else?... Thanks.... (sorry My english very bad)
I've never had eye trouble but I have had RSI. After suffering finger pain for far too long, switching to only of those split keyboards and a more ergonomic mouse fixed it quickly.
I also use F.lux to get that orange screen stuff going on in the darkness. I'm not sure if that actually is healthier on the eyes, but I know I like it.
What are the biggest challenges and drawbacks in today's learning process?
I don't know that there is any standardized thing you could call "today's learning process".
I can say I feel a little sorry for people getting into web design and development right now, because it feels a bit more overwhelming than it did when I started. Having a good mentor (or teacher) will always be tremendously valuable.
Should I take this WordPress job I'm being offered?
The job in question is at a small agency that basically makes money by selling WordPress sites to small businesses and charging for upkeep/maintenance. I have no problem with WordPress itself, but my goal is to learn web development more thoroughly than just WordPress. The owner of the agency told me as much that most of my work will be configuring a theme. I feel like this job won't be instructional as I hope, and my time would be better spent learning relevant skills on my own. Basically, I want to be a web developer, not a WordPress developer.
I don't need the money either. I'm a full-time student currently.