Chris Coyier
@chriscoyier
Followers
241K
Following
36K
Media
2K
Statuses
41K
Co-founder @CodePen. Podcasts @ShopTalkShow. Married @jmm. Ran CSS-Tricks 2007-2022. I like it when you like things.
Bend, OR
Joined February 2007
Howdy folks, co-founder of @CodePen here. 🤘. Why would you, fellow front-end designer & developer, want a CodePen account? . Well it’s my job to make sure that has a clear answer, so I’m gonna thread 🧵 it up for ya to explore and understand.
41
42
353
I'm just extremely confused. Like the INTERNET COMPANY Google. The CLOUD SERVICES PROVIDER Google. The company who's success partially rests on us trusting them to DO THE WORLD WIDE WEB GOOD. Is like. domain names? Not for us. We're gonna let this WYSIWYG CMS handle that.
99
466
5K
my bank on phone: we need to verify your identity. me: ok.bank: we’re going to text you a secret code. me: ok.bank: what’s your number?.me: i think i’ve identified a small loophole in your security.
66
659
5K
hey mom that dumb website i started in your basement now has half a million twitter followers.
94
121
5K
Write the article you wish you found when you googled something.
39
1K
4K
I used to be all like. console.log("myVariable: ", myVariable);. and now I be all like. console.log({ myVariable });. cuz DevTools automatically logs it with the name then.
77
371
3K
I’d watch a documentary series of developers giving a tour of their codebases.
95
438
3K
You know like when your parents ask you a technology question and you don’t know the answer but you figure out and fix the problem anyway through troubleshooting?. That’s why you should apply to basically any job you want.
37
609
3K
Very clever CSS trickery here from Carter Li. If you declare a CSS Custom Property as an <integer>, then it can be interpolated as an integer. Meaning it can be animated!.
38
549
3K
LOOK. This is just a regular ol' website. No JavaScript whatsoever. Navigation pages with clicks <a> links to other HTML pages. The most basic website in the world. Yet, with a few lines of code to activate View Transitions, KAPOW.
48
311
3K
hey ive been a little busy this week ive started a new role in support
308
22
3K
CSS is the hardest language. 9 out of 10 tweets say so.
141
360
3K
Wanna get excited about Grid? How about this simple three-liner.
42
1K
2K
Just a little reminder that it’s about 100 times more important what you build than how you build it.
48
667
2K
Web archive data be like:.React: 5%.jQuery: 85%. Web jobs be like:.React: 85%.jQuery: 5%.
33
303
2K
If you really think it's more understandable to put a $ in docs for terminal commands, e.g. $ brew install buttnugget. then a UX touch is:. code.command::before {. content: "$ ";.}. so that I don't copy it when I copy the command and have it fail in the actual terminal.
39
226
2K
Ooooo I think this is clever. If you need to link to an SVG file rather than use inline <svg>, the temptation is to use it as a background-image. But if it’s single-color, you can use it as a `mask` instead, which makes changing the color way easier.
28
439
2K
the 2020 version of photoshop has rounded corners on the icon. the 2020 version of illustrator has square corners on the icon. that's all
182
172
2K
Just one of those little things about CSS you need to know. when styling links, you put the pseudos in this order:. :link (meh).:visited.:hover.:active.:focus. Otherwise, you might, say, override your hover style with your visited style.
30
327
2K
I totally still think of it as AJAX but you can’t actually say AJAX anymore or you sound 100.
104
93
2K
This --aspect-ratio thing is my favorite CSS trick in a hot minute. 🎩tip Thierry Koblentz & Sérgio Gomes
20
363
2K
I still think about how there are a bunchload of developers who exclusively use Sublime Text as a place to paste things.
179
58
2K
I'm learning all about "Serverless" 🏄🏽♂️🙅♂️. So naturally I made a website to explain what I know so far.
57
404
2K
Who’s gonna read your personal blog because it has an RSS feed? I’m gonna read your personal blog because it has an RSS feed.
104
153
2K
webpack not Webpack.WordPress not Wordpress.CodePen not Codepen.npm not NPM.Sass not SASS.Less not LESS.Eleventy not 11ty (unless referring to org).JavaScript not Javascript.Typekit not TypeKit.WebKit not Webkit.Gmail not GMail.Star Trek not Star Wars.
185
183
2K
Everything you learn about front-end development without using a framework is still useful while you are using a framework, or when the framework changes.
29
277
2K
I’m gonna launch a new @css site design tomorrow, kicking off a hopefully great new year. There is gonna be pink.
52
76
1K
I feel like I've photographed Bigfoot in the wild. A restaurant menu that isn't just _not a PDF_, but uses CSS columns for layout.
48
113
1K
I was unaware of `text-wrap: pretty;`. I knew about the (new/cool) `text-wrap: balance;` — but sometimes that's a bit. too much. I feel like it's nice on headers but not smaller type. Here's what I mean.
22
160
1K
coffeescript is cool because you can just write `if true` at the end of every line for extra flair and it’s totally fine
56
119
1K
It turns out that if you place 180 <hr>'s in the middle of the screen and rotate them all 1 degree more than the last, it rips open an interdimensional portal in spacetime. So if I seem smarter and more handsome lately, it's probably that it's another Chris from a higher plane.
42
130
1K
A good use case for Container Queries in CSS: A Weekly Events Calendar. Pen: 5 minutes on YouTube explaining:
14
199
1K
When I write JavaScript it just flows forth from my brain perfectly formed. I never look anything up or use trial and error. That’s how perfect it is and I am.
56
125
1K
The #1 word I delete in tech article drafts is "simply". I do think that word is a bit exclusionary in that it's very possibly someone reading doesn't find the task simple at all. But moreso, it just isn't needed in the sentence. It reads better without it.
84
213
1K
this is weird but I’m thinking nobody wants to hear virus opinions from some dude they learned a css trick from one time.
45
45
1K
That's pretty neat. Takes an image and makes one of those blurry placeholders from it, but the blurry placeholder is only like 20 characters long and renders to a <canvas>. So instead of showing nothing during lazyloading you could show a blurry image.
15
233
1K
JavaScript syntax proposal:. data?.item?.owner?.name. ===. data.item.owner.name???.
106
66
1K
I like this little touch of `transform: scale()`ing down the main content area once you've scrolled to the bottom to emphasize the footer area.
14
71
1K
Silly little trick that is useful sometimes. The `<br>` tag is like any other in that you can `display: none;` it if you like. If you do, it will stop breaking the text there. Example: an address where if the space is large enough to display inline.
30
193
1K
For 27 minutes, our Big Web Service was totally broken. An average programmer just like you pushed some shit code and broke it. They learned, but it’s totally going to happen again. Someone who knew what they were doing rolled out a fix when they got back from lunch. - Company.
35
188
1K
I forced a bot to watch over 1,000 hours of webdev Twitter and then asked it to write a webdev Twitter thread. Here is the first page.
49
256
1K
has your baby ever peed on something and you were gonna clean it up but you just put a towel on it for now then they peed on the towel so you put another towel over that quick . anyway z-index.
25
109
1K
GitHub Copilot is starting to regularly freak me out with useful code suggestions, but even MORE FREAKY is when it suggests actual CONTENT. I was just trying to write a little intro thingy here and it's like I GOT THIS.
37
108
1K
You people that can close a whole row of tabs without even looking at them. WHAT IF THERE IS LIFECHANGING INFORMATION on one of them?!.
109
181
1K
I still think this idea is funny and we should do it. What are some classic dev career achievements or rites of passage?
131
138
1K
Me: I’d like to style something.CSS: ok.Me: fine then.CSS: anytime.Me: i will.CSS: looking forward to it.Me: as am i .CSS: cool.
15
194
1K
Wanna see a 90-second speed run of on-page View Transitions?
21
118
1K
Did I mention on here we have posters for sale for CSS Flexbox and CSS Grid? Here's mine in my office. Flexbox: Grid: ✨ Which are designed by @lynnandtonic! ✨
26
125
1K
The specimen site for Korean fonts on Google Fonts is next level weird in the best possible way.
3
285
967
Me, a web developer, hiding under the bed:. Armed robber: . Me: . Armed robber: . Me: . Armed robber: why call it serverless when there are obviously still servers. Me: YOU THINK YOU’RE SO CLEVER. DON’T DISCOUNT A VERY REAL PARADIGM SHIFT BEC oh shit.
Me, an internet linguist, hiding under the bed: . Armed robber: . Me: . Armed robber: . Me: . Armed robber: ugh the kids these days and their emoji and their texting. Me: ACTUALLY INTERNET LANGUAGE IS VERY INTERESTING DO NOT UNDERESTIMATE---oh shit.
21
186
928
Chatted with someone who’s been working at a company as a front-end developer for 3 years. Their friend asked them to help build a website, but they had to decline. They didn’t know how.
82
125
893
im really honest so i'll tell you. sometimes i just put text right inside a <ul>. no <li>.
101
37
861
Stay tuned for my upcoming blog post: I Literally Don’t Care How You Apply Styles to DOM Nodes as Long As You and Your Team Feel Productive, Your Site Provides a Good Experience, and You Aren’t a Big Dillwad About It.
14
75
826
Hello friends of the web!. We reserved a big cool warehouse space in 🏙 Chicago and we're going to fill it with code art and smart people. The @CodePen World's Fair.
38
175
834
i accident left my phone at home before my parties today and i learned that i don’t *need* technology to have a. just kidding i almost died.
23
783
808
HTML should have an attribute for <textarea> that allows them to auto grow with content. But until then (if we ever get that), with basically ONE line of JavaScript (to sync values) you can make it happen.
21
113
837
current status I just typed `yarn install` and the lady next to me started knitting.
22
76
810
HTML is the very first file that comes across from servers that browsers parse do the rest of the work needed to build the site. That _firstness_ is unique to HTML and a vital part of making websites fast.
19
153
801
Just saw a post that recommended projects you could to level up your front-end skills. Every single one was related to a JavaScript framework. Totally cool, I love JavaScript frameworks too, but the job of front-end is wider than that.
10
192
791
What are the LOWEST hanging fruit of web performance? Nothing fancy, anyone can do, big impact. Gzip. Optimize stuff. Reduce requests. What are other big ones?.
221
149
792
"I'm a web designer.". they picture: something like photo. my actual job: [works for a month to polish a small feature that has already exited for 5 years based on scattered user feedback, team dynamics, and long-learned intuition. mostly no one even notices.]
15
99
762
hows your day going? Fine fine fine fine FINE fine Fine Fine FniNE fine.
30
95
764
Need a reminder of just how much CSS is super powerful and brand new just in the last. about a year?. (Some a bit older, browser support varies from super solid to just one browser.)
14
103
774
What's the first thing you think of when you think of "Developer Experience" (DX)?.
597
85
749
Are typeset blog posts too hard for you to read? Here's a script to turn them into a . 🌩 tweetstorm 🌩.
31
216
722
Do you have an app where you basically use it as a place to paste things when you don't trust the formatting of what you have on your clipboard?.
433
23
739
Now this is the kind of article about CSS grid we've been waiting for. Strong, interesting, relatable, well-designed examples.
2
143
718
The LinkedIn Messages UI is funny to me. Where should we put our Avatar+Name UI? THREE TIMES IN A ROW SEEMS GOOD.
19
31
706
is a @gatsbyjs site on @netlify . All the content is in Markdown files in a public @github repo. Yet, I can manage all the content right from the site itself like a CMS, because @NetlifyCMS. 🆒 . All the changes become git commits or PRs.
13
110
696
Danng. nivo is super impressive. Charts and calendars and stuff, via d3, but as React components. Hecka nice docs
4
152
683
The new edit-both-opening-and-closing tag thing we have in @CodePen is mighty handy. (Works in JSX, too.)
28
115
659
wow spammer/hacker pull requests on GitHub that inject GitHub Actions and try to report out secrets. neeeeat. (This is v bad.).
24
182
664
If you're into CSS trickery, check out @fcorradini idea on using logic to set text to white or black depending on the background color entirely in CSS.
3
172
660
holy shit. WHAT technology did # use to build this site? I don't think you can even do this in Figma.
59
32
652
Got the new office pretty dialed in, pretty slick right? The next change is when the sound dampener things come in for the walls/ceiling (the glass ain’t great for echo).
52
7
658
Those classy little screenshots of syntax highlighted code in fake windows?. That's this site:
9
111
626
It’s my birthday today!. An awesome present for me would be for you to take a minute to lift someone up in this world.
73
34
611