@jensimmons@front-end.social avatar

jensimmons

@jensimmons@front-end.social

 Apple Evangelist on the Web Developer Experience team for Safari & https://front-end.social/@webkit. Member of CSS Working Group. Formerly Firefox. #longCOVID since March 2020. #pwME

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

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

Did you know the W3C published Ethical Principles for how the web should work?

https://www.w3.org/TR/ethical-web-principles/

I find them so inspiring. And they guide what developers should be doing, too.

“The web should empower an equitable, informed and interconnected society. It has been, and should continue to be, designed to enable communication and knowledge-sharing for everyone… we need to consider the ethical implications of our work when we build web technologies, applications, and sites.”

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

Since 2023 just ended, let’s look at the end-of-year results for Interop 2023.

Together, the browsers that are available to everyday people now pass 83% of the tests included in Interop 2023. Separately the pass rates are: Chrome 97%, Firefox 86%, Safari 96%.

The overall score is still going to significantly improve, looking at the preview browsers: https://wpt.fyi/interop-2023

By the time all the work ships, the three browser engines will pass 95%+ of the tests.

jensimmons,
@jensimmons@front-end.social avatar

@TobyHaynes Yes, Firefox shipped a few things in Dec that made from giant gains. Everyone is having a great year. Everyone is beating all the scores from last year.

The Interop project each year only chooses a tiny subset of all web standards — the things that are most in need of a focused effort on improving interoperability. Most web technology is "outside" of the Interop project.

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

Lazyweb: is there a word for ten in any language that has ten letters? I’d like to find something to continue this sequence: 一 du tre four cinco motoba septiņi thamania bederatzi…

jensimmons,
@jensimmons@front-end.social avatar

@famulimas I don’t have a suggestion for ten, but you could start the sequence with “1”.

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

Finally, Interop 2023 results that test Safari 17.2!

The Interop project is looking really good this year, with 83% of test passing in all three browser engines, shipped into the hands of users. 93% pass in the preview browsers, foreshadowing user’s near future.

https://wpt.fyi/interop-2023

jensimmons,
@jensimmons@front-end.social avatar

@xro @Scope How about in Safari Technology Preview in 2023? https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/

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

Safari Technology Preview 185 now supports WebGPU! It enables high-performance 3D graphics and general-purpose computations on the Web. Turn on the feature flag, and try it out.

https://webkit.org/blog/14879/webgpu-now-available-for-testing-in-safari-technology-preview/

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

Safari Technology Preview 185 is here! With exciting news…

We’ve added a switch control to the web, with <input type="checkbox" switch>, so you don’t have to hack a checkbox with custom styling to make it look like a switch! By building on top of checkbox, it falls back nicely in browsers without support.

We’ve got support for align-content on block containers — which means you’ll be able to vertically center anything (or end align), not just Flexbox/Grid items!

https://webkit.org/blog/14885/release-notes-for-safari-technology-preview-185/

jensimmons, (edited )
@jensimmons@front-end.social avatar

Also:

  • Scroll Anchoring with overflow-anchor
  • Scoping with @scope
  • percentage values support for letter-spacing and word-spacing
  • WebCodecs VP9 profile 2
  • Element.prototype.setHTMLUnsafe(), ShadowRoot.prototype.setHTMLUnsafe(), and Document.parseHTMLUnsafe()
  • getClientCapabilities()
  • WebGPU (behind a flag)

And in developer tools:

  • Expanded OffscreenCanvas support for bitmaprenderer, webgl, and webgl2
  • Grid overlay support for Masonry layout
jensimmons, (edited )
@jensimmons@front-end.social avatar

Want to try out the many cool things you can do with a native switch in HTML? Download Safari Technology Preview 185 and try out this demo from Tim Nguyen.

https://nt1m.github.io/html-switch-demos/

Enable the ::thumb and ::track pseudo-elements feature flags to see the custom styling in effect.

jensimmons, (edited )
@jensimmons@front-end.social avatar

@iamdavidobrien None of the other browsers support switch inputs yet. But they will. It’s now part of HTML.

Also, because of how the HTML is designed, if you use <input type="checkbox" switch> on a webpage, it will just appear as a checkbox in browsers that don’t have support. Nothing will be broken. Fallbacks FTW!

jensimmons,
@jensimmons@front-end.social avatar

@mez @iamdavidobrien We’ve been talking about this for the last three hours. Really, the test show be of the switch attribute in HTML. Which isn’t testable yet. So… https://github.com/w3c/csswg-drafts/issues/9746

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

Safari 17.2 is here!
https://webkit.org/blog/14787/webkit-features-in-safari-17-2/

“A new version of Safari shipped 17 times in the last 28 months — version 15.0, 15.1, 15.2, 15.3, 15.4, 15.5, 15.6, 16.0, 16.1, 16.2, 16.3, 16.4, 16.5, 16.6, 17.0, 17.1, and now, today’s Safari 17.2… With 39 features and 169 fixes, today’s release is Safari’s biggest December release of web technology ever.”

jensimmons,
@jensimmons@front-end.social avatar

@bramus Ah, thanks! Fixed.

jensimmons, (edited )
@jensimmons@front-end.social avatar

@BMMCC text-box-trim needs more work from the CSS Working Group before it can ship in any browser. Try it in Safari Technology Preview to see the work as it evolves.

malarkey, to random
@malarkey@mastodon.social avatar

FUCK! I found a very nasty bug in Webkit where adding any border styles to an element stops background-blend-mode from applying. / @jensimmons

jensimmons, (edited )
@jensimmons@front-end.social avatar

@malarkey Could you file an issue at https://bugs.webkit.org and reply with the link? I’ll make sure we take a look.

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

Safari Technology Preview 184!
https://webkit.org/blog/14780/release-notes-for-safari-technology-preview-184/

  • CSS custom properties on dialog ::backdrop
  • Array group methods
  • ArrayBuffer.prototype.detached, ArrayBuffer.prototype.transfer, ArrayBuffer.prototype.transferToFixedLength
  • HTML’s character entities in WebVTT
  • AbortSignal.any()
  • element.checkVisibility()
  • Web Assembly extended constant expressions
  • Web Inspector grouping source map load errors
  • Web Inspector linear() timing function
  • several new WebGL extensions
jensimmons, to random
@jensimmons@front-end.social avatar

The vast majority of people are using browsers that have support for Passkeys now! https://caniuse.com/passkeys

If you run a website or web app that let users login, have you implemented support for Passkeys yet?

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

My team is hiring a Web Developer Relations intern for next summer. If you are attending a college or university to get a bachelor’s degree, master’s degree, or doctorate and you have a passion for the web — you could come work with us!

If you teach college, please pass this along to your most fabulous web design/development students who have an enthusiasm for empowering others.

For lots more information:

https://www.linkedin.com/posts/jensimmons_careers-at-apple-join-us-as-a-student-or-activity-7137424654117335040-EuE0

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

Safari 17.2 beta 4 came out yesterday. You might have noticed that since beta 3, Fullscreen API on iOS has moved back to “preview” status.

Thank you to everyone who’s helped by trying the beta and filing issues! We’ve got a list of details to polish before it ships. I don’t have anything to share on when that will be.

Meanwhile, you can still test by turning on its feature flag, and provide feedback at https://bugs.webkit.org.

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

Safari Technology Preview 183 is out!

What's new?
• text-wrap: balance and text-wrap-style
• allow-downloads for frames
• ArrayBuffer.prototype.transfer
• updated IntlMathematicalValue
• and a pile of bug fixes, some of which now bring our Interop 2023 score up to 96.7%

https://webkit.org/blog/14769/release-notes-for-safari-technology-preview-183/

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

Check out how the new support for the name attribute inside details works: https://codepen.io/jensimmons/pen/wvNPBZa??editors=1100

Basically, if you name a series of detail elements with the same name, using the name attribute, then only one in the series will be open at a time. When a user clicks to open a second one, the first automatically closes. This can be a much better user experience. No JS needed!

Try it today in Safari Technology Preview or Chrome Canary. It’s coming soon to Safari 17.2 and Chrome 120.

video/mp4

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

Are you using Cascade Layers in CSS?

I’d love to hear how & why…
What are your layers named?
What goes into each layer?
How are they helping your team keep organized?
Is it easy to use them? Hard?
Any blockers?
Any desires to make it better?
Do you recommend Cascade Layers?

jensimmons,
@jensimmons@front-end.social avatar

@mia Me, too! I love making a guess about what’s up... waiting four years... and seeing that yeah, it worked out just like we’d hoped!

rgadellaa, to random
@rgadellaa@mastodon.social avatar

@jensimmons quick question, I'm trying to do relative css syntax with display-p3 but running into some issues w/Safari.

As I understand, I need to use color() fn to define a p3 color:
color( display-p3 0 0 0 )

So if I want to make that relative, that would become:
color( display-p3 from #f00 r g b )

but Safari doesn't seem to support color() fn with relative syntax:
CSS.supports('color: color( display-p3 from #f00 r g b );')
> false

Am I messing up the syntax?

jensimmons,
@jensimmons@front-end.social avatar

@rgadellaa Try color(from #f00 display-p3 r g b)

https://drafts.csswg.org/css-color-5/#funcdef-color

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