Addy Osmani’s Post

These transitions with MPAs are such a giant leap forwards in removing A LOT of JavaScript! State management on the server and sexy page transitions is both as old as IE 5.5 as it is the future of the web.

Good to see MPA support being added with pure CSS and HTML attributes without the need of handling any edge cases✨ Just need cross browser support now, since due to this API difficult transitions which used to take tons of CSS, pseudo elements and JS can be done by adding couple of lines. (Across pages and as well on the same page, especially if you smartly couple state with query params).

In case you missed it: View Transitions for multi-page apps (MPAs) are now supported in Chrome! View Transitions can now be used for multi-page apps! From Chrome 126 onwards, create fluid navigations between different same-origin documents regardless of your site’s architecture. With these new interaction possibilities, available to every developer, you can redefine what we think of as a web app. The attached demo is a zero-JavaScript Movies demo by Maxi Ferreira The initial implementation of View Transitions we shipped in Chrome 111 required you to build a Single Page Application (SPA) and use JavaScript in order to use view transitions. In Chrome 126 this is no longer the case and they are now enabled by for same-origin navigations. You can now create a view transition between two different documents that are same-origin. To do this, use the @view-transition at-rule and set the navigation descriptor to auto. @view-transition { navigation: auto; } To customize cross-document view transitions further use the the pageswap and pagereveal events. Bramus Van Damme has an excellent talk and article that dives more deeply into this worth checking out: https://lnkd.in/gAKUSjGX Here are a few demos you can try out in Chrome Canary: https://t.co/MAMDh9Z8Je (pictured, by Maxi using Astro) https://lnkd.in/gRP-8iS5 (By Fred K. Schott working in Astro. Read Astro's new blog post on this here: https://lnkd.in/gbtkSWwb) https://lnkd.in/gunEyrag https://lnkd.in/g_H8jp7Q #softwareengineering #programming #javascript

So much (long term) active discussion about clientside js vs no js, maybe view transitions will save us all :D Great to see this adopted broadly

Day 9 of 30 JavaScript Projects! 🏅 The Weather App. 🍃 presenting my very own Weather App! 🌍☀️❄️ Repo link: https://lnkd.in/dW9_9C2J Deploy link: https://lnkd.in/d2MnBkgf 🔍 What's the Weather App all about? Ever wanted a quick peek at the weather without stepping outside? My Weather App has got you covered! Whether it's clear skies or pouring rain, this nifty app lets you check the forecast for any city in just a few clicks. Rain or shine, you'll be in the know! 📱 🛠️ Challenges Along the Way Day one and already faced a few bumps on the coding road! From wrangling API calls to tackling those tricky error messages (404, I'm looking at you!), it's been an adventure. But hey, who said coding was all sunshine and rainbows? Embracing the challenges, one bug at a time! 💻 💡 Lessons Learned Every bug = a lesson. Strengthening skills, one project at a time! Here's to 29 more days of JavaScript fun! 🚀 #30Days30JavaScript #WeatherApp #Code #coding

📝 Check out this simple Note Taking App! I've just completed work on a nifty note-taking web app using HTML, CSS, and JavaScript. This app makes notting down ideas a breeze! With input fields for note titles and content, along with handy buttons for saving, deleting, and clearing notes, it's perfect for staying organized. Plus, there's a search feature to quickly find specific notes. Check it out and let me know what you think! Feel free to explore the code on my GitHub repository. 💻✨ #WebDevelopment #JavaScript #HTML #CSS #NoteTaking #Projects

Introducing my impeccably designed Premium App Landing HTML Template, created with utmost care to ensure outstanding quality and effortless integration into your production process. Exciting news! I have made it publicly available on GitHub, enabling you to access and utilize this remarkable resource at absolutely no cost. YouTube Video: https://lnkd.in/ggF5DNai https://lnkd.in/gK5CXSJs #html #quality #video #github #app #landingpagedesign #landingpage #css #jquery #css3 #html #opensource

Excited to share my latest Todo Web App with you all! 🚀 I've built a To-Do List web app using HTML, CSS, Bootstrap, and JavaScript. This app allows users to easily add and delete tasks, with the added feature of storing tasks permanently using local storage. The app boasts of a simple and intuitive user interface, making it effortless for users to add and delete tasks. The app's responsive design ensures that it can be accessed seamlessly on all devices, thanks to Bootstrap. What's more, the app comes with persistent storage of tasks using local storage. This feature ensures that your tasks are never lost, even when you close the app. I used HTML, CSS, Bootstrap, and JavaScript to build this app, and it was a great learning experience. I particularly enjoyed working with local storage and creating a user-friendly UI. Try it now: todo--app.surge.sh GitHub: https://lnkd.in/ghwu5Yt6 Check out the video below to see the app in action! I look forward to any feedback or suggestions you might have. #webdevelopment #javascript #html #css #bootstrap #coding #programming #localstorage #todoapp

Recipe App, In this Recipe App, API fetch recipe data, Using:- Html, Css and Javascript, #Html, #Css ,#Javacript

🚀 Just built a simple counter app using HTML, CSS, and JavaScript! Check it out: 🔢 Counter App: [] 🎨 The interface is designed with Bootstrap and custom fonts, offering a sleek look and user-friendly buttons. It enables you to increment, decrement, and reset the counter value dynamically. 🌟 Feel free to try it out and let me know your thoughts! #HTML #CSS #JavaScript #Bootstrap #WebDevelopment #CodeSnippet #Developer #WebDesign #LinkedInPost #CounterApp #JavaScript #WebDevelopment #InteractiveDesign #FrontEndDevelopment #CodeSnippet #WebDesign #UIUXDesign #CodingLife #WebDeveloper #SoftwareDevelopment #CreativeCoding #DeveloperCommunity #TechInnovation #InteractiveUI #CodeNewbie #ProgrammingLife #DigitalExperience #LearnToCode #HTMLCSS #DigitalCreativity #JSDevelopment #CodeInspiration #InnovationInTech