Chris Coyier
@chriscoyier
Followers
237K
Following
35K
Media
2K
Statuses
40K
Co-founder @CodePen. Podcasts @ShopTalkShow. Married @jmm. Ran CSS-Tricks 2007-2022. I like it when you like things.
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.
42
41
358
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.
97
447
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.
65
638
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.
37
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.
75
354
3K
I’d watch a documentary series of developers giving a tour of their codebases.
92
427
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
592
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
532
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.
47
308
3K
hey ive been a little busy this week ive started a new role in support
300
22
3K
CSS is the hardest language. 9 out of 10 tweets say so.
136
353
3K
Wanna get excited about Grid? How about this simple three-liner.
41
984
2K
Just a little reminder that it’s about 100 times more important what you build than how you build it.
47
648
2K
Web archive data be like:.React: 5%.jQuery: 85%. Web jobs be like:.React: 85%.jQuery: 5%.
32
293
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.
35
219
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.
27
426
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
174
170
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.
29
319
2K
I totally still think of it as AJAX but you can’t actually say AJAX anymore or you sound 100.
100
89
2K
This --aspect-ratio thing is my favorite CSS trick in a hot minute. 🎩tip Thierry Koblentz & Sérgio Gomes
19
353
2K
I still think about how there are a bunchload of developers who exclusively use Sublime Text as a place to paste things.
172
56
2K
I'm learning all about "Serverless" 🏄🏽♂️🙅♂️. So naturally I made a website to explain what I know so far.
51
393
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.
103
147
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.
182
181
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.
28
268
2K
I’m gonna launch a new @css site design tomorrow, kicking off a hopefully great new year. There is gonna be pink.
50
74
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.
47
110
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
156
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
54
116
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.
39
128
1K
A good use case for Container Queries in CSS: A Weekly Events Calendar. Pen: 5 minutes on YouTube explaining:
14
197
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.
55
122
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.
82
205
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.
43
44
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
223
1K
JavaScript syntax proposal:. data?.item?.owner?.name. ===. data.item.owner.name???.
99
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.
29
188
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.
34
181
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.
45
244
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.
36
106
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.
24
107
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?!.
106
179
1K
I still think this idea is funny and we should do it. What are some classic dev career achievements or rites of passage?
127
133
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.
14
187
986
Wanna see a 90-second speed run of on-page View Transitions?
21
116
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! ✨
25
124
982
The specimen site for Korean fonts on Google Fonts is next level weird in the best possible way.
3
273
954
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
180
919
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.
81
125
880
im really honest so i'll tell you. sometimes i just put text right inside a <ul>. no <li>.
98
37
849
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
72
802
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.
37
170
821
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.
22
753
799
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
106
825
current status I just typed `yarn install` and the lady next to me started knitting.
19
76
793
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
148
789
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.
9
184
779
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?.
214
147
772
"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
94
743
hows your day going? Fine fine fine fine FINE fine Fine Fine FniNE fine.
28
91
745
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.)
13
101
759
What's the first thing you think of when you think of "Developer Experience" (DX)?.
584
83
737
Are typeset blog posts too hard for you to read? Here's a script to turn them into a . 🌩 tweetstorm 🌩.
29
209
711
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?.
417
23
721
Now this is the kind of article about CSS grid we've been waiting for. Strong, interesting, relatable, well-designed examples.
2
138
708
The LinkedIn Messages UI is funny to me. Where should we put our Avatar+Name UI? THREE TIMES IN A ROW SEEMS GOOD.
19
30
691
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
109
690
Danng. nivo is super impressive. Charts and calendars and stuff, via d3, but as React components. Hecka nice docs
4
150
671
The new edit-both-opening-and-closing tag thing we have in @CodePen is mighty handy. (Works in JSX, too.)
27
112
645
wow spammer/hacker pull requests on GitHub that inject GitHub Actions and try to report out secrets. neeeeat. (This is v bad.).
24
174
656
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
169
647
holy shit. WHAT technology did # use to build this site? I don't think you can even do this in Figma.
59
28
646
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
649
Those classy little screenshots of syntax highlighted code in fake windows?. That's this site:
8
109
614
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.
71
34
601