@Kilian@mastodon.social
@Kilian@mastodon.social avatar

Kilian

@Kilian@mastodon.social

I build tools for developers and designers: Polypane.app, fixa11y.com, superposition.design and fromscratch.rocks | Electron governance member | He/him

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

matthiasott, (edited ) to CSS
@matthiasott@mastodon.social avatar

My felon… I mean, my fellow web designers and front-end developers!

Do you use clamp() in production? 🤔

Kilian,
@Kilian@mastodon.social avatar

@matthiasott clamp is actually one of the newish things I started using very quickly (the others being variables and nesting) as opposed to thinks like layers, container queries and math functions, none of which I'm really using in production yet.

Kilian, to random
@Kilian@mastodon.social avatar

@​starting-style lets you animate the "un-animatable" (like animating from a display:none) by setting the initial state of the animation.

I couldn't help myself so the Elements panel in Polypane now supports inspecting and editing it. 🤩

Pretty cool considering both Chrome and Safari devtools can't do that yet. 😎

A popover with starting style that's opened with a slide-down animation. Then the CSS gets edited and now its opened with a rotation.

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

Just a quick reminder that there's a scripting media feature.

@media (scripting: enabled) {  
 /* js is enabled */  
}

@media (scripting: none) {  
 /* js isn't enabled */  
}

https://matuzo.at/blog/2023/100daysof-day106

Kilian,
@Kilian@mastodon.social avatar

@matuzo wow Manuel, I can't believe this.

Kilian,
@Kilian@mastodon.social avatar

@matuzo make sure you're on the latest version (19.0.2)

Kilian,
@Kilian@mastodon.social avatar

@matuzo There's been a few additions since then: https://polypane.app/docs/changelog/

marcus, to random
@marcus@mastodon.social avatar

Show of hands please: How many of you write Markdown for years now and still mix up "[]" and "()" when creating links like I do? It is so annoying. Any mnemonics to prevent that?

Kilian,
@Kilian@mastodon.social avatar

@marcus mine is [I'm saying this](but in parentheses it's actually this url)

tomayac, to random
@tomayac@toot.cafe avatar

📢 We've just sent out the first pre-announcement for Chrome's built-in AI ✨ preview program in form of the Prompt API 🗣️. It's not too late to join the program if you're interested: https://developer.chrome.com/docs/ai/built-in#:~:text=What%27s%20next-,Join,-our%20early%20preview

Kilian,
@Kilian@mastodon.social avatar

@tomayac is this going to be a chrome or a chromium feature?

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

I hadn't seen ToDesktop before.

https://www.todesktop.com/

The video (it says 90 seconds but it's 3:20) is compelling. Smart how it easy easily importable hooks to test if you're in the native app and do special things, but it's all optional.

Kilian,
@Kilian@mastodon.social avatar

@tomayac it is, but they're very clever about all the features they offer.

Kilian,
@Kilian@mastodon.social avatar

@tomayac Clever in that they have a nice online GUI that lets you configure all of the things you listed as well as other electron things (like multiwindow, window chrome etc), and then they pop out a multi-platform signed electron app with auto updating.

ben, to accessibility
@ben@a11y.info avatar

There was an interesting question in the chat I wanted to surface.

Say your site styles are responding to the prefers-contrast: less media query. Must they still conform to the relevant 4.5:1 and 3:1 contrast ratios when the media query is active?

Kilian,
@Kilian@mastodon.social avatar

@ben @sarajw @scottohara
Spotted that Q too and thought it was a really good question, thanks for looking into it!

Isn't it the case already that as long as a theme conforms, you're conformant as far as WCAG is concerned (which isn't a goal, i know)

Kilian, to random
@Kilian@mastodon.social avatar

I just released Polypane 19! 🥳

  • Live updating DOM view in the elements panel
  • HEAD ordering suggestions
  • Element screenshots with added padding
  • Chromium update
  • Tons of workflow improvements

Go check it out, and let me know what you think!
https://polypane.app/blog/polypane-19-workflow-improvements/

kornel, to random
@kornel@mastodon.social avatar

Chrome is shipping page transitions that work with regular non-JS-overloaded web pages.

Now I need to figure out how to use this without going full-PowerPoint.

https://developer.chrome.com/docs/web-platform/view-transitions#cross-document_view_transitions

Kilian,
@Kilian@mastodon.social avatar

@kornel we need a period of everyone going full PowerPoint, followed by a period of no one using it, and only after that can we use it in a tasteful way.

Kilian, to random
@Kilian@mastodon.social avatar

Aria is complex, and the best of intentions can still have adverse effects for your users. @marcus outlines some common misconceptions and what to do instead: https://marcus.io/blog/best-intention-barriers-aria

marcus, (edited ) to random
@marcus@mastodon.social avatar

New blog post: "Best intention barriers (ARIA edition)"

In my experiences as an auditor (for WCAG and EN 301 549) I stumble over a large number of barriers. Heck, my job is to find and to help the website developer and owner to get rid of them to make their web project more inclusive and – in the truest sense of the word - accessible. But there is a certain type of barrier that are more, well, tragic than others.

https://www.marcus.io/blog/best-intention-barriers-aria

Kilian,
@Kilian@mastodon.social avatar

@marcus "WCAG (Web Content Accessibility Guidelines) success criteria 2.5.3 even specifically checks if the visual label is a substring of the programmatic accessible name."

Oooh I didn't know that. Gonna expand the test for visual/programmatic name difference in Polypane based on that :D

Kilian,
@Kilian@mastodon.social avatar

@marcus The outline panel already shows both when they differ, just need to also add a warning if the visual one isn't a substring of the other :)

Kilian,
@Kilian@mastodon.social avatar

@marcus here you go: https://www.200ok.nl/tips/polypane-and-wcag/ courtesy of @julezrulez

Kilian, to random
@Kilian@mastodon.social avatar

I feel guilty because Polypane is still on Chromium 122, two versions behind current. I'm blocked by an Electron bug and it feels like I'm falling behind.

The most up-to-date competitor just now updated their Chromium to ...120 (which came out Dec 2023)

Maybe I fret too much.

Kilian,
@Kilian@mastodon.social avatar

@yatil If I could fix it myself I'd fix it in Electron!

Kilian,
@Kilian@mastodon.social avatar

@yatil that said, a PR to fix it just landed, so new release next week!

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

has anyone got any good resources on giving conference talks?

extra points if they’re specific to our industry :rocket_turtle:

Kilian,
@Kilian@mastodon.social avatar

@elly tons of good advice in this thread already but one thing I always tell folks is:

Most people's experience speaking in public is from high school/college, meaning 1) you're speaking about something you don't really know or care about 2) to people who don't care either & are forced to be there.

Speaking at conferences is NOTHING like that. You are speaking on a topic you care about and everyone in the audience wants you to have a good time, because then they will have a good time.

stephaniewalter, (edited ) to random
@stephaniewalter@front-end.social avatar

Project announcement incoming! I'm happy to announce that @Myriam and I launched Neurospicy. It's an agency, a boutique consultancy and a project dedicated to neurodiversity - all rolled up into one.

It's still a MVP, but the idea is to have a place to offer different content around neurodiversity, including training, socks, and stickers. I have no idea where this is going, and honestly, this is the most fun part, dopamine rush?

📢 https://www.neurospicy.agency/

Kilian,
@Kilian@mastodon.social avatar

@stephaniewalter @Myriam Exciting! Good luck and have fun!

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

New article: Handling The Indentation of a Treeview Component

A look at how to handle the Treeview component indentation in CSS. I explored examples from GitHub, Photoshop Web, Figma, and more.

https://ishadeed.com/article/tree-view-css-indent/

Kilian,
@Kilian@mastodon.social avatar

@shadeed9 I'm surprised none of these use details/summary in a nested <ul> structure. You get nested indenting essentially for free, along with collapsing logic.

zachleat, to random
@zachleat@zachleat.com avatar

Tornados have interrupted @eleventy Merch Bundle packing operations! 🌪️🫣

Kilian,
@Kilian@mastodon.social avatar

@zachleat spreadsheets man, what cant they do

Kilian, to random
@Kilian@mastodon.social avatar

The next version of Polypane is ready but I'm waiting for an Electron bug to be fixed, so I'm picking up small suggestions, ideas and nits from people.

@yatil asked me to add validation to the page language and @Lukew asked me to show the color-scheme value more prominently. @sapegin on the other hand helped me come up with a clever way to apply media emulation to all panes at once.

So if you have requests/suggestions for Polypane, now's the time to sent them to me!

Kilian, to random
@Kilian@mastodon.social avatar

The problem with new URL(), and how URL.parse() fixes that

A non-throwing way of parsing a URL is coming to browsers!

https://kilianvalkhof.com/2024/javascript/the-problem-with-new-url-and-how-url-parse-fixes-that/

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