@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

Are you a man who works in tech, writing code for a living? Do you work with women who do the same? Then you absolutely are at high risk of always assuming their code isn’t good enough… that you know more than they do, even when it’s their area of experience, even when they have years more experience than you do. Unless you are working to explicitly remove the sexism assumptions our society has drilled into you, you are also being sexist. That’s how culture works.

Please stop. Be introspective.

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

For those of you who make a PWA / Home Screen web app, do you use Fullscreen API inside your web app? Do you need it??

Or as a general web developer, how do you like Fullscreen API?? Do you wish it were different / better?

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

Safari 17.5 is out today! With
• text-wrap: balance and text-wrap: stable
• light-dark()
• @​starting-style
• @​import <url> supports(<feature>);
• AV1 for WebCodecs
• WebGL EXT_conservative_depth and NV_shader_noperspective_interpolation
and more!

https://webkit.org/blog/15383/webkit-features-in-safari-17-5/

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

An updated set of demos of CSS Grid Level 3 are online now!

https://webkit.org/demos/grid3/photos/

Check out the new variations of the Photos demo where the layout "goes in the other direction". (Use the dropdown menu. They are listed last.)

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

A lot of people asked about Masonry layout “in the other direction”. So I’m making two more demos to show what can be done. One with Grid Level 3, and the other… well, with Flexbox.

Flexbox is really the right tool for the layout that many of you want most.

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

A lot of you are asking about masonry/waterfall-style layouts in the other direction. So another demo in on its way…

This is not quite like Flickr / similar, because those adjust the height of each row to magically get that row of photos to line up with the edge of the page/container.

This demo has a fixed total number of rows (which can change at breakpoints, but is still fixed). And the extra content is all overflowing off the right edge of the page. You scroll sideways to see more images.

fonts, to random
@fonts@sfba.social avatar

Wrote a few quick notes about lightness in publishing and workin’ on @csscade this week: https://buttondown.email/robinrendle/archive/lightness-in-publishing/

jensimmons,
@jensimmons@front-end.social avatar

@fonts @csscade Congrats! I love reading feedback about CSS Gird Level 3. Could you post some of your thoughts with a link to your blog post to https://github.com/w3c/csswg-drafts/issues/10233

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

Are you interested in Masonry layout?? Graphic design on the web?

We just published a 4,000 word blog post investigating the current stage of the Grid Level 3 specification and all the amazing things you can do with it: https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

If you design or build websites, please read and chime in with your thoughts.

jensimmons,
@jensimmons@front-end.social avatar

Along with the article, I created 4 demos (with 21 variations).

Try them out!!
https://webkit.org/demos/grid3/

In Safari Technology Preview, or Firefox with the layout.css.grid-template-masonry-value.enabled flag flipped.

I mean, look at this. With explicit placement and subgrid!

jensimmons,
@jensimmons@front-end.social avatar

Here’s another, where I’m using max-content sizing of my columns to make sure the text never wraps.

It was demos like this that convinced me that this is not just “masonry”. This is a way to use CSS Grid, but turn off the rows. And for the first time to have columnar grids on the web, not just modular ones.

Please do read https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

jensimmons,
@jensimmons@front-end.social avatar

And check this out. Otherwise boring text is not so boring when you can use a columnar grid, and are no longer forced to truncate content to make it fit into regimented-sized boxes.

https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/

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

And as I write in the article, we need your input to help the CSS Working Group decide whether or not this is the direction in which they want to go.

Read to the end of the article where I describe what kind of input would be most helpful and where to go to provide it. People won't see a bunch of posts on social media. If you'd like Grid Level 3 to be a reality, post our comments here: https://github.com/w3c/csswg-drafts/issues/10233

jensimmons,
@jensimmons@front-end.social avatar

@armstrong There are two issues — one about the name, linked in the "P.S." at the very end. And just about that, in the section, "We want to hear from you" is a link to where you can comment in general.

jensimmons,
@jensimmons@front-end.social avatar

@TALlama Yes! Thank you. Fixed.

jensimmons,
@jensimmons@front-end.social avatar

@chuck Could you drop this comment in this thread? https://github.com/w3c/csswg-drafts/issues/10233

jensimmons,
@jensimmons@front-end.social avatar

@rianmurnen Oh no! Typo!! Fixed. Thanks.

jensimmons,
@jensimmons@front-end.social avatar

@KevinMarks I don’t think masonry-style layouts are anywhere close to this kind of layout. That looks to me like Grid 1 (maybe with subgrid).

The wider images/content is easy. Just span certain elements across 1 column while the bigger stuff spans 2. The Footnotes that sit to the side... I'd have to code a demo to make sure it would work, but I think it’s possible in grid 1 or 2. There might be some configuration needed on the backend to mark up content with certain classes.

jensimmons,
@jensimmons@front-end.social avatar

@KevinMarks It'd also depend on what you would want for the "mobile" / narrow layout. Would you want all the footnotes at the end? Or inline? What is the best experience for a screenreader? Footnotes at the end? Or inline? The answers to those questions will determine the DOM/HTML order. And the HTML order determines how to write the CSS for layout...

It looks like that site uses inline content marked up with <span class="marginnote">. Interesting. I'd recommend proper HTML elements instead.

jensimmons,
@jensimmons@front-end.social avatar

@octothorpe Yes it’s LTR/Horizontal top to bottom. after the first row each item is placed so that it’s as close to the top as possible.

adamfishercox, to random
@adamfishercox@mastodon.social avatar

@jensimmons

Something seems to have regressed with background-attachment:fixed behavior in Safari that makes scrolling really jittery.

This site, for example, used to have a smooth "wipe" transition between slides, but now jitters with every scroll: https://www.adamfishercox.com/_projects/safe-astoria/. Chrome still behaves correctly as a counterexample.

jensimmons,
@jensimmons@front-end.social avatar

@adamfishercox Could you file an issue at https://bugs.webkit.org? Reply with the link, and I'll be sure the right people see it.

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

🌞 vs 🌑

If you’ve been following me for a while here you most likely know that I think that Dark Mode Toggle Buttons should be a browser feature:

Let the user decide which color-scheme they want on a per-site basis and store that.

https://brm.us/dark-mode-override

jensimmons,
@jensimmons@front-end.social avatar

@bramus I’d prefer users have privacy over another fingerprinting vector.

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

I’ve been making demos of CSS Grid level 3 lately, to show off what putting masonry/waterfall-like layout support in CSS Grid can do. (I’ve got 16 demos and counting!)

Here’s one with that includes View Transitions, running in Safari Technology Preview 192.

What do you want to know about how masonry-like layouts could work in CSS Grid?

a collection of photos — all different shapes and sizes, laid out in a puzzle-like pattern. A mouse moves over one image. Click. And the image grows bigger. The rest animate to scoot out of the way to make space. Click again, and the image gets smaller, while all the rest scoot back to where they started.

jensimmons,
@jensimmons@front-end.social avatar

@counternotions It can be any content! I've got another example that's all text. And a third that's a mix.

jensimmons,
@jensimmons@front-end.social avatar

@brunoph That's why I've got a "Number items" toggle. So you can see the order of the content in the layout.

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

apparently progressive enhancement is scary?

so much fear around the concept when talking with folks.

jensimmons,
@jensimmons@front-end.social avatar

@argyleink Progressive enhancement is THE way to maintain control over what happens across thousands of combinations of hardware, software, browser, browser version, user preferences, system settings, input options & output options. The only way. Otherwise you are coding for some combinations, while ignoring the rest — giving up what happens.

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