@colepeters@mastodon.online
@colepeters@mastodon.online avatar

colepeters

@colepeters@mastodon.online

Sound & visual artist; recent works on LINE, Park70, and Room40. Design engineer by trade; currently working on https://fosstodon.org/@enhance_dev. Also a hardcore Japanese tea nerd.

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

colepeters, to webdev
@colepeters@mastodon.online avatar

🎉 After a year of off and on hacking, I'm so excited to say that Enhance Image is now available as a public beta!

Enhance Image makes authoring responsive images in @enhance_dev projects easy via a custom element with a streamlined, standards based syntax, and a configurable, on demand image transformation service, which eliminates a ton of manual labour and speeds up iteration cycles.

Get all the details here: https://begin.com/blog/posts/2024-03-12-introducing-enhance-image

colepeters, to music
@colepeters@mastodon.online avatar

It's only February but I'm pretty sure I already know this will be my album of the year for 2024.

Kali Malone — All Life Long https://kalimalone.bandcamp.com/album/all-life-long

colepeters, to webdev
@colepeters@mastodon.online avatar

We (the Begin crew) are making an effort to get back to personal blogging this month.

I’m out the gate with this, ‘Patterns for Style Composition in HTML and Web Components,’ in which I summarize my approach to writing CSS for component driven architectures delivered via the wonderful, beautiful web platform.

https://normalflow.pub/posts/2024-02-08-patterns-for-style-composition-with-html-and-web-components

colepeters, to webdev
@colepeters@mastodon.online avatar

I've been doing a lot of digging into the specs for srcset and sizes for the Image element while working on a custom element to make responsive images easier to work with. There's so much misalignment between expectations and reality with these. 🧵

colepeters,
@colepeters@mastodon.online avatar

As far I can tell, sizes was always intended to be used to provide hints to the client as to which source image from srcset should be selected based on media conditions. So sizes are suggestions, not directives.

However, clients seem to take much more into account than just viewport widths when evaluating sizes which use width descriptors. As far I can tell, they also evaluate the current display's pixel density. Which makes some sense, but also isn't surfaced clearly to authors.

colepeters,
@colepeters@mastodon.online avatar

Even MDN's example of using srcset and sizes doesn't quite describe the implementation behaviour correctly. Given the sizes attribute they've authored in this example, and given this 360px wide viewport I'm using, the 200px image should be used. But, presumably because I'm on a high density display, the 400px image is used. Which is not what they describe as the implementation.

(Screenshot captured from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#using_the_srcset_and_sizes_attributes)

colepeters, to random
@colepeters@mastodon.online avatar

Sound artists/musicians looking for a Bandcamp alternative, this looks pretty rad: https://simonrepp.com/faircamp/ (h/t @tbeseda)

I wanna get something similar going with @enhance_dev as well. Hopefully later this year!

knowler, to random

Preventing sumbit on forms will not work.

colepeters,
@colepeters@mastodon.online avatar

@knowler I tried to prevent sumbit on my from and got an arrarr

colepeters, to CSS
@colepeters@mastodon.online avatar

This shouldn't be considered a spicy take but for some maybe it is:

Custom element tag names are an exceptionally good hook for style encapsulation. No shadow DOM required.

colepeters,
@colepeters@mastodon.online avatar

@scottjehl Take a look at what @knowler has been up to for more on this! https://sunny.garden/@knowler/111415556102060348

knowler, to CSS

I know that style queries probably need a container to avoid looping situations, but couldn’t there just be some rule that you can’t style the property being queried? I guess that still wouldn’t solve the problem since you could have multiple style queries affecting each other. Seems like a solvable problem though with some rules, like maybe style queries don’t run for properties that are the result of another style query?

colepeters,
@colepeters@mastodon.online avatar

@knowler Whenever I see you asking these questions I think ‘I'm glad Nathan is thinking about this so I can pick his brain once he figures it out' because holy moly you're way ahead of me on this 😂

colepeters,
@colepeters@mastodon.online avatar

@knowler Yes! I love this feeling that we're slowly getting back to a standards based community of people all exploring different nooks and crannies of the platform to make things better :)

Also, this pen is super interesting, I’m gonna have to spend some time really processing it. On first glance it's really fascinating though!

colepeters,
@colepeters@mastodon.online avatar

@knowler Definitely interested to read this article when it's out! For myself I've found that custom element tag names work extremely work to scope styles, but perhaps there's more 'hardening' as you say that could be required in certain contexts? I'm really curious about what cascade layers would bring on top of this!

colepeters,
@colepeters@mastodon.online avatar

@knowler Ahh yes, your point about hostile environments makes a lot of sense to me, having worked in a few of those. Especially given WordPress still powers such a massive slice of the web!

colepeters, to random
@colepeters@mastodon.online avatar

My favourite annual listicle has landed, and it’s epic.

Jimi Hallowe’en is a Japanese festival in which people dress up in costumes so mundane, they have to be explained.

‘That passenger who is very likely getting off at the next stop, opening up a seat’ might be my fave this year

https://www.spoon-tamago.com/jimi-mundane-halloween-2023/

colepeters, to random
@colepeters@mastodon.online avatar

The latest from @Meyerweb is such a good read, and (not to get too promotional) really resonates with our approach at @enhance_dev:

https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/

knowler, to random

Wrote up a little devlog for my website today. I think I might start doing this more often.
https://knowler.dev/blog/website-devlog-november-1-2023

colepeters,
@colepeters@mastodon.online avatar

@knowler This is rad, love the approach!

colepeters, to random
@colepeters@mastodon.online avatar

So @brianleroux just spotted a bug on one of the pages on our site… turns out I somehow missed a closing angle bracket (>) on an article element, like a total n00b.

And yet… the HTML parser rendered everything in that article correctly except for its first child element.

Show me a more resilient language than HTML.

colepeters, to webdev
@colepeters@mastodon.online avatar

This post from @jimniels is a fantastic example of doing progressive enhancement with web components. No shadow DOM required, clean markup, colocated logic.

https://blog.jim-nielsen.com/2023/web-components-icon-galleries/

michael fassbender perfection GIF

colepeters, to webdev
@colepeters@mastodon.online avatar

Pretty sure backdrop-filter in combination with the <dialog> element is my favourite and combination of all time.

colepeters,
@colepeters@mastodon.online avatar

@khalidabuhakmeh No codepen, but here's some live code from the @enhance_dev Movies app: https://github.com/enhance-dev/enhance-movies/blob/main/app/elements/movie-dialog.mjs#L17-L20

And the results:

knowler, to random

I just saw a job description calling for 8 years of experience with Storybook. The project isn’t even that old. And why on earth would you need 8 years of experience with Storybook? Same goes for frameworks.

colepeters,
@colepeters@mastodon.online avatar

@knowler I recall a couple years after React came out, so many jobs ads were asking for 5 years of experience with it. The people who write the jobs ads are sadly very rarely the ones familiar with the job itself. So infuriating :/

colepeters,
@colepeters@mastodon.online avatar

@knowler Just tell the recruiters you're actually the author of Storybook honestly 😂

knowler, to random

I have no idea which liquid measurements are metric and which are imperial or what are the equivalences. Everything in Canada is so inconsistent that I just read some measures as “a lot” and others as “a little.”

colepeters,
@colepeters@mastodon.online avatar

@knowler My favourite is when recipes mix all kinds of measures — ‘12oz of tomatoes, 1 cup chicken stock, 1 teaspoon salt’. Honestly every recipe should have ingredients solely in grams 😅

knowler, to random

I think instead of forking my dotfiles for my work computer (like I already have), I need to create some sort of configuration system. Otherwise, I have no motivation to keep maintaining them and my systems fall out of sync. I don’t think it should be too difficult.

colepeters,
@colepeters@mastodon.online avatar

@knowler Ahh interesting. That sounds pretty similar to my setup — all my configs are in a repo, and I just use RCM to symlink the files I want directly into my home directory to make updating/versioning easier https://github.com/colepeters/dotfiles

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