{"items":[{"type":["h-entry"],"properties":{"like-of":["https://sweetfont.com"],"published":["2026-02-06T10:41:19.489Z"],"mp-slug":["10-41-19"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2026/02/06/10-41-19"]},"references":{"https://sweetfont.com":{"type":["h-entry"],"properties":{"url":["https://sweetfont.com"],"name":["Sweetfont \u0014 The sweetest way to find Google Fonts"],"summary":["Explore Google Fonts by personality, vibe, and style using interactive controls. Find your perfect typeface."],"featured":["https://sweetfont.com/og-image.png"],"content":[{"html":"

Playful Formal Warm Futuristic

Flavor

Elegant Rugged Loud Quiet

Vibe

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://youtu.be/s8UXyOL7-N4"],"published":["2026-01-23T15:05:42.746Z"],"mp-slug":["03-05-42"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2026/01/23/03-05-42"]},"references":{"https://youtu.be/s8UXyOL7-N4":{"type":["h-entry"],"properties":{"url":["https://youtu.be/s8UXyOL7-N4"],"name":["- YouTube"],"content":[{"html":"

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@kethinov/115340787570739774"],"published":["2025-10-09T06:15:47.170Z"],"mp-slug":["06-15-47"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/10/09/06-15-47"]},"references":{"https://mastodon.social/@kethinov/115340787570739774":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@kethinov/115340787570739774"],"name":["Eric Newport (@kethinov@mastodon.social)"],"summary":["Attached: 1 image @slightlyoff@toot.cafe"],"featured":["https://files.mastodon.social/media_attachments/files/115/340/787/223/203/040/original/34c87d3457c06721.png"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://www.yankodesign.com/2025/10/01/the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year/?utm_source=rss&utm_medium=rss&utm_campaign=the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year"],"published":["2025-10-02T12:58:27.372Z"],"mp-slug":["12-58-27"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/10/02/12-58-27"]},"references":{"https://www.yankodesign.com/2025/10/01/the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year/?utm_source=rss&utm_medium=rss&utm_campaign=the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year":{"type":["h-entry"],"properties":{"url":["https://www.yankodesign.com/2025/10/01/the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year/?utm_source=rss&utm_medium=rss&utm_campaign=the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year"],"name":["The Tiny Workshop That Conquered Britain: How An Engineer\u0019s Space-Saving Genius Won Shed Of The Year"],"summary":["In a world where garden space comes at a premium, Mike Robinson proved that size doesn't matter when innovation takes center stage. The Plumstead engineer's creation, aptly named \"The Tiny Workshop,\"…"],"featured":["https://www.yankodesign.com/images/design_news/2025/09/tiny-workshop/tiny_workshop_yanko_design_01.jpg"],"content":[{"html":"

In a world where garden space comes at a premium, Mike Robinson proved that size doesn’t matter when innovation takes center stage. The Plumstead engineer’s creation, aptly named “The Tiny Workshop,” has just claimed the coveted Cuprinol Shed of the Year 2025 title, demonstrating that brilliant design can triumph over grand scale.

Robinson’s journey began with a familiar problem: his compact courtyard garden needed storage and workspace, but conventional shed solutions would overwhelm the limited area. “We needed a good bit of storage for the garden necessities,” Robinson explained. “Off-the-shelf options would have taken up too much room, so I went with a DIY design and build.”

Designer: Mike Robinson

The solution he crafted over several weekends defies traditional shed expectations. Starting with two sets of heavy-duty steel shelving, Robinson bolted them together and clad the structure in wood painted with black ash outdoor paint. What emerged was a marvel of compact engineering that judges described as “ingenious” and “like nothing we’ve seen before in competition history.”

The Tiny Workshop’s genius lies in its multifunctional design. Two ingenious flaps transform the unit’s usability\u0014one drops down to create a work floor, while another flips up to provide weather protection. Inside, Robinson has maximized every inch with carefully planned drawers, shelves, and hooks that keep tools organized and accessible. Even the brackets holding old spanner handles were custom-designed using a 3D printer, providing both function and visual clues to the contents within.

Perhaps most impressively, the structure features a living green roof that stores garden tools while creating habitat for wildlife. “The green roof will come into its own in the next year or so,” Robinson noted, “and I’m looking forward to seeing it come to life\u0014the shed really is the gift that keeps on giving.”The workshop serves as a triple-duty toolshed, creative workspace, and storage solution for everything from garden necessities to children’s games.

Robinson describes it as “a creative space where I can tinker and mend,” embodying the traditional shed’s role while pushing boundaries of what’s possible in minimal space. Head judge Andrew Wilcox praised the design’s return to practical roots: “Traditionally, sheds have just been seen as somewhere to store your tools, or perhaps somewhere to potter and play\u0014The Tiny Workshop takes this seemingly basic concept and turns it into something so inspired but also still very practical.” The �1,000 prize recognizes more than clever carpentry; it celebrates the democratization of good design. In an era of increasing housing density and shrinking gardens, Robinson’s creation offers hope that thoughtful planning can maximize utility without sacrificing aesthetics or function.

"}],"author":[{"type":["h-card"],"properties":{"url":"https://www.yankodesign.com/2025/10/01/the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year/?utm_source=rss&utm_medium=rss&utm_campaign=the-tiny-workshop-that-conquered-britain-how-an-engineers-space-saving-genius-won-shed-of-the-year","name":"Srishti Mitra"}}],"published":["2025-10-01T19:15:12.000Z"]}}}},{"type":["h-entry"],"properties":{"like-of":["https://sugardave.cloud/posts/astro/using-live-collection-for-webmentions"],"published":["2025-08-04T15:15:48.177Z"],"mp-slug":["03-15-48"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/08/04/03-15-48"]},"references":{"https://sugardave.cloud/posts/astro/using-live-collection-for-webmentions":{"type":["h-entry"],"properties":{"name":["Astro's Live Content Collection - Display Webmentions 🚀"],"url":["https://sugardave.cloud/posts/astro/using-live-collection-for-webmentions"],"author":["sugardave"],"published":["2025-07-23T00:00:00.000Z"],"syndication":["https://news.indieweb.org/en"],"summary":["Using Astro's live content collection to display webmentions for blog posts"],"content":[{"value":"Today I would like to speak about a new experimental feature available in Astro 5.10 and beyond: live content collections. A live content collection allows you to fetch its data at runtime rather than build time, which is how a regular content collection would normally be used.\nContent Collections\nA well-known use case for a content collection is retrieving all the blog posts you have written and then rendering the matching post based on path processing in a “slug page”. Anyone who has gone through the complete “Build your first Astro Blog” tutorial should be familiar with how that works.\nWhen running your Astro site in static mode, this requires all potential post paths to be either manually specified in the slug page or dynamically built using the getStaticPaths method. In either case, these paths are created at build time and cannot be changed afterwards. This is also true when you use server-side rendering (SSR), but the method for matching a path to a post is slightly different and not part of the goal of this post.\nThe important thing to realize is that all “regular” content collections need to have their matching paths resolved at build time for static sites and all the content must be present at build time when using either static builds or SSR.\nLive Content Collections\nWith live content collections, developers can take more control over how they obtain content for rendering. One thing you cannot do with regular content collections is have them fetch their data on-demand when a page is requested. Live content collections enable this.\nFor this site, I have been slowly integrating bits and pieces of interesting concepts from the IndieWeb. One of these is “webmentions”. Without going into too much detail, webmentions are based on microformats and enable disparate, unconnected sites and services to “mention” your content and for your site to be able to discover those mentions and process them how you see fit.\nImplementation\nI am using a custom content loader to fetch webmentions from Webmention.io. I call it webmentionLoader because that seems appropriate. I have defined a Webmention interface based on suggestions from Claude Sonnet 4. This is a naive first pass, so I’m only going to show the parts that I actually needed to get this all to work:\nexport interface Webmention {\n // Core webmention properties\n id: string;\n source: string; // URL of the page that mentions your content\n target: string; // URL of your content being mentioned\n targetPath: string; // Path of the target URL (for easier filtering)\n ...\n}\nI also have a helper function to retrieve the webmentions for my domain. An API key is generated for each site you add to Webmention.io.\nconst getMentionsHTML = async (apiKey: string) => {\n const response = await fetch(\n `https://webmention.io/api/mentions.html?token=${apiKey}`\n );\n if (!response.ok) {\n throw new Error(`Failed to fetch webmentions: ${response.statusText}`);\n }\n return response.text();\n};\nThe actual live content loader function needs to return an object with three required properties:\n\nname: a string to represent the name of the loader\nloadCollection: an async function that will return the entire collection of data or a filtered set\nloadEntry: an async function that will return a single item in the collection based on a filter\n\nSince I want to customize the display of webmention data, I am using JSDOM to parse the HTML returned from the fetch in loadCollection. Another thing to note is that since webmentions are a many-to-one relation with posts, loadEntry will never be used, so I am only returning an error indicating it is not supported.\nexport const webmentionLoader = ({\n apiKey\n}: {\n apiKey: string;\n}): LiveLoader => {\n return {\n name: 'webmention-loader',\n loadCollection: async ({filter}) => {\n const {targetPath} = filter || {targetPath: ''};\n try {\n const webmentions: Webmention[] = await getMentionsHTML(apiKey).then(\n (html) => {\n const dom = new JSDOM(html);\n const doc = dom.window.document;\n const mentions = Array.from(\n doc.querySelectorAll('.h-entry.mention')\n );\n const items = mentions.map((element, index) => {\n // construct a target path from the target URL\n const target = element\n .querySelector('.u-mention-of')\n ?.getAttribute('href') as string;\n const postPath = target ? new URL(target).pathname : '';\n return {\n id: `${postPath}:${index}`,\n data: {\n author: {\n name: element.querySelector('.p-author')\n ?.textContent as string\n }\n },\n source: element\n .querySelector('.u-url')\n ?.getAttribute('href') as string,\n target,\n targetPath: postPath\n };\n });\n if (targetPath) {\n // Filter by targetPath if provided\n return items.filter((item) => item.targetPath === targetPath);\n }\n return items;\n }\n );\n\n return {\n entries: webmentions.map((mention) => ({\n id: mention.id,\n data: mention\n }))\n };\n } catch (error) {\n return {\n error: new Error(\n `Failed to retrieve webmentions: ${error instanceof Error ? error.message : 'Unknown error'}`\n )\n };\n }\n },\n // there can be multiple webmentions for the same target, so we will never use loadEntry\n loadEntry: async () => {\n return {\n error: new Error(`webmentionLoader does not support loadEntry`)\n };\n }\n };\n};\nNow, in my slug page I can handle blog posts as a regular content collection just like I’ve been doing and also grab any webmentions that match them.\n---\nimport type {CollectionEntry} from 'astro:content';\nimport type {LiveDataEntry} from 'astro';\nimport type {Webmention} from '@lib/webmentionLoader';\nimport {getCollection, getLiveCollection, render} from 'astro:content';\nimport MarkdownPostLayout from '@layouts/MarkdownPostLayout.astro';\n\ninterface Props {\n post: CollectionEntry<'blog'>;\n postMentions: LiveDataEntry[];\n}\n\nconst {\n params: {slug},\n url\n} = Astro;\nconst currentPath = url.pathname.endsWith('/')\n ? url.pathname.slice(0, -1)\n : url.pathname;\nconst [post] = (await getCollection('blog', ({id}) => {\n return id === slug || id.startsWith(`${slug}/`);\n})) as Props['post'][];\nconst frontmatter = post?.data;\nconst {entries: webmentions, error} = await getLiveCollection('webmentions', {\n targetPath: currentPath\n});\nconst postMentions: Props['postMentions'] = [];\n\nif (error) {\n console.error(`Error fetching webmentions:, ${error}`);\n} else if (webmentions && webmentions.length > 0) {\n postMentions.push(\n ...(webmentions as LiveDataEntry[]).filter((mention) => {\n const {source, target} = mention.data;\n if (!target || !source) {\n return false;\n }\n try {\n const targetUrl = new URL(target);\n return targetUrl.pathname === currentPath;\n } catch {\n return target === currentPath;\n }\n })\n );\n}\nlet Content;\nif (post) {\n ({Content} = await render(post));\n}\n\nexport const prerender = false;\n---\n\n m.data)}\n>\n {Content && }\n\nIt may be a little messy, but it gets the job done. If you want to see it in action, why not link to this page from your site and submit a mention to the handy manual submission form? The source URL will be the page where you linked to this page and the target URL will be this page. After a successful submission, reload this page and you should see it displayed above the footer. Hopefully 😁\nWrapping Up\nAfter putting it all together, I can now retrieve and display webmentions associated with any blog post on sugardave.cloud, huzzah! In the future, I hope to implement other appropriate webmention collections for my posts. My next target is the u-in-reply-to type so I can see what others think about my posts. Once I have that, I am sure I will have another blog post about that journey.","html":"

Today I would like to speak about a new experimental feature available in Astro 5.10 and beyond: live content collections. A live content collection allows you to fetch its data at runtime rather than build time, which is how a regular content collection would normally be used.

Content Collections

A well-known use case for a content collection is retrieving all the blog posts you have written and then rendering the matching post based on path processing in a “slug page”. Anyone who has gone through the complete “Build your first Astro Blog” tutorial should be familiar with how that works.

When running your Astro site in static mode, this requires all potential post paths to be either manually specified in the slug page or dynamically built using the getStaticPaths method. In either case, these paths are created at build time and cannot be changed afterwards. This is also true when you use server-side rendering (SSR), but the method for matching a path to a post is slightly different and not part of the goal of this post.

The important thing to realize is that all “regular” content collections need to have their matching paths resolved at build time for static sites and all the content must be present at build time when using either static builds or SSR.

Live Content Collections

With live content collections, developers can take more control over how they obtain content for rendering. One thing you cannot do with regular content collections is have them fetch their data on-demand when a page is requested. Live content collections enable this.

For this site, I have been slowly integrating bits and pieces of interesting concepts from the IndieWeb. One of these is “webmentions”. Without going into too much detail, webmentions are based on microformats and enable disparate, unconnected sites and services to “mention” your content and for your site to be able to discover those mentions and process them how you see fit.

Implementation

I am using a custom content loader to fetch webmentions from Webmention.io. I call it webmentionLoader because that seems appropriate. I have defined a Webmention interface based on suggestions from Claude Sonnet 4. This is a naive first pass, so I’m only going to show the parts that I actually needed to get this all to work:

export interface Webmention {\n  // Core webmention properties\n  id: string;\n  source: string; // URL of the page that mentions your content\n  target: string; // URL of your content being mentioned\n  targetPath: string; // Path of the target URL (for easier filtering)\n  ...\n}

I also have a helper function to retrieve the webmentions for my domain. An API key is generated for each site you add to Webmention.io.

const getMentionsHTML = async (apiKey: string) => {\n  const response = await fetch(\n    `https://webmention.io/api/mentions.html?token=${apiKey}`\n  );\n  if (!response.ok) {\n    throw new Error(`Failed to fetch webmentions: ${response.statusText}`);\n  }\n  return response.text();\n};

The actual live content loader function needs to return an object with three required properties:

name: a string to represent the name of the loader
loadCollection: an async function that will return the entire collection of data or a filtered set
loadEntry: an async function that will return a single item in the collection based on a filter

Since I want to customize the display of webmention data, I am using JSDOM to parse the HTML returned from the fetch in loadCollection. Another thing to note is that since webmentions are a many-to-one relation with posts, loadEntry will never be used, so I am only returning an error indicating it is not supported.

export const webmentionLoader = ({\n  apiKey\n}: {\n  apiKey: string;\n}): LiveLoader<Webmention> => {\n  return {\n    name: 'webmention-loader',\n    loadCollection: async ({filter}) => {\n      const {targetPath} = filter || {targetPath: ''};\n      try {\n        const webmentions: Webmention[] = await getMentionsHTML(apiKey).then(\n          (html) => {\n            const dom = new JSDOM(html);\n            const doc = dom.window.document;\n            const mentions = Array.from(\n              doc.querySelectorAll('.h-entry.mention')\n            );\n            const items = mentions.map((element, index) => {\n              // construct a target path from the target URL\n              const target = element\n                .querySelector('.u-mention-of')\n                ?.getAttribute('href') as string;\n              const postPath = target ? new URL(target).pathname : '';\n              return {\n                id: `${postPath}:${index}`,\n                data: {\n                  author: {\n                    name: element.querySelector('.p-author')\n                      ?.textContent as string\n                  }\n                },\n                source: element\n                  .querySelector('.u-url')\n                  ?.getAttribute('href') as string,\n                target,\n                targetPath: postPath\n              };\n            });\n            if (targetPath) {\n              // Filter by targetPath if provided\n              return items.filter((item) => item.targetPath === targetPath);\n            }\n            return items;\n          }\n        );\n\n        return {\n          entries: webmentions.map((mention) => ({\n            id: mention.id,\n            data: mention\n          }))\n        };\n      } catch (error) {\n        return {\n          error: new Error(\n            `Failed to retrieve webmentions: ${error instanceof Error ? error.message : 'Unknown error'}`\n          )\n        };\n      }\n    },\n    // there can be multiple webmentions for the same target, so we will never use loadEntry\n    loadEntry: async () => {\n      return {\n        error: new Error(`webmentionLoader does not support loadEntry`)\n      };\n    }\n  };\n};

Now, in my slug page I can handle blog posts as a regular content collection just like I’ve been doing and also grab any webmentions that match them.

---\nimport type {CollectionEntry} from 'astro:content';\nimport type {LiveDataEntry} from 'astro';\nimport type {Webmention} from '@lib/webmentionLoader';\nimport {getCollection, getLiveCollection, render} from 'astro:content';\nimport MarkdownPostLayout from '@layouts/MarkdownPostLayout.astro';\n\ninterface Props {\n  post: CollectionEntry<'blog'>;\n  postMentions: LiveDataEntry<Webmention>[];\n}\n\nconst {\n  params: {slug},\n  url\n} = Astro;\nconst currentPath = url.pathname.endsWith('/')\n  ? url.pathname.slice(0, -1)\n  : url.pathname;\nconst [post] = (await getCollection('blog', ({id}) => {\n  return id === slug || id.startsWith(`${slug}/`);\n})) as Props['post'][];\nconst frontmatter = post?.data;\nconst {entries: webmentions, error} = await getLiveCollection('webmentions', {\n  targetPath: currentPath\n});\nconst postMentions: Props['postMentions'] = [];\n\nif (error) {\n  console.error(`Error fetching webmentions:, ${error}`);\n} else if (webmentions && webmentions.length > 0) {\n  postMentions.push(\n    ...(webmentions as LiveDataEntry<Webmention>[]).filter((mention) => {\n      const {source, target} = mention.data;\n      if (!target || !source) {\n        return false;\n      }\n      try {\n        const targetUrl = new URL(target);\n        return targetUrl.pathname === currentPath;\n      } catch {\n        return target === currentPath;\n      }\n    })\n  );\n}\nlet Content;\nif (post) {\n  ({Content} = await render(post));\n}\n\nexport const prerender = false;\n---\n\n<MarkdownPostLayout\n  frontmatter={frontmatter ?? {}}\n  mentions={postMentions.map((m) => m.data)}\n>\n  {Content && <Content />}\n</MarkdownPostLayout>

It may be a little messy, but it gets the job done. If you want to see it in action, why not link to this page from your site and submit a mention to the handy manual submission form? The source URL will be the page where you linked to this page and the target URL will be this page. After a successful submission, reload this page and you should see it displayed above the footer. Hopefully 😁

Wrapping Up

After putting it all together, I can now retrieve and display webmentions associated with any blog post on sugardave.cloud, huzzah! In the future, I hope to implement other appropriate webmention collections for my posts. My next target is the u-in-reply-to type so I can see what others think about my posts. Once I have that, I am sure I will have another blog post about that journey.

"}]},"children":[{"type":["h-px"],"properties":{}}]}}},{"type":["h-entry"],"properties":{"like-of":["https://fosstodon.org/@ente/114562028846761783"],"published":["2025-06-18T10:35:11.177Z"],"mp-slug":["10-35-11"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/06/18/10-35-11"]},"references":{"https://fosstodon.org/@ente/114562028846761783":{"type":["h-entry"],"properties":{"url":["https://fosstodon.org/@ente/114562028846761783"],"name":["Ente (@ente@fosstodon.org)"],"summary":["Attached: 1 image Eruption on Mount Etna (Sicily) giving the illusion of a Phoenix in the sky. #Photography"],"featured":["https://cdn.fosstodon.org/media_attachments/files/114/562/021/494/836/601/original/2514eb20fc970b07.jpg"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://briefs.video/videos/introducing-webbed-sites/"],"published":["2025-05-29T08:32:20.870Z"],"mp-slug":["08-32-20"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/05/29/08-32-20"]},"references":{"https://briefs.video/videos/introducing-webbed-sites/":{"type":["h-entry"],"properties":{"url":["https://briefs.video/videos/introducing-webbed-sites/"],"name":["Introducing: Webbed Sites"],"summary":["A video from Webbed Briefs"],"featured":["https://briefs.video/assets/images/thumbnails/introducing-webbed-sites-card.png"],"content":[{"html":"

Introducing Webbed Sites: Everything you need to build and publish your website, without having to write a single line of code.

Just paste your existing design into your Webbed Sites account. From there, your state of the art AI assistant, Martin, takes over.

Martin was trained on a selected corpus of uncensored Hentai, Adolf Hitler\u0019s Mein Kampf, and the source code of Microsoft Frontpage 98. He knows everything a late middle-aged Java programmer knows about coding websites.

In mere moments, Martin processes all your design assets, including your buttons, your links and your headings, and coverts them, magically, into <div>s.

But not just <div>s, of course! There are also <div>s next to <div>s, <div>s inside other <div>s, and <div>s outside <div>s that have <div>s inside them. Our builder also has the capability for <div>s with nonconforming href attributes and <div>s with superfluous and incompatible aria-labels.

Webbed Sites: The no code website building platform that really hopes you like&

<div>s.

Since launching Webbed Sites we've received a lot of feedback. Firstly, I just want to thank everyone for taking the time to reach out. Your comments are highly valued and appreciated. And secondly, I just want to say we are deeply sorry. The accessibility of Webbed Sites is not where it should be right now and that's on us, the Webbed Sites team.

We know we\u0019ve let you down, and it hurts. But please believe us when we say that we\u0019d never deliberately rush out an inaccessible release, to save time and money, at the expense of disabled web users. We just didn\u0019t deliberately not rush out a release, to save time and money, at the expense of disabled users, either. Disableds are a priority to us, and always have been. In fact, many of my wives are disabled. Some since before I even met them.

I don't really know what else to say. It's not an excuse, of course, but please understand that we were under a lot of pressure and had very little time. Plus, of course, we had an enormous surfeit of&

<div>s.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://tilde.zone/@xandra/114547017410429628"],"published":["2025-05-22T09:13:05.937Z"],"mp-slug":["09-13-05"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/05/22/09-13-05"]},"references":{"https://tilde.zone/@xandra/114547017410429628":{"type":["h-entry"],"properties":{"url":["https://tilde.zone/@xandra/114547017410429628"],"name":["alexandra (@xandra@tilde.zone)"],"summary":["Attached: 1 image woo\u0014last looks (and fixes) on the print proof before final printing! IT\u0019S HAPPENING"],"featured":["https://media.tilde.zone/media_attachments/files/114/547/003/957/747/062/original/19d290d7fc702d2b.png"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://dbushell.com/2025/05/07/glossary-web-component/"],"published":["2025-05-07T13:57:50.208Z"],"mp-slug":["01-57-50"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/05/07/01-57-50"]},"references":{"https://dbushell.com/2025/05/07/glossary-web-component/":{"type":["h-entry"],"properties":{"url":["https://dbushell.com/2025/05/07/glossary-web-component/"],"name":["Glossary Web Component"],"summary":["The one where I put the hypercard in the hyperlink"],"featured":["https://dbushell.com/images/articles/2025-05-07-glossary-web-component.png"],"content":[{"html":"

\n Wednesday 7 May\n2025\n\n

I\u0019ve added a secret glossary to my blog! You might find it by hovering over special links. Don\u0019t tell anyone, it\u0019s a secret. At least until I can find a way to style the links without them being a distraction. Do I need to, or can they remain easter eggs?

The Idea

This project came about when I noted concern over my reliance on MDN. I always favour MDN over other sources. I\u0019m lazy. I feel guilty for not linking to the small web, the indie web, the weird web. At first I banned myself from linking to MDN. Later I mulled over the glossary idea. I think I\u0019ve solved it!

The Implementation

I write my blog posts in Markdown. For new glossary terms I now link to a placeholder rather than an external source. For example:

[React](/glossary/react.json)

This references a JSON file that has the following format:

{\n  "title": "React",\n  "description": "A legacy JavaScript framework (turned religion). Favoured by tech bros and famous for bloated bundles and crippling web performance.",\n  "links": [\n    {\n      "name": "JSX.lol",\n      "title": "Does anybody actually like React?",\n      "url": "https://jsx.lol"\n    },\n    {\n      "name": "React",\n      "url": "https://react.dev"\n    }\n  ]\n}

My build script replaces the markdown link with a web component:

<glossary-term id="--term-react">\n  <a href="https://jsx.lol">React</a>\n</glossary-term>

The first link in the JSON is used as the canonical source.

HTML wrapped in a custom element is a perfect example of progressive enhancement. For unsupported browsers there is still an accessible link inside. For browsers that support the Popover API each <glossary-term> element is enhanced with a fancy popover.

If you\u0019ve missed every example so far here is the React link.

I captured a screen recording of how it should appear:

The popover is activated by either hover or keyboard focus. The escape key can also dismiss them. For touchscreens I\u0019m going to test that live&

~~[INSERT TEST RESULTS]~~

Test results: it works fine. If you\u0019ve got one of those new Apple Pencils \u0014 the new new one, not the new old one \u0014 the hover effect is magical. Touch taps are taken straight to the canonical link. The popover might be open upon return. Maybe I should cancel the popover based on touch events to avoid confusion?

Failures

Initially I tried to use CSS anchor positioning.

I really tried. It left me in tears and I rage quit. It might be the most unintuitive, doesn\u0019t work like it says, infuriating web \u001cstandard\u001d ever. When anchoring a popover it\u0019s impossible to ensure elements stay inside the viewport (without JavaScript). Please prove me wrong!

I tried to get creative with view transitions and failed. Safari had some pixel-shifting jank going on. I tried normal transitions with allow-discrete and @starting-style and failed. In an isolated demo it\u0019s all gravy but together this new CSS stuff doesn\u0019t plays nice. It\u0019s not all baseline yet so let\u0019s hope it improves. >\u001e

CSS anchors are Chrome and Chrome derivatives only right now. Safari Technical Preview claims to have support but Apple lies under oath so who knows?

Ultimately I gave up and used JavaScript to calculate position so I can support all browsers. I\u0019ll recharge morale and tackle a v2.0 at a later date.

I don\u0019t plan to immediately retrofit older blog posts with glossary links. Although that could be a quick find & replace if I\u0019m careful. I\u0019m looking for positive feedback before I do. So let me know if you like it (or not). If no one hates it I\u0019ll plough ahead, because I like it. This glossary may just be the third incarnation of my bookmarks blog.

I\u0019m tempted to use a similar technique to create popover cards for linked notes. They have more content so I need to consider that more.

"}],"published":["2025-05-07T00:00:00.000Z"]}}}},{"type":["h-entry"],"properties":{"like-of":["https://hachyderm.io/@charliewilco/114435540754888601"],"published":["2025-05-02T07:28:20.955Z"],"mp-slug":["07-28-20"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/05/02/07-28-20"]},"references":{"https://hachyderm.io/@charliewilco/114435540754888601":{"type":["h-entry"],"properties":{"url":["https://hachyderm.io/@charliewilco/114435540754888601"],"name":["Charlie �\u000f (@charliewilco@hachyderm.io)"],"summary":["web components need a next.js they need something bigger than astro there has to be an application model for web components"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@davatron5000/114379441761385823"],"published":["2025-04-22T10:02:54.987Z"],"mp-slug":["10-02-54"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/04/22/10-02-54"]},"references":{"https://mastodon.social/@davatron5000/114379441761385823":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@davatron5000/114379441761385823"],"name":["Dave Rupert (@davatron5000@mastodon.social)"],"summary":["Final step of my Notion-to-Obsidian migration: Exporting 587 blog posts. Whew."],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://velvetshark.com/ai-company-logos-that-look-like-buttholes"],"published":["2025-04-11T08:43:47.618Z"],"mp-slug":["08-43-47"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/04/11/08-43-47"]},"references":{"https://velvetshark.com/ai-company-logos-that-look-like-buttholes":{"type":["h-entry"],"properties":{"url":["https://velvetshark.com/ai-company-logos-that-look-like-buttholes"],"name":["Why do AI company logos look like buttholes?"],"summary":["A humorous exploration of the uncanny resemblance between AI company logos and human anatomy. Discover why circular, gradient-based designs dominate the AI industry, and what this design convergence…"],"featured":["https://velvetshark.com/images/ai-company-logos-that-look-like-buttholes/why-do-AI-company-logos-look-like-buttholes.png"],"content":[{"html":"

$\"AI$

If you pay attention to AI company branding, you'll notice a pattern:

Circular shape (often with a gradient)
Central opening or focal point
Radiating elements from the center
Soft, organic curves

Sound familiar? It should, because it's also an apt description of... well, you know.

A butthole.

The circular AI logo epidemic

If you ever thought that AI company logos look like buttholes, you're not alone.

FastCompany noticed this trend in 2023 and published an article about it, but (I could only presume) their editors and lawyers didn't let them title the article the way the wanted it to title, so it got published with a more safe for work title: The AI boom is creating a new logo trend: the swirling hexagon. They also were careful not to mention anything anatomical.

I don't have editors or lawyers, so let's take a closer look at some examples:

OpenAI's logo evolution

$\"OpenAI's$

OpenAI's original logo was a simple, text-based mark. Then came the redesign: a perfect circle with a subtle gradient and central void.

OpenAI's official explanation is a masterclass in corporate euphemism:

"The Blossom logo is more than just a visual symbol; it represents the core philosophy that guides our approach to design and innovation. At its heart, the logo captures the dynamic intersection between humanity and technology\u0014two forces that shape our world and inspire our work. The design embodies the fluidity and warmth of human-centered thinking through the use of circles, while right angles introduce the precision and structure that technology demands."

Sure, Sam.

Translation: "We made a circular shape with some angles because it looked nice, then wrote flowery language to justify why our butthole-adjacent design is actually profound."

The fluidity and warmth of human-centered thinking through the use of circles is perhaps the most elegant way anyone has ever described making a logo that resembles an anus.

The Big AI companies

$\"Big$

Looking at the logos of the Big AI companies, you can see that they almost all of them have a circular or snowflake-like shape and a central opening.

Only DeepSeek and DeepMind don't follow the trend. Interestingly, both are sea-related.

Smoking gun: Anthropic's Claude

Up until this point, the logos have been subtle. You might say that the logos are simply circular and there's not much more to it.

But Anthropic's Claude takes it to the next level.

Here's a side-by-side comparison with a drawing from Kurt Vonnegut's book "Breakfast of Champions". I added Claude's logo below for easy comparison.

$\"Vonnegut$

Both the drawing and the description in the book are unambiguous. This is not just "a circular shape with a gradient" anymore, is it?

It's not just AI companies

Even traditional companies aren't immune. Here are a few notable or funny examples. But the percentage of AI company logos that look like buttholes is still significanly higher than than any other industry.

$\"Non-AI$

I especially like the Electrolux one. It's simple, memorable, and once you see a butt and bikini, you can't unsee it.

Why does this keep happening?

There are several factors at play:

Circular design psychology

Circles represent wholeness, completion, and infinity\u0014concepts that align with AI's promise. They're also friendly and non-threatening, qualities companies desperately want to project when selling potentially job-replacing technology.

Unintentional biomimicry

$\"Face$

The human brain finds familiar patterns in random shapes (pareidolia), like a face on Mars, taken by the Viking 1 orbiter and released by NASA in 1976.

But sometimes, designers inadvertently recreate biological forms without realizing the... anatomical implications.

The copycat effect

Once a few major players adopted the circular sphincter aesthetic, everyone followed suit. Now we have an industry where standing out means looking exactly like everyone else's butthole.

Basically, the same reason why so many brands change their logos and look like everyone else.

$\"Tech$

Design by committee

Another factor is how these logos are created. Important corporate decisions involve many stakeholders. The result is often the safest, most inoffensive option, the average of everyone's opinions. In design meetings at AI companies, conversations probably sound like:

Can we make it more futuristic?
It needs to feel advanced but approachable.
Let's add a subtle gradient to convey intelligence.

No single person suggests making a logo that resembles an anus, but when everyone's feedback gets incorporated, that's what often emerges. Risk aversion in corporate environments naturally pushes designs toward familiar, "safe" territory, which apparently means anatomical openings.

What this says about tech branding

This phenomenon reveals something deeper about the tech industry: the fear of standing out too much. Despite claims of innovation and disruption, there's tremendous pressure to look legitimate by conforming to established visual language.

When OpenAI's sphincter-like logo became successful, it created a template that said, "This is what serious AI looks like." Now, any new AI company that doesn't resemble a colorful anatomical opening risks being seen as unserious or unprofessional.

Tech design trends through history

This isn't the first time tech design has gone through a conformity phase. Consider these previous waves:

1990s-2000s: 3D and Glossy - Remember when every logo needed a drop shadow and a glassy shine? Apple's aqua interface set the standard.
2010-2013: Skeuomorphism - Digital designs mimicking physical objects, with stitched leather textures and realistic dials.
2013-2018: Flat Design - Reaction to skeuomorphism brought minimal, clean interfaces with bright colors and no shadows.
2018-2022: Neomorphism - Soft shadows and semi-flat design creating subtle, "touchable" interfaces.
2022-Present: The Butthole Era - Circular gradients with central focal points dominating AI branding.

Each era started with innovations that were quickly copied until the industry reached saturation point and moved on to the next trend.

$\"Sans$

Logos become increasingly interchangeable (one of the bags is real, but they all look the same)

Historic logo disasters: You're not alone

AI companies can take some comfort in knowing they're not the first to face unintended anatomical comparisons. Logo history is filled with disasters but to keep this consistent with the theme of the article, here's a couple of them.

$\"Logo$

Zune logo, when flipped, says something different. Maybe that's one of the reasons why iPod won?
Brazilian Institute of Oriental Studies is a stylized pagoda sillhouetted against the setting sun. Or so the designers wanted it to look. The final result was much more... anatomical. They since changed it to something less suggestive.

Maybe companies should have a panel of "middle schoolers" on their payroll to review logos before launch. They'll find every possible inappropriate interpretation with ruthless efficiency.

Breaking free from the butthole

For companies brave enough to differentiate, here are some alternatives:

Embrace sharp angles - geometric shapes with defined edges create a distinct visual identity
Use negative space creatively - think FedEx arrow, not biological openings
Avoid radial symmetry - not everything needs to be perfectly circular
Skip the gradient - flat design still works
Test with diverse audiences - if five different people independently say "that looks like a butthole," it probably does (show it to teenagers if you want to uncover even the most subtle anatomical implications)

Conclusion

Does this mean AI companies should change their branding? Not necessarily. The familiarity clearly works in building trust. But perhaps the next wave of AI innovation could be accompanied by some visual innovation too.

For companies looking to break the mold, consider these approaches that successful tech brands have used:

Embrace meaningful abstraction - Slack's hashtag-inspired logo communicates collaboration without circular clich�s
Leverage letterforms - Netflix's simple "N" has become instantly recognizable without anatomical confusion
Tell a story - Stripe's distinctive parallel lines reflect payment flows moving seamlessly
Use distinctive color combinations - Twitch's purple branding stands out in a sea of blue tech logos

The challenge for the next generation of AI companies isn't just technological - it's finding visual language that communicates innovation without resorting to the same tired sphincter-inspired patterns.

PS. This post is meant to be humorous, but let's not pretend there isn't a serious point here about the depressing sameness in modern design. No actual anuses were consulted during this research, though several designers were clearly thinking about them.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@owa/114199424779247989"],"published":["2025-03-21T10:46:38.525Z"],"mp-slug":["10-46-38"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/03/21/10-46-38"]},"references":{"https://mastodon.social/@owa/114199424779247989":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@owa/114199424779247989"],"name":["Open Web Advocacy (@owa@mastodon.social)"],"summary":["1/10 =� The � https://open-web-advocacy.org/blog/uk-regulators-final-verdict--apples-browser-engine-ban-harms-competition/"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://fediverse.zachleat.com/@zachleat/114072799841101889"],"published":["2025-02-27T10:16:37.545Z"],"mp-slug":["10-16-37"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/27/10-16-37"]},"references":{"https://fediverse.zachleat.com/@zachleat/114072799841101889":{"type":["h-entry"],"properties":{"url":["https://fediverse.zachleat.com/@zachleat/114072799841101889"],"name":["Zach Leatherman :11ty: (@zachleat@zachleat.com)"],"summary":["Attached: 1 image automated themed screenshot border colors"],"featured":["https://cdn.masto.host/fediversezachleatcom/media_attachments/files/114/072/797/367/820/623/original/0550a7ace24fe33e.png"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@Daojoan/114067260426518351"],"published":["2025-02-26T09:31:20.771Z"],"mp-slug":["09-31-20"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/26/09-31-20"]},"references":{"https://mastodon.social/@Daojoan/114067260426518351":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@Daojoan/114067260426518351"],"name":["JA Westenberg (@Daojoan@mastodon.social)"],"summary":["Why do we talk about walled gardens? That implies something beautiful, something worth defending. It conjures images of beautifully maintained flowerbeds protected from the outside world. But that\u0019s…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://rabbit-rabbit.quest"],"published":["2025-02-17T15:01:25.403Z"],"mp-slug":["03-01-25"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/17/03-01-25"]},"references":{"https://rabbit-rabbit.quest":{"type":["h-entry"],"properties":{"url":["https://rabbit-rabbit.quest"],"name":["Rabbit Rabbit"],"summary":["Rabbit Rabbit is an alternative interpretation of Geohashing. Born out of the xkcd #426 comic strip, Geohashing is a game of spontaneous adventure generation played around the world since 2008. This…"],"content":[{"html":"

Rabbit Rabbit is an alternative interpretation of Geohashing. Born out of the xkcd #426 comic strip, Geohashing is a game of spontaneous adventure generation played around the world since 2008.

This alternative to Geohashing is open to a wider audience offering a bikeable and a walkable mode. This was mainly possible by recalculating a grid splitting the globe into smaller cells. Consequently the travel distance is much shorter. The result is simple but exciting: the daily geohashing locations are more easily reachable for people who cannot use, or don't want to use, cars.
Rabbit Rabbit comes in two modes which differ in the size of their grid, walkable and bikeable.

Last but not least, instead of the daily opening price of the Dow Jones to seed the algorithm, Rabbit Rabbit uses the most recent CO₂ readings of the Global Monitoring Laboratory. Specifically, the smoothed value of the estimated global daily trends. Read more about the data fitting.

Go on a quest today and discover your local area.

In case code is your thing, Rabbit Rabbit is open source and available on here.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://shademap.app/"],"published":["2025-02-17T15:01:06.862Z"],"mp-slug":["03-01-06"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/17/03-01-06"]},"references":{"https://shademap.app/":{"type":["h-entry"],"properties":{"url":["https://shademap.app/"],"name":["Simulate sun shadows"],"summary":["Every mountain, building and tree shadow in the world simulated for any date and time"],"featured":["https://shademap.app/og-image.png"],"content":[{"html":"

$\"Shade$

Shadowmap and sunmap a house or garden
Shadow calculator, sun position, sun path and sun exposure
Simulate shadows cast by buildings, trees and terrain in 3D
Sunlight and shading for sunrise and sunset photos
Prepare a shadow study, shadow analysis or solar analysis
No need to install or buy Google Earth Pro. Works online
Generate shadow accumulation and shadow accrual maps

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://dice.camp/@starhawk/113945849415768787"],"published":["2025-02-17T07:07:39.491Z"],"mp-slug":["07-07-39"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/17/07-07-39"]},"references":{"https://dice.camp/@starhawk/113945849415768787":{"type":["h-entry"],"properties":{"url":["https://dice.camp/@starhawk/113945849415768787"],"name":["Starhawk (@starhawk@dice.camp)"],"summary":["The Internet is mostly shit these days, but every once in a great while I stumble across an incredible, passion-project website. This one is hand-animated weird art and it is worth your time as a fun…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://heatmap.news/technology/deepseek-ai-energy-demand"],"published":["2025-02-11T12:28:47.546Z"],"mp-slug":["12-28-47"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/11/12-28-47"]},"references":{"https://heatmap.news/technology/deepseek-ai-energy-demand":{"type":["h-entry"],"properties":{"url":["https://heatmap.news/technology/deepseek-ai-energy-demand"],"name":["What DeepSeek Means for AI Energy Demand"],"summary":["It\u0019s complicated!"],"featured":["https://heatmap.news/media-library/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpbWFnZSI6Imh0dHBzOi8vYXNzZXRzLnJibC5tcy81NjE3ODIxNS9vcmlnaW4uanBnIiwiZXhwaXJlc19hdCI6MTc2MDUwNjU5Mn0.bctc4qAimxY6rWQj7YZKBFJxfqBJ6Ii0JrAxxT0uMjI/image.jpg?width=1200&height=600&coordinates=0%2C100%2C0%2C100"],"content":[{"html":"

It took the market about a week to catch up to the fact that the Chinese artificial intelligence firm DeepSeek had released an open-source AI model that rivaled those from prominent U.S. companies such as OpenAI and Anthropic \u0014 and that, most importantly, it had managed to do so much more cheaply and efficiently than its domestic competitors. The news cratered not only tech stocks such as Nvidia, but energy stocks, as well, leading to assumptions that investors thought more-energy efficient AI would reduce energy demand in the sector overall.

But will it really? While some in climate world assumed the same and celebrated the seemingly good news, many venture capitalists, AI proponents, and analysts quickly arrived at essentially the opposite conclusion \u0014 that cheaper AI will only lead to greater demand for AI. The resulting unfettered proliferation of the technology across a wide array of industries could thus negate the energy efficiency gains, ultimately leading to a substantial net increase in data center power demand overall.

\u001cWith cost destruction comes proliferation,\u001d Susan Su, a climate investor at the venture capital firm Toba Capital, told me. \u001cPlus the fact that it\u0019s open source, I think, is a really, really big deal. It puts the power to expand and to deploy and to proliferate into billions of hands.\u001d

If you\u0019ve seen lots of chitchat about Jevons paradox of late, that\u0019s basically what this line of thinking boils down to. After Microsoft\u0019s CEO Satya Nadella responded to DeepSeek mania by posting the Wikipedia page for this 19th century economic theory on X, many (myself included) got a quick crash course on its origins. The idea is that as technical efficiencies of the Victorian era made burning coal cheaper, demand for \u0014 and thus consumption of \u0014 coal actually increased.

While this is a distinct possibility in the AI space, it\u0019s by no means a guarantee. \u001cThis is very much, I think, an open question,\u001c energy expert Nat Bullard told me, with regards to whether DeepSeek-type models will spur a reduction or increase in energy demand. \u001cI sort of lean in both directions at once.\u001d Formerly the chief content officer at BloombergNEF and current co-founder of the AI startup Halcyon, a search and information platform for energy professionals, Bullard is personally excited for the greater efficiencies and optionality that new AI models can bring to his business.

But he warns that just because DeepSeek was cheap to train \u0014 the company claims it cost about $5.5 million, while domestic models cost hundreds of millions or even billions \u0014 doesn\u0019t mean that it\u0019s cheap or energy-efficient to operate. \u001cTraining more efficiently does not necessarily mean that you can run it that much more efficiently,\u001d Bullard told me. When a large language model answers a question or provides any type of output, it\u0019s said to be making an \u001cinference.\u001d And as Bullard explains, \u001cThat may mean, as we move into an era of more and more inference and not just training, then the [energy] impacts could be rather muted.\u001d

DeepSeek-R1, the name for the model that caused the investor freakout, is also a newer type of LLM that uses more energy in general. Up until literally a few days ago, when OpenAI released o3-mini for free, most casual users were probably interacting with so-called \u001cpretrained\u001d AI models. Fed on gobs of internet text, these LLMs spit out answers based primarily on prediction and pattern recognition. DeepSeek released a model like this, called V3, in September. But last year, more advanced \u001creasoning\u001d models, which can \u001cthink,\u001d in some sense, started blowing up. These models \u0014 which include o3-mini, the latest version of Anthropic\u0019s Claude, and the now infamous DeepSeek-R1 \u0014 have the ability to try out different strategies to arrive at the correct answer, recognize their mistakes, and improve their outputs, allowing for significant advancements in areas such as math and coding.

But all that artificial reasoning eats up a lot of energy. As Sasha Luccioni, the AI and climate lead at Hugging Face, which makes an open-source platform for AI projects, wrote on LinkedIn, \u001cTo set things clear about DeepSeek + sustainability: (it seems that) training is much shorter/cheaper/more efficient than traditional LLMs, *but* inference is longer/more expensive/less efficient because of the chain of thought aspect.\u001d Chain of thought refers to the reasoning process these newer models undertake. Luccioni wrote that she\u0019s currently working to evaluate the energy efficiency of both the DeepSeek V3 and R1 models.

Another factor that could influence energy demand is how fast domestic companies respond to the DeepSeek breakthrough with their own new and improved models. Amy Francetic, co-founder at Buoyant Ventures, doesn\u0019t think we\u0019ll have to wait long. \u001cOne effect of DeepSeek is that it will highly motivate all of the large LLMs in the U.S. to go faster,\u001d she told me. And because a lot of the big players are fundamentally constrained by energy availability, she\u0019s crossing her fingers that this means they\u0019ll work smarter, not harder. \u001cHopefully it causes them to find these similar efficiencies rather than just, you know, pouring more gasoline into a less fuel-efficient vehicle.\u001d

In her recent Substack post, Su described three possible futures when it comes to AI\u0019s role in the clean energy transition. The ideal is that AI demand scales slowly enough that nuclear and renewables scale with it. The least hopeful is that immediate, exponential growth in AI demand leads to a similar expansion of fossil fuels, locking in new dirty infrastructure for decades. \u001cI think that's already been happening,\u001d Su told me. And then there\u0019s the techno-optimist scenario, linked to figures like Sam Altman, which Su doesn\u0019t put much stock in \u0014 that AI \u001cdrives the energy revolution\u001d by helping to create new energy technologies and efficiencies that more than offset the attendant increase in energy demand.

Which scenario predominates could also depend upon whether greater efficiencies, combined with the adoption of AI by smaller, more shallow-pocketed companies, leads to a change in the scale of data centers. \u001cThere\u0019s going to be a lot more people using AI. So maybe that means we don\u0019t need these huge, gigawatt data centers. Maybe we need a lot more smaller, megawatt-size data centers,\u001d Laura Katzman, a principal at Buoyant Ventures, told me. Katzman has conducted research for the firm on data center decarbonization.

Smaller data centers with a subsequently smaller energy footprint could pair well with renewable-powered microgrids, which are less practical and economically feasible for hyperscalers. That could be a big win for solar and wind plus battery storage, Katzman explained, but a boondoggle for companies such as Microsoft, which has famously committed to re-opening Pennsylvania\u0019s Three Mile Island nuclear plant to power its data centers. \u001cBecause of DeepSeek, the expected price of compute probably doesn\u0019t justify now turning back on some of these nuclear plants, or these other high-cost energy sources,\u001d Katzman told me.

Lastly, it remains to be seen what nascent applications cheaper models will open up. \u001cIf somebody, say, in the Philippines or Vietnam has an interest in applying this to their own decarbonization challenge, what would they come up with?\u001d Bullard pondered. \u001cI don\u0019t yet know what people would do with greater capability and lower costs and a different set of problems to solve for. And that\u0019s really exciting to me.\u001d

But even if the AI pessimists are right, and these newer models don\u0019t make AI ubiquitously useful for applications from new drug discovery to easier regulatory filing, Su told me that in a certain sense, it doesn't matter much. \u001cIf there was a possibility that somebody had this type of power, and you could have it too, would you sit on the couch? Or would you arms race them? I think that is going to drive energy demand, irrespective of end utility.\u001d

As Su told me, \u001cI do not think there\u0019s actually a saturation point for this.\u001d

"}],"published":["2025-02-04T21:11:08.000Z"]}}}},{"type":["h-entry"],"properties":{"like-of":["https://web.dev/blog/baseline-scrollbar-props?hl=en"],"published":["2025-02-10T11:20:08.351Z"],"mp-slug":["11-20-08"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/02/10/11-20-08"]},"references":{"https://web.dev/blog/baseline-scrollbar-props?hl=en":{"type":["h-entry"],"properties":{"url":["https://web.dev/blog/baseline-scrollbar-props?hl=en"],"name":["CSS scrollbar-color and scrollbar-gutter are Baseline Newly available | Articles | web.dev"],"summary":["CSS scrollbar-color and scrollbar-gutter have landed in all major browser engines, making it Baseline Newly available."],"featured":["https://web.dev/static/blog/baseline-scrollbar-props/image/scrollbar-styling-baseline.png"],"content":[{"html":"

Published: Feb 1, 2025\n

With the scrollbar-color property you can change the colors used for scrollbars. You can specify the color of the thumb and the color track with it. Using scrollbar-width you can opt-in to a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability.

Learn more about scrollbars and how to style them in scrollbar styling.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-02-01 UTC.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://somepx.itch.io"],"published":["2025-01-30T17:55:54.438Z"],"mp-slug":["05-55-54"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/30/05-55-54"]},"references":{"https://somepx.itch.io":{"type":["h-entry"],"properties":{"url":["https://somepx.itch.io"],"name":["somepx"],"summary":["a bold, boxy, 10px tall pixel font!a tiny, smallcaps, 6px tall pixel font!"],"featured":["https://img.itch.zone/aW1nLzEzNDcyNjU0LnBuZw==/508x254%23mb/%2FKebc9.png"],"content":[{"html":"

a bold, boxy, 10px tall pixel font!

a tiny, smallcaps, 6px tall pixel font!

a classic, fantasy, 9px tall pixel font!

an elegant, cozy, 8px tall pixel font!

a tiny, drowsy, sunny, 6px tall pixel font!

a small, sci-fi, futuristic, 7px tall pixel font!

a smallcaps, horror, 11px tall pixel font!

a big, bold, unique, 14px tall pixel font!

a distinctive, premium, 9px tall pixel font!

a playful, unique, monospace, 7px tall pixel font!

a classic, tiny, fantasy, 7px tall pixel font!

a strong, metal, horror, 14px tall pixel font!

a gigantic, modern, monospace, 17px tall pixel font!

a wacky, distinctive, 9px tall pixel font!

a chunky, huge, comic, 15px tall pixel font!

a clear, readable, 8px tall pixel font!

a fantasy, arcane, 9px tall pixel font!

a classic, fantasy, 7px tall pixel font!

a round, bold, 12px tall pixel font!

a thin, elegant, 11px tall pixel font!

a FREE 9px tall pixel font!

a medieval, fantasy, legendary, 8px tall pixel font!

a thick, all-purpose, 9px tall pixel font!

a tiny, classic, stylish, 7px tall pixel font!

a fantasy, ornate, 12px tall pixel font!

a big, bold, all-purpose, 20px tall pixel font!

an elegant, classic, serif, 9px tall pixel font!

a bold, solid, rational, 10px tall pixel font!

a round, cheerful, comic, 13px tall pixel font!

a gift from the Fairy Queen!

pixel font

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@mdn/113901386762398350"],"published":["2025-01-28T06:49:04.935Z"],"mp-slug":["06-49-04"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/28/06-49-04"]},"references":{"https://mastodon.social/@mdn/113901386762398350":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@mdn/113901386762398350"],"name":["MDN Web Docs (@mdn@mastodon.social)"],"summary":["JavaScript's date object has been tricky for years, but that will change soon. The NEW Temporal API brings, < Easily handle time zones =� Precise date math =R Parse ISO strings without errors \u001b…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://nokiadesignarchive.aalto.fi"],"published":["2025-01-20T10:15:23.544Z"],"mp-slug":["10-15-23"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/20/10-15-23"]},"references":{"https://nokiadesignarchive.aalto.fi":{"type":["h-entry"],"properties":{"url":["https://nokiadesignarchive.aalto.fi"],"name":["Nokia Design Archive"],"summary":["Exploring unseen concepts of design and opportunities of design-driven transformation and change"],"featured":["https://nokiadesignarchive.aalto.fi/images/preview--nokia-design-archive.jpg"],"content":[{"html":"

entries

$\"Aalto$

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["http://estacions.albertguillaumes.cat"],"published":["2025-01-16T10:32:04.032Z"],"mp-slug":["10-32-04"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/16/10-32-04"]},"references":{"http://estacions.albertguillaumes.cat":{"type":["h-entry"],"properties":{"url":["http://estacions.albertguillaumes.cat"],"name":["Estacions i intercanviadors"],"summary":["Una galeria de perspectives amb la topologia de diverses estacions de metro d'Europa."],"featured":["http://estacions.albertguillaumes.cat/img/barcelona/collblanc.png"],"content":[{"html":"

El TRAM d'Alacant, el tren-tram propietat de la Generalitat Valenciana, disposa d'un tram subterrani amb tres estacions al centre de la ciutat, totes elles diferents. Aquestes tres estacions disposen de les andanes al nivell -2, mentre que el nivell -1 est� reservat als vest�buls. Les estacions d'Estels (Luceros) i Mercat tenen acc�s directe als aparcaments subterranis situats sobre els t�nels del TRAM.

Actualment el metro d'Amsterdam t� dos grups de l�nies diferenciats. Per una banda hi ha la l�nia Nord-Sud, inaugurada fa poc i per on hi discorren els trens de la l�nia M52. Al tram central, la via est� soterrada a una certa profunditat, amb un t�nel independent per cada via. L'altre grup de l�nies est� format pels serveis M50, M51, M53 i M54, que circulen majorit�riament en superf�cie, per vies paral�leles als ferrocarrils neerlandesos. La part m�s c�ntrica d'aquest grup de l�nies est� soterrada a poca profunditat. Aquestes estacions solen tenir una andana central al nivell -2 i un o dos vest�buls al nivell -1. La resta d'estacions de metro s�n en superf�cie o viaducte i tenen una andana central.

Tenint en compte que la majoria de l�nies circulen paral�lelament al ferrocarril, els intercanviadors entre aquests dos mitjans de transprt s�n r�pids.

Anvers t� premetro (tramvia soterrat) des de 1975. Un dels objectius era creuar el riu Escalda i fer arribar el tramvia al marge esquerre.

La xarxa consta de dos grups de l�nies. El primer grup el forma la l�nia que comen�a a Linkeroever, va al centre hist�ric i continua a l'Sportpaleis, amb un ramal a Plantin, tot formant un triangle prop de l'estaci� ferrovi�ria. El segon t�nel va ser obert el 2015, i va del centre hist�ric cap a l'est de la ciutat. La majoria d'estacions encara no estan completades.

Ara mateix hi ha un sol macrointercanviador format per l'estaci� ferrovi�ria central i les estacions de premetro Astrid i Diamant. Entre aquestes dues estacions hi ha el triangle ferroviari esmentat abans i un aparcament subterrani de bicicletes. Com que els t�nels estan constru�ts amb est�ndards de metro, les vies no es poden tallar i hi ha salts de molt�. Per aquest motiu les andanes del t�nel hist�ric es troben en dos nivells tant a Astrid com a Diamant.

Barcelona �s la reina dels passadissos llargs. Fins el 1995, any en que es va inaugurar la L2, totes les estacions de correspond�ncia tenien passadissos que superaven els 100 m, tret de Sagrera i Catalunya (aquest �ltim per poc).

Hi ha diversos motius que expliquen la construcci� de passadissos tan llargs: per una banda hi ha la manca de planifciaci� o la visi� del metro com a l�nies individuals i no com una xarxa colectiva: les estacions d'Urquinaona de la L1 i la L4 es van obrir el 1932, per� eren operades per companyies diferents. El passad�s no es va obrir fins el 1973. L'estaci� de Pla�a de Sants de la L5 es va intentar construir tan a prop com fos possible de l'estaci� de la L1, oberta 43 anys abans, per� tot i aix� els separen uns 150 m i les vies d'ADIF.

D'altra banda, als anys 60 i 70 es va prerir que les estacions de correspond�ncia estiguessin separades uns 100-150 m, de manera que constru�nt accessos a cada extrem de l'estaci�, s'incrementava l'accessibilitat. Estacions com Verdaguer, Sants Estaci� o Diagonal/Proven�a en s�n exemples.

Els intercanviadors oberts a partir dels anys 80 solen tenir les l�nies m�s juntes. Amb la inaguraci� de la L9, i a causa de la seva profunditat, hi ha un nou tipus de transbordament vertical, que sol unir els vest�buls i les andanes de la L9 amb escales autom�tiques o amb ascensors (aquests �ltims quan estan a molta profunditat).

Pel que fa a la topologia de les estacions, les estacions barcelonines solen ser senzilles: generalment al nivell -1 hi ha els vest�buls (un o dos) i al nivell -2 hi ha andanes laterals, tot i que des del 2000 es prefereixen les andanes centrals. En cas que l'estaci� sigui d'enlla�, normalment es fa passant pel vest�bul (sense passar per validadores, excepte si es canvia de companyia) i no directament de les andanes.

Tot i aix�, si hi ha un tipus cl�ssic d'estaci� de Barcelona s�n les estacions amb dues andanes laterals i una central. L'objectiu era fer pujar els passatgers per les andanes laterala i fer-los baixar per la central (o al rev�s), evitant aix� el creuament dels viatgers que entren i surten. Aquest concepte es coneix com a soluci� Barcelona. Tot i que no va ser el primer metro en tenir una estaci� amb aquesta configuraci�, a Barcelona va ser com� construir estacions d'aquesta manera entre els anys 30 i els anys 50.

L'U-Bahn i l'S-Bahn s�n les dues xarxes de metro de Berl�n. La primera �s propietat de la ciutat i la segona �s dels ferrocarrils alemanys. L'S-Bahn generalment circula en superf�cie o en viaducte i l'U-Bahn en t�nel, tot i que no sempre �s aix�.

Es pot dir que els t�nels de les l�nies m�s antigues s�n molt superficials, de manera que en moltes estacions, les escales dels accessos van directament a l'andana. Les l�nies construides despr�s de la Primera Guerra Mundial solen ser una mica m�s profundes, de manera que entre les andanes i el carrer hi ha espai per posar un nivell amb un vest�bul.

A Berl�n hi predominen les estacions amb andanes centrals. Com que s�n superficials i les andanes s�n centrals, els intercanviadors solen ser bastant senzills i molt curts. Hi ha molts intercanviadors que tenen un disseny tipus sandwich.

Tot i que el metro de Bilbao va ser inaugurat el 1995, una part del seu tra�at ha estat reaprofitat d'antigues l�nies ferrovi�ries d'ample m�tric, com la Bilbao - Plentzia. El metro de Bilbao �s operat per dues operadores diferents: Metro Bilbao opera les l�nies 1 i 2, mentre que Euskotren opera la l�nia 3 juntament amb les l�nies E1, E3 i E4 de rodalia, amb les quals comparteix vies.

Degut a l'orografia de la zona, i a la tipologia d'estacions �s molt variada. Les estacions del centre solen estar a bastanta profunditat, tant pel fet d'haver de travessar el Nerbion per sota, com per haver de superar els turons amb forta pendent formats entre els meandres. Les estacions de la l�nia de Plentzia solen ser en superf�cie, ja que el tra�at de l'antic carrilet tamb� ho era.

En el cas de la l�nia 3, s'han aprofitat les antigues estacions de Bilbao-Aduana (Zazpikaleak/Casco Viejo) i Matiko, amndues de l'antiga l�nia Bilbao - Plentzia, si b� el tra�at entre aquestes estacions es fa a trav�s d'un t�nel nou.

Els tipus de transbordament s�n bastant variats. En el cas d'Ametzola i Lutxana, es pot transbordar molt r�pidament segons el sentit en que es viatgi.

L'autor no ha estat mai a Boston. Tota la informaci� ha estat treta a partir d'esbossos d'estacions de Wikimedia Commons, aix� com de fotografies i v�deos penjats a internet.

Les quatre l�nies que passen pel centre s�n centenaries. Tres d'aquestes van ser obertes com l�nies de tramvia que discorrien en t�nel pel centre de la ciutat. Dues d'aquestes s'han reconvertit en metro est�ndard, de manera que la l�nia verda �s la �nica que continua operant-se com un tramvia subterrani.

L'antiguitat de les estacions i el fet que inicialment algunes fossin l�nies de tramvia, fa que la topologia d'algunes estacions cridi l'atenci�. Per una banda, s'observa que algunes estacions de la l�nia taronja tenen les andanes esglaonades. A l'estaci� State cal sumar-hi que cada andana es troba en un nivell diferent.

En general, les estacions s�n molt superficials. Aix� s'observa a l'estaci� Downtown Crossing, on l'andana de la l�nia verda t� una forma peculiar. El motiu d'aix� �s que la via d'anada discorria per sota d'un carrer estret i la de tornada en passava per sota d'un altre. La zona es va reurbanitzar fa unes quantes d�cades, per� el tra�at dels t�nels es mant�.

Tractant-se d'una xarxa no planificada i que les l�nies que van ser construides i operades per companyies diferents, crida l'atenci� que els transbordaments siguin curts.

El metro de Brussel�les �s un metro ben planificat. Es va planificar a finals dels anys 60 i s'han anat constru�nt 4 l�nies, de la seg�ent manera: si el tram constru�t no �s gaire llarg, s'obre com una l�nia de premetro (tramvia subterrani), amb rampes que conecten el t�nel amb la xarxa de tramvia en superf�cie. Quan la construcci� de la l�nia est� m�s avan�ada, es treuen les rampes d'acc�s i ja s'explota com una l�nia de metro, amb material m�bil de metro. Actualment dues d'aquestes l�nes s�n de metro pur (l�nies 1/5 i 2/6) i dues s�n de premetro (tramvies 3/4 i tramvia 7).

Com que tota la xarxa s'ha anat constru�nt sobre el mateix pla, les estacions tamb� estan ben dissenyades, atenent a les modificacions previstes sobre el pla. Aix� doncs, gaireb� tots els intercanviadors s�n de transbordament curt: Beekkant i Gare du Midi s�n cross-platform, Arts-Loi, Montgomery i Rogier s�n tipus sandwich. Nom�s fallen l'estaci� De Brouck�re i la Gare Centrale, que tenen passadissos llargs.

Les estacions solen tenir les andanes al nivell -2. El nivell -1 es reserva al vest�bul. Les estacions de la l�nia nord-sud (tramvies 3/4) estan construides amb la soluci� Barcelona, amb embarcament per l'andana central (excepte a Gare du Midi, on �s al rev�s)

Per combatre el frau, fa uns deu anys es van comen�ar a equipar les estacions amb torniquets (fins llavors hi havia un sistema d'honor), per� degut a la complexitat d'algunes estacions c�ntriques, no totes les estacions en tenen instal�lades.

El metro de Bucarest consta de 5 l�nies, encara que les l�nies M1 i M3 comparteixen vies en bona part del recorregut. El pla original dels anys 70 consistia en construir tres l�nies: una est-oest (M3 i part sud de la M1), una nord-sud (M2) i una circular d'uns 40 km de longitud.

A difer�ncia dels metros d'altres pa�sos de l'�rbita comunista, el de Bucarest no va ser construit a gran profunditat, sin� constru�t amb el m�tode cut-and-cover. Les andanes de les estacions es troben generalment al nivell -1 o -2 i consten d'andanes centrals, encara que algunes de la l�nia M1 tenen andanes laterals.

Al metro de Budapest cal separar la l�nia 1 de la resta de l�nies. La l�nia 1 va ser inaugurada el 1896, esdevenint aix� la tercera ciutat europea en tenir metro, despr�s de Londres i Glasgow. Tal i com passa amb els metros d'aquesta �poca, el g�lib dels t�nels �s molt redu�t. Els trens nom�s fan 2,60 m d'altura i 30 m de llarg. El t�nel va ser constru�t amb el m�tode cut-and-over, de manera que les estacions s�n molt superficials. Les estacions consten de dues andanes laterals.

Les l�nies 2 i 3 tenen estil m�s sovi�tic, si b� l'ornamentaci� de les estacions no t� res a veure. La l�nia 4 �s de construcci� recent. En aquestes l�nies, les vides discorren en dos t�nels paral�lels a for�a profunditat. Les estacions consten d'andanes centrals, en dues naus diferents, connectades a trav�s d'un sol tram llarg d'escales mec�nques fins a un vest�bul situat a peu de carrer o a un pis sota terra. En cas que tinguin el vest�bul subterrani, normalment en surten escalinates que porten directament a les andanes de tramvia.

Als extrems de la l�nia 3, les vies circulen en un sol t�nel a poca profunditat. Les estacions disposen d'un o dos vest�buls al nivell -1 i de dues andanes laterals al nivell

Els transbordaments difereixen molt entre estaci� i estaci�. A De�k Ferenc T�r i K�klvin T�r, els transbordaments s�n bastant r�pids, consistint de dos trams d'escales separats per un passad�s curt. En altres estacions, la topologia dep�n bastant de la profunditat de cada l�nia, tot i que a K�leti p�lyaudvar s'ha de fer el transbordament passant pel vest�bul.

L'autor no ha estat mai a Buenos Aires. Tota la informaci� ha estat treta de licitacions d'obres, fotografies i v�deos penjats a internet.

El Subte de Buenos Aires �s el m�s antic d'Am�rica del Sud. Consta de 6 l�nies, 4 de les quals s�n radials i m�s o menys paral�leles entre si (est-oest) i dues l�nies transversals (nord-sud).

El 100% de la xarxa �s subterr�nia i tret de la l�nia H, que �s de construcci� recent, els t�nels s�n superficials. La majoria d'estacions tenen andanes laterals, per� aquelles que en algun moment han estat terminals poden tenir tamb� andanes centrals.

Al nivell inferior hi ha situades les andanes. Si hi ha espai suficient entre el carrer i les andanes, hi ha un vest�bul en un nivell intermedi, comunicat per escalinates i escales autom�tiques de pujada des del nivell andana. A les estacions m�s superficials, els vest�buls es troben al nivell de les andanes, fent impossible el canvi d'andana sense passar pel carrer.

Una particularitat del Subte �s que els noms de les estacions s�n indepedents per a cada l�nia. Aix� doncs, una mateixa estaci� de correspond�ncia t� noms diferents per a cadascuna de les l�nies que hi passen. Tamb� passa la situaci� contr�ria: hi ha estacions amb el mateix nom en l�nies diferents, que no tenen res a veure l'una amb l'altra (com Callao i Pueyrred�n, noms presents a les l�nies B i D).

El metro de Copenhaguen �s un metro modern. Com a tal, ha estat dissenyat pensat amb la usabilitat i la comoditat dels passatgers. La majoria d'estacions subterr�nies fan la mateixa pinta: vest�bul al nivell -1, repl� al nivell -2 i andana central al nivell -3. Del vest�bul a les andanes nom�s s'hi pot anar amb escales mec�niques o ascensor. Les de pujada estan separades de les de baixada.

Els transbordaments es fan des del nivell vest�bul a Kongens Nytorv i a Frederiksberg, per� no a N�rreport, on es fa des de l'andana i el transbordament �s gaireb� directe fins a l'S-tog i als trens regionals.

El metro de Frankfurt, tot i que oficialment se l'anomena U-Bahn (l'equivalent a un metro), t�cnicament �s un Stadtbahn (premetro o tramvia subterrani), encara que el material m�bil i les andanes siguin de pis alt. Juntament amb l'U-Bahn, l'S-Bahn tamb� forma part de la xarxa b�sica de transport de la ciutat.

Els principals intercanviadors de la ciutat permeten transbordaments r�pids entre les diferents l�nies ferrovi�ries. Hi ha transbords tipus sandwich a tots els intercanviadors principals. Fins i tot, a l'estaci� Hauptwache, es permet fer un transbordament cross-platform entre l'S-Bahn i les l�nies U6 i U7 de l'U-Bahn.

El metro de Glasgow �s un dels metros m�s peculiars del m�n. Va ser obert el 1896 com una l�nia circular, impulsat per cable, igual que els tramvies de San Francisco. El metro es va renovar totalment entre 1977 i 1980, per canviar el sistema de tracci�, construir cotxeres noves, recol�locar estacions i reformar la resta d'estacions a est�ndards propis del segle XX.

Abans de la remodelaci� totes les estacions tenien una andana central bastant estreta. Des de l'extrem de l'andana en sortien unes escales que conduien cap al vest�bul i la sortida. Les andanes permetien l'aturada de trens de dos cotxes. Avui en dia es mant� aquesta estructura en la majoria d'estacions, encara que algunes han incorporat escales autom�tiques entre el vest�bul i el carrer. Les estacions m�s transitades van ser renovades totalment: a Buchanan Street se li va afegir una andana lateral. St Enoch es va suprimir l'andana central i se'n van construir dues de laterals. L'estaci� Partick va ser constru�da durant la renovaci� del metro, per permetre un transbordament r�pid amb ScotRail.

Hannover disposa d'un sistema d'Stadtbahn, que seria l'equivalent d'un pre-metro en altres pa�sos: un tramvia que �s subterrani al centre de la ciutat.

Al centre disposa de tres t�nels (A, B i C), que es creuen a l'estaci� de Kr�pcke, una veritable obra civil. Entre Kr�pcke i Aegidientorplatz les l�nies B i C van sobreposades.

El disseny de les estacions �s senzill: estacions subterr�nies amb un vest�bul al nivell -1 i andanes laterals al nivell -2.

Les l�nies englobades a la xarxa de metro de Li� s�n bastant diferents, tant hist�ricament com t�cnicament. La l�nia A circula amb pneum�tics i t� conducci� manual. Les l�nies B i D tamb� circulen amb pneum�tics per� tenen conducci� autom�tica (la B des del 2022 i la D des d'origen). La l�nia C aprofita el tra�at d'un antic funicular, i per poder circular per pendents de fins el 1760 (en un metro rarament se superen les rampes del 400) utilitza cremallera entre H�tel de Ville i Croix Rousse.

A les l�nies A i B el metro circula molt superficialment, fins al punt que la l�nia A creua el Roina per sobre, amagat dins del calaix del pont Morand. Les estacions d'aquestes l�nies solen constituir un sol nivell amb andanes laterals. Algunes estacions tenen un pas inferior que connecten els dos nivells. La l�nia D circula lleugerament a una cota m�s inferior que les l�nies A i B, de manera que les andanes solen quedar a un nivell -2 i el vest�bul al nivell -1. Aquesta situaci� tamb� es dona al tram oriental de la l�nia A.

A Li� hi havia un sistema d'honor fins fa una quinzena d'anys. Tenint en compte que les estacions superficials solen tenir entrades secund�ries, �s normal veure diverses validadores al llarg de les andanes.

Els transbordaments solen ser bastant eficients i curts: H�tel de Ville, Saxe-Gambetta o Charpennes s�n exemples bons. Els transbordaments metro-SNCF de Perrache i Part-Dieu tenen passadissos llargs.

Actualment el metro de Lisboa t� quatre l�nies. Fins a mitjan anys 90 la xarxa estava formada per una sola l�nia amb forma d'Y. Aquesta l�nia es va partir en tres i es va obrir la l�nia vermella.

Aix� doncs, la totalitat dels intercanviadors metro-metro a Lisboa tenen menys de 25 anys. Pel que fa a la topologia de les estacions, hi ha bastanta varietat: a Baixa-Chiado i Campo Grande les andanes s�n paral�leles. A Saldanha, S�o Sebasti�o o Oriente s'hi poden fer transbordaments r�pids. En canvi, hi ha estacions com Alameda o Entre Campos on el transbordament �s m�s llarg.

El disseny est�ndard de les estacions construides abans de la Revoluci� dels Clavells �s de dues estacions amb andanes laterals al nivell -2 i un vest�bul al nivell -1. Anys m�s tard, s'han ampliat les andanes fins aproximadament uns 100 m, equipant les estacions amb vest�buls secundaris. Les estacions m�s modernes solen tenir un vest�bul i estan a m�s profunditat.

El metro de Londres, el m�s antic del m�n, consisteix en dues xarxes diferenciades: les sub-surface lines i les deep tube lines. �s a dir: les l�nies superficials i les profundes amb els t�nels i trens de secci� circular.

Les sub-surface lines s�n les hereves del Metropolitan Railway i del District Railway, les l�nies originals superficials, construides amb el m�tode cut-and-cover (al centre) o en superf�cie (als suburbis) i operades amb locomotores de vapor. Les estacions consten d'un edifici de viatgers i unes andanes situades al nivell -1, sempre que fos possible a l'interior d'una illa de cases. Les mes c�ntriques tenien unes marquesines que cobrien la totalitat de les andanes (encara visibles a Paddington, Bayswater o Earl's Court). Amb l'electrificaci� de les l�nies i l'especulaci� immobili�ria, la majoria d'estacions s'han anat cobrint amb lloses de formig�, essent les m�s recents Gloucester Road o Mansion House a finals del s.XX.

Les deep tube lines, van ser comen�ades a dissenyar i construir a finals del s.XIX, quan els m�todes constructius de t�nels no estaven gaire desenvolupats, i ja van ser pensats per ser operats amb trens el�ctrics. Es va optar per construir els t�nels a aproximadament 20 m de profunditat. Les estacions consten d'un edifici de viatgers, que connecten amb les andanes (normalment andanes centrals) mitjan�ant dos o tres pous, en els quals hi ha ascensors de gran capacitat o escales de cargol. L'any 1913 es va fer una prova per instal�lar una s�rie d'escales autom�tiques entre les andanes i la superf�cie. Com que el resultat va ser positiu, es va decidir abandonar la construcci� d'estacions amb ascensors i progressivament es van anar modificant les estacions amb m�s aflu�ncia per encabir-hi escales autom�tiques.

El fet que inicialment cada l�nia fos operada per una companyia ferrovi�ria diferent, no garantia la possibilitat de transbordar sense sortir al carrer. Aix� es va anar corregint despr�s de la nacionalitzaci� dels transports urbans.

El flux de viatgers que mouen alguns intercanviadors ha obligat a crear galeries m�s amplies i a que les estacions de transbordament tinguin passadissos unidireccionals i vest�buls nom�s d'entrada o sortida, com a Oxford Circus o Victoria.

T�cnicament, les l�nies del metro de Madrid se subdivideixen en dos: les de g�lib estret (1-5 i Ramal) i les de g�lib ample (6-12). Les de g�lib estret, les primeres en ser constru�des, van ser inspirades amb el metro de Par�s i per tant les estacions solen tenir andanes laterals al nivell -2 i un vest�bul al nivell -1, tot i que en algunes estacions s'han constru�t vest�buls secundaris aprofitant allargaments d'andanes.

Les primeres l�nies de g�lib ample van ser constru�des amb la voluntat de ser m�s espaioses. A m�s a m�s, tenen la caracter�stica que circulen a m�s profunditat, entre 15 i 25 m sota el nivell del carrer. Des del carrer fins les andanes hi pot haver entre 3 i 5 trams d'escales autom�tiques, amb un distribuidor d'andana i el vest�bul pel mig. Aix� doncs, el temps d'acc�s a les andanes �s molt m�s llarg que en estacions de g�libd estret.

No obstant, des dels anys 90, s'ha tendit a construir les noves estacions amb un disseny estandaritzat, on les vies no estan ubicades a tanta profunditat.

Pel que fa a la tipologia de transbordaments, n'hi ha de tot tipus. Comparant amb altres ciutats, hi ha un nombre elevat d'estacions amb passadissos llargs, sense arribar al nivell de Barcelona.

Possiblement destaquen els macro intercanviadors que s'han anat constru�nt en els pols de transport m�s importants, permetent el transbordament entre metro, tren i sovint autob�s interurb�. L'exemple m�s clar �s l'estaci� de Nuevos Ministerios, per� Chamart�n, Sol, Pr�ncipe P�o o Plaza de Castilla en s�n altres exemples.

El metro de Marsella est� format per dues l�nies que s'encreuen al centre de la ciutat a Saint-Charles i Castellane. Els tranbordaments en aquestes dues estacions s�n molt senzills i curts, ja que a Saint-Charles les vies de les dues l�nies s�n paral�leles i a Castellane s'encreuen perpendicularment a molta proximitat.

A Marsella es detecten tres tipus d'estacions: les perif�riques, que s�n elevades (ex: Bougainville, Ste-Margueritte, La Rose); les subterr�nies superficials, amb un vest�bul al nivell -1 i andanes laterals al -2 (ex: Baille, P�rier); i les profundes c�ntriques, que solen tenir andanes centrals i un sol acc�s al carrer que condueix al vest�bul a trav�s d'unes escales autom�tiques amb un desnivell d'entre 15 i 20 m (ex: Cinq Avenues, Estrangin).

L'estaci� de Noailles �s curiosa perqu� en construir-se l'estaci� de metro, es va desviar el tra�at del tramvia subterrani. Actualment l'antic t�nel tramviari �s un passad�s i l'antiga estaci� �s un vest�bul.

La l�nia 1 del metro de Mil� es caracteritza per ser la primera l�nia de metro del m�n en ser constru�da amb pantalles de formig� armat. La l�nia 2 es va obrir quatre anys despr�s i segueix les directrius marcades per la l�nia 1. En l'aspecte funcional, les estacions es caracteritzen per haver tingut en compte els fluxos interns de viatgers en el seu disseny, dotant d'escales unidireccionals les estacions.

Aquest mateix concepte es va mantenir en la construcci� de les estacions de les l�nies 3 i 5, si b� l'arquitectura de les estacions �s bastant diferent. A les l�nies 1 i 2 i en alguns trams de les l�nies 3 i 5, les estacions estan formades per andanes laterals al nivell -2, que connecten amb el vest�bul situat al nivell -1 a trav�s d'escales unidireccionals.

Al tram central de la l�nia 3 es va optar per fer un t�nel amb les vies sobreposades, atenent a l'estretor dels carrers. El resultat �s un laberint d'ascensors i de passadissos i escales unidireccionals combinats amb una deoraci� peculiar de les estacions.

Els transbordaments de les estacions solen ser molt curts, especialment a Loreto, Centrale, Cadorna i Repubblica. Els dos transbordaments amb passadissos llargs s�n a l'estaci� de Lotto i a Porta Venezia.

El metro de Nova York combina una xarxa de trens elevats (a Brooklyn i el Bronx) amb xarxa subterr�nia construida a la primera meitat del segle XX i localitzada en la seva major part a Manhattan. El canvi de Manhattan als altres districtes es fa mitjan�ant t�nels o b� passant pels famosos ponts compartits amb vianants i tr�nsit viari, com el Williamsburg Bridge o el Manhattan Bridge.

Una de les caracter�stiques del metro �s que hi ha l�nies expr�s i l�nies locals, de manera que un mateix t�nel pot tenir 4 vies (2 per sentit i 2 per tipus de servei), circulant les expr�s per les vies centrals i les locals per les vies laterals.

La part elevada est� formada per estacions situades sobre els carrers de la ciutat, a les quals s'hi accedeix a trav�s d'escales situades a les voreres. A un nivell +1, sota el viaducte de les vies i al damunt de la cal�ada hi ha els vest�buls; i al nivell +2 hi ha andanes laterals cobertes parcialment per marquesines. Les estacions amb parada de trens expr�s solen tenir dues andanes centrals.

Les l�nies subterr�nies circulen a molt poca profunditat i es caracteritzen per tenir un munt de pilars d'acer a l'entrevia i a les andanes. Les estacions locals solen tenir les andanes laterals al nivell -1, incomunicades entre elles. Les estacions expr�s tenen dues andanes centrals, permetent un transbordament cross-platform entre l�nies expr�s i locals. Solen estar al nivell -2, quedant el nivell -1 reservat al vest�bul, des del qual s'hi pot accedir a trav�s de diferents accessos al carrer.

El metro de Par�s t� els intercanviadors m�s laber�ntics d'Europa.

Gaireb� tota la xarxa de metro va ser constru�da abans de la Segona Guerra Mundial. Les estacions inaugurades a principis de segle, comptaven amb transbordaments bastant senzills, mitjanant passadissos bidireccionals. A partir de 1920 es van comen�ar a instal�lar portillons automatiques en algunes estacions. Els portillons s�n portes que bloquegen l'acc�s a les andanes quan un tren entra a l'estaci� i es tornen a obrir un cop el tren surt, amb l'objectiu que no hi hagi flux de passatgers entrant a les andanes i poder permetre un embarcament m�s r�pid. Per poder limitar l'entrada a les andanes, per� no la sortida, es van comen�ar a construir passadissos unidireccionals. Arribats a aquest punt, moltes estacions es comencen a convertir en complexos laberints subterranis.

A partir dels anys setanta es va comen�ar a perfilar el que seria la xarxa del RER (els trens de rodalies), que va comportar la construcci� o una remodelaci� d'estacions.

Aprofitant que separaci� entre estacions de metro cont�gues �s baixa i la densitat d'estacions �s brutal, en alguns casos es va aprofitar per ubicar les estacions de RER entre dues estacions de metro i connectant-les entre dues estacions. El cas m�s extrem �s que les estacions de St-Augustin, St-Lazare, Haussmann-St-Lazare, Havre-Caumartin, Auber i Op�ra estan unides sota terra.

L'estaci� t�pica del metro de Par�s consta d'un vest�bul al nivell -1 i de dues andanes laterals al nivell -2. Les terminals construides entre 1900 i la Primera Guerra Mundial solien tenir un bucle (com encara ho tenen molts tramvies europeus), de manera que era habitual que les estacions terminals tinguessin una nau amb les vies d'arribada i una altra nau amb les vies de sortida.

Les tres l�nies del metro de Praga formen una xarxa radial i es creuen en tres estacions situades al centre de la ciutat. Gaireb� tot el seu tra�at �s subterrani. La primera l�nia que es va construir -la C- �s la que circula m�s arran de la superf�cie, especialment al centre de la ciutat i a la part sud. Les l�nies A i B circulen a m�s profunditat.

Les estacions m�s profundes solen tenir una andana central al nivell m�s inferior, que conecta mitjan�ant unes llargues escales autom�tiques amb el vest�bul situat just sota el carrer. Algunes estacions tenen dos vest�buls, un a cada extrem de l'estaci�.

Les estacions superficials de la l�nia C solen ser de dos tipus. Hi ha algunes estacions que tenen una configuraci� semblant a les estacions profundes, excepte pel fet que les andanes no es troben a tanta profunditat. L'altre tipus d'estaci� superficial consisteix en una andana central situada al nivell -1, comunicada per escales amb els vest�buls edificats a nivell de carrer. Aquestes estacions solen tenir dos vest�buls, un a cada extrem de l'andana.

Als intercanviadors de Mostek i Florenc, les dues l�nies es troben a una profunditat considerable, de manera que les estacions queden conectades per un passad�s no gaire llarg, situat a una cota interm�dia entre les dues l�nies. L'estaci� de Muzeum, en canvi, t� la l�nia C molt superficial i la A molt profunda. En aquest cas, hi ha una s�rie d'escales autom�tiques llargues que conecten les dues l�nies. La l�nia A tamb� t� una altra nau amb escales autom�tiques que condueixen directament al vest�bul.

�s habitual que als vest�buls de les estacions hi hagi botigues.

El metro de Roma t� poques l�nies, considerant la magnitud de la ciutat. Fins fa pocs anys nom�s hi havia dues l�nies que s'encreuaven a l'estaci� de Termini, que �s l'estaci� central. Per aquest motiu, l'estaci� de Termini �s la que carrega m�s passatgers del metro de Roma, fent que sovint quedi col�lapsada. L'intercanviador t� passadissos unidireccionals tant per fer el transbordament, com per entrar i sortir de l'estaci�. Fa uns quants anys es va haver de construir un segon passad�s per comunicar la l�nia A amb la B i poder alliberar el passad�s existent per a passatgers que surten de la l�nia A al carrer.

L'altre intercanvidador �s San Giovanni. La l�nia C hi va arribar el 2018, per� el passad�s amb la l�nia A no est� acabat. Per aquest motiu, cal passar pel vest�bul, sortint i tornant a entrar per les validadores.

Les estacions de la part sud de la l�nia B van ser obertes als anys 50. Les estacions d'aquest tram s�n molt senzilles. En el cas del tram nord de la l�nia B i tota la l�nia A, la construcci� �s m�s recent i les estacions s'han constru�t amb escales i passadissos unidireccionals.

El metro de Rotterdam t� dues l�nies, que fan 5 recorreguts en total, un d'aquests arribant a ciutat ve�na de La Haia. El disseny de les estacions �s bastant simple. Les estacions solen tenir andanes laterals i s'ha de passar per un vest�bul situat a un nivell superior (en estacions subterr�nies) o inferior (en cas d'estar en viaducte).

Als intercanviadors de Blaak i Beurs es va optar per fer un disseny tipus sandwich, sobreposant una l�nia amb l'altra. El resultat �s un transbordament r�pid i senzill.

L'autor no ha estat mai a S�o Paulo. Tota la informaci� ha estat treta de licitacions d'obres, Google Street View, fotografies i v�deos penjats a internet.

La metr�poli de S�o Paulo disposa d'un servei de metro operat per tres companyies diferents. �s un metro relativament nou (va ser obert el 1968, encara que algunes l�nies aprofiten el tra�at de ferrocarrils existents), amb un disseny de les estacions pensat per acollir grans fluxos de viatgers, ja que les composicions arriben als 200 m de llarg.

Les estacions s�n espaioses. En algunes d'elles, com S� o Luz (l�nia 1) es va optar construir-les amb la soluci� Barcelona per alleugerir els fluxos d'entrada i sortida.

Saragossa no disposa de metro, per� la l�nia de rodalia t� un tram urb� amb tres estacions subterr�nies. Aquest tram urb� estava construit parcialment en una rasa, per� va ser cobert amb l'arribada de la l�nia d'alta velocitat, que circula en paral�lel a la l�nia convencional.

Totes les estacions disposen d'edifici de viatgers amb m�quines de venda i validadores, situades a nivell de carrer. Les andanes estan situades al nivell -1, just sota el carrer.

En el cas de l'estaci� de Miraflores, l'acc�s es fa provisionalment des del nivell de vies fins a un descampat, ja que la urbanitzaci� exterior no est� acabada i no es pot fer �s de l'edifici de viatgers. Aquesta estaci� tamb� disposa d'un pas inferior per creuar les vies.

A l'estaci� de Goya es pot fer transbordament amb el tramvia, a la parada de Fern�ndo el Cat�lico. Per fer el transbordament cal travessar dos passos de vianants.

El metro de Val�ncia neix de la uni� de diferents carrilets de via estreta que unien Val�ncia amb els pobles de la rodalia. Es podria dir que el sistema �s un h�brid entre premetro i tren, ja que pel centre de la cituat funciona com un metro, per� a la rodalia funciona com un tren, amb molts passos a nivell i trams de via �nica.

La major part de les estacions subterr�nies consten de dues andanes laterals al nivell -2 i un o dos vest�buls al nivell -1. Seguidament hi ha estacions particulars, especialment a les l�nies 3 i 5. Bail�n, Avinguda del Cid, �ngel Guimer� i Col�n tenen andanes centrals. L'estaci� d'Alameda disposa de 4 vies (dues per la l�nia a Rafelbunyol i dues per la de Mar�tim-Serrer�a).

L'estaci� de X�tiva t� una topologia diferent a totes les altres, ja que les andanes estan sobreposades. Aix� es deu a que just al comen�ament de l'estaci� pel costat Col�n hi ha la bifurcaci� de la l�nia que va a Bail�n i Jes�s. Est� constru�t aix� per evitar el creuament de trens al mateix nivell.

El metro t� dues linies i la xarxa t� forma de creu.

La l�nia 1 t� dos tipus d'estacions: les que tenen andanes laterals solen tenir el vest�bul a nivell de carrer, mentre que les que tenen andana central solen tenir un vest�bul en un nivell intermedi.

Les estacions de la l�nia 2 s�n similars a les que tenen andana central de la l�nia 1, amb la difer�ncia que les andanes es troben a m�s profunditat.

Hi ha dos intercanviadors principals. A Zwi\u0019tokrzyska s'hi encreuen les dues l�nies de metro i el transbordament �s tipus sandwich. Aproximadament mig quil�metre m�s al sud hi ha l'altre intercanviador principal de la ciutat, format per l'estaci� central de tren, l'estraci� de rodalies Zr�dmie[cie i l'estaci� de metro Centrum. Les dues primeres formen un complex subterrani for�a gran, combinades amb unes galeries comercials. L'estaci� de rodalies est� unida a la de metro a trav�s d'un curt cam� pel carrer.

Part de l'actual xarxa de metro (U-Bahn) prov� d'una xarxa primitiva oberta el 1898, sonegut com a Stadtbahn, que fins la Primera Guerra Mundial va funcionar amb tracci� a vapor. La major part del seu tra�at era en superf�cie o en viaducte, sempre segregat i sense passos a nivell. Per tant, es tractava d'una xarxa de metro, si b� operada amb material de metro lleuger.

Durant els anys 60, el govern municipal va construir un parell de t�nels per tramvies al voltant de la ciutat. Paral�lelament, es debatia un pla de metros. Finalment, es va aprovar un pla b�sic, en el que es reconvertiria l'Stadtbahn en dues l�nies de metro modernes (actuals U4 i U6), aix� com tamb� una l�nia de tramvia subterr�nia (actual U2), a part de la construcci� des de zero de la l�nia U1. En una segona fase es va planificar una l�nia est-oest (U3), a m�s del perllongament de la resta de l�nies cap als suburbis. Actualment s'est� construint la l�nia U5.

La topologia de les estacions dep�n del moment de la construcci�. Les estacions no-subterr�nies que formaven part de l'Stadtbahn tenen andanes laterals i l'entrada es fa per uns vest�buls modernistes. Les estacions de l'antic t�nel tramviari de la U2 s�n molt superficials i nom�s tenen un sol nivell amb andanes laterals, que estan esglaonades. Les estacions construides a partir dels anys 70 solen tenir una andana central al nivell inferior, que es conecten amb el vest�bul (que pot estar en un nivell superior o directament al carrer) a trav�s d'escales autom�tiques o ascensors. La profunditat d'aquestes estacions �s variable, per� al centre hist�ric les estacions es troben a molta profunditat.

Totes els intercanviadors han estat constru�ts del 1970 en endavant i s'han construit amb la idea de ser curts i eficients. Pr�cticament totes les estacions s�n aix�, excepte Praterstern, que t� un passad�s llarg.

El metro d\u0019Oslo prov� d\u0019una antiga xarxa de trens o tramvies suburbans consolidada al costat oest de la ciutat durant la primera meitat del segle XX i d\u0019un metro modern constru�t a partir dels anys 60 a la part oriental de la ciutat, que van ser unificats de manera progressiva durant des dels anys 70 dels anys XX fins als anys 10 del segle XXI.

El metro d\u0019Oslo �s poc profund, i de fet, discorre en superf�cie o en trams elevats en la seva major part. Les estacions situades en superf�cie solen disposar de dues andanes laterals sense marquesina. Els accessos a les andanes s�n lliures, sense validadores ni tanques i es fan directament des del nivell de carrer a trav�s de rampes. En algun indret hi ha situat un quiosc de Narvesen que assumeix alhora la venda de bitllets i fa de botiga de conviv�ncia.

Les estacions subterr�nies estan situades b� al centre de la ciutat o als suburbis del nord-est. La majoria d\u0019estacions estan situades a poca profunditat i disposen de dues andanes laterals al nivell m�s profund. Al nivell immediatament superior hi ha un vest�bul que pot estar b� a peu de carrer o pot ser subterrani. La connexi� entre nivells es fa a trav�s de rampes i tamb� d\u0019escalinates. Com a norma general, no hi ha

Hi ha unes quantes estacions que estan situades a bastanta profunditat: Roms�s, Ellingsrud�sen, Stortinget, Nydalen i Vestli. A les dues primeres nom�s s\u0019hi pot accedir mitjan�ant ascensors de gran capacitat que connecten el carrer amb el distribu�dor, a m�s d\u0019una rampa de m�s de 200 m de llarg que tamb� enllacen el carrer amb el nivell distribu�dor.

El tramvia de G�teborg t� una estaci� subterr�nia. Hammarkullen est� situada a molta profunditat, en un barri muntany�s dels suburbis del nord-est de la ciutat. Les vies passen per un t�nel bitub i la circulaci� es fa per l\u0019esquerra, ja que l\u0019estaci� disposa d\u0019andanes centrals i el material m�bil nom�s t� portes al costat dret. Del nivell d\u0019andanes, en surt una galeria amb escales autom�tiques i un ascensor inclinat, que desemboca al vest�bul, situat a nivell de carrer.

Hamburg disposa de dues xarxes de metro: l\u0019U-Bahn i l\u0019S-Bahn. L\u0019U-Bahn, que seria pr�piament el metro, �s un dels m�s antics del m�n. La primera l�nia, circular va ser constru�da tant trams elevats, en superf�cie i en t�nel a molt poca profunditat. Les conseq�ents extensions tamb� s\u0019han constru�t alternant aquestes tres tipologies. Nom�s destaca el tram central de la U2 i el ramal de la U4, que es van construir a gran profunditat.

En general, les estacions subterr�nies s�n molt superficials i disposen d\u0019una andana central (lateral a les estacions originals de la U3). Sovint hi ha un nivell intermedi que fa de vest�bul. Per la seva banda, les estacions elevades tenen un vest�bul a nivell de carrer i una andana central o dues de laterals al nivell +1.

Pel que fa a l\u0019S-Bahn, aquest aprofita trams de la xarxa ferrovi�ria alemanya. Als anys 60 es va comen�ar a construir el City S-Bahn, que �s una l�nia subterr�nia pel centre de la ciutat. Totes aquestes estacions disposen de grans andanes centrals situades a un nivell -2, generalment amb vest�buls situats al nivell -1, als extrems de les andanes.

Pel que fa als intercanviadors, algunes han estat dissenyats per garantir un transbordament cross-transfer (Barmbek entre ramals de la U3, Wandsbek-Gartenstadt, Berliner Tor, Altona, Hauptbahnhof a l\u0019S-Bahn, Norderstedt Mitte), amb andanes paral�leles (Ohlsdorf, Barmbek entre U-Bahn i S-Bahn, Hauptbahnhof S�d, Elbbr�cken) o amb transbordament directe per un sol tram d\u0019escales entre l�nies situades a diferents nivells (Schlump, Jungfernstieg).

Hi ha altres transbordaments que no tenen un disseny tan bo, com el llarg passad�s entre Rathaus i Jungfernstieg, L�becker Stra�e o el transbordament pel carrer a Wandsbeker Chaussee, Dammtor / Stephansplatz o Sternschanze

L\u0019Stadtbahn d\u0019Essen disposa de dues l�nies troncals. Les que discorren per l\u0019estaci� Rathaus s�n tramvies purs, amb tramvies i andanes de pis baix. Les l�nies que passen per Hirschlandplatz s�n metros lleugers.

Hi ha varietat entre la tipologia d\u0019estacions. Les estacions m�s superficials solen tenir andanes laterals, mentre que les estacions de la l�nia troncal de metro lleuger tenen andanes centrals, que estan situades a una profunditat considerable.

L\u0019Stadtbahn de Dortmund est� format per tres l�nies troncals, que es troben al centre de la ciutat. Les que tenen el recorregut est-oest s\u0019operen amb material tramviari de pis baix, mentre que les altres dues s\u0019operen amb metros lleugers de pis alt.

La majoria d\u0019estacions es troben a poca profunditat. Els vest�buls de les estacions es troben b� al nivell de carrer o en un nivell intermedi entre carrer i andana.

A Dortmund tamb� hi ha un sistema de monorail (H-Bahn) que serveix la Universitat T�cnica de Dortmund (TU Dortmund). Est� formada per dues l�nies. El tra�at �s de via �nica, per� hi ha algunes estacions que tenen apartadors per permetre creuaments. Totes les estacions s�n elevades o estan situades en superf�cie.

L\u0019Stadtbahn de Bochum est� format per una l�nia nord-sud, a m�s de diverses l�nies de tramvia que discorren per trams subterranis al seu pas pel centre. La majoria d\u0019estacions de l\u0019Stadtbahn tenen andanes centrals i vest�buls situats en un nivell intermedi entre el carrer i les andanes. En algunes estacions, les andanes estan situades a una profunditat superior, com a Rathaus Nord i a Hauptbahnhof.

Les estacions d\u0019Stadtbahn de M�lheim s�n diverses. Les estacions m�s properes al casc antic i al Ruhr tenen les andanes a molta profunditat per tal que els t�nels puguin passar el riu per sota. En canvi, la resta d\u0019estacions tenen una configuraci� t�pica de qualsevol xarxa d\u0019Stadtbahn d\u0019Alemanya, amb un vest�bul al nivell -1 i andanes (laterals o centrals) al nivell -2.

Totes les estacions de l\u0019Stadtbahn i del tramvia subterrani de Duisburg disposen d\u0019andanes centrals. Aquestes andanes solen estar al nivell -2, mentre que el nivell -1 est� reservat als vest�buls.

Hi ha dues estacions particulars: Hauptbahnhof i K�nig-Heinrich-Platz. En aquestes dues estacions hi conflueixen la l�nia nord-sud i la est-oest. Les estacions disposen de dues andanes paral�leles, sobreposades en dos nivells diferents (al -2 i al -3). Diferents combinacions d\u0019escales autom�tiques i escalinates permeten transbordar, accedir i sortir de l\u0019estaci�.

D�sseldorf t� dues l�nies troncals d\u0019Stadtbahn (nord-sud i NO-SE), aix� com una l�nia troncal de tramvia subterrani. Les dues l�nies d\u0019Stadtbahn comparteixen tra�at entre l\u0019estaci� central (Hauptbahnhof) i el centre (Heinrich-Heine-Allee) i les vies discorren en paral�lel. A les dues estacions esmentades, les andanes que serveixen les quatre vies estan situades al mateix nivell, per� a les dues estacions interm�dies, les vies estan superposades, quedant la via en sentit nord al nivell superior.

Per altra banda, la l�nia de tramvia subterrani disposa d\u0019andanes baixes laterals al nivell -2 i un vest�bul al nivell -1.

Gaireb� totes les estacions del metro de Tor� segueixen un disseny est�ndard format per dues andanes laterals al nivell -3, i un vest�bul al nivell -1. La connexi� entre el vest�bul i les andanes es fa a trav�s d\u0019una escala autom�tica de pujada per andana, un ascensor o b� a trav�s de dues escalinates que van del nivell -3 al -2 i unes escales autom�tiques i escalinates que van del -2 al -1.

L\u0019estaci� central de Porta Nuova t� un disseny diferent: vest�bul al nivell -1 i andanes al nivell -2, des de les quals s\u0019hi pot accedir a trav�s d\u0019escales o per ascensor. Hi ha connexi� directa des del vest�bul del metro al vest�bul original de l\u0019estaci� ferrovi�ria, actualment part d\u0019un centre comercial.

L\u0019estaci� de Porta Susa disposa de les andanes de metro al nivell -4, un distribu�dor al -3 i un vest�bul obert situat a dins de la gran nau de l\u0019estaci� ferrovi�ria. L\u0019estaci� ferrovi�ria, per la seva banda, est� formada per tres nivells, on destaca la part oriental de l\u0019estaci�, que cont� una enorme marquesina amb sostre de vidre de 380 m de llarg per 30 m d\u0019ample. El nivell -2 cont� l\u0019esmentat vest�bul del metro i tamb� les 4 andanes de la RFI. El nivell -1 cont� els 4 passadissos on convergeixen tant els accessos a l\u0019estaci� pel costat oest, com les escalinates, ascensors i escales autom�tiques per accedir a les andanes. El nivell 0, juntament amb el nivell -1, cont� espais comercials.

El metro de Lausana est� format per un metro lleuger (m1) i per un metro amb pneum�tics amb conducci� autom�tica (m2), el tra�at del qual prov� d\u0019un funicular que posteriorment fou convertit a cremallera.

Les estacions de la l�nia m1 s�n subterr�nies o estan a nivell de carrer. Algunes estacions nom�s disposen d\u0019una andana lateral amb acc�s directe al carrer, ja que el tra�at �s de via �nica. Les estacions amb apartador solen tenir dues andanes. L\u0019estaci� terminal de Renens CFF, es troba incorporada dins l\u0019estaci� dels Ferrocarrils Federals Su�ssos.

Per altra banda, les estacions de la l�nia m2 s�n m�s variades. Totes les estacions tenen andanes laterals, excepte Sallaz. Algunes tenen les andanes a nivell de carrer, com Ouchy o Grancy. Altres estan arran del nivell del carrer i s\u0019accedeix a trav�s d\u0019una escalinata o una rampa, com D�lices o CHUV.

Finalment, algunes estacions tenen una configuraci� molt particular a causa de l\u0019orografia del casc antic de la ciutat, particularment per la vall del Flon, profunda i estreta. L\u0019estaci� de Flon es troba a la place de l\u0019Europe. L\u0019estaci� de la m1 es troba al mateix nivell que la pla�a, mentre que les estacions de la LEB (ferrocarril) i m2 es troben al nivell -2. Del nivell -2 en surten 5 ascensors que pugen fins l\u0019altura del Grand Pont, situat una vintena de metres m�s amunt.

De la mateixa manera, l\u0019estaci� Riponne es troba a la vall del riu Flon. L\u0019estaci� est� situada a un nivell intermedi entre el carrer que segueix la vall i el pont Riponne. Quatre ascensors (dos per andana) comuniquen els tres nivells.

El metro de Porto �s un metro lleuger de nova construcci�. Hi ha dues l�nies troncals: una nord-sud i una altra est-oest, que t� una part que segueix el tra�at de les antigues l�nies de via estreta que sortien de Trindade, que actualment fa d\u0019enlla� entre les dues l�nies troncals.

Les estacions superficials tenen el disseny propi d\u0019una estaci� de tramvia moderna, amb marquesines i passos de vianants als extrems de les andanes per canviar d\u0019andana o sortir de l\u0019estaci�.

Les estacions subterr�nies tenen les andanes al nivell m�s profund, per� difereix l\u0019exist�ncia de nivells intermedis i d\u0019on s\u0019ubica el vest�bul.

El metro de Munic �s un metro amb 8 serveis diferents, que s\u0019agrupen al centre i formen 3 l�nies troncals, a m�s d\u0019una l�nia troncal est-oest d\u0019S-Bahn, que per la seva freq��ncia de pas i prestacions es pot considerar de metro, igual que passa a Berl�n i Hamburg.

La majoria d\u0019estacions disposen d\u0019andanes centrals situades al nivell -2 i d\u0019un vest�bul en cada extrem de les andanes al nivell -1, malgrat que no hi hagi validadores f�siques en cap estaci�. En algunes estacions particulars, les andanes poden estar situades a m�s profunditat, cosa que ha obligat a excavar galeries inclinades per a instal�lar-hi escales autom�tiques.

Una de les caracter�stiques del metro de Munic �s l\u0019exist�ncia de transbordaments cross-platforms en moltes estacions, amb l\u0019afegit que els horaris entre l�nies tamb� estan coordinats. Alguns exemples s�n: Scheidplatz, Innsbrucker Ring o Neuperlach S�d. A m�s, aquelles estacions on s\u0019acaben els trams comuns o on s\u0019acaben els serveis parcials solen tenir tres o quatre vies, com Hauptbahnhof (U1-U2), M�nchner Freiheit, Olympiazentrum, Kolumbusplatz, Fr�ttmaning o Implerstra�e. Algunes d\u0019aquestes estacions tenen ascensors que comuniquen directament les andanes amb el carrer.

Les estacions m�s c�ntriques de l\u0019S-Bahn fan servir la soluci� Barcelona. A Hauptbahnhof i a Karlsplatz s\u0019entra per l\u0019andana central i es baixa per les laterals, mentre que a Marienplatz, com que es troba en carrers estrets, les dues vies estan superposades: sempre es baixa del tren pel costat dret en sentit de la circulaci� i s\u0019hi entra per les portes contr�ries. Juntament als dos nivells destinats a l\u0019S-Bahn (-2 i -3) tamb� hi ha l\u0019estaci� del metro situada al nivell -4, on les dues andanes estan separades gaireb� un centenar de metres, deixant l\u0019edifici de l\u0019Ajuntament entremig.

En aquelles altres estacions de transbordament, el canvi entre l�nies �s directe a trav�s d\u0019un tram d\u0019escales (Odeonsplatz, Hauptbahnhof, Sendlinger Tor) o passant pels vest�buls, en el cas de la majoria de transbordaments entre U-Bahn i S-Bahn

El metro de Nuremberg disposa de tres l�nies. Dues d\u0019aquestes, la U2 i la U3 comparteixen vies al tram central.

El disseny de les estacions �s bastant senzill. El metro funciona amb un sistema d\u0019honor (sense validadores que impedeixin el pas f�sicament). Les andanes sempre es troben al nivell m�s inferior de l\u0019estaci�, que sol ser al nivell -1 o al -2 si es que l\u0019estaci� disposa de vest�bul al nivell -1, ja que en alguns casos s\u0019accedeix directament del carrer a l\u0019andana a trav�s d\u0019escalinates o escales autom�tiques. Totes les estacions disposen d\u0019ascensors.

Les dues estacions de correspond�ncia entre l�nies de metro estan pensades per fer un transbordament r�pid. A Hauptbahnhof, l\u0019estaci� de la U1 est� situada un nivell per sota de l\u0019estaci� de la U2 i U3, i nom�s fa falta passar per un tram d\u0019escales per canviar de l�nia. A l\u0019estaci� Pl�rrer es garanteix un transbordament cross-platform en ambd�s sentit, ja que les andandes d\u0019ambdues l�nies estan sobreposades.

L\u0019Stadtbahn d\u0019Stuttgart �s for�a complex, per� l\u0019operaci� es pot simplificar en les l�nies que travessen la vall i les que la ressegueixen. Fora del centre, la majoria d\u0019estacions s�n parades simples amb andana alta i amb plataforma pr�pia. Al centre de la ciutat, les estacions s�n subterr�nies i disposen d\u0019andanes laterals al nivell -2 i un vest�bul o dos al nivell -1.

Pel que fa a les estacions del tram central de l\u0019S-Bahn, totes tenen una andana central al nivell -2 i vest�buls als extrems, situats en un nivell intermedi entre l\u0019andana i el carrer.

El metro de Lilla est� format per dues l�nies de VAL (vehicle autom�tic lleuger, del franc�s v�hicule automatique l�ger). Un VAL es caracteritza per tenir vehicles molt estrets i de curta longitud, que circulen a una freq��ncia molt alta per poder absorbir tota la demanda. L'estretor dels vehicles �s una conseq��ncia directa de no voler encarir la perforaci� dels t�nels durant la seva construcci�.

Inicialment el metro funcionava amb un sistema d'honor (sense la barrera f�sica dels torniquets), de manera que les estacions van ser dissenyades sense aquesta previsi�. La posterior instal�laci� de les validadores fa que en algunes estacions nom�s n'hi hagi en algun dels accessos, mentre que altres estacions poden tenir una distribuci� peculiar de les l�nies de peatge.

L'estaci� principal de la xarxa �s Gare de Flandre, que �s l'estaci� ferrovi�ria central, a m�s d'una de les estacions comunes de les dues l�nies de metro i la terminal de les dues l�nies de tramvia, situada sota terra. Aquesta estaci� proveeix un transbordament cross-platform entre les l�nies de metro. A m�s, el tranbordament entre metro i tramvia tamb� �s molt r�pid. Com a curiositat, l'estaci� de tramvia t� una andana exclusivament destinada a la baixada dels passatgers.

L'altra estaci� d'enlla� entre les dues l�nies de metro �s Porte des Postes, que t� les andanes de les dues l�nies encreuades a diferent nivell, cosa que fa que el transbordament sigui r�pid.

El metro de Palma �s de construcci� recent. El tram m�s proper al centre va ser constru�t aprofitant el soterrament de la l�nia Palma - Inca a l'entrada a Ciutat. Entre l'Estaci� Intermodal de la pla�a d'Espanya fins a Son Costa - Son Fortesa, les vies del metro discorren en paral�lel a les de la l�nia ferrovi�ria ja mencionada.

L'Estaci� Intermodal t� una funci� autoexplicativa. Hi ha una estaci� d'autobusos subterr�nia situada al costat de la platja de vies subterr�nia. De fet, aquest intercanviador �s el punt d'inici de totes les l�nies interurbanes amb inici a Palma, aix� com la terminal ferrovi�ria.

Tant el tram com� com el tram que discorre per sota de la Gran Via Asima estan construits a molt poca profunditat. De fet, les estacions situades en aquesta Gran Via tenen el mateix disseny, amb andanes i vest�buls situats al nivell -1 i un pas inferior al nivell -2 equipat amb escales autom�tiques i ascensors.

L'estaci� de Son Sardina es troba en superficie i s'hi pot fer enlla� amb la l�nia Palma - S�ller. L'estaci� de la UIB, per la seva banda, disposa d'un edifici de viatgers a nivell de carrer, encara que no allotja cap mena de depend�ncia.

El metro de Brescia consta d\u0019una l�nia autom�tica oberta el 2013 que t� forma de L. El material m�bil �s l\u0019autom�tic d\u0019Ansaldobreda, tamb� utilitzat a les l�nies 4 i 5 de la ciutat ve�na de Mil�. La l�nia circula a poca profunditat al tram nord, elevat i en super�fice al tram est i una mica m�s profund al tram central. S\u0019utilitza un sistema d\u0019honor, sense l�nia de peatge f�sica.

Hi ha un prototip d\u0019estaci� utilitzada en estacions una mica m�s fondes, com Marconi, Ospedale, Bresciadue, Stazione FS o Volta. Aquestes disposen de dues andanes laterals al nivell -3. Cada andana comunica amb el vest�bul situat al nivell -2 a trav�s d\u0019un ascensor, unes escalinates i dues escales autom�tiques situades en llocs diferents. Del vest�bul en surt un ascensor que va directament al nivell de carrer, aix� com un vol d\u0019escalinates i escales autom�tiques que van a un nivell -1 que �s intermedi. Entre el nivell -1 i el carrer hi sol haver unes escalinates. Exemples d\u0019estacions s�n Marconi, Ospedale, Bresciadue o Volta.

Les estacions menys profundes, situades al tram nord, solen tenir dues andanes laterals, cadascuna amb acc�s directe al carrer.

Les dues estacions elevades s�n les �niques que disposen d\u0019andana central.

El metro d\u0019Istanbul �s un metro modern, ja que exceptuant la l�nia 1 i la 2, tota la xarxa ha estat constru�da al segle XXI i actualment est� en marxa l\u0019ampliaci� de diverses l�nies, aix� com la construcci� de noves tant al costat europeu com a l\u0019asi�tic. Com a complement del metro hi ha els tramvies, que tenen l�nia de peatge a cada parada; aix� com els quatre funiculars que ajuden a superar els desnivells d\u0019aquesta ciutat. Quatre d\u0019ells s�n completament subterranis.

Les l�nies de metro s�n molt diferents entre elles. No nom�s per les caracter�stiques t�cniques, com la llargada i tipus de trens, l\u0019automatitzaci�, el nombre de vies o el sistema d\u0019electrificaci�; sin� pel m�tode de construcci� dels t�nels i de les estacions, que afecta a la topologia. En general, totes les l�nies discorren a gran profunditat. La mida dels passadissos, vest�buls i andanes est� adaptada a la demanda, encara que les dels suburbis estan sobredimensionades. Per aquest motiu, el temps d\u0019acc�s i sortida sol ser elevat. La topologia dels transbordaments en molts casos s\u0019ha descuidat, cosa que ha resultat amb correspond�ncies llargues, o per les quals s\u0019han de pujar molts nivells i tornar a baixar-los. A banda, els canvis de l�nia no s�n gratu�ts (s\u0019ha de sortir de la zona de pagament d\u0019una l�nia i entrar a l\u0019altra tornant a passar per les validadores).

Exceptuant la l�nia 1, que �s la m�s superficial, i la 6, que �s de via �nica (encara que les estacions tenen un apartador amb andana central), totes les l�nies circulen en t�nels bitub per profunditats entre els 20 i els 40 metres. Hi ha el cas extrem d\u0019alguna estaci� situada a 77 m sota el nivell del carrer. La majoria d\u0019estacions disposen d\u0019andanes centrals, situades en naus diferents (excepte a les l�nies 3 i 9, que tenen una andana central sense separaci� f�sica). Els vest�buls estan situats al nivell immediatament superior a les andanes, excepte a la l�nia 4, on estan situats al nivell -1. La comunicaci� entre carrer i vest�bul es fa a trav�s de diferents vols d\u0019escales autom�tiques i escalinates, a m�s d\u0019ascensors. En algunes estacions nom�s �s possible accedir a les andanes a trav�s d\u0019ascensors.

El metro de M�laga consta de dues l�nies explotades amb material m�bil de tramvia. La l�nia 2 �s completament subterr�nia, per� la l�nia 1 circula com a tramvia amb plataforma pr�pia al tram occidental. �s un metro poc profund, constru�t amb pantalles de formig� o amb cut-and-cover. La majoria d\u0019estacions tenen andanes centrals al nivell -2 i un vest�bul al nivell -1.

El tram com� de les l�nies 1 i 2 �s molt particular. Cada l�nia circula per les seves pr�pies vies, en dos nivells diferents. Entre les estacions de Guadalmedina i El Perchel hi ha un canvi de nivell de dues de les vies que est� empla�at en una corba i una contracorba. L\u0019estaci� La Uni�n de la l�nia 1 tamb� t� les andanes situades en dos nivells, un per cada sentit. L\u0019estaci� Atarazanas nom�s t� una sola andana.

El metro de Sevilla disposa d\u0019una sola l�nia que es va comen�ar a construir als anys 70. S\u0019opera amb material tramviari.

Al tram m�s c�ntric, on el t�nel �s bitub constru�t amb tuneladora, les estacions tenen el vest�bul al nivell -1 o -2, seguidament d\u0019un nivell intermedi i finalment una andana central al nivell m�s baix, amb capacitat per a trens dobles. Les vies estan protegides amb portes d\u0019andana.

El tram a l\u0019oest del Guadalquivir, combina trams amb t�nel, viaducte i en superf�cie. Excepte Ciudad Expo, que t� una andana central al mateix nivell del carrer, la resta d\u0019estacions tenen andanes laterals i un vest�bul situat a un nivell superior o inferior depenent de si estan en viaducte o no.

Entre Nervi�n i Cocheras, el metro circula a poca profunditat i totes les estacions tenen andanes laterals i un vest�bul.

El metro de N�pols disposa de diverses l�nies, totes molt diferents entre elles.

La l�nia 1 es va inaugurar el 1993. �s una l�nia que connecta el centre hist�ric, situat arran de mar, amb la zona alta. Per guanyar cota, fa un bucle. Totes les estacions estan situades a molta profunditat, excepte el tram entre Colli Aminei i Piscinola. Les estacions solen tenir el vest�bul al nivell -1 i es connecten a les andanes, situades al nivell m�s inferior de tota l\u0019estaci� de diferents formes. L\u0019estaci� de Duomo disposa d\u0019ascensors de gran capacitat. La majoria d\u0019estacions superen aquest desnivell mitjan�ant escales autom�tiques, ja sigui de cop o en diversos vols.

La l�nia 2 �s realment un t�nel ferroviari que pertany a la xarxa ferrovi�ria de l\u0019Estat. Inicialment fou electrificat mitjan�ant tercer carril, tot i que actualment t� caten�ria. Les estacions de Montesanto i Cavour estan situades a bastanta profunditat. S\u0019hi accedeix des d\u0019un edifici de viatgers situat a nivell de carrer, des del qual en surten dos trams d\u0019escales autom�tiques que van a un distribu�dor situat a un nivell superior a les andanes, que s�n laterals. Algunes altres estacions estan situades a l\u0019exterior i disposen de majestuosos edificis de viatgers, com Mergellina o Campi Flegrei. Sota la Piazza Garibaldi tamb� hi ha una estaci� annexa a la central, que fins fa pocs anys disposava de tres andanes i quatre vies, tot i que es van eliminar les vies laterals, es van ampliar les andanes laterals i es va deixar fora de servei l\u0019andana central.

La l�nia 6 est� fora de servei des del 2013 i era una l�nia amb un g�lib molt estret. Els trens nom�s feien 2,2 m d\u0019ample.

La l�nia Arcobaleno o l�nia 11 �s una l�nia constru�da amb pantalles de formig�, amb estacions topol�gicament semblants a les de les l�nies 1 i 2 del metro de Mil� o de la part sud de la l�nia A del metro de Roma.

Complementen la xarxa ferrovi�ria de la ciutat el ferrocarril Circumvesuviana i el Circumflegrea, cadascuna amb diverses estacions subterr�nies de poca profunditat, constru�des amb m�todes cut-and-cover o amb pantalles.

Rennes disposa de dues l�nies de metro autom�tiques. La l�nia a �s un VAL, com els del metro de Lilla o Tolosa de Llenguadoc, que tenen un g�lib de 2,08 m. La topologia d\u0019aquestes estacions �s for�a variada. Totes les estacions tenen andanes laterals i sempre estan situades al nivell m�s inferior. Algunes estacions tenen els vest�buls al nivell -1, per� d\u0019altres les tenen al nivell de carrer. Les estacions d\u0019Anatole France i de Jacques Cartier s�n les m�s profundes de la l�nia. D\u0019altra banda, La Poterie i Pontchaillou s�n estacions elevades.

La l�nia b es va inaugurar el 2023 i �s un metro amb pneum�tics que �s guiat per un carril central. Tota la l�nia �s subterr�nia excepte les tres situades al tram m�s cap a l\u0019est, que estan en viaducte. Les estacions d\u0019aquesta l�nia s�n m�s espaioses que les de la l�nia a. Les andanes de les estacions subterr�nies sempre estan al nivell inferior, sovint al -2 o al -3, i son prou llargues per acollir composicions de tres cotxes, encara que l\u0019explotaci� normal nom�s se\u0019n fa amb dos. El vest�bul est� al nivell -1.

L\u0019estaci� Sainte-Anne, una de les dues d\u0019enlla�, t� els itineraris d\u0019entrada, sortida i de correspond�ncia no-sim�trics. El vest�bul est� al nivell -1 i les andanes al nivell -4. Els nivells -2 i -3 actuen de distribu�dors i de passadissos de correspond�ncia.

Sant Sebasti� disposa d\u0019una l�nia de tren de via estreta anomenada Topo pels m�ltiples t�nels i indicada com a E2. Inicialment operada per una companyia privada, el 1982 va ser absorbida per l\u0019empresa p�blica Euskotren Trena, que l\u0019opera actualment. Durant la d�cada passada va ser parcialment reconstru�da a est�ndard de metro, amb via doble. Actualment s\u0019est� construint un t�nel sota el centre de Sant Sebasti�, que substituir� l\u0019estaci� d\u0019Amara, on actualment el trens del Topo inverteixen la marxa.

La topologia de les estacions �s molt variada. Lugaritz, Anoeta i Herrera s�n subterr�nies i tenen dues andanes laterals al nivell -1 i un vest�bul a peu de carrer. L\u0019estaci� de Loiola est� en viaducte, aix� com la de Pasaia, per on la l�nia ser� desviada i soterrada pr�ximament.

L\u0019estaci� d\u0019Intxaurrondo i la d\u0019Altza s�n d\u0019un estil molt semblant a les del metro de Bilbao. Tenen andanes laterals al nivell m�s inferior, d\u0019on en pengen uns altells que fan de vest�bul. L\u0019acc�s fins al carrer es fa a trav�s d\u0019uns trams d\u0019escales.

El metro de Sofia est� format per 4 l�nies, tot i que s\u0019opera com si en fossin dues i mitja, ja que els trens de la l�nia 2 continuen com a l�nia 4 a l\u0019estaci� d\u0019Obelya i viceversa, i la l�nia 1 no deixa de ser un ramal de la 4.

Tot i que el material m�bil de les l�nies 1, 2 i 4 �s material sovi�tic i rus, l\u0019est�tica i la forma de les estacions �s molt diferent als de metros constru�ts en pa�sos de l\u0019�rbita de Moscou. En general, en gaireb� totes les estacions, les andanes estan al nivell -2 i els vest�buls al nivell -1. Les estacions del tram m�s antic de la l�nia 1 i 4 tenen una sola andana central, mentre que la resta d\u0019estacions tenen andanes laterals. La major part de les estacions tenen dos vest�buls situats als extrems de les andanes. Les estacions del tram com� de les l�nies 1 i 4 estan equipades amb unes portes d\u0019andana low-cost.

Les estacions de la l�nia 3 tenen andanes laterals, que normalment se situen al nivell -2, i un o dos vest�buls al nivell -1, a mode d\u0019altell sobre les andanes. Diverses escalinates o escales autom�tiques connecten els vest�buls amb les andanes. La major part dels accessos a les estacions tenen el seu equivalent amb ascensor.

El metro de Tolosa est� format per dues l�nies que creen una xarxa amb forma de creu, amb intersecci� a Jean Jaur�s. Tant la l�nia A com la l�nia B s�n autom�tiques i funcionen amb tecnologia VAL, com els metros de Rennes i Lilla.

Les estacions de la l�nia A s�n variades. Pel centre el t�nel �s bitub i transcorre a molta profunditat. A Capitole i Esquirol s\u0019ha d\u0019accedir a les andanes a trav�s d\u0019unes escales autom�tiques llargues. Les estacions que estan situades fora del centre de la ciutat tenen una topologia molt variada, amb les andanes laterals situades generalment al nivell -2 o -3 i el vest�bul al nivell -1. Als trams m�s perif�rics hi ha seccions elevades.

La majoria d\u0019estacions de la l�nia B consten d\u0019andanes laterals al nivell -3, un distribu�dor al nivell -2 i un vest�bul al -1. Generalment la baixada a andanes es fa pel distribu�dor del nivell -2 i la pujada cap al vest�bul a trav�s d\u0019una escala autom�tica que el comunica directament des de cada andana, sense haver de parar a la planta -2.

L\u0019intercanviador de Jean Jaur�s est� dissenyat de tal manera que els passadissos s�n unidireccionals. Per canviar entre l�nies de metro s\u0019ha de passar per una validadora, que nom�s t� utilitat estad�stica i de control de fluxos, ja que el transbordament �s gratu�t amb tots els t�tols de transbord.

El 1962 la ciutat de Zuric va renunciar en refer�ndum al soterrament dels tramvies pel centre de la ciutat, en forma de premetro o d\u0019Stadtbahn alemany. El 1973, un altre refer�ndum va tombar la construcci� d\u0019una xarxa de metro. No obstant, un dels t�nels que serviria primer com a ramal de la l�nia 1 i despr�s com a part de la l�nia 2, ja havia estat constru�t com a t�nel per fer les proves del material m�bil. El 1978 es va aprovar en refer�ndum integrar el t�nel com a part de la xarxa de tramvies, que no va entrar en marxa fins el 1986.

Les estacions van ser constru�des a bastanta profunditat, ja que es troben a una zona que fa de coll entre les valls del Limmat i del Glatt. Les andanes de les estacions s�n centrals. Com que els tramvies de Zuric nom�s tenen portes al costat dret, la circulaci� dels tramvies pels t�nels es fa per l\u0019esquerra. La comunicaci� entre andanes i carrers es fa a trav�s d\u0019un nivell intermedi o a trav�s d\u0019un nivell inferior a les andanes. Des d\u0019aquest nivell en surten ascensors o un vol d\u0019escalinates amb escales autom�tiques fins al carrer.

Merseyrail �s la xarxa de trens suburbans gestionada per una autoritat metropolitana de Liverpool, i est� operat per una empresa privada a trav�s d\u0019una concessi�. La xarxa consta de dues l�nies d\u0019operaci� directa.

La Wirral Line connecta el centre de Liverpool amb la comarca de Wirral, situada al sud del riu Mersey, a trav�s d\u0019un t�nel obert l\u0019any 1886. Les dues estacions adjacents al riu (James Street i Hamilton Square) tenen situades les andanes a gran profunditat. La comunicaci� entre el vest�bul, situat a nivell de carrer i el nivell pre-andana es fa a trav�s de tres ascensors de gran capacitat, a m�s d\u0019escales d\u0019emerg�ncia, que en el cas de Hamilton Square tamb� es poden fer servir regularment.

La Northern Line �s una l�nia nord-sud que es va crear el 1977, despr�s d\u0019unir per t�nel les l�nies existents que sortien de les terminals d\u0019Exchange i Liverpool Central, al nord i al sud del centre, respectivament. Tamb� als anys 70 es va modificar la terminal de la Wirral Line, que acabava en via doble a Liverpool Central, per convertir-se en un bucle d\u0019un sol sentit amb tres estacions repartides pel centre de Liverpool. Aquestes estacions es troben a for�a profunditat. La comunicaci� entre andanes, distribu�dors i vest�buls es fa a trav�s de dos o tres vols d\u0019escales mec�niques. Totes les estacions subterr�nies s�n accessibles a persones amb mobilitat redu�da.

G�nova t� una l�nia de metro que recorre la ciutat en paral�lel a la costa. A causa de la dif�cil orografia de la ciutat, els m�todes constructius de cada tram s�n diferents, que han resultat en un tra�at sinu�s i amb estacions molt heterog�nies.

Les dues terminals, Brin i Brignole estan situades en viaducte. A m�s, l\u0019estaci� de metro de Brignole, est� camuflada entre la platja de vies de l\u0019estaci� ferrovi�ria.

L\u0019estaci� de Dinegro �s l\u0019�nica constru�da amb m�tode cut-and-cover i �s la m�s superficial de la xarxa. El canvi d\u0019andana es fa per un pas inferior. Disposa de tres vies amb andana, a m�s d\u0019altres vies que actuen com a tallers i cotxeres.

Les estacions de Darsena i San Giorgio disposen d\u0019una andana central al nivell de vies i estan situades a menys profunditat que les de Sarzano-Sant\u0019Agostino i De Ferrari, que disposen d\u0019andanes laterals en dues galeries diferents.

L\u0019estaci� m�s complexa de la xarxa �s Principe: consta de l\u0019estaci� de metro, l\u0019estaci� subterr�nia de la xarxa ferrovi�ria estatal i l\u0019estaci� ferrovi�ria en superf�cie. L\u0019estaci� en superf�cie est� encaixada en trinxera entre muntanyes i disposa d\u0019una platja de 9 vies amb andana. Del pas inferior en surten passadissos que condueixen cap a un distribu�dor que porta b� a l\u0019estaci� ferrovi�ria subterr�nia, de les quals nom�s estan en servei una de les dues vies; o b� cap a l\u0019estaci� de metro a trav�s d\u0019una s�rie de passadissos. L\u0019estaci� de metro disposa d\u0019un vest�bul semisoterrat, que connecta amb l\u0019entresol, situat al nivell superior de l\u0019andana, a trav�s d\u0019una escalinata.

El premetro de Charleroi consta d'una l�nia circular que encercla el centre de la ciutat i tres ramals cap als suburbis i els pobles de la rodalia. La xarxa s'explota com a quatre serveis radials, que comencen al bucle del centre.

L'anell central �s una barreja de tramvia amb prioritat (entre Tirou i Gare Centrale) i una l�nia segregada, majorit�riament subterr�nia, per� amb un tram elevat entre Gare Centrale i Palais. El ramal de la l�nia 4 funciona completament segregat i els tramvies circulen pel costat esquerre, mentre que la l�nia 1 i 2 tamb� est� segregada entre el centre i P�tria. Aquestes darreres l�nies ciculen com a tramvia entre P�tria i Monument, igual que la l�nia 3 un cop passat Piges.

Les estacions s�n senzilles. Independentment de si s�n en viaducte o en t�nel, gaireb� totes disposen d'una andana central, a la qual s'hi accedeix des d'un acc�s directe des del carrer, a vegades passant per un nivell intermedi.

L'estaci� de Palais disposa de quatre vies, dues en servei, una tercera sense servei habitual i una quarta amb un servei passant que dirigeix a un bucle que inverteix la marxa de les l�nies 2 i 3 de tramvia. L'estaci� Waterloo disposa de dues andanes i tres vies, per� nom�s est� en funcionament l'andana central.

El metro de Montreal consta d\u0019una xarxa de 4 l�nies amb rodaments pneum�tics. Gaireb� la totalitat de la xarxa va ser constru�da durant els anys 60, 70 i 80 i es caracteritza per ser un metro totalment subterrani, on sovint els t�nels segueixen el tra�at dels carrers, encara que no sigui una norma.

Cada estaci� disposa d\u0019una arquitectura i una decoraci� diferent, de la mateixa manera que tamb� hi ha vari�ncia pel que fa a la fond�ria de les estacions. No obstant, la majoria d\u0019estacions tenen dues andanes laterals de 500 peus de llarg (152,4 m) i tots els accessos disposen d\u0019edicles amb portes que protegeixen de les temperatures a l\u0019hivern. En alguns casos aquests edicles tamb� allotgen els vest�buls.

Les estacions de correspond�ncia entre l�nies de metro tenen transbordaments l�gics i r�pids. Destaquen Snowdon i Lionel-Groulx, que disposen de dues andanes sobreposades on es pot fer transbordament cross-platform. A Berri-UQAM les andanes de les l�nies verda i taronja es creuen a nivells contigus. A Jean-Talon, el transbordament entre les l�nies taronja i blava tamb� �s curt, amb l\u0019afegit que les andanes estan sobreposades.

Una caracter�stica de Montreal �s que al centre de la ciutat, les estacions de metro estan connectades directament amb la ciutat subterr�nia anomenada R�SO, que connecta les illes de cases per sota terra.

El transport ferroviari d\u0019Ottawa (O-Train) consta d\u0019una l�nia de metro lleuger est-oest anomenada Confederation Line, a la que s\u0019hi suma una segona l�nia ferrovi�ria nord-sud (Trillium Line) amb explotaci� di�sel.

Tota la xarxa �s en superf�cie, exceptuant el tram central de la Confederation Line, que discorre a una profunditat d\u0019entre 17 i 25 metres sota terra. Les tres estacions subterr�nies disposen d\u0019andanes laterals situades al nivell m�s inferior, que connecten amb uns vest�buls situats a un altell sobre les andanes. Cada estaci� disposa de dos accessos independents, situats en cadascun dels extrems de les andanes, als quals s\u0019hi accedeix a trav�s de diferents vols d\u0019escales.

Les estacions del tram en superf�cie poden estar situades a nivell de carrer, elevades o en trinxera i la majoria disposen d\u0019andanes laterals. Destaquen els intercanviadors entre metro lleuger i bus, com a Tunney\u0019s Pasture, Hurdman o Blair, que garanteixen un transbordament curt.

Ottawa tamb� disposa de diversos BRTs, alguns dels quals amb infraestructura completament segregada, incloent baixadors amb infraestructura semblant a les d\u0019estacions ferrovi�ries, incloent escales autom�tiques, ascensors i vest�buls amb validadores.

El metro de Toronto disposa de tres l�nies. La xarxa �s molt superficial i en alguns trams va en superf�cie.

Una particularitat dels trams m�s antics del metro de Toronto �s que el tra�at dels t�nels va en paral�lel amb els carrers, per� despla�ats unes desenes de metres cap a les illes de cases. A causa del m�tode de construcci� cut-and-cover en aquests trams, va caldre expropiar i enderrocar els edificis existents. Alguna d\u0019aquestes esplanades es van aprofitar per construir-hi intercanviadors que disposen d\u0019andanes per a tramvies i autobusos situats al voltant de l\u0019edifici de viatgers, que serveix alhora d\u0019acc�s al metro. Totes les andanes d\u0019autobusos i tramvies es troben a la zona de pagament de l\u0019estaci�, de manera que sempre s\u0019ha garantit un transbordament gratu�t entre el metro i els mitjans de superf�cie.

Pel que fa als transbordaments entre l�nies de metro, a Sheppard-Yonge, Bloor-Yonge i St. George es garanteix un transbordament directe a trav�s d\u0019un sol vol d\u0019escales, mentre que a Spadina el transbordament es fa a trav�s d\u0019un passad�s de m�s de 200 metres de llarg.

Calgary disposa d\u0019un metro lleuger anomenat C-Train. Al centre de la ciutat funciona com un tramvia, amb les estacions molt properes les unes a les altres, per� als suburbis l\u0019espaiament entre estacions �s superior i disposa de plataforma pr�pia, encara que en algunes cru�lles hi ha passos a nivell.

Pel que fa a les estacions, nom�s n\u0019hi ha una de subterr�nia (Westbrook). Algunes altres estacions tenen acc�s a les andanes a trav�s de pas a nivell, mentre que en altres estacions es resol a trav�s de passos superiors que condueixen a les andanes passant per vest�buls amb sales d\u0019espera.

L\u0019Skytrain de Vancouver est� format per tres l�nies de metro autom�tic. La xarxa t� una forma radial i nom�s dues de les tres l�nies arriben fins al downtown. Tal i com diu el nom, la majoria del metro �s elevat, amb l\u0019excepci� dels trams m�s c�ntrics.

L\u0019Expo Line circula pel centre amb un t�nel a dos nivells, amb les estacions situades a una profunditat considerable. La Canada Line �s molt m�s superficial i cada estaci� disposa d\u0019una topologia diferent: Waterfront, Vancouver City Centre, Yaletown-Roundhouse i Olympic Village disposen d\u0019un vest�bul al nivell -1 i d\u0019una andana central al nivell -2; King Edward t� les andanes sobreposades i Oakridge i Langara tenen les andanes al nivell -1 connectades a trav�s d\u0019un pas inferior.

El principal intercanviador de la xarxa, Waterfront, �s la terminal de les l�nies Expo i Canada, a m�s del tren de rodalies i del ferri a North Vancouver. El transbordament est� mal resolt, ja que la Canada Line est� en una zona de validadores a�llada de la resta de l�nies, a banda que la dist�ncia entre aquesta l�nia i el ferri �s de 350 m.

Seattle disposa d\u0019una l�nia de metro lleuger. Inicialment es va construir un t�nel per a autobusos i troleibusos al centre de la ciutat, entre International District / Chinatown i Westlake, que va ser obert el 1990. Les estacions d\u0019aquest tram disposaven d\u0019andanes laterals al nivell -2 i de dos vest�buls al nivell -1. Les andanes estaven espaiades suficientment per tal que un autob�s pogu�s avan�ar-ne a un altre.

L\u0019any 2005 va tancar el t�nel per reconvertir-lo a metro lleuger, que es va obrir el 2009. Fins el 2019 hi va haver operaci� mixta entre autob�s i metro lleuger. El 2016 es va ampliar la xarxa cap al nord, obrint un tram de 4 estacions subterr�nies i una d\u0019elevada. Les andanes de les estacions subterr�nies es troben a una fond�ria de m�s de 20 metres i cadascuna disposa d\u0019una topologia diferent.

Al costat sud tamb� hi ha l\u0019estaci� Beacon Field, a la qual nom�s s\u0019hi pot accedir amb quatre ascensors de gran capacitat que baixen fins a les andanes, situades a una cinquantena de metres sota terra.

Estocolm t� tres l�nies de metro troncals que travessen el centre de la ciutat i que es bifurquen en dos o tres ramals en cada extrem. La ciutat est� formada per un arxip�lag d\u0019illes. A causa de la complicada geografia i geologia, les l�nies de metro combinen trams en superf�cie, en viaducte, subterr�nies superficials i subterr�nies a gran profunditat.

En general, la l�nia verda, que fou la primera, �s la m�s superficial. Pel centre ho fa en t�nels constru�ts amb el m�tode cut-and-cover, molt superficials, i als suburbis la l�nia �s elevada o en superf�cie. La l�nia vermella combina trams subterranis a molta profunditat (nord) i la combinaci� de trams en superf�cie i a gran profunditat (sud). La l�nia blava circula a molta profunditat en gaireb� tota la longitud.

Pel que fa a les estacions, totes s�n accessibles a PMR gr�cies a la instal�laci� d\u0019ascensors. En general les estacions m�s profundes tenen dues andanes centrals al nivell m�s inferior (-2), que connecten amb els vest�buls situats arran de superf�cie (nivell -1) o en superf�cie a trav�s d\u0019un vol de 3 o 4 escales mec�niques en paral�lel, de llarg recorregut, a m�s d\u0019un ascensor inclinat que tamb� va en paral�lel.

Al tram Slussen \u0013 T-Centralen les vies de les l�nies verdes i vermelles circulen en paral�lel. Les vies es reposicionen les unes respecte les altres entre Gamla Stan i T-Centralen per garantir transbordaments cross-platform a les tres estacions d\u0019aquesta secci�.

Leipzig disposa d\u0019un passant ferroviari amb quatre estacions subterr�nies, amb andanes centrals al nivell m�s profund. Tot i que els t�nels s�n bitubs i han estat constru�ts amb tuneladores, les estacions s\u0019han constru�t amb cut-and-cover, exceptuant Hauptbahnhof, que es va construir en mina.

Karlsruhe disposa d\u0019un sistema de tren-tram. L\u0019any 2021 va entrar en servei un t�nel en forma de T que disposa de 6 estacions, una de les quals �s doble. Totes les estacions disposen d\u0019andanes laterals situades al nivell -2, tret de Kongresszentrum, que les t� al nivell -1. El nivell -1 de la resta d\u0019estacions est� format per diversos vest�buls, des dels quals hi convergeixen entre 1 i 3 accessos.

Les andanes tenen la particularitat de tenir seccions amb diferents al��ries, per poder ser compatible amb tot el material m�bil.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://front-end.social/@argyleink/113834229298080017"],"published":["2025-01-16T10:22:54.585Z"],"mp-slug":["10-22-54"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/16/10-22-54"]},"references":{"https://front-end.social/@argyleink/113834229298080017":{"type":["h-entry"],"properties":{"url":["https://front-end.social/@argyleink/113834229298080017"],"name":["Adam Argyle (@argyleink@front-end.social)"],"summary":["Attached: 3 images #CSS **`scroll-state()` container queries** in Chrome 133 ```css @container scroll-state(stuck: top) { & } ``` Read all about snapped, stuck and scrollable in this post:…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://cartosvg.com"],"published":["2025-01-14T10:57:04.166Z"],"mp-slug":["10-57-04"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/14/10-57-04"]},"references":{"https://cartosvg.com":{"type":["h-entry"],"properties":{"url":["https://cartosvg.com"],"name":["Examples"],"summary":["CartoSVG uses SVG elements, which are interactive by nature.The maps are given depth through filters and rich styling possibilities.Just copy / paste the exported file into your HTML, and you're…"],"content":[{"html":"

CartoSVG uses SVG elements, which are interactive by nature.

The maps are given depth through filters and rich styling possibilities.

Just copy / paste the exported file into your HTML, and you're done!

The final file size is made as small as possible using diverse optimization techniques, and compresses well.

Here follows 4 examples built with CartoSVG. This entire page weights 470Ko, ~110 gzipped.

La Bella Italia

See the standalone example in the app for more information

Mercator projection

See the standalone example in the app for more information

USA Elections

See the standalone example in the app for more information

Ukraine population

See the standalone example in the app for more information

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://www.mshr.app"],"published":["2025-01-14T10:55:02.161Z"],"mp-slug":["10-55-02"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/14/10-55-02"]},"references":{"https://www.mshr.app":{"type":["h-entry"],"properties":{"url":["https://www.mshr.app"],"name":["CSS mesh gradients"],"summary":["A collection of 732 vanilla CSS mesh gradients free for you to use in any of your projects. Browse our generated meshes or create your own custom mesh with our App."],"content":[{"html":"

A collection of 732 vanilla CSS mesh gradients free for you to use in any of your projects. Browse our generated meshes or create your own custom mesh with our App.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://developer.chrome.com/docs/css-ui/css-field-sizing"],"published":["2025-01-14T10:52:29.842Z"],"mp-slug":["10-52-29"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2025/01/14/10-52-29"]},"references":{"https://developer.chrome.com/docs/css-ui/css-field-sizing":{"type":["h-entry"],"properties":{"url":["https://developer.chrome.com/docs/css-ui/css-field-sizing"],"name":["CSS field-sizing | Chrome for Developers"],"summary":["One line of code for auto sizing elements with editable content."],"content":[{"html":"

One line of code for auto sizing elements with editable content.

Without field-sizing, to create a well-sized input field you had to either\nguess at an average size of a text field input or use JavaScript to count\ncharacters and increase the element height or width as the user entered text. In\nother words, it wasn't easy, and it was error prone when trying to follow the\ncontent that a user had entered into an input.

With field-sizing, you need one line of CSS to enable sizing based on the\ncontent. This content based sizing style also works for more than a textarea!

textarea, select, input {\n field-sizing: content;\n}\n

Browser Support

$\"Chrome:$ 123
$\"Edge:$ 123
$\"Firefox:$ x
$\"Safari:$ x

Source

Specification |\nExplainer\n

Like short form videos?

Wes Bos and\nJhey each have a great\nvideo on Twitter introducing you to field-sizing.

Which elements are affected by field-sizing?

Here is a list of\n<form> elements\nthat field-sizing works on, with a summary of the effects it has on each.

`<textarea>`

The input collapses down to a min-inline-size or to fit the placeholder.

As users type, the input grows in the inline direction until it reaches a\nmaximum inline size, at which point text will wrap and the block size of the\ninput grows to fit the new line.

`<select>` and `<select multiple>`

The select element shrinks to fit the selected option.

A select with the multiple attribute grows to fit the widest option and to be\nas tall as needed to fit the number of options.

`<input type="text">`, `<input type="email">` and `<input type="number">`

The input collapses down to a min-inline-size or to fit the placeholder.

As users type, the input grows in the inline direction until it reaches a\nmax-inline-size, at which point overflow clips the input value.

`<input type="file">`

The input collapses down to the button and the prefilled filename text.

Upon uploading a file, the input becomes as wide as the button plus the filename\ntext.

Seeing, testing, and comparing results

Here is an interactive and minimal example of the before and after behaviors of\neach form element, as affected by field-sizing.

Try it on Codepen

Looking closer

When using a\n[placeholder],\nthe placeholder becomes the content. This was mentioned previously but called out\nhere, as it is important to know when styling a form. A long or short\nplaceholder will change the intrinsic size of inputs with field-sizing:\ncontent.

Try it on Codepen

Empty and overflowing style handling

Using field-sizing does mean you have to do some additional work. Ahmad\nShadeed calls it "defensive\nCSS," where the goal is not\nnecessarily to spell out exactly how something should behave or look, rather to\nprotect it from getting into an undesirable visual state. Previously, inputs had\na fair amount of fixed sizes, but after applying field-sizing: content, the\ninputs can become much too small or much too large.

The following styles are a good starting point. They help the elements not\ncollapse into too small of a box and also, in the case of textarea, not grow\ntoo large.

textarea {\n min-block-size: 3.5rlh;\n min-inline-size: 20ch;\n max-inline-size: 50ch;\n} select {\n min-inline-size: 5ch;\n min-block-size: 1.5lh;\n} input {\n min-inline-size: 7ch;\n}\n

This CSS uses relative units for the sizing. The new\nlh\nunit is perfect for the block sizes and\nch\nworks well for the inline sizes.

What is the default value of field-sizing?

The default value of field-sizing is fixed, and it only accepts the two\nvalues of fixed or content.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://toot.cafe/@tomayac/113446179350621117"],"published":["2024-11-08T09:22:10.182Z"],"mp-slug":["09-22-10"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/11/08/09-22-10"]},"references":{"https://toot.cafe/@tomayac/113446179350621117":{"type":["h-entry"],"properties":{"url":["https://toot.cafe/@tomayac/113446179350621117"],"name":["Thomas Steiner :chrome"],"summary":["Finally more options for styling the `` element, for example, to animate its opening. @bramus@front-end.social's article has all the details: https://developer.chrome.com/blog/styling-details. >�"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://front-end.social/@zeldman/113396308709565733"],"published":["2024-10-30T13:40:33.318Z"],"mp-slug":["01-40-33"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/30/01-40-33"]},"references":{"https://front-end.social/@zeldman/113396308709565733":{"type":["h-entry"],"properties":{"url":["https://front-end.social/@zeldman/113396308709565733"],"name":["zeldman (@zeldman@front-end.social)"],"summary":["\u001cHTML Forms have powerful validation mechanisms, but they are heavily underused. In fact, not many people even know much about them. Is this because of some flaw in their design? Let\u0019s explore.\u001d…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://smarthomescene.com/diy/diy-the-smallest-bluetooth-proxy-with-esp32-c3-supermini/"],"published":["2024-10-29T13:01:02.290Z"],"mp-slug":["01-01-02"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/29/01-01-02"]},"references":{}},{"type":["h-entry"],"properties":{"like-of":["https://floss.social/@downey/113387242711741163"],"published":["2024-10-29T08:00:13.043Z"],"mp-slug":["08-00-13"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/29/08-00-13"]},"references":{"https://floss.social/@downey/113387242711741163":{"type":["h-entry"],"properties":{"url":["https://floss.social/@downey/113387242711741163"],"name":["Michael Downey =� (@downey@floss.social)"],"summary":["No, dear website, {task} is not \"better using the app\"."],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://www.nytimes.com/2024/10/17/climate/carbon-fires-forests-global-warming.html#commentsContainer"],"published":["2024-10-23T12:42:48.169Z"],"mp-slug":["12-42-48"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/23/12-42-48"]},"references":{}},{"type":["h-entry"],"properties":{"like-of":["https://www.jvt.me/posts/2024/10/15/slashes/?utm_medium=rss&utm_source=rss"],"published":["2024-10-15T14:25:59.025Z"],"mp-slug":["02-25-59"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/15/02-25-59"]},"references":{"https://www.jvt.me/posts/2024/10/15/slashes/":{"type":["h-entry"],"properties":{"name":["Creating a /slashes page"],"featured":["https://www.jvt.me/img/profile.jpg"],"content":[{"value":"Last week I found out that Robb Knight has a site called called Slash Pages, which details common top-level URLs that are found at /.I'd found out about this as someone had started contributing a /salary page section, and looking at both my own site, and the list of pages that have already been collected, I thought I'd create my own /slashes page.I'll also be adding a few new options to the upstream Slash Pages site to add some things I've been doing too.","html":"

Last week I found out that Robb Knight has a site called called Slash Pages, which details common top-level URLs that are found at /<name>.

I'd found out about this as someone had started contributing a /salary page section, and looking at both my own site, and the list of pages that have already been collected, I thought I'd create my own /slashes page.

I'll also be adding a few new options to the upstream Slash Pages site to add some things I've been doing too.

"}],"url":["https://www.jvt.me/posts/2024/10/15/slashes/"],"summary":["Creating a collection of all the /slash pages I have across my site."],"uid":["https://www.jvt.me/posts/2024/10/15/slashes/"],"author":[{"value":"Jamie Tanna","type":["h-card"],"properties":{"photo":["https://www.jvt.me/img/profile.png"],"name":["Jamie Tanna"],"url":["https://www.jvt.me"]}}],"published":["2024-10-15T14:08:53+01:00"],"updated":["2024-10-15T14:08:53+01:00"],"category":["www.jvt.me"]},"children":[{"value":"Robb Knight","type":["h-card"],"properties":{"url":["https://rknight.me"],"name":["Robb Knight"]}}]}}},{"type":["h-entry"],"properties":{"like-of":["https://beeps.website/blog/2024-10-09-why-govuk-exit-this-page-doesnt-use-escape/"],"published":["2024-10-15T09:52:51.890Z"],"mp-slug":["09-52-51"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/15/09-52-51"]},"references":{"https://beeps.website/blog/2024-10-09-why-govuk-exit-this-page-doesnt-use-escape/":{"type":["h-entry"],"properties":{"url":["https://beeps.website/blog/2024-10-09-why-govuk-exit-this-page-doesnt-use-escape/"],"name":["Why GOV.UK's Exit this Page component doesn't use the Escape key"],"summary":["A very specific question, answered very longwindedly."],"featured":["https://v1.screenshot.11ty.dev/https%3A%2F%2Fbeeps.website%2Fblog%2F2024-10-09-why-govuk-exit-this-page-doesnt-use-escape%2Fopengraph%2F/opengraph/_1728556120/"],"content":[{"html":"

Content warning: This blog post references domestic abuse and violence but doesn\u0019t go into specific detail.

I\u0019m not an expert in that topic at all, so I may not use the preferred terminology in all instances. Sorry.

Last year (oh how time flies), we launched the GOV.UK Design System\u0019s Exit this Page component, or EtP for short.

On the surface, it\u0019s a simple component. It\u0019s a big red button that sticks to the top of the screen. If you click it, you\u0019re taken away to BBC Weather.

But it does so much more.

If you press the � Shift key on your keyboard three times, you get a visual indicator that you are activating the button. Upon the third press, the page you\u0019re on is blanked out and you\u0019re redirected away to& well, BBC Weather again.

It\u0019s intended to be a safety tool. A way for people in unstable, potentially violent, domestic situations to quickly leave the page.

But one question that comes up a lot is&

It\u0019s a decent question. Many other implementations of buttons like this exist, and of the ones that provide a keyboard shortcut, they almost universally use the Escape key: Esc.

And it\u0019s literally called Escape. Why wouldn\u0019t you use it for an escape function?

Basically, it doesn\u0019t quite work like that. There was a veritable rabbit hole of barriers that ultimately led us towards using a different key.

1. Escape stops the browser from loading pages

In virtually all browsers, pressing Escape while a webpage is loading stops the loading process.

This is literally the last thing we want to happen for a feature whose sole job is to load a different page from the one you\u0019re on.

If we had used Escape, it would be too easy for a user to accidentally cancel the redirection process and end up stuck on the current page, and that\u0019d be a bit naff.

In addition to cancelling loading, we found that the Escape key was used by too many other functions to reliably work for exiting the page.

For example, Escape is also used to exit fullscreen media (and on macOS, fullscreen apps), close modal dialogs and popovers (including those generated by native input controls), cancel a dragging interaction, clear a text input, and dismiss notifications.

Assistive technologies may also use the Escape key for functionality, and it is also used as part of keyboard shortcuts.

All of these take priority over the page\u0019s JavaScript, which often meant needing to press the Escape key more than the requisite three times, creating confusion as to whether the function actually worked as advertised.

In the case of macOS and fullscreen apps, it even involved having to wait for the re-windowing animation to finish before the page could begin to intercept Escape key presses again. Very not ideal.

Do you remember popup ads? When you\u0019d open up a website and immediately a new window would open purely to shove advertising in your face?

How about autoplaying audio and videos? Or when pages begged you to stay when you tried to close them? Or those immediate \u001cdo you want notifications from us?\u001d dialogs?

These are all the result of people exploiting JavaScript\u0019s mostly-unrestricted ability to do stuff, usually to try and make money.

As a result of advertising people being bastards, more and more of what the web platform can do is now being locked behind the requirement of transient activation\u0014that is, the browser will refuse to run pieces of JavaScript unless it is certain that some manner of user interaction took place with the intention of running it.

Browsers use a few different heuristics to determine user interaction, including touches, mouse movements, and key presses. If it detects one of these that seems human enough, it will allow transiently activated code to run for a short period afterwards.

Redirecting the user away to another page via JavaScript is one such function that requires user interaction before it will run.

And Esc is the only keyboard key that doesn\u0019t count as user interaction for the purposes of transient activation.

This meant that if a user tried to use the EtP shortcut immediately after a page loaded, or after a short period having not interacted with the page (for example, if they were busy reading it), the redirection just wouldn\u0019t work. Totally doubleplus ungood.

With adequate evidence that Escape wouldn\u0019t work for us, we started looking at other non-typing keys we could use.

Testing with the Control key (\u0003 Ctrl) worked much better, avoiding virtually all of the pitfalls of Escape, but there were still a few cons to it.

Control conflicted with VoiceOver\u0019s default configuration\u0014where pressing Control mutes VoiceOver.

Control was also the only key of those we were considering that wasn\u0019t in a physically consistent location on different UK keyboards: While on standalone keyboards the key tends to appear in the far bottom-left, on laptops it is commonly offset inwards to make room for an additional function key.

This innocuous difference had the potential to slow down a user\u0019s ability to quickly activate the shortcut, especially if they were using unfamiliar hardware.

The Alt or Option keys (� Alt or % Option), by comparison, were more problematic.

Most obviously: It\u0019s named differently on different systems. Guidance and help documentation would get rather more verbose if we had to constantly call it Alt, Option, Opt, the key with % on it, and so on in every instance.

The key\u0019s use for typing letters with diacritics and other \u0018alt codes\u0019 meant that the keypresses reported to the browser weren\u0019t always aligned with what physical keys the user had actually pressed, meaning we couldn\u0019t be reliably sure if the user was intending to exit the page or not.

Alt/Option, like Escape, also had the issue of being utilised by some browser- and system-level functions, such as a shortcut to access application menus.

In Chromium browsers on Windows, for example, pressing Alt would move keyboard focus out of the webpage and to the browser UI\u0014completely removing the user from the webpage context. This prevented subsequent key presses from being detected, and obviously made EtP functionality not work at all.

So we landed on � Shift. Shift works more consistently than Escape did, but still has a bunch of caveats:

Its use during normal typing meant needing to be careful about which presses actually counted towards activation.
Pressing Shift three times requires many more presses if the Sticky Keys accessibility features is active. I found that it took between 6 and 9 presses with Windows Sticky Keys, depending on speed, and 9 presses with macOS Sticky Keys.
macOS\u0019s Slow Keys feature still takes three presses, but they have to be spread across a period of a few seconds to avoid activating the \u0018latching\u0019 functionality.
The JAWS screen reader in Chromium would register the first Shift keypress twice, though this has potentially been fixed since.
Using Shift means that the shortcut is available on touch device\u0019s virtual keyboards. However, these keyboards tend to behave unpredictably compared to their hardware equivalents. I wrote up a massive bug report just about how the Shift key behaves on iOS, part of which subsequently became a bug report.

Despite these shortfalls, Shift was ultimately the least flawed of the choices presented to us, with most of its issues being fairly minor and none of them being showstopping.

So that\u0019s where we are now.

In some ways, this is an unfortunate case of technology and web standards working against what would be the ideal user experience. Esc would be the ideal key to use, but it has too many caveats to work consistently.

We looked into opening the redirection page in a new tab and automatically closing the previous tab, as some similar tools do, but user research found that this often caused confusion (\u0018Why doesn\u0019t the back button work?\u0019, \u0018Where did my work go?\u0019) and doing that is also subject to transient activation requirements.

We would\u0019ve also liked to have had the button overwrite or erase the user\u0019s recent browser history, but we can\u0019t do that either. (And for good reason!)

Ultimately, we had to land on the philosophy of doing better, but not aiming for perfection. We could never write a piece of JavaScript that could prevent domestic violence, prying surveillance, or controlling relationships\u0014we can only do what we can do.

No one has complained about us using Shift instead of Escape, nor have we received any bug reports about it not working, but it certainly raises an eyebrow when folks hear about it for the first time&

As for the other major question we get&

As civil servants, we didn\u0019t want to link to a news service as that could lead to claims of political bias.

I also argued (a lot) against linking to the Google homepage\u0014despite this being ridiculously common\u0014because& who actually uses the Google homepage? Google search is right there in your URL bar.

Even if you do go to Google\u0019s homepage, the first action you normally take once there is to leave Google\u0019s homepage.

If you walked in on someone and they were nervously staring at Google\u0019s homepage, you\u0019d be suspicious as hell.

BBC Weather\u0019s homepage is a content-rich page. Users have a reason to be looking at it and to be looking for an extended period of time. It may even default to the user\u0019s location, displaying significantly more personalised content in the process, which is surely less suspicious than a blank, generic search form.

Thought this was neat? Why not share a link to this page?

"}],"published":["2024-10-09T00:00:00.000Z"]}}}},{"type":["h-entry"],"properties":{"like-of":["https://front-end.social/@keithjgrant/113286756123288212"],"published":["2024-10-11T14:33:06.690Z"],"mp-slug":["02-33-06"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/11/02-33-06"]},"references":{"https://front-end.social/@keithjgrant/113286756123288212":{"type":["h-entry"],"properties":{"url":["https://front-end.social/@keithjgrant/113286756123288212"],"name":["Keith J Grant (@keithjgrant@front-end.social)"],"summary":["Attached: 1 image We just threw a 7-ender! >L #curling"],"featured":["https://cdn.masto.host/frontendsocial/media_attachments/files/113/286/752/644/620/046/original/43d4213cfbbada04.jpg"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mstdn.social/@rysiek/113243932147763182"],"published":["2024-10-07T09:37:45.613Z"],"mp-slug":["09-37-45"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/07/09-37-45"]},"references":{"https://mstdn.social/@rysiek/113243932147763182":{"type":["h-entry"],"properties":{"url":["https://mstdn.social/@rysiek/113243932147763182"],"name":["MichaB \"rysiek\" Wozniak �"],"summary":["As I am seeing some Medium links in my timeline today, and Medium is pretty annoying (pop-overs and all). So reminder that you can just replace: > medium.com &with: > scribe.rip In any Medium link and…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://dice.camp/@miriamrobern/113228532711715509"],"published":["2024-10-02T06:02:49.171Z"],"mp-slug":["06-02-49"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/10/02/06-02-49"]},"references":{"https://dice.camp/@miriamrobern/113228532711715509":{"type":["h-entry"],"properties":{"url":["https://dice.camp/@miriamrobern/113228532711715509"],"name":["Miriam \"Scary Username\" Robern (@miriamrobern@dice.camp)"],"summary":["Attached: 1 image OMFG this. #ai #meta #metaAI #aiart #chatgpt"],"featured":["https://cdn.masto.host/dicecamp/media_attachments/files/113/228/523/234/959/494/original/fe03a06e08e07b05.png"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://fediverse.zachleat.com/@zachleat/113209829620153665"],"published":["2024-09-27T14:44:20.260Z"],"mp-slug":["02-44-20"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/09/27/02-44-20"]},"references":{"https://fediverse.zachleat.com/@zachleat/113209829620153665":{"type":["h-entry"],"properties":{"url":["https://fediverse.zachleat.com/@zachleat/113209829620153665"],"name":["Zach Leatherman :11ty: (@zachleat@zachleat.com)"],"summary":["If your JavaScript framework doesn\u0019t support web components, it doesn\u0019t support the web platform."],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://alvaromontoro.com/blog/68063/bad-css-dad-jokes-ii"],"published":["2024-09-26T10:14:33.730Z"],"mp-slug":["10-14-33"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/09/26/10-14-33"]},"references":{"https://alvaromontoro.com/blog/68063/bad-css-dad-jokes-ii":{"type":["h-entry"],"properties":{"url":["https://alvaromontoro.com/blog/68063/bad-css-dad-jokes-ii"],"name":["Bad CSS-Dad Jokes (II)"],"summary":["After the terrible reception great success of my first post with Bad CSS-Dad Jokes, I am here to torture entertain you with more terrible amazing CSS jokes. Enjoy! :: Blog post at Alvaro Montoro's…"],"featured":["https://alvaromontoro.com/images/blog/bad-dad-jokes-2-0.webp"],"content":[{"html":"

What is CSS Developers' favorite car?
A vw.

How does a <div> dance?
It makes its border groove.

$\"CSS$

Wait... you haven't heard the news about randomization in CSS? Check my other (serious) post with some interesting features and functions arriving in CSS —hopefully one day soon.

Why do Mobile Developers go to McDonald's?
Because they like their hamburger menu.

How do Web Developers make a component hot?
They turn it 90 degrees.

What is blue and not too heavy?
LightBlue

And its even "terribler" and nerdier version:

What is blue and not too heavy?
#ADD8E6

Why did the last <div> blush?
Because it was next to its parent's bottom.

Why did the <video> element fail the test?
Because it didn't have a :cue.

CSS custom properties are in the :root of all evil (websites)

<input type="hidden">
hide-and-seek champion since 1995.

Fun fact: the type hidden was added to the HTML specification in 1995. This is mostly useless information, but now you know it.

Why didn't IE11 talk to other browsers?
Because it didn't know how to <dialog>.

Another trivia fun fact: Chrome supported <dialog> since 2012! But it didn't become a full part of the standard until 2022. IE's end of life was June 2022, so that browser never implemented the <dialog> element.

Why are CSS Developers so optimistic?
They can never see a glass half :empty.

Why did the ::before pseudo-element not show up at its high school reunion?
Because it wasn't contented.

Why did the linear gradient fail the test?
Because it couldn't make the curve.

What's SVG's favorite TV host?
Doctor Fill.

Why do CSS developers only go to national masquerades?
Because masks can't go outside the borders.

This one is not 100% true. We can make a mask apply outside of the element borders by setting mask-clip: no-clip.

Why did the SVG file go to the dentist?
It lost a fill-ing.

Why did the <img> tag go to jail?
It was iframed.

What element shows ::before after ::after?
A dictionary.

"}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://front-end.social/@bramus/113192802274531981"],"published":["2024-09-24T19:46:39.263Z"],"mp-slug":["07-46-39"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/09/24/07-46-39"]},"references":{"https://front-end.social/@bramus/113192802274531981":{"type":["h-entry"],"properties":{"url":["https://front-end.social/@bramus/113192802274531981"],"name":["Bramus (@bramus@front-end.social)"],"summary":["Attached: 1 image Something to add to your CSS reset from now on: ``` :root { interpolate-size: allow-keywords; } ``` It enables things like transitions from `height: 0` to `height: auto`.…"],"featured":["https://cdn.masto.host/frontendsocial/media_attachments/files/113/192/800/068/802/496/small/584e1829c2091c91.png"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@brad_frost/113192784039854930"],"published":["2024-09-24T16:27:13.848Z"],"mp-slug":["04-27-13"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/09/24/04-27-13"]},"references":{"https://mastodon.social/@brad_frost/113192784039854930":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@brad_frost/113192784039854930"],"name":["brad_frost (@brad_frost@mastodon.social)"],"summary":["Now that social media is scattered, I think it's finally time to set up an Indie Web-esque \"post (even short stuff) on my own site and automatically post it to Mastodon, Threads, et al. I've got a…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://front-end.social/@mxbck/113101104768024484"],"published":["2024-09-08T18:08:51.088Z"],"mp-slug":["06-08-51"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/09/08/06-08-51"]},"references":{"https://front-end.social/@mxbck/113101104768024484":{"type":["h-entry"],"properties":{"url":["https://front-end.social/@mxbck/113101104768024484"],"name":["Max B�ck (@mxbck@front-end.social)"],"summary":["\u000f\u000f New post: Remember when the code in your editor was exactly the same code delivered to the browser? Now there's usually a build process in between, and that can get ... complicated. Do we still…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://mastodon.social/@Daojoan/112980995791841731"],"published":["2024-08-19T10:07:13.818Z"],"mp-slug":["10-07-13"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/08/19/10-07-13"]},"references":{"https://mastodon.social/@Daojoan/112980995791841731":{"type":["h-entry"],"properties":{"url":["https://mastodon.social/@Daojoan/112980995791841731"],"name":["Joan Westenberg (@Daojoan@mastodon.social)"],"summary":["Attached: 1 image If anyone\u0019s wondering what the dude who sang \u001cchocolate rain\u001d is up to these days, he\u0019s dropping absolute bangers about housing and he\u0019s fucking right"],"featured":["https://files.mastodon.social/media_attachments/files/112/980/995/680/625/701/original/02e11d4478f3f48c.jpeg"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://toot.cafe/@slightlyoff/112656920041897216"],"published":["2024-06-23T09:13:48.250Z"],"mp-slug":["09-13-48"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/06/23/09-13-48"]},"references":{"https://toot.cafe/@slightlyoff/112656920041897216":{"type":["h-entry"],"properties":{"url":["https://toot.cafe/@slightlyoff/112656920041897216"],"name":["Alex Russell (@slightlyoff@toot.cafe)"],"summary":["Processing JS, e.g., is at least 3x more expensive per byte than HTML and CSS. That means that you can afford three times as much declarative content given a constant latency budget. Including network…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://typetura.social/@scott/112632899898395667"],"published":["2024-06-18T09:11:29.939Z"],"mp-slug":["09-11-29"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/06/18/09-11-29"]},"references":{"https://typetura.social/@scott/112632899898395667":{"type":["h-entry"],"properties":{"url":["https://typetura.social/@scott/112632899898395667"],"name":["Scott Kellum :typetura"],"summary":["Do you use `font-smoothing: antialiased` in your CSS? I\u0019ve got some NEWS for you. MacOS Mojave made this the default in 2018. Also text rendering on Windows heavily relies on subpixel antialiasing. I…"],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://wa.rner.me/2024/06/02/firstweek-on-my.html"],"published":["2024-06-03T08:28:31.920Z"],"mp-slug":["08-28-31"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/06/03/08-28-31"]},"references":{}},{"type":["h-entry"],"properties":{"like-of":["https://smashingmagazine.com/2024/05/naming-best-practices/"],"published":["2024-05-24T12:47:52.920Z"],"mp-slug":["12-47-52"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/05/24/12-47-52"]},"references":{"https://smashingmagazine.com/2024/05/naming-best-practices/":{"type":["h-entry"],"properties":{"url":["https://smashingmagazine.com/2024/05/naming-best-practices/"],"name":["Best Practices For Naming Design Tokens, Components, Variables, And More \u0014 Smashing Magazine"],"summary":["How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way."],"featured":["https://files.smashing.media/articles/naming-best-practices/naming-good-practices-opt.png"],"content":[{"html":"

How can we get better at naming? This post is dedicated to naming conventions, tips, and real-world examples that help you name things in a robust and flexible way.

Naming is hard. As designers and developers, we often struggle finding the right name \u0014 for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so it\u0019s difficult to understand what exactly is meant. And sometimes they are too specific, leaving little room for flexibility and re-use.

In this post, we want to get to the bottom of this and explore how we can make naming more straightforward. How do we choose the right names? And which naming conventions work best? Let\u0019s take a closer look.

Inspiration For Naming

If you\u0019re looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames is a wonderful resource jam-packed with ideas that get you thinking outside the box.

The site provides thematically grouped lists of words perfect for naming. You\u0019ll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldn\u0019t instantly come to one\u0019s mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing.

Naming Conventions

What makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups and components in a consistent and scalable way.

As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and not related to visual properties. He shares do\u0019s and don\u0019ts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components.

Design Tokens Naming Playbook

How do you name and manage design tokens? To enhance your design tokens naming skills, Romina Kavcic created an interactive Design Tokens Naming Playbook. It covers everything from different approaches to naming structure to creating searchable databases, running naming workshops, and automation.

The playbook also features a naming playground where you can play with names simply by dragging and dropping. For more visual examples, also be sure to check out the Figma template. It includes components for all categories, allowing you to experiment with different naming structures.

Flexible Design Token Taxonomy

How to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. The parent company of products such as Mailchimp, Quickbooks, TurboTax, and Mint developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.

\"Creating — Nate Baldwin shares insights into Intuit\u0019s flexible design token taxonomy. (Large preview)

Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuit\u0019s design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed.

Naming Colors

When you\u0019re creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobe\u0019s Spectrum Design System, shares how they master the challenge.

As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50\u0013900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.

Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette.

Looking at what other people call similar things is a great way to start when you\u0019re struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.

\"The — The Component Gallery collects interface components from real-world design systems. (Large preview)

The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components \u0014 from accordion to visually hidden \u0014 and also lists other names that the UI components go by. A fantastic resource \u0014 not only with regards to naming.

Variables Taxonomy Map

A wonderful example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.

The map illustrates four collections required to support the system and connections between tokens \u0014 from brand and primitives to semantics and pages. It builds on top of Nathan Curtis\u0019 work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.

If you want to explore more approaches to naming design tokens, Vitaly compiled a list of useful Figma kits and resources that are worth checking out.

Design Token Names Inventory

Romina Kavcic created a handy little resource that is bound to give your design token naming workflow a power boost. The Design Token Names Inventory spreadsheet not only makes it easy to ensure consistent naming but also syncs directly to Figma.

The spreadsheet has a simple structure with four levels to give you a bird\u0019s-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track and filter your tokens. And while the spreadsheet itself is already a great solution to keep everyone involved on the same page, it plays out its real strength in combination with the Google Spreadsheets plugin or the Kernel plugin. Once installed, the changes you make in the spreadsheet are reflected in Figma. A real timesaver!

Want To Dive Deeper?

We hope these resources will come in handy as you tackle naming. If you\u0019d like to dive deeper into design tokens, components, and design systems, we have a few friendly online workshops and SmashingConfs coming up:

We\u0019d be absolutely delighted to welcome you to one of our special Smashing experiences \u0014 be it online or in person!

"}],"published":["0000-05-23T09:00:00.000Z"]}}}},{"type":["h-entry"],"properties":{"like-of":["https://typetura.social/@scott/112397536211218435"],"published":["2024-05-07T09:16:13.718Z"],"mp-slug":["09-16-13"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/05/07/09-16-13"]},"references":{"https://typetura.social/@scott/112397536211218435":{"type":["h-entry"],"properties":{"url":["https://typetura.social/@scott/112397536211218435"],"name":["Scott Kellum :typetura"],"summary":["Always reject the cookies, even if it costs a few more clicks."],"content":[{"html":" "}]}}}},{"type":["h-entry"],"properties":{"like-of":["https://adactio.com/links/21109"],"published":["2024-05-07T09:14:46.813Z"],"mp-slug":["09-14-46"],"visibility":["visible"],"post-status":["published"],"url":["https://grant.codes/2024/05/07/09-14-46"]},"references":{"https://adactio.com/links/21109":{"type":["h-entry"],"properties":{"url":["https://adactio.com/links/21109"],"name":["Web Components from early 2024 � Chris Burnell"],"summary":["Some lovely HTML web components\u0014perfect for progressive enhancement!"],"featured":["https://adactio.com/images/photo-300.jpg"],"content":[{"html":"

Some lovely HTML web components\u0014perfect for progressive enhancement!

$\"Web$

\nOlder »\n

As a self-initiated learner, being able to view source brought to mind the experience of a slow walk through someone else\u0019s map.

This ability to \u001cobserve\u001d software makes HTML special to work with.
\n

This is a good description of the appeal of HTML web components:

WC lifecycles are crazy simple: you register the component with customElements.define and it\u0019s off to the races. Just write a class and the browser will take care of elements appearing and disappearing for you, regardless of whether they came from a full reload, a fetch request, or\u0014god forbid\u0014a document.write. The syntax looks great in markup, too: no more having to decorate with js-something classes or data attributes, you just wrap your shit in a custom element called something-controller and everyone can see what you\u0019re up to. Since I\u0019m firmly in camp \u001cprogressively enhance or go home\u001d this fits me like a glove, and I also have great hopes for Web Components improving the poor state of pulling in epic dependencies like date pickers or text editors.
\n

The power of interoperability:

Web components won\u0019t take web development by storm, or show us the One True Way to build websites. They don\u0019t need to dethrone JavaScript frameworks. We probably won\u0019t even all learn how to write them!

What web components will do \u0014 at least, I hope \u0014 is let us collectively build a rich ecosystem of dynamic components that work with any web stack. No more silos. That\u0019s the web component success story.
\n

Lots of new features landing in Safari, and it’s worth paying attention to the new icon requirements now that websites can be added to the dock:

To provide the best user experience on macOS, supply at least one opaque, full-bleed maskable square icon in the web app manifest, either as SVG (any size) or high resolution bitmap (1024�1024).
\n

Here’s the video of the talk I gave in Nuremberg recently.

\nThe `details` element is like the TL;DR of markup.\n

\nThe World Wide Web is a mashup.\n

\nExtending the wheel, instead of reinventing it.\n

\nA difference of opinion regarding what the core features of custom elements should be.\n

\nA little fix for Safari.\n

"}]}}}}]}

Content Collections

Live Content Collections

Implementation

Wrapping Up

The Idea

The Implementation

Failures

The circular AI logo epidemic

OpenAI's logo evolution

The Big AI companies

Smoking gun: Anthropic's Claude

It's not just AI companies

Why does this keep happening?

Circular design psychology

Unintentional biomimicry

The copycat effect

Design by committee

What this says about tech branding

Tech design trends through history

Historic logo disasters: You're not alone

Breaking free from the butthole

Conclusion

La Bella Italia

Mercator projection

USA Elections

Ukraine population

Like short form videos?

Which elements are affected by field-sizing?

<textarea>

<select> and <select multiple>

<input type="text">, <input type="email"> and <input type="number">

<input type="file">

Seeing, testing, and comparing results

Looking closer

Empty and overflowing style handling

What is the default value of field-sizing?

1. Escape stops the browser from loading pages

Inspiration For Naming

Naming Conventions

Design Tokens Naming Playbook

Flexible Design Token Taxonomy

Naming Colors

Variables Taxonomy Map

Design Token Names Inventory

Want To Dive Deeper?

`<textarea>`

`<select>` and `<select multiple>`

`<input type="text">`, `<input type="email">` and `<input type="number">`

`<input type="file">`