Cross-document view transitions now work in Safari on iOS 18.2 💪
Email list: https://modernwebweekly.com
Danny Moerkerke
- 46 Followers
- 9 Following
- 16 Posts
Independent PWA and Web Components specialist, creator of https://whatpwacando.today. I write about what the modern web can do, Web Components and PWAs.
Email list: https://modernwebweekly.com
Email list: https://modernwebweekly.com
Jen SimmonsSafari 18.2 is here! For web developers, it’s the biggest release of new features this year. Highlights include cross-document View Transitions, text-box, spatial videos in visionOS, ruby improvements, WASM garbage collection, HTTPS by default, Genmoji, and more.
https://webkit.org/blog/16301/webkit-features-in-safari-18-2/
Axel RauschmayerThoughts about big tech companies mostly insulating themselves from feedback:
On one hand, I get it: Everyone has an opinion. And the sheer amount of data is probably overwhelming.
On the other hand, it seems that they are missing out on genuinely good ideas und useful feedback. It’s frustrating to see so many products slowly degrade due to more and more small bugs. Companies are also missing out on information about when and how to change a product so that it remains relevant.
Thomas Steiner 
#TIL about the `translate` attribute in HTML: https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute. Improving User Experience for Multilingual Web Browsing: https://htmhell.dev/adventcalendar/2024/13/.
Introducing #ProjectServiceWorker
I believe every web app should be able to work offline and I have made it my mission to get people to implement offline support for their web apps.
To do this, I implemented a basic Service Worker that you can add to your web app to make it work offline.
Grab it here, add it to your web app, and comment with a link here (or in a separate post) using #ProjectServiceWorker
I will repost each one.
Grab it here 👇
https://github.com/DannyMoerkerke/basic-service-worker
I decided to offer all chapters in the paid version of my course Mastering Web Components separately as well.
The price for each chapter is only $10 and some are even just $5.
Get the course here 👇
https://dannymoerkerke.gumroad.com/l/mastering-web-components
Mastering Web Components
This course will take you from beginner to expert in Web Components by teaching you how can create your own reusable Web Components and integrate them into any web app. In the full, paid version of the course, you will build an image gallery component to apply and test your knowledge of the concepts you have learned.The course contains many interactive code examples you can study and modify to test and sharpen your skills.In the free version, you will learn:how to create and register a Web Componenthow to effectively use the lifecycle methods of Web Componentshow to encapsulate the HTML and CSS of your Web Component using Shadow DOMhow to extend native HTML elementshow to compose Web Components with user-defined contenthow to test Web ComponentsYou get:107 page PDF22 interactive code examplesThe full version includes everything from the free version and you will also learn:how to theme and share styling between Web Componentshow to integrate Web Components into forms and validate themhow to server-side render Web Componentshow to implement data-binding for Web Componentshow to implement custom states for Web Componentshow to compose Web Components using the mixin patternhow to build Web Components with a libraryhow to build an image gallery component step by stepYou get:257 page PDF45+ interactive code examplesAll the chapters in the paid version are also available separately.
Great new newsletter 📧 (duh, double "new") by @dannymoerkerke called Modern Web Weekly featuring many #ProjectFugu 🐡 APIs: https://modern-web-weekly.ghost.io/.
How do View Transitions work for multi-page apps?
Did you know you can use View Transitions without navigating to another page?
You can read all about it in Modern Web Weekly #7 which has just been published
View Transitions are now a W3C candidate recommendation and both Firefox and Webkit have announced support!
Cross-browser support coming up 🎉
Does your web app really need a build step?
If you only need a build step to resolve bare import specifiers you could implement an import map and get rid of your build altogether.
In my new article, I explain how you can go build-less today