RSS Advisory Board

Jump to navigation

Congratulations!

This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

• line 43, column 0: Invalid HTML: EOF in middle of construct, at line 14, column 142 (2 occurrences) [help]

          <h2>Sponsor message</h2><a href="https://beyondtellerrand.com/events ...
  

Source: https://piccalil.li/feed.xml

1. <?xml version="1.0" encoding="utf-8"?>
2.  <rss version="2.0"
3.    xmlns:content="http://purl.org/rss/1.0/modules/content/"
4.    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
5.    xmlns:dc="http://purl.org/dc/elements/1.1/"
6.    xmlns:atom="http://www.w3.org/2005/Atom"
7.    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
8.    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
9.    xmlns:georss="http://www.georss.org/georss"
10.    xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
11.  >
12.    <channel>
13.      <title>Piccalilli - Everything</title>
14.      <link>https://piccalil.li/</link>
15.      <atom:link href="https://piccalil.li/feed.xml" rel="self" type="application/rss+xml" />
16.      <description>We are Piccalilli. A publication dedicated to providing high quality educational content to level up your front-end skills.</description>
17.      <language>en-GB</language>
18.      <copyright>Piccalilli - Everything 2025</copyright>
19.      <docs>https://www.rssboard.org/rss-specification</docs>
20.      <pubDate>Tue, 04 Nov 2025 18:02:32 GMT</pubDate>
21.      <lastBuildDate>Tue, 04 Nov 2025 18:02:32 GMT</lastBuildDate>
22.  
23.      
24.      <item>
25.        <title>The Index: Issue #138</title>
26.        <link>https://piccalil.li/the-index/138/?ref=main-rss-feed</link>
27.        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
28.        <pubDate>Fri, 31 Oct 2025 11:55:00 GMT</pubDate>
29.        <guid isPermaLink="true">https://piccalil.li/the-index/138/?ref=main-rss-feed</guid>
30.        <description><![CDATA[<h2><a href="https://terra.layoutit.com?utm_source=the-index&amp;utm_medium=newsletter">CSS terrain generator</a></h2>
31. <p>One for the Sim City fans. This is so cool!</p>
32. <h2><a href="https://www.joshwcomeau.com/animation/linear-timing-function/?utm_source=the-index&amp;utm_medium=newsletter">Springs and bounces in native CSS</a></h2>
33. <p>Great demos, a great build your own curve feature and of course, another great article by Josh.</p>
34. <h2><a href="https://jasonsantamaria.com/blog/learning-curves?utm_source=the-index&amp;utm_medium=newsletter">Learning curves</a></h2>
35. <p>An interesting look at the level of details that goes into creating a typeface.</p>
36. <h2><a href="https://farrant.me/?utm_source=the-index&amp;utm_medium=newsletter">Josh Farrant's website</a></h2>
37. <p>Lovely look and feel and a cool, musical theme switcher that has Zelda Ocarina of Time vibes.</p>
38. <h2><a href="https://piccalil.li/blog/start-implementing-view-transitions-on-your-websites-today/?utm_source=the-index&amp;utm_medium=newsletter">Start implementing view transitions on your websites today</a></h2>
39. <p>I've wanted some good view transitions content on our blog for ages and Cyd is here with the first of some great pieces for us to enjoy.</p>
40. <hr />
41. <p>P.S. <a href="https://codepen.io/Sidstumple/pen/yLrwLPg?utm_source=the-index&amp;utm_medium=newsletter">this is a good demo</a>.</p>
42.        
43.        <h2>Sponsor message</h2><a href="https://beyondtellerrand.com/events/berlin-2025/tickets?utm_source=piccalilli&utm_medium=the-index"><img src="https://piccalilli.imgix.net/images/ads/beyond-tellerand.jpg" alt="A large crowd of people with their hands in the air, captured in black and white and a subtle sepia tone. The words "beyond tellerand" are in large white letters with "Berlin 2025 - 6–7 November" and "The event for the curious - where design and technology meet" below" /></a><p><strong>Elevate your craft at beyond tellerrand Berlin 2025, November 6 and 7 — next week!</strong>.</p>
44. <p>A welcoming, single-track conference where designers and developers share practical insights and fresh ideas. Connect with 500+ peers and return energised and inspired.</p>
45. <p>Tickets are limited. Secure your place today.</p>
46. <p><a href="https://beyondtellerrand.com/events/berlin-2025/tickets?utm_source=piccalilli&utm_medium=the-index">Reserve your seat</a></p>
47. <hr />
48. <p>Thanks for reading this issue of <a href="https://piccalil.li/the-index/">The Index</a>. We really appreciate you being a subscriber. If you’re enjoying The Index, we’d really
49. appreciate it if you shared this issue with your friends too.</p>
50. <p>Until the next issue, take it easy 👋<br/>
51. Andy</p>
52. ]]></description>
53.        
54.      </item>
55.    
56.      <item>
57.        <title>The Index: Issue #137</title>
58.        <link>https://piccalil.li/the-index/137/?ref=main-rss-feed</link>
59.        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
60.        <pubDate>Wed, 29 Oct 2025 11:55:00 GMT</pubDate>
61.        <guid isPermaLink="true">https://piccalil.li/the-index/137/?ref=main-rss-feed</guid>
62.        <description><![CDATA[<h2><a href="https://piccalil.li/links/the-entire-principles-module-of-complete-css-is-now-free/?utm_source=the-index&amp;utm_medium=newsletter">The entire “Principles” module of Complete CSS is now free</a></h2>
63. <p>I think this module is one of the most important in Complete CSS so I've made the content free to everyone! If you go through to checkout from the paywall at the end, you'll get a nice discount too 💛</p>
64. <h2><a href="https://zeldman.com/2025/10/25/receipts-a-brief-list-of-prominent-articles-proclaiming-the-death-of-the-web/?utm_source=the-index&amp;utm_medium=newsletter">Receipts: a brief list of prominent articles proclaiming the death of the web</a></h2>
65. <p>Don’t believe the hype, in short.</p>
66. <h2><a href="https://ishadeed.com/article/modern-css-section-layout/?utm_source=the-index&amp;utm_medium=newsletter">Solved by modern CSS: section layout</a></h2>
67. <p>Ahmad just doesn't miss. Another outstanding article.</p>
68. <h2><a href="https://jakearchibald.com/2025/importing-vs-fetching-json/?utm_source=the-index&amp;utm_medium=newsletter">Importing vs fetching JSON</a></h2>
69. <p>It's always appreciated when someone comes through and gives us the performance facts with new(er) JavaScript capabilities.</p>
70. <h2><a href="https://www.nan.fyi/database?utm_source=the-index&amp;utm_medium=newsletter">Build your own database</a></h2>
71. <p>You might think "boring" but seriously, this is a masterpiece.</p>
72. <hr />
73. <p>P.S. <a href="https://mastodon.gamedev.place/@yurisizov/115453484227492960?utm_source=the-index&amp;utm_medium=newsletter">this is cool</a>.</p>
74.        
75.        <h2>Sponsor message</h2><a href="https://beyondtellerrand.com/events/berlin-2025/tickets?utm_source=piccalilli&utm_medium=the-index"><img src="https://piccalilli.imgix.net/images/ads/beyond-tellerand.jpg" alt="A large crowd of people with their hands in the air, captured in black and white and a subtle sepia tone. The words "beyond tellerand" are in large white letters with "Berlin 2025 - 6–7 November" and "The event for the curious - where design and technology meet" below" /></a><p><strong>Elevate your craft at beyond tellerrand Berlin 2025, November 6 and 7</strong>.</p>
76. <p>A welcoming, single-track conference where designers and developers share practical insights and fresh ideas. Connect with 500+ peers and return energised and inspired.</p>
77. <p>Tickets are limited. Secure your place today.</p>
78. <p><a href="https://beyondtellerrand.com/events/berlin-2025/tickets?utm_source=piccalilli&utm_medium=the-index">Reserve your seat</a></p>
79. <hr />
80. <p>Thanks for reading this issue of <a href="https://piccalil.li/the-index/">The Index</a>. We really appreciate you being a subscriber. If you’re enjoying The Index, we’d really
81. appreciate it if you shared this issue with your friends too.</p>
82. <p>Until the next issue, take it easy 👋<br/>
83. Andy</p>
84. ]]></description>
85.        
86.      </item>
87.    
88.      <item>
89.        <title>The entire “Principles” module of Complete CSS is now free</title>
90.        <link>https://piccalil.li/links/the-entire-principles-module-of-complete-css-is-now-free/?ref=main-rss-feed</link>
91.        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
92.        <pubDate>Wed, 29 Oct 2025 10:00:00 GMT</pubDate>
93.        <guid isPermaLink="true">https://piccalil.li/links/the-entire-principles-module-of-complete-css-is-now-free/?ref=main-rss-feed</guid>
94.        <description><![CDATA[<p>It's been nearly a year since we released <a href="https://piccalil.li/complete-css/">Complete CSS</a> and in that time, I've been touring my talk <em><a href="https://www.youtube.com/watch?v=tHtFiciT2tQ">Get the core right and the resilient code will follow</a></em>.</p>
95. <p>The (not so) secret behind that talk is it's actually based on lessons #3, #4 and #5 of Complete CSS. That module is the <em>really important stuff</em> as I see it so I thought, "why not make the whole thing free for people to learn from." That's <strong>8 free lessons</strong>!</p>
96. <p>You can learn about communication, feedback, pacing your work, letting the browser work hard for you, fluid typography and space, layout, organising CSS code <em>and</em> progressive enhancement. That's a heck of a lot of <em>stuff</em> for free.</p>
97. <p>The rest of the course is paid, but I hope by reading this free module, you'll really see the benefit of taking Complete CSS. Like I keep saying: <strong>you won't be the same developer after taking the course</strong>.</p>
98. <p>When you get to the end of the free lessons and hit the marketing page, via the paywall, you'll get a nice bit of discount to say thanks for trying the free content too.</p>
99.        <p><a href="https://piccalil.li/complete-css/lessons/3">Check it out!</a></p>
100.        ]]></description>
101.        
102.      </item>
103.    
104.      <item>
105.        <title>Start implementing view transitions on your websites today</title>
106.        <link>https://piccalil.li/blog/start-implementing-view-transitions-on-your-websites-today/?ref=main-rss-feed</link>
107.        <dc:creator><![CDATA[Cyd Stumpel]]></dc:creator>
108.        <pubDate>Tue, 28 Oct 2025 11:55:00 GMT</pubDate>
109.        <guid isPermaLink="true">https://piccalil.li/blog/start-implementing-view-transitions-on-your-websites-today/?ref=main-rss-feed</guid>
110.        <description><![CDATA[<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API">View Transition API</a> allows us to animate between two states with relative ease. I say relative ease, but view transitions can get quite complicated <em>fast</em>.</p>
111. <p>A view transition can be called in two ways; if you add a tiny bit of CSS, a view transition is initiated on every page change, or you can initiate it manually with JavaScript.</p>
112. <pre><code>@view-transition {
113. navigation: auto;
114. }
115. </code></pre>
116.  
117. SPAs and most frameworks require you to call view transitions for page transitions manually, through JavaScript. If you don’t mess with the browser’s native routing you can use this CSS approach.
118.  
119. <pre><code>if (document.startViewTransition()) {
120. document.startViewTransition(() => {
121. // If view transitions are supported we call a
122. // function encased in a viewTransition
123. filterItems()
124. })
125. } else {
126. // If view transitions are not supported we still
127. // call the filter function
128. filterItems()
129. }
130. </code></pre>
131. <p>When a view transition is initiated it creates two snapshots; one of the current state, and one the future state. The view transition then compares the position, sizing and rotation of the two snapshots and, finally creates a keyframe animation. It’s pretty much how the <a href="https://aerotwist.com/blog/flip-your-animations/">FLIP</a> animation technique works, but CSS does all the heavy lifting, even if JavaScript initiates the view transition.</p>
132. <p>Those snapshots end up in a view transition pseudo element, and by default only a snapshot of the root (HTML) element is created, but you can add more items to the pseudo element by adding <code>view-transition-name</code>s to elements.</p>
133. <h2>Anatomy of a view transition</h2>
134. <pre><code>::view-transition
135. ::view-transition-group(root)
136. ::view-transition-image-pair(root)
137. ::view-transition-old(root)
138. ::view-transition-new(root)
139. </code></pre>
140. <p>Every named view transition gets its own group. Every group has a view-transition-image-pair <em>and</em> a view-transition-old and/or view-transition-new pseudo element.</p>
141. <ul>
142. <li>The view transition group is where the custom matrix animation is added to animate to the new state’s position, rotation and size.</li>
143. <li>The view transition image pair is used to isolate the mix-blend-mode animation that’s on the <code>view-transition-old</code> and <code>view-transition-new</code> states by default.</li>
144. <li>The <code>view-transition-old</code> and <code>view-transition-new</code> states represent the old and new state of the named element.</li>
145. </ul>
146. <p>The snapshots are no longer HTML because it’s a non interactive snapshot of the element as it <em>was</em> when it was captured by the initiation of the view transition. Adding CSS to the view transition selector to change font size or colour, for example, or trying to change the content with JavaScript during the view transition doesn’t work.</p>
147. <h2>Debugging view transitions</h2>
148. <p>You can debug your view transitions with the Animations Drawer in the Chrome Dev Tools, this drawer allows you to slow down animations and even to pause animations, which really gives you some time to inspect what’s going on.</p>
149. <p>Use <kbd>CMD</kbd> + <kbd>Shift</kbd> + <kbd>p</kbd> in the dev tools and type animations to open up the Animations Drawer. For Windows users, switch <kbd>CMD</kbd> with <kbd>CTRL</kbd>.</p>
150. <p><img src="https://piccalilli.imgix.net/images/blog/vt-debugger.png" alt="The animations drawer as described above" /></p>
151. <h2>Unique view transition names and match-element</h2>
152. <p>Adding an element to the view transition pseudo element is easy: give it a unique name with <code>view-transition-name</code>.</p>
153. <p>For <a href="https://developer.chrome.com/docs/web-platform/view-transitions/same-document">Same Document View Transitions</a> you can set the view-transition name to <code>match-element</code>, but if you animate between pages you have to manually add unique view transition names to the elements on both pages.</p>
154. <h2>Setting up your project for view transitions</h2>
155. <p>View transitions can be used to animate filtering, sorting, add to cart, page transitions, and much more, but when you start doing multiple view transitions triggered by different elements and different user interactions, it’s going to be hard to see the forest through the trees.</p>
156. <p>View Transition Types are the answer here, you can add types through JavaScript when you call a view transition:</p>
157. <pre><code>if (document.startViewTransition) {
158. document.startViewTransition({
159. update: () => filterItems(),
160. types: ['filter']
161. })
162. } else {
163. filterItems()
164. }
165. </code></pre>
166.  
167. <p>I recently found out that the first Chrome versions that supported view transitions, do not support View Transition Types which breaks the entire view transition 🥲. Bramus van Damme sent me this <a href="https://developer.chrome.com/docs/web-platform/view-transitions/same-document#not-a-polyfill">try-catch function</a> you could use to catch that. But you could also opt to use data attributes on the HTML tag instead.</p>
168.  
169. <p>The types are added as a pseudo-class <code>:active-view-transition-type(filter)</code>  that you can use to encase your specific styles for that interaction. This is very helpful if you want to have different animations on filter and page transition for example.</p>
170. <p>For specific page transitions between overview and detail pages we can also add a view transition type, but it’s a little more complicated because we currently need to use JavaScript to watch for the <code>pagereveal</code> event and check the from and entry url. Page reveal is called when a user navigates to a new page.</p>
171. <p>A little bird told we might be able to do this directly from CSS soon!</p>
172. <pre><code>window.addEventListener('pagereveal', async (e) =&gt; {
173.  if (e.viewTransition) {
174.  // set a default transition type, you could also leave this empty
175.    let transitionType = 'normal'
176.    // check if navigation activation is defined and use it to get
177.    // from and to url:
178.    if (navigation?.activation?.from && navigation?.activation?.entry) {
179.      transitionType = determineTransitionType(navigation.activation.from, navigation.activation.entry)
180.    }
181.    e.viewTransition.types.add(transitionType)
182.  }
183. })
184.  
185. const determineTransitionType = (from, to) => {
186.  const currentUrl = from?.url ? new URL(from.url) : null
187.  const targetUrl = new URL(to.url)
188.  // get paths:
189.  let currentPath = currentUrl.pathname
190.  let targetPath = targetUrl.pathname
191. const fromType = getPageType(currentPath)
192. const toType = getPageType(targetPath)
193. return `${fromType}-to-${toType}`
194. }
195.  
196. const getPageType = (path) => {
197. // remove first /
198.  path = path.replace('/', '')
199.  // Split path into segments (/blog/view-transitions would be
200.  // split in 'blog' and 'view-transitions' f.e.)
201.  const segments = path.split('/')
202.  const [firstSegment, secondSegment] = segments
203.  
204.  switch (firstSegment) {
205.    case '':
206.      return 'home'
207.    case 'work':
208.    case 'blog':
209.      return secondSegment
210.        ? `${firstSegment}-detail`
211.        : `${firstSegment}-overview`
212.    default:
213.      return 'normal'
214.  }
215. }
216. </code></pre>
217. <p>Going from <code>/work/</code> to <code>/work/piccalilli</code> would return <code>work-overview-to-work-detail</code> as a view transition type.</p>
218. <p></p>
219. <h2>Good defaults and best practices</h2>
220. <div><h2>FYI</h2>
221. <p>View transitions run on CSS keyframes, adding some default styling can make your animations more sturdy.</p>
222. </div>
223. <pre><code>::view-transition-group(*),
224. ::view-transition-old(*),
225. ::view-transition-new(*) {
226. animation-duration: 0.6s;
227. animation-fill-mode: forwards; /* important if you mix durations */
228. animation-timing-function: var(--default-ease);
229. }
230. </code></pre>
231. <p>This will give your animations the same base duration, fill mode and ease.</p>
232. <div><h2>FYI</h2>
233. <p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-class"><code>view-transition-class</code></a> to be able to style multiple items at once, and set all custom animations <strong>without</strong> using the <code>animation</code> shorthand so you don’t override any of your defaults without meaning to.</p>
234. </div>
235. <pre><code>::view-transition-old(.work-item) {
236. /* animation: scale-out 0.4s; < 👎 this will override
237.   your fill-mode and ease */
238. animation-name: scale-out;
239. animation-duration: 0.4s;
240. }
241. </code></pre>
242. <div><h2>FYI</h2>
243. <p>While a long animation might <em>look</em> cool, it will probably be very annoying to your users because the page will be blocked from interaction until the full animation is done.</p>
244. <p>Also, set your unique view transition names inline on your HTML with a CSS variable.</p>
245. </div>
246. <pre><code>&lt;article class="work-item" style="--vt: work-item-1"&gt;
247. <!-- [...] -->
248. </article>
249. </code></pre>
250. <pre><code>.work-item {
251. @media (prefers-reduced-motion: no-preference) {
252. view-transition-name: var(--vt);
253. }
254. view-transition-class: work-item;
255. }
256. </code></pre>
257. <p>This approach has several advantages:</p>
258. <ul>
259. <li>
260. <p>It’s easier to create unique view transition names, especially if you’re using a CMS or framework, using an id or index value in the name.</p>
261. </li>
262. <li>
263. <p>It keeps your HTML from looking like a framework boilerplate like Tailwind because <code>--vt</code> is nice and short</p>
264. </li>
265. <li>
266. <p>If you have multiple view transition types you can conditionally add the items to the pseudo element easier.</p>
267. <pre><code>html:active-view-transition-type(filter) {
268. .work-item {
269. @media (prefers-reduced-motion: no-preference) {
270. view-transition-name: var(--vt);
271. }
272. view-transition-class: work-item;
273. }
274. }
275. </code></pre>
276. </li>
277. <li>
278. <p>If you want to add all view transition names at once you can use an attribute selector:</p>
279. <pre><code>[style*="--vt"] {
280. @media (prefers-reduced-motion: no-preference) {
281. view-transition-name: var(--vt);
282. }
283. }
284. </code></pre>
285. </li>
286. </ul>
287. <div><h2>FYI</h2>
288. <p>Users with vestibular disorders can get sick from all of that slick movement on your website, so make sure you’re mindful of that.</p>
289. </div>
290. <p>The best thing to do is encase all your <code>view-transition-name</code> declarations in a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">prefers reduced motion</a> media query set to <code>no-preference</code>  which will default all view-transitions back to just cross-fading the root element.</p>
291. <pre><code>@media (prefers-reduced-motion: no-preference) {
292. view-transition-name: var(--vt);
293. }
294. </code></pre>
295. <h2>Taking full advantage of the View Transition API</h2>
296. <p>As I mentioned earlier, view transition groups consist of a <code>view-transition-image-pair</code> which has either <code>view-transition-old</code>, <code>view-transition-new</code> or both. Whether there is an old and/or a new state depends on if the named view-transition element exists in the old state and the new state.</p>
297. <p>In practice this means that for animations that change the order, like sorting, items will have an old and a new state, because they exist in the old state <strong>and</strong> the new state.</p>
298. <p></p><p>Watch the <a href="https://iframe.mediadelivery.net/embed/468647/fc73e03e-baec-4544-af1b-2b7f501adf8e?autoplay=true&amp;loop=true&amp;muted=true&amp;preload=false&amp;responsive=true">video</a>.</p><p></p>
299. <p>During the view transition, by default, the <code>view-transition-old</code> pseudo element crossfades into the <code>view-transition-new</code> state, represented by the red and green rectangle respectively.</p>
300. <p>If you filter items out, those items will only have a <code>view-transition-old</code> state because they do not exist in the new state:</p>
301. <p></p><p>Watch the <a href="https://iframe.mediadelivery.net/embed/468647/6ad62d47-ef38-4047-9a77-a7e5ec2eaa95?autoplay=true&amp;loop=true&amp;muted=true&amp;preload=false&amp;responsive=true">video</a>.</p><p></p>
302. <p>In the same way, if filters add items back in, they will only have a <code>view-transition-new</code> state because they did not exist in the old state:</p>
303. <p></p><p>Watch the <a href="https://iframe.mediadelivery.net/embed/468647/74a4d3e5-5045-4430-8f4d-47a114f1a9e4?autoplay=true&amp;loop=true&amp;muted=true&amp;preload=false&amp;responsive=true">video</a>.</p><p></p>
304. <p>With CSS we can check if <code>view-transition-old</code> or <code>view-transition-new</code> is an only child using the <code>:only-child</code> pseudo-class, allowing us to create in-and-out animations for them.</p>
305. <pre><code>::view-transition-old(work-item):only-child {
306. animation-name: animate-out;
307. animation-duration: 0.3s;
308. }
309.  
310. ::view-transition-new(work-item):only-child {
311. animation-name: animate-in;
312. animation-duration: 0.3s;
313. }
314. </code></pre>
315. <p>Try out this demo. When you apply sorting, the in-and-out animations are not triggered but when you filter they are!</p>
316. <p></p><p>See the Pen <a href="https://codepen.io/piccalilli/pen/ByyJqmy">View transitions sorting and filtering
317. </a> by Andy Bell (<a href="https://codepen.io/piccalilli/">@piccalilli</a>) on <a href="https://codepen.io">CodePen</a>.</p><p></p>
318. <p>This is pretty cool for filtering, but also when you want to transition from an overview to a detail page or back like I did <a href="https://cydstumpel.github.io/view-transitions/css-day/">for this website I created</a> for my <a href="https://conffab.com/presentation/css-tried-to-come-for-my-job-a-practical-guide-to-view-transitions-for-creative-developers/?gl=T4jnT1uwe51o">CSS Day Talk</a>. In this talk I also mentioned we’re currently not able to use <code>:has</code> to check if a group has both view-transition-old and -new elements, because this would allow us to set a higher <code>z-index</code> on items that have both, and push them in front of the other elements. But complaining on a stage helps because that’s now <a href="https://github.com/w3c/csswg-drafts/issues/12630">been added as an issue</a>!</p>
319. <h3>Browser compatibility</h3>
320. <p>With the release of Firefox 144, the View Transition API has now been implemented in all the ‘big browsers’ 🥳.</p>
321. <p>Unfortunately, though, Firefox currently only supports same-document view transitions, not transitions between pages (also known cross-document view transitions).</p>
322. <p>If you want to follow along when they <strong>will</strong> support that, you can check <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition">MDN</a> or this handy CodePen that the Chrome team created.</p>
323. <p></p><p>See the Pen <a href="https://codepen.io/piccalilli/pen/EaPbbgx">View Transitions Feature Explorer</a> by Andy Bell (<a href="https://codepen.io/piccalilli/">@piccalilli</a>) on <a href="https://codepen.io">CodePen</a>.</p><p></p>
324.        
325.        ]]></description>
326.        
327.      </item>
328.    
329.      <item>
330.        <title>The Index: Issue #136</title>
331.        <link>https://piccalil.li/the-index/136/?ref=main-rss-feed</link>
332.        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
333.        <pubDate>Fri, 24 Oct 2025 10:55:00 GMT</pubDate>
334.        <guid isPermaLink="true">https://piccalil.li/the-index/136/?ref=main-rss-feed</guid>
335.        <description><![CDATA[<h2><a href="https://alex.party/posts/2025-10-08-junior-dev-tip-scroll-up/?utm_source=the-index&amp;utm_medium=newsletter">Junior dev tip: "scroll up"</a></h2>
336. <p>Timeless and priceless advice for <em>all</em> developers, but especially junior developers.</p>
337. <h2><a href="https://medienbaecker.com/articles/the-web-behind-glass?utm_source=the-index&amp;utm_medium=newsletter">The web behind glass</a></h2>
338. <p>It's frustrating that multi-billion tech corporations create the environment for these sort of tips, but they're useful tips all the same.</p>
339. <h2><a href="https://electricmagicfactory.com/articles/interactive-fluid-typography/?utm_source=the-index&amp;utm_medium=newsletter">Interactive fluid typography</a></h2>
340. <p>We're very big fluid typography fans here and this is yet another interesting approach.</p>
341. <h2><a href="https://automerge.org/?utm_source=the-index&amp;utm_medium=newsletter">Automerge website</a></h2>
342. <p>This is absolutely stunning and a great example of monochromatic design. The software itself is really interesting too.</p>
343. <h2><a href="https://nik.digital/posts/tab-roving?utm_source=the-index&amp;utm_medium=newsletter">Tab roving</a></h2>
344. <p>This is a fantastic piece of writing with some really good, interactive examples to help the knowledge <em>stick</em>.</p>
345. <h2><a href="https://css-tricks.com/an-introduction-to-javascript-expressions/?utm_source=the-index&amp;utm_medium=newsletter">An Introduction to JavaScript Expressions</a></h2>
346. <p>Lastly, our very good friends at CSS-Tricks were kind enough to let Mat post one of the lessons from <a href="https://piccalilli.link/js4e-launch-ti-136">JavaScript for Everyone</a>. If there was ever a try before you buy moment, it's right here!</p>
347. <hr />
348. <p>P.S. <a href="https://codepen.io/OuterVale/pen/dPGJvGV?utm_source=the-index&amp;utm_medium=newsletter">this is a good demo</a>.</p>
349.        
350.        <h2>Sponsor message</h2><a href="https://piccalilli.link/js4e-launch-ti-136"><img src="https://piccalilli.imgix.net/images/ads/js4e-ad-newsletter-launch-last-chance.png" alt="JavaScript for Everyone. Available now. Save £60 using code JS4ELAUNCH" /></a><p>⚠️ <strong>There’s only 4 days left to save £60 with JavaScript for Everyone’s launch price. Don’t miss out!</strong> ⚠️</p>
351. <p>Use code <code>JS4ELAUNCH</code> at checkout to get at checkout to get it for £189, instead of the £249 full price.</p>
352. <p>Our PPP system will give you the cheapest price, for countries that usually qualify, too!</p>
353. <p><a href="https://piccalilli.link/js4e-launch-ti-136">Take the course</a></p>
354. <hr />
355. <p>Thanks for reading this issue of <a href="https://piccalil.li/the-index/">The Index</a>. We really appreciate you being a subscriber. If you’re enjoying The Index, we’d really
356. appreciate it if you shared this issue with your friends too.</p>
357. <p>Until the next issue, take it easy 👋<br/>
358. Andy</p>
359. ]]></description>
360.        
361.      </item>
362.    
363.    </channel>
364.  </rss>
365.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

1. Download the "valid RSS" banner.

2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

3. Add this HTML to your page (change the image src attribute if necessary):

   <a href="http://www.rssboard.org/rss-validator/check.cgi?url=https%3A//piccalil.li/feed.xml"><img src="valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a>

If you would like to create a text link instead, here is the URL you can use:

http://www.rssboard.org/rss-validator/check.cgi?url=https%3A//piccalil.li/feed.xml