@chriscoyier@front-end.social avatar

chriscoyier

@chriscoyier@front-end.social

Co-Founder of CodePen

This profile is from a federated server and may be incomplete. Browse more on the original instance.

bw, to random
@bw@social.lol avatar

I’m working on a beginner HTML tutorial series and I’m just finding out that YouTube embeds won’t work in a non-ssl context like a local web server.

Do I have any good option for getting around this? I’m not gonna make a beginner deal with self-signed certs.

chriscoyier,
@chriscoyier@front-end.social avatar

@bw maybe use <lite-youtube> - also has complications but better practice anyway

scott, to random
@scott@typetura.social avatar

@chriscoyier @codepen Feature request: have a run button present even when auto-run on save is enabled so I don’t have to refresh the page or add/delete a space to see an animation again.

chriscoyier,
@chriscoyier@front-end.social avatar

@noleli @scott @codepen Right, it's ⌘⇧7 to "Re-run Preview"

I hear the feedback though, wanting the button even with auto-run on.

chriscoyier, to random
@chriscoyier@front-end.social avatar

I wouldn't doubt there will be a legit medical condition where the proliferation of AI causes people to question everything they see and read to the point of serious mental trouble. Not that questioning things is bad, I mean to the point that you are unable to believe anything.

chriscoyier,
@chriscoyier@front-end.social avatar

@brandon Fair enough, I know plenty of folks already who believe everything they read or hear and it's cringe at best and dangerous at worst.

chriscoyier, to random
@chriscoyier@front-end.social avatar

Looking at People

At one time I got interested in the "eye contact", or lack of it, on video calls. I was going to present at an online conference, and I wanted people watching to have it look like I was looking right at them. Plus, possibly even more importantly, one-on-one calls with people. I ended up buying a teleprompter (this one…

https://chriscoyier.net/2024/05/07/looking-at-people/

chriscoyier, to random
@chriscoyier@front-end.social avatar

I sort of like the idea of a Web Component where it's only job is popping in some (scoped) CSS around an element.

e.g. https://codepen.io/chriscoyier/pen/pomzrKv

But ehhhh it's not that different from just like having a class that does that job. But it's distributable, so that's something.

chriscoyier, to random
@chriscoyier@front-end.social avatar

Maybe we can get an interesting thread of examples here.

Less than 10 second videos of @container queries in action on websites.

Go!

chriscoyier,
@chriscoyier@front-end.social avatar

The Line and Column information here collapse to Ln / Col when space is very constrained.

Example: Line: 1, Column 36 collapses to Ln 1, Col 36

chriscoyier,
@chriscoyier@front-end.social avatar

A tiny bit of space is reclaimed for text here when the custom radio buttons are pushed a bit out of their container when space is tight.

video/mp4

chriscoyier,
@chriscoyier@front-end.social avatar

The green buttons in here on the right of these boxes fall down to the bottom when the line length of the text would otherwise get too squished.

video/mp4

chriscoyier,
@chriscoyier@front-end.social avatar

This advertisement is another classic "card" style that collapses from 2 to 1 column when the space it has available isn't enough for 2.

video/mp4

chriscoyier,
@chriscoyier@front-end.social avatar

What do y'all got?? Any example would be great, even if it's not done by your or your team.

chriscoyier,
@chriscoyier@front-end.social avatar

This "feature matrix" (table) picks up horizontal scrolling and scroll snap points when it is in a small container where that's needed.

video/mp4

chriscoyier,
@chriscoyier@front-end.social avatar

Here the "title" can use a little cqi to size based on inline size available, and the smaller text just has two mini container breakpoints.

video/mp4

chriscoyier,
@chriscoyier@front-end.social avatar

@develwithoutacause that would be amazing to trigger on wrap but that’s not quite possible in CSS yet, at least without trickery I’m not yet aware of

chriscoyier, to random
@chriscoyier@front-end.social avatar

This one goes out to the guy who added his own creative bleacher stomping pattern while we clapped along to The Final Countdown, which a little girl chose as the song to fold a paper origami crane to at the school talent show.

chriscoyier, to random
@chriscoyier@front-end.social avatar

New Pearl Jam rips. ⭐️⭐️⭐️⭐️🐴. Big energy. Play loud. Cover is obvious bid to play at The Sphere. Could use a few more catchy bits.

chriscoyier, to random
@chriscoyier@front-end.social avatar

Ah yes, Monday. The day that my computer tells me there is a new version of Java!!! I try to install it to get it to shut up and it fails. See you next Monday.

image/png
image/png
image/png

chriscoyier, to random
@chriscoyier@front-end.social avatar

Untitled

If you long for a web of yore were things were better, somehow: The thing is: none of this is gone. Nothing about the web has changed that prevents us from going back. If anything, it's become a lot easier. We can return. Better, yet: we can restore the things we loved about the old web while incorporating the wonderful things that have emerged since, developing even better things as we go forward, and leaving behind some things from the early web days we all…

https://chriscoyier.net/2024/05/03/11348/

castastrophe, to random
@castastrophe@front-end.social avatar

@chriscoyier Rumor has it there's beta access available to test the new Codepen? I'd be very interested! https://codepen.io/castastrophe

chriscoyier,
@chriscoyier@front-end.social avatar

@castastrophe let’s do it! Can you shoot me a quick email at chris@codepen.io?

kizu, to CSS
@kizu@front-end.social avatar

Spatial navigation¹ and reading-order² in when?

Especially, reading-order should be implemented by all browsers before masonry or any other additions to layout.

  1. https://drafts.csswg.org/css-nav-1/
  2. https://drafts.csswg.org/css-display-4/#reading-order-items
chriscoyier,
@chriscoyier@front-end.social avatar

@simevidas @kizu spicy take: we almost don't need masonry at all if we can just set elements to flow into auto columns and make the tabbing order mimic visual.

chriscoyier, to random
@chriscoyier@front-end.social avatar

you just know that second e in entrée thinks it so much better than the other e's. like its parents let it drink wine at age 11 and wants to know if you want to ride horses sometime

chriscoyier, to random
@chriscoyier@front-end.social avatar

I like the effect of changing text but not changing the amount of space that text takes up naturally (no reflow).

https://codepen.io/chriscoyier/pen/zYXQEEX

video/mp4

chriscoyier, to random
@chriscoyier@front-end.social avatar

Strum Machine

I mostly play old time and bluegrass music. Particularly in old time and fiddle songs, the songs have a fairly rigid and repetitious structure. That's not to say players don't do interesting things with it, but unless a song is intentionally crooked, the structure of the song remains the same throughout. A typical structure is AABB. That is, play the "A part" twice, play the "B part" twice, and repeat.

https://chriscoyier.net/2024/04/30/strum-machine/

chriscoyier,
@chriscoyier@front-end.social avatar

@anniegreens I haven’t but only because summers are so packed. Everybody I play with has gone! Well regarded

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • provamag3
  • rosin
  • tacticalgear
  • Durango
  • DreamBathrooms
  • mdbf
  • magazineikmin
  • thenastyranch
  • Youngstown
  • khanakhh
  • slotface
  • vwfavf
  • everett
  • kavyap
  • megavids
  • osvaldo12
  • modclub
  • GTA5RPClips
  • ethstaker
  • InstantRegret
  • cisconetworking
  • cubers
  • ngwrru68w68
  • tester
  • normalnudes
  • Leos
  • anitta
  • JUstTest
  • All magazines
    •