Chris Coyier @chriscoyier Twitter profile

Pinned Tweet

Chris Coyier

2 years

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.

47

44

366

Last Seen Profiles

@senelfoto

@TonyTBolt

@stw_pdg

@genjisms

@ww42377382

@Asacoco_Enjoyer

@sofiamadero95

@KRSPG02

@mpcdmagazine

@Sonar_Games

@BrittneyODell

@aaapatcanadians

@Charles03uwu

@doctorapla

@Rao_Cash

@Sonumeena34

@GrimReaperGag

@coreloopai

@MarkSicklesVA

@annacristi66

@Crimsonthorns12

@FakeAnanas

@umezawa0902

@wrightonft1209

@SissyKaren

@mewtrition

@bijoubones

@beto3mil

@BARSFORYEARS96

@ZLOVE_theGOAT

@FENDlMINAJ

@dong_keyu

@BBCArdalan

@SHESHE1313

@2630752950s

@banknotecisco

Chris Coyier

@chriscoyier

11 months

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.

104

496

6K

Chris Coyier

@chriscoyier

5 years

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

74

698

5K

Chris Coyier

@chriscoyier

3 years

hey mom that dumb website i started in your basement now has half a million twitter followers.

97

128

5K

Chris Coyier

@chriscoyier

7 years

Write the article you wish you found when you googled something.

39

1K

4K

Chris Coyier

@chriscoyier

6 years

who called it a front-end dev and not a diveloper

98

749

4K

Chris Coyier

@chriscoyier

6 years

Serverless.

26

1K

3K

Chris Coyier

@chriscoyier

4 years

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.

82

398

4K

Chris Coyier

@chriscoyier

5 years

I’d watch a documentary series of developers giving a tour of their codebases.

100

459

3K

Chris Coyier

@chriscoyier

5 years

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.

39

648

3K

Chris Coyier

@chriscoyier

1 year

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.

50

329

3K

Chris Coyier

@chriscoyier

4 years

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!

41

574

3K

Chris Coyier

@chriscoyier

7 years

hey ive been a little busy this week ive started a new role in support

339

24

3K

Chris Coyier

@chriscoyier

4 years

CSS is the hardest language. 9 out of 10 tweets say so.

146

381

3K

Chris Coyier

@chriscoyier

7 years

Wanna get excited about Grid? How about this simple three-liner.

43

1K

2K

Chris Coyier

@chriscoyier

3 years

I redesigned my website.

169

110

2K

Chris Coyier

@chriscoyier

6 years

Just a little reminder that it’s about 100 times more important what you build than how you build it.

52

697

2K

Chris Coyier

@chriscoyier

4 years

Web archive data be like: React: 5% jQuery: 85% Web jobs be like: React: 85% jQuery: 5%

38

315

2K

Chris Coyier

@chriscoyier

3 years

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.

42

245

2K

Chris Coyier

@chriscoyier

2 years

I'm a little obsessed with the idea of previous sibling selectors. @CodePen

27

211

2K

Chris Coyier

@chriscoyier

5 years

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.

29

461

2K

Chris Coyier

@chriscoyier

4 years

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

192

182

2K

Chris Coyier

@chriscoyier

6 years

I got a baller new Twitter handle for CSS-Tricks... did ya see? @css

151

112

2K

Chris Coyier

@chriscoyier

4 years

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.

32

344

2K

Chris Coyier

@chriscoyier

3 years

I totally still think of it as AJAX but you can’t actually say AJAX anymore or you sound 100

113

98

2K

Chris Coyier

@chriscoyier

1 year

Modern CSS is so cool.

63

205

2K

Chris Coyier

@chriscoyier

6 years

This --aspect-ratio thing is my favorite CSS trick in a hot minute. 🎩tip Thierry Koblentz & Sérgio Gomes

20

377

2K

Chris Coyier

@chriscoyier

2 years

I still think about how there are a bunchload of developers who exclusively use Sublime Text as a place to paste things.

190

65

2K

Chris Coyier

@chriscoyier

6 years

I'm learning all about "Serverless" 🏄🏽‍♂️🙅‍♂️ So naturally I made a website to explain what I know so far.

59

416

2K

Chris Coyier

@chriscoyier

4 years

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.

113

166

2K

Chris Coyier

@chriscoyier

3 years

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

195

189

2K

Chris Coyier

@chriscoyier

5 years

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

296

2K

Chris Coyier

@chriscoyier

5 years

I’m gonna launch a new @css site design tomorrow, kicking off a hopefully great new year. There is gonna be pink.

58

81

2K

Chris Coyier

@chriscoyier

5 years

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.

49

115

2K

Chris Coyier

@chriscoyier

10 months

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.

24

167

2K

Chris Coyier

@chriscoyier

4 years

coffeescript is cool because you can just write `if true` at the end of every line for extra flair and it’s totally fine

60

123

1K

Chris Coyier

@chriscoyier

4 years

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.

45

139

1K

Chris Coyier

@chriscoyier

6 years

Sorry sorry . sorry.

41

275

1K

Chris Coyier

@chriscoyier

1 year

A good use case for Container Queries in CSS: A Weekly Events Calendar Pen: 5 minutes on YouTube explaining:

14

205

1K

Chris Coyier

@chriscoyier

5 years

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.

58

135

1K

Chris Coyier

@chriscoyier

5 years

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.

87

230

1K

Chris Coyier

@chriscoyier

4 years

this is weird but I’m thinking nobody wants to hear virus opinions from some dude they learned a css trick from one time

49

50

1K

Chris Coyier

@chriscoyier

4 years

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.

16

251

1K

Chris Coyier

@chriscoyier

3 years

JavaScript syntax proposal: data?.item?.owner?.name === data.item.owner.name???

110

67

1K

Chris Coyier

@chriscoyier

2 years

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.

16

75

1K

Chris Coyier

@chriscoyier

2 years

This is what HTML classes are now.

77

114

1K

Chris Coyier

@chriscoyier

4 years

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.

32

197

1K

Chris Coyier

@chriscoyier

5 years

9

237

1K

Chris Coyier

@chriscoyier

7 years

"You've visited this page many times."

58

168

1K

Chris Coyier

@chriscoyier

5 years

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

39

201

1K

Chris Coyier

@chriscoyier

2 years

26

91

1K

Chris Coyier

@chriscoyier

6 years

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.

51

271

1K

Chris Coyier

@chriscoyier

6 years

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

26

114

1K

Chris Coyier

@chriscoyier

3 years

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.

39

111

1K

Chris Coyier

@chriscoyier

5 years

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?!

115

187

1K

Chris Coyier

@chriscoyier

5 years

Heyyyy it’s the 12th birthday of CSS-Tricks.

The Twelfth Fourth | CSS-Tricks

CSS-Tricks is 12 years old! Firmly into that Early Adolescence stage, I'd say ;) As we do each year, let's reflect upon the past year. I'd better have

css-tricks.com

64

93

1K

Chris Coyier

@chriscoyier

5 years

I still think this idea is funny and we should do it. What are some classic dev career achievements or rites of passage?

144

143

1K

Chris Coyier

@chriscoyier

7 years

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

205

1K

Chris Coyier

@chriscoyier

7 months

Wanna see a 90-second speed run of on-page View Transitions?

22

120

1K

Chris Coyier

@chriscoyier

7 years

I made a thing to experiment with shape morphing quickly (powered by @greensock plugin).

23

360

1K

Chris Coyier

@chriscoyier

4 years

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 ! ✨

28

132

1K

Chris Coyier

@chriscoyier

6 years

The specimen site for Korean fonts on Google Fonts is next level weird in the best possible way.

4

298

1K

Chris Coyier

@chriscoyier

5 years

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

Gretchen McCulloch @gretchenmcc.bsky.social

@GretchenAMcC

5 years

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

18

207

1K

21

192

987

Chris Coyier

@chriscoyier

5 years

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.

88

133

963

Chris Coyier

@chriscoyier

5 years

should i use wordpress or react hooks

100

81

943

Chris Coyier

@chriscoyier

4 years

im really honest so i'll tell you. sometimes i just put text right inside a <ul>. . no <li>.

108

38

922

Chris Coyier

@chriscoyier

3 years

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

17

80

912

Chris Coyier

@chriscoyier

6 years

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

41

195

898

Chris Coyier

@chriscoyier

10 years

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

24

836

884

Chris Coyier

@chriscoyier

4 years

Super cool CSS trick from @nealemvf . You can pull of motion blur on a transition!

9

116

888

Chris Coyier

@chriscoyier

3 years

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.

22

121

885

Chris Coyier

@chriscoyier

5 years

current status I just typed `yarn install` and the lady next to me started knitting

23

82

885

Chris Coyier

@chriscoyier

4 years

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.

22

167

865

Chris Coyier

@chriscoyier

6 years

Oat the Goat :: Gosh websites can do cool things. Hm.

17

203

859

Chris Coyier

@chriscoyier

5 years

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.

(Other) Projects you can do to Become a Front-End Master in 2020

I love this post by Simon Holdorf. He's got some ideas for you to level up your skills as a front-end...

dev.to

11

204

848

Chris Coyier

@chriscoyier

6 years

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?

237

154

822

Chris Coyier

@chriscoyier

5 years

"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.]

17

106

825

Chris Coyier

@chriscoyier

6 years

hows your day going? Fine fine fine fine FINE fine Fine Fine FniNE fine.

35

101

826

Chris Coyier

@chriscoyier

6 months

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

111

819

Chris Coyier

@chriscoyier

4 years

I’m 40.

For myself, when I read this many years from now. I woke up and Miranda had decorated the kitchen with giant 3-foot shiny golden balloons: 40! There was an incredibly lovely cake from Sparrow Baker…

chriscoyier.net

171

17

800

Chris Coyier

@chriscoyier

7 years

Are typeset blog posts too hard for you to read? Here's a script to turn them into a 🌩 tweetstorm 🌩

35

236

779

Chris Coyier

@chriscoyier

4 years

What's the first thing you think of when you think of "Developer Experience" (DX)?

629

88

779

Chris Coyier

@chriscoyier

3 years

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?

472

23

793

Chris Coyier

@chriscoyier

3 years

maybe the wrong color and icon dot tumblr dot tired

33

66

779

Chris Coyier

@chriscoyier

6 years

Now this is the kind of article about CSS grid we've been waiting for. Strong, interesting, relatable, well-designed examples.

2

151

770

Chris Coyier

@chriscoyier

4 years

The @emmetio upgrade we rolled out on @CodePen is pretty sweet. The most noticeable feature is probably the HTML previews. But it also now works in the Vue SFC editor, JSX, and has a handful of other new features.

12

126

764

Chris Coyier

@chriscoyier

2 years

The LinkedIn Messages UI is funny to me. Where should we put our Avatar+Name UI? THREE TIMES IN A ROW SEEMS GOOD.

23

32

762

Chris Coyier

@chriscoyier

3 years

I didn't know about `console.count()`, that's cool.

12

119

757

Chris Coyier

@chriscoyier

7 years

Danng. nivo is super impressive. Charts and calendars and stuff, via d3, but as React components. Hecka nice docs

4

158

730

Chris Coyier

@chriscoyier

5 years

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.

14

111

732

Chris Coyier

@chriscoyier

6 years

A framework doesn’t make your site fast. You do that.

22

177

734

Chris Coyier

@chriscoyier

7 years

The new edit-both-opening-and-closing tag thing we have in @CodePen is mighty handy. (Works in JSX, too.)

31

119

711

Chris Coyier

@chriscoyier

3 years

wow spammer/hacker pull requests on GitHub that inject GitHub Actions and try to report out secrets. neeeeat. (This is v bad.)

25

191

705

Chris Coyier

@chriscoyier

6 years

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.

4

181

702

Chris Coyier

@chriscoyier

8 months

holy shit. WHAT technology did # use to build this site? I don't think you can even do this in Figma.

65

31

693

Chris Coyier

@chriscoyier

3 years

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).

58

7

696

Chris Coyier

@chriscoyier

6 years

3D iMac effect. Neeeaaattt.

6

103

678

Chris Coyier

@chriscoyier

6 years

Those classy little screenshots of syntax highlighted code in fake windows? That's this site:

10

124

667

Chris Coyier

@chriscoyier

6 years

Wanna get started with Vue? Watch @sarah_edo teach me, and by extension, you. 🤟🏼

#159: Learning Vue | CSS-Tricks

Sarah Drasner and I dig into Vue! Vue is a very popular JavaScript framework that is absolutely exploding. Sarah is on the core team and is about the most

css-tricks.com

11

132

658

Chris Coyier

@chriscoyier

8 months

Playing with @astrodotbuild v3 for the view transition glory.

22

39

661

Chris Coyier

@chriscoyier

5 years

I’m supposed to be on a plane to London for @jamstackconf - but instead I crashed my bike and broke both my arms. Both! It sucks! Nothing gross, but fractures at elbows and wrists. I can barely do a damn thing. Fortunately my angel @jmm has me well taken care of.

318

7

656