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

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

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.

video/mp4

chriscoyier,
@chriscoyier@front-end.social avatar

Code is here:
https://codepen.io/chriscoyier/project/editor/ZGxnOb

View Transitions don't work in iframes yet, so you have to see here:
https://000694252.codepen.website/

And you have to use Chome Canary and flip on the flag.

chriscoyier,
@chriscoyier@front-end.social avatar

@keithjgrant you get the crossfade by default unless you've got an element with a unique view-transition-name on both the outgoing and incoming pages.

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

If you’re looking to have nested DOM elements all participate on the same CSS grid, you’ve got Subgrid, but that just inherits grid lines. display: contents; can help put the elements on the same parent grid. https://chriscoyier.net/2023/05/11/if-youre-looking-to-have-nested-dom-elements-all-participate-on-the-same-css-grid-youve-got-subgrid-but-that-just-inherits-grid-lines-display-contents-can-help-put-the-elements-on-the-same/

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

"I just need a really fast, really simple website."

My answer will probably always be: then code something up quick in HTML & CSS. Pleasurable and productive!

But I get that's not right for all. The "dead simple, drag & drop websites" of https://build.mmm.page/ is probably my secondary answer.

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

I’m not saying “they’re the same” I’m saying, somehow someway, babies and Snoop Dogg keep coming up with funky ass shit nearly every single day.

TrentWalton, to random
@TrentWalton@mastodon.social avatar

Look forward to adding to the v slim list of acronyms I actually dig next week. BOTW -> TOTK

chriscoyier,
@chriscoyier@front-end.social avatar

@beep @TrentWalton I’m in.

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

Neither Windows or macOS support High Dynamic Range colors in their native color pickers. Who will update first?! Race!

Signed,
— Some dude who just wants to pick some sweet colors in a Keynote.

Microsoft PowerTools docs saying "Currently Wide Color Gamut (WCG) and High Dynamic Range (HDR) color formats are not supported."

chriscoyier,
@chriscoyier@front-end.social avatar

@jensimmons oooo that works! you can even make a re-usable swatch for it on the Color Palettes area.

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

My book "Practical SVG" is 25% off right now! Very rare sale from A Book Apart.

https://abookapart.com/products/practical-svg

Me, I've got literally every single book ABA has ever published. Lots of knowledge in their extensive lineup.

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

"It’s never been so easy to create incredibly polished mockups" says Erica Heinz, but it's problematic. For one, "people perceive more aesthetically pleasing interfaces as more intuitive or usable (whether they are or not)."

Give it the Craigslist Test! https://ericaheinz.com/notes/give-it-the-craigslist-test/

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

Modern.js https://github.com/web-infra-dev/modern.js

A new...thing? Tyler Mcginnis calls it "a giant mystery meat enchilada." Them:

• Framework (React, so like Next or Remix?)
• Module (A poke at Vite?)
• Doc (A theme for the framework, I guess)
• Builder (A different poke at Vite?)

Weird.

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

Errrrrybody gets KV storage!

Cloudflare did it (first?): https://developers.cloudflare.com/workers/learning/how-kv-works/

Deno just dropped it... last week? https://deno.com/manual@v1.32.4/runtime/kv

Vercel dropped today: https://vercel.com/blog/vercel-storage#vercel-kv-a-durable-redis-database

It's a super cool way to store simple data to grab and act on fast. 🎉

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

These straws are edible (suck it, paper straws) and taste a bit like light strawberry pez making them as close to perfection a thing can be.

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

The dumb little app where I type my dumb little sentences that I like is better than the dumb little app where you type your dumb little sentences that you like.

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

Modern CSS is so cool.

chriscoyier,
@chriscoyier@front-end.social avatar

I think I used margin-trim wrong there, I think you actually apply it to the parent.

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

Waiting for headlines about how web searches are now sent through so many AI models the energy consumption is worse than crypto.

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