Bodysurfing

Goals

• As immersive a layout as possible on all devices. Big splash widescreen for computers and nicely cropped tall vertical for phones.
• Fast loading. Is a perfect lighthouse score possible for a media-heavy article?
• Something that looks awesome and makes Joe feel like a rockstar.
• Good inspiration for future photo albums or photo-heavy narratives.

Things To Figure Out

Editorial:

• Pick out and edit photos.
• Finalize writing and links.
• Manual cropping/reformating of images into tall, square, wide.
• Convert into multiple formats: AVIF and JPG
• Any cool video to add, vertical or otherwise?

Dev:

• Finish creating CSS grid for full-bleed image spread (my test file) and remember to check vh limits for different viewport heights.
• Can you do widths instead of pixel density in <source> within <picture> like you can with srcset in <img>? And does that mean I can use the sizes="auto" to skip some cruft?
  • Possibly helpful links: auto sizing and HN post on responsive images. Also see Mozilla’s rundown on responsive images which makes it sound like just doing pixel density is the easiest, since you don’t have to provide sizes. That’s if you’re doing multiple formats with <picture>, whereas the even lazier option is to just do square formats with sizes="auto" and provide the widths of various options, let the browser figure out which one’s the biggest one it can handle, with the default width and height set to the largest size available.
• Don’t forget to add lazy loading and async decoding to images that are lower down.
• Should I use MDX components to abstract out the image variants? Bonus: can it take a single standardized file name and make all of the format variations?

Design:

• Text treatment (big blockquotes?) which also means figure out MDX vs Astro (should be MDX, it’s a nicer writing and experience)
• Create a cover photo and splash like in my previous splashy articles? With CSS background images?

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Sed posuere consectetur est at lobortis.

Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum.

Fringilla Ullamcorper Quam

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor.