Recently, I found myself working with generated types for API requests and responses based off an OpenAPI schema. Using TypeScript’s conditional types, my fetch logic could automatically infer appropriate parameters and response types based on the path I was calling and the HTTP method I was using, which is very cool indeed. I tried looking it up in the documentation to read a bit more about it, but found they didn’t actually go into that much detail about inferring types like this, so I thought I’d share this cool feature a bit wider.type GetReturnType<Type> = Type extends (...args: never[]) => infer Return ? Return : never;I’m going to show you how TypeScript can cleverly extract types out of complex nested structures using the power of the extends and infer keywords.I’ve put together a simplified API schema for this article, and you can explore it — and all the code, live and working — on GitHub. Fire up a GitHub Codespace by pressing . from the repo so that you can see it all in ac

The big pull requests keep on landing here at Piccalilli. This time, it's our article view that has had a thorough re-work.The old article view was nice, sure, but it let us down in the following ways:All the author info was at the top at larger viewportsAdvertising was easy to miss (as reported by our readers in the survey)Content pushed out to the left was slightly awkward to readWe feel like we've fixed all of that with our new layout.This re-work is something that's been on our radar almost immediately after we launched the redesign last year. It became even more prescient after we redesigned The Index this year, featuring a central content column for issue posts.We just wanted to give ourselves time to do it right because this article view covers articles, links and courses. That's most of the content on the site!Leveraging CSS grid and named areasWe've got a new five column grid layout now that allows a nice narrow(ish) column for prose and four columns for to enable content like

It's been a very busy couple of months here at Piccalilli with two major updates being worked on.We've finally launched the first of those updates today: fully branded marketing pages for our upcoming courses — Mindful Design and JavaScript for Everyone. We've also refreshed of our existing course, Complete CSS in the process.Mindful Design has a bright, friendly look and feel, featuring corner radii and block shadows.JavaScript for Everyone features a retro-futuristic look and feel with seamless textures. It also features a "dim" mode, rather than a fully dark mode.Complete CSS has had a nice refresh to align with our new branded marketing pages for the upcoming courses.As you can see, Mindful Design and JavaScript for Everyone are wildly different to the general look and feel of our site, but because we built the entire thing with a theme system, implementing a brand like this is a case of defining some custom properties.:root { /* === Colour === */ --color-dark: #000000; --color-dar

We've got this pattern on the Set Studio website. It's three summaries with headings that render in a three column grid which as the viewport reduces in space, automatically stack.The three column grid part is pretty straightforward, we're first using this little layout composition..grid { display: grid; grid-template-columns: repeat( var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr) ); gap: var(--gutter, var(--space-l));}Then we're hinting the browser to make it a three column grid, where it can, using a CUBE CSS exception..grid[data-layout='thirds'] { --grid-placement: auto-fit; --grid-min-item-size: clamp(16rem, 33%, 20rem);}If we just leave the CSS like that (with a little help from our base styles), its looks ok, but the differing heading lengths at narrower viewports creates an awkward reading line. Ideally, each of those summaries will be on a consistent, horizontal reading line.To see this demo, head over to the web version.We're using CSS grid alr

I'll start by saying I am very much an AI-sceptic — at points, seething at the whole landscape. What I do appreciate though is that the genie is already out of the bottle and it's too big to fit back in. AI is going nowhere, although the current tech hype cycle increasingly looks fragile.It's the exploitation that makes me mad, especially. I run this publication and AI has stolen everything. Not just this publication either because it's even stolen premium content, such as Every Layout.To combat this theft-by-default policy, Cloudflare have come up with a "pay per crawl" system.The way it works is a Cloudflare-served site — just like this one — can return a 402 status code, indicating that a payment is required for a crawler to access a page. Along with that, the publisher can set a crawler-price header, indicating how much a crawler needs to pay to crawl that content.Crawlers either have to come back, indicating a willingness to pay, or proactively determine a crawler-max-price. As lo