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

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!

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)

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.

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.

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!

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/

csscade, to random
@csscade@mastodon.social avatar

Did ya know that itโ€™s possible to style an element if itโ€™s overflowing the parent element? I certainly didnโ€™t!

.parent {  
 max-width: 300px;  
}

.child {  
 width: 500px;

 @media@mastodon.social (overflow-inline) {  
 background: yellow;  
 }  
}

https://www.csscade.com/cool-queries

Kilian,
@Kilian@mastodon.social avatar

@csscade @sarajw

as I understand it that isn't what it does. It's about how the display media (screen or print, basically) handles overflowing.

For the block direction, a screen will scroll while print will match the "paged" value.

Kilian,
@Kilian@mastodon.social avatar

@csscade @sarajw

In other words, media features match something about the viewing environment( = device/screen/user preference), not about the page itself.

Kilian,
@Kilian@mastodon.social avatar

@sarajw @csscade if you make the wrapping div 100% width then the a is still yellow.

In other words, @media (overflow-inline) applies in both situations, because @media says something about the (state of the) viewer, not the (state of the) page.

Kilian,
@Kilian@mastodon.social avatar

@csscade @sarajw

The spec is definitely hindered by the media feature having the same name as an existing CSS property but it's good to keep in mind that nothing on your page can change the matched value of an @media feature.

Kilian,
@Kilian@mastodon.social avatar

@csscade @sarajw That's me, dashing hopes and dreams!

Kilian,
@Kilian@mastodon.social avatar

@SaraSoueidan @bramus Playing with it I can't get it to work for general selectors ("body > *"), only for specific selectors. Is that a limit @bramus or am I holding it wrong? :D

Firefox (and Polypane soon) also shows scroll badges in the elements panel, so that gives you the same information.

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

Hey all! Quick heads up that Iโ€™m working on a free video course that teaches you all there is to know about Scroll-Driven Animations in CSS and JavaScript.

https://youtube.com/shorts/W1la5yV3PcQ

Expect the full series to drop later this month ๐Ÿคฉ

Kilian,
@Kilian@mastodon.social avatar

@bramus popping in to say that that t-shirt is very cool!

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

Oh dear.

A typo (putting the wrong brand in for a bike into JobRad's system) has lead to an administrative mess, and a big heavy bike box being delivered to a store for me to pick up - but now I'm not allowed to have this one, as the whole order was cancelled.

The Decathlon guy had put the brand into the system as ELOPS instead of BTWIN - both are Decathlon sub-brands, and the V1 version of the same long tail cargo bike /was/ ELOPS. V2 is now BTWIN.

I spent an hour on the phone this morning ๐Ÿซ 

Kilian,
@Kilian@mastodon.social avatar

@sarajw This is the most german thing I've read in a while

Kilian, to random
@Kilian@mastodon.social avatar

Lord grant me the confidence of a developer that has decided The Docs Are Wrong.

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