ryantownsend, to webdev
@ryantownsend@webperf.social avatar

Looks like we're close to getting @starting-style in Firefox Nightly: https://bugzilla.mozilla.org/show_bug.cgi?id=1834876

If you're building animated dialogs/menus, you should be building them with this and transition-behavior: allow-discreet, workarounds/hacks should only be used where absolutely necessary as they will rapidly become deadweight.

Accept where we are today, but build with the near future in mind.

ryantownsend, to webdev
@ryantownsend@webperf.social avatar
ricmac, to webdev
@ricmac@mastodon.social avatar

I came across this article today and it’s the best explanation of each frontend framework and their differences that I have yet read. But it made me wonder: is there a good, current book that explains the fundamentals and core concepts of JS, frameworks and the web platform? E.g. how the DOM works, how React deals with DOM, how non-React frameworks do DOM now, etc? Book/article recommendations appreciated! https://joshcollinsworth.com/blog/antiquated-react

29decibel, to webdev
@29decibel@mastodon.social avatar

SvelteKit “Form actions” is the single most underrated feature. I use it to power 95% of the mutation happens to my projects, I no longer needs that much JSON API endpoints. It's dead simple as it leverages the native web form to send data, you can easily extend it using use:enhance or your own customized handler to provide a better UX.

Oh it works without JS. What a charming thing!

https://kit.svelte.dev/docs/form-actions

ryantownsend, (edited ) to webdev
@ryantownsend@webperf.social avatar

TIL about the input[type=search] incremental attribute 1

Seems smart to have native debouncing built into the , but as quickly as I've learned about it, I discovered Safari removed it in version 17.2 2 🤔

Anyone know why? The release notes just say it was "non-standard", but it was in every browser except Firefox 3 🤷‍♂️

ryantownsend, to accessibility
@ryantownsend@webperf.social avatar

The first acroynm-based tech stack I've been excited about since back before JAMstack became more focused on the J and A than the M – the AHA stack: https://ahastack.dev/

The specific frameworks/libraries are just implementation details, but their set of principles really resonates!

Thin client: 🙌
Hypermedia: 🙌
Sprinkles of JavaScript: 🙌
HTML partials: 🙌
Simple yet awesome backend: 🙌
Lightweight frontend: 🙌
Declarative: 🙌
Minimalist: 🙌

gagliardi_vale, to random
@gagliardi_vale@fosstodon.org avatar

Smooth and simple transitions with the View Transitions API

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

ryantownsend, to javascript
@ryantownsend@webperf.social avatar

🎉 WebKit is moving it's position on the Navigation API to "support" 1 🎉

Hopefully it'll get implemented soon! 🤞 (it's been GA in Chrome since May 2022)

If you're not already aware of it's benefits: it gives us a far better progressive-enhancement than intercepting click/submit events, where we lose the native browser loading-feedback and have to manually adjust history with the History API.

More 👉 https://developer.chrome.com/docs/web-platform/navigation-api/

ryantownsend, to random
@ryantownsend@webperf.social avatar

The survey is a great way to discover APIs you may not know exist or may not realise are now supported – you can even have a reading list emailed to you at the end 🙌🏻

I’ve been building for the web for 20 years, stick to the Web Platform where possible, and I only scored 82%! There’s always something new and exciting to learn in our industry.

Check it out 👉🏻 https://lea.verou.me/blog/2023/state-of-html-2023/

Great work @leaverou & team! 👏🏻👏🏻👏🏻

ryantownsend, to random
@ryantownsend@webperf.social avatar

There's been some movement on the Cookie Store API in Webkit 🙌

https://bugs.webkit.org/show_bug.cgi?id=258504

WEB SHARE API IS A W3C RECOMMENDATION (www.w3.org)

The Web Applications Working Group has published Web Share API as a W3C Recommendation. This specification defines an API for sharing text, links and other content to an arbitrary destination of the user’s choice. The available share targets are not specified here; they are provided by the user agent. They could, for example,...

ryantownsend, to javascript
@ryantownsend@webperf.social avatar

Are there any native solutions for pinch-to-zoom on images for use in a <dialog> lightbox? Feels like there should be.

I've tried using an <iframe> to see if it could be independently zoomable, but the whole viewport zooms.

Failing that, might have to resort to , if anyone has recommendations of clean, performant libraries?

ryantownsend, to random
@ryantownsend@webperf.social avatar

I'm away in Poland for literally one week and come back to find new capabilities: apparently @starting-style is now a thing 😍

@bramus's example: https://codepen.io/bramus/pen/MWPLgjy

rachelandrew, to webdev
@rachelandrew@front-end.social avatar
stephaniewalter, to random
@stephaniewalter@front-end.social avatar

Yesterday I was invited to a Twitter Space Google I/O as GDE webplatform and discussed, among other things, new features coming to the web (https://twitter.com/i/spaces/1yNGaNOrVXnJj).
I'm genuinely happy to see we go towards more user-centric and inclusive, accessible experiences with a lot of new CSS features and APIs.
We need to embrace that flexible nature of the web.

stephaniewalter,
@stephaniewalter@front-end.social avatar

I also would love it, if more designers could start getting interested into all those new features and in how to use them for a greater experience. You don't need to learn to code. But, understanding what a browser can do will for sure help build better, more user-centric experiences in the next couple of years.
So, yeah, I'm super happy to see where the web platform is going those days.

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