<?xml version="1.0" encoding="utf-8"?>
  <rss version="2.0"
    xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:wfw="http://wellformedweb.org/CommentAPI/"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:atom="http://www.w3.org/2005/Atom"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
    xmlns:georss="http://www.georss.org/georss"
    xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
  >
    <channel>
      <title>Piccalilli - Announcements topic archive</title>
      <link>https://piccalil.li/</link>
      <atom:link href="https://piccalil.li/category/announcements.xml" rel="self" type="application/rss+xml" />
      <description>We are Piccalilli. A publication dedicated to providing high quality educational content to level up your front-end skills.</description>
      <language>en-GB</language>
      <copyright>Piccalilli - Announcements topic archive 2026</copyright>
      <docs>https://www.rssboard.org/rss-specification</docs>
      <pubDate>Mon, 06 Apr 2026 13:01:56 GMT</pubDate>
      <lastBuildDate>Mon, 06 Apr 2026 13:01:56 GMT</lastBuildDate>

      
      <item>
        <title>A 2026 Piccalilli homepage redesign</title>
        <link>https://piccalil.li/blog/a-2026-piccalilli-homepage-redesign/?ref=announcements-category-rss-feed</link>
        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
        <pubDate>Tue, 24 Feb 2026 11:55:00 GMT</pubDate>
        <guid isPermaLink="true">https://piccalil.li/blog/a-2026-piccalilli-homepage-redesign/?ref=announcements-category-rss-feed</guid>
        <description><![CDATA[<p>Last year, we invested lots of time, working out how this publication was being <em>perceived</em>, via a couple of surveys and one-on-one interviews with our readers. We learned a hell of a lot, but the main thing that stuck out was that people were confused about what we're all about. Are we a blog, are we a publication? Turns out not many know, which is not ideal 😅</p>
<p>Well, we've aimed to address and highlight all of that in a <a href="https://piccalil.li">homepage redesign that we've just launched</a>.</p>
<p><img src="https://piccalil.b-cdn.net/images/blog/2026-homepage.jpg" alt="A clip of the new homepage that has a big headline at the top: &quot;No hype, no AI slop, just high quality, pragmatic education&quot;, followed by &quot;We’re not in the business of chasing clicks, tech industry fads or hype cycles. Instead, our premium courses, articles, links and newsletter give you a real-world, industry-relevant education that will outlive the hype and help you to level up your career.&quot;" /></p>
<p>As you can see, we're not messing around in terms of our positioning and messaging. I'm really confident we're hitting the appropriate tone for 2026 too. <a href="https://piccalil.li/blog/our-principles-on-ai/">We're already clear on our stance on AI/LLMs</a>, but we also wanted to really highlight that with this redesign, so people know — right from the start — what we're all about.</p>
<p>We know we're sailing against the current here, but we're cool with that. Being unapologetically <em>for</em> the web platform and <a href="https://piccalil.li/blog/its-about-time-i-tried-to-explain-what-progressive-enhancement-actually-is/">progressive enhancement</a> since day one has always had us sailing against the current. We've just got bigger sails now to go <em>against</em> the onslaught of AI-boosting by providing really high quality educational material for humans, written by humans, always.</p>
<p>That's <em>exactly</em> what we do here.</p>
<p><a href="https://piccalil.li">Check out the new homepage</a></p>
        
        ]]></description>
        
      </item>
    
      <item>
        <title>Wrapping up 2025</title>
        <link>https://piccalil.li/blog/wrapping-up-2025/?ref=announcements-category-rss-feed</link>
        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
        <pubDate>Thu, 18 Dec 2025 11:55:00 GMT</pubDate>
        <guid isPermaLink="true">https://piccalil.li/blog/wrapping-up-2025/?ref=announcements-category-rss-feed</guid>
        <description><![CDATA[<p>We don't normally do one of these, but I think 2025 has been a stellar year for Piccalilli, so we wanted to get into what we've done and what we're planning for next year.</p>
<h2>We've written a lot of words this year</h2>
<p>In total, we've published <strong>261,006 words</strong> across articles, links, The Index newsletter and courses. That's over 700 words <em>a day</em>! It breaks down as:</p>
<ul>
<li>50 <a href="https://piccalil.li/blog/">articles</a></li>
<li>33 <a href="https://piccalil.li/links/">links</a></li>
<li>129 lessons over 2 <a href="https://piccalil.li/courses/">courses</a></li>
<li>95 <a href="https://piccalil.li/the-index/">newsletter</a> issues</li>
</ul>
<p>Not bad!</p>
<h2>Our 10 most popular articles</h2>
<p>We had a <em>lot</em> of readers this year. Thank you for that. The top 10 articles, published this year, are:</p>
<ol>
<li><a href="https://piccalil.li/blog/programming-principles-for-self-taught-front-end-developers/">Programming principles for self taught front-end developers</a></li>
<li><a href="https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/">A pragmatic guide to modern CSS colours - part one</a></li>
<li><a href="https://piccalil.li/blog/are-peoples-bosses-really-making-them-use-ai/">Are people’s bosses really making them use AI tools?</a></li>
<li><a href="https://piccalil.li/blog/a-simple-masonry-like-composable-layout/">A simple masonry-like composable layout</a></li>
<li><a href="https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/">Printing the web: making webpages look good on paper</a></li>
<li><a href="https://piccalil.li/blog/you-can-style-alt-text-like-any-other-text/">You can style alt text like any other text</a></li>
<li><a href="https://piccalil.li/blog/javascript-when-is-this/">JavaScript, when is this?</a></li>
<li><a href="https://piccalil.li/blog/css-nesting-use-with-caution/">CSS nesting: use with caution</a></li>
<li><a href="https://piccalil.li/blog/nan-the-not-a-number-number-that-isnt-nan/">NaN, the not-a-number number that isn’t NaN</a></li>
<li><a href="https://piccalil.li/blog/in-praise-of-off-screen-menus/">In praise of off-screen menus</a></li>
</ol>
<p>We're very heavily associated with CSS, but it's good to see some JavaScript and design content showing up in the top 10.</p>
<p></p>
<h2>Stuff we launched this year</h2>
<p>It's been a very busy year in the <a href="https://set.studio/">studio</a> and we've invested <em>very heavily</em> in Piccalilli.</p>
<h3>We launched two courses</h3>
<p><a href="https://piccalil.li/javascript-for-everyone/">JavaScript for Everyone</a>, by <a href="https://wil.to/">Mat Marquis</a>, launched in October. It was a humongous undertaking and content I very much wanted to see on Piccalilli.</p>
<p>I'm a firm believer that learning JavaScript the language — away from frameworks — is what sets you up for genuine long term success. It doesn't matter what frameworks come and go if you have a deep understanding of the language and with Mat's teaching, you'll go above and beyond that.</p>
<p><a href="https://piccalil.li/mindful-design/">Mindful Design</a>, by <a href="https://scott.is/">Scott Riley</a>, launched in November and it's our first ever video course. Again, I really wanted proper design education on Piccalilli.</p>
<p>The hours that went into this course was actually mind-blowing. There were technical problems and rendering problems but even with those, Scott has produced genuine canonical design education. He's managed to produce a course that will make you a better designer, regardless of whether you're a beginner, a senior or even a developer.</p>
<p>I'm really proud of both authors. We learned <em>a lot</em>, publishing other people's courses. Sure, that learning created a lot of stress (sorry, gang) but we go into 2026 in a really strong position to produce even more extremely high quality education.</p>
<h3>We completely redesigned The Index and introduced advertising</h3>
<p>I won't repeat what I already wrote in the <a href="https://piccalil.li/blog/we-gave-the-index-a-much-needed-design-refresh-and-introduced-advertising/">announcement post</a> but we completely changed everything about how emails work on Piccalilli.</p>
<p>The Index is a web first newsletter — as it always has been — but we relied on third party solutions that worked <em>OK</em> for us. We really wanted to push the newsletter this year so we brought in our long-trusted collaborator, <a href="https://robbowen.digital/">Robb Owen</a> to develop us a completely bespoke solution where we manage our own data, our own publishing schedule and importantly, make every single email that comes from us <a href="https://piccalil.li/blog/a-quick-and-easy-guide-to-markdown/">Markdown</a> powered.</p>
<p>Robb had already developed an unbelievably powerful API to manage courses and billing in 2024, so this system was an extension of that. We're now using <a href="https://www.postmarkapp.com/?via=036112">Postmark</a> to send all emails too, which has been a massive improvement for us as we have <em>full</em> control of the templates.</p>
<p>I'd say this might well be the best feature we've introduced to the platform this year and it's only going to get better, thanks to Robb's amazing work.</p>
<p></p>
<h3>We redesigned our most important view: the article view</h3>
<p>Again, <a href="https://piccalil.li/blog/a-new-article-layout-and-better-options-for-advertisers/">I wrote about this change</a> back in the summer, so I won't repeat that.</p>
<p>We were happy with how articles looked and importantly, read, but we knew we could do better. We also knew we had lots of new capabilities for courses coming up so a big re-work was needed.</p>
<p>Instead of a left aligned, sidebar layout, we brought everything into the center with "blow-out" elements, all thanks to CSS grid.</p>
<p>In my opinion, we've got the best article view out there. We care <em>so much</em> about typography, readability and <em>flow</em>. I think we nailed all of that.</p>
<h3>We set out our position as true AI haters</h3>
<p>We're not giving this technology a belly tickle like other publishers are. We <a href="https://piccalil.li/blog/our-principles-on-ai/">codified our principles</a> to be absolutely clear that we do not like this technology and will not support it.</p>
<p>Expect us to come out really swinging against it in 2026. It's high time we started fighting back as an industry and here at Piccalilli, we want to be on the front line. It's really important to me especially, that we create an environment where people can feel confident talking <em>honestly</em> about it.</p>
<p>We feel like it's our ethical duty to do this and to help protect the <em>humans</em> in our industry from a handful of billionaires with nothing but bad intentions.</p>
<h2>What's coming up in 2026</h2>
<p>Lots more content! We've introduced a record number of guest authors — 19! — and that will continue. Our guest author content has been by far the most popular too.</p>
<p>We're releasing at least two more courses next year. One of those will be from me, but I'll talk about that in the new year 🤫</p>
<p>There's lots of conversations happening behind the scenes though, so don't be surprised if you see at least three or four new courses in 2026.</p>
<p>Other than that, we're going to carry on doing what we do best: providing real world education that helps <em>you</em> be the best that you possibly can be.</p>
<h2>Thank you</h2>
<p>To everyone that's read an article, read a newsletter issue, read a link post, supported us on <a href="https://opencollective.com/piccalilli">Open Collective</a> and purchased one of our courses: thank you so much for your support. It means everything to us.</p>
<p>Thank you to everyone for the amazing feedback this year too. We've run a couple of surveys and conducted face-to-face interviews, all of which have us buzzing with ideas on how to improve things around here. Your time and effort is really appreciated.</p>
<p>Lastly, I want to thank the Piccalilli and <a href="https://set.studio/">Set Studio</a> team. We're all absolutely worn out after this year but I think we can look back on 2025 — even though <a href="https://bell.bz/its-been-a-very-hard-year/">it's been a hard year</a> — and be really proud of ourselves.</p>
<p>Leanne, Jason and Vicky, I don't know what I'd do without you all. Thank you for everything. Let's rest up and come out swinging in 2026.</p>
<p>I hope you all have a fantastic holiday period and new year. We'll publish the last issue of <a href="https://piccalil.li/the-index/">The Index</a> tomorrow and that's us done for at least two weeks.</p>
<p>We'll see you in 2026 💛</p>
        
        ]]></description>
        
      </item>
    
      <item>
        <title>A Q&amp;A with Mindful Design author, Scott Riley</title>
        <link>https://piccalil.li/blog/a-qanda-with-mindful-design-author-scott-riley/?ref=announcements-category-rss-feed</link>
        <dc:creator><![CDATA[Scott Riley]]></dc:creator>
        <pubDate>Thu, 27 Nov 2025 11:55:00 GMT</pubDate>
        <guid isPermaLink="true">https://piccalil.li/blog/a-qanda-with-mindful-design-author-scott-riley/?ref=announcements-category-rss-feed</guid>
        <description><![CDATA[<div><h2>FYI</h2>
To celebrate the launch of [Mindful Design](https://piccalilli.link/md-launch-q-and-a-blog), we gathered some questions from the community for [Scott](https://piccalil.li/mindful-design#bio) to answer to give you some more insight into his background, _why_ he wanted to do this course and how it can help _you_.
</div>
<h2>How did you get into design?</h2>
<p>I stumbled into it. Like a weary drunkard into the arms of a kebab shop bossman. I was a developer. I guess I continue to be one, in spirit if not in salary. But I got very bored very quickly of my work looking like — and sorry for getting too technical right at the start — absolute shit.</p>
<p>In the typical journey of a terminally online person of my particular vintage, I owe my career to Neopets, MySpace, and Dreamweaver, but the goal was pretty facile: make things look good.</p>
<p>Fast-forward a couple of decades and that's still <em>part</em> of the goal, but the two things that have kept me hooked are:</p>
<ol>
<li>Counteracting the absolute disdain with which the majority of the tech industry treats the people they're asking to use their products.</li>
<li>Knowing that there's a better way to make things outside of the neoliberal hellscape that is Silicon Valley (derogatory)</li>
</ol>
<p>So, like many, I was enraptured by the ability to create something from nothing, and now I am good at doing that, I am fuelled by petty spite and pink Monster.</p>
<h2>What even is mindful design?</h2>
<p>Mindful design at its core is responsible and ethical design. It's an approach to design that makes explicit the implicit responsibility we have to the people who we ask to use the stuff we make. It's about learning how humans work, and using that knowledge to empower rather than exploit.</p>
<p>It's also a response and a challenge to behavioural design. An unserious and despicable practice built out by unserious people and championed by unserious practitioners with a vim and vigour that can only come from one particular brand of naive, hyper-optimistic Californians who believe we can save the world by <em>[checks notes]</em> boiling the planet and manipulating humans into clicking the buttons that make companies the most money.</p>
<p>Fundamentally, it's an approach, a mindset, and a toolkit. It's not some flavour-of-the-week framework that you try once before going back to Kanban With Extra Steps™.</p>
<p></p>
<h2>I'm a developer who wants to get better at design. Is this the course for me?</h2>
<p><strong>One hundred percent yes</strong>. It's a core audience I wanted to address with this course. This is my background, these are my people! I know that so many developer folks want to learn design, but might be discouraged by gatekeeping or the identity crisis design as a practice seems to be in the midst of right now.</p>
<p>It's not 'Design for Developers', because it's not <em>just</em> for developers, but a huge indicator of success for me would be if <em>one</em> person made it all the way through the course, designed something they loved, and then <em>built that thing</em>. If I see that, I'm happy.</p>
<h2>Why did you choose a video course over a written course like the others on Piccalilli?</h2>
<p>Take it from someone who wrote two books on the subject: written design education is not enough. When we write about design practices, approaches, and methodologies, a few things happen.</p>
<p>Firstly, we tend to idealise the scenarios and output. We distill chaotic and divergent practices into tidy little paragraphs. That's not a true reflection of the craft.</p>
<p>Secondly, we lose the key concept of being able to simply follow along with these micro-stages of a process. I can tell you that you need to get good at contrast by applying the <em>von Restorff effect</em> and learning <em>Weber-Fechner's law</em>. That to apply contrast well you need to understand the logarithmic nature of processing change within an environment. I can tell you that you need to meet WCAG compliance while still communicating hierarchy, character, and relatedness. I can show you the result of what happens when you go about that and you can read all of that and feel like you can do it too.</p>
<p>Alternatively, I can tell you all of that same stuff, but then you can also watch a 32 minute video of me struggling to actually implement it while I design a blog post about how Shrek 2 is the best film ever made. Galaxy brain stuff.</p>
<p>That's the big reason that I wanted to go video-first for this course: you get to follow along with me. You get to see that this is a fucking messy process and that design isn't something you just learn facts and theories about, then systematically slap the best rectangles ever together in an interface. It's a craft, it's a conversation, and it's a dance between the ideas in your head and your actual ability to get them out onto a screen.</p>
<p>I can't show you that I'm kind of shit at colour with written words. I can't show you how many mistakes I make to get to something good. I can't show you that this is a <em>craft</em> and not a process unless you're sitting there watch me deliberate over which green best represents Shrek. It's just not possible.</p>
<p></p>
<h2>If you were to give a beginner one piece of advice, what would it be?</h2>
<p>Learn to really, thoroughly and completely enjoy being shit at something. The process of learning is chaotic, nonlinear, and uniquely human. Rather than asking a Markov chain in a beret to generate something for you, you're getting stuck in and you're deciding to learn a craft or technique for yourself. That is to be cherished and protected and <em>loved</em>.</p>
<p>Being utterly, hopelessly shit at something, but <em>knowing</em> that you've made the decision to dive into a journey of being slightly less shit at it, with every new thing you learn, touches on the very essence of what it means to be <em>human</em>. Fallibility and vulnerability are traits to be celebrated and venerated, not hidden or shied away from.</p>
<p>At some point very soon, you're not going to be shit at that thing. Eventually, you're going to be exceptionally good at that thing, but unless you're some kind of savant, you have to be shit at it first, so enjoy that. Enjoy the fact that almost everything you do is going to make you a tiny bit better than before.</p>
<p>Don't race to get good at things. Being active and conscious in embracing your <em>shitness</em> means you can be active and conscious in embracing your improvement. And there's few things on this planet more human than that.</p>
<h2>Away from design, what excites you the most about the web?</h2>
<p><em>Personal websites Babeyyy</em>. UI and web design is so homogenised and optimised these days that the only way to tell what generic SaaS website you're on is to look at the logo. Even then it's probably the Linear logo so you might still be fucked.</p>
<p>The web was always, to me, a place for self expression and self documentation. That's changed a lot because startups fucking devoured the world, but there's a little personal site revival going on lately.</p>
<p>As we seem to be unpicking and detaching ourselves from centralised systems of communication and community, so too do we seem to be detaching ourselves from the weird distributed cognition phenomenon of all of us designing the same <em>fucking</em> web site.</p>
<p>It's beautiful to see.</p>
<h2>What do you think people will gain from taking the course?</h2>
<ol>
<li>An understanding of how design can work to meet humanity where it is, to work to all the quirks and fallibilities of real humans with the goal of empowering them, not exploiting nor 'fixing' them or their worlds.</li>
<li>A toolkit of approaches, workshops, techniques and mental models that gives them just enough to do good work, without all the random bullshit that's pointlessly woven into far too many processes.</li>
<li>A new found love and appreciation for Shrek 2 — the greatest film ever made.</li>
</ol>
<p><a href="https://piccalilli.link/md-launch-q-and-a-blog">Check out Mindful Design</a></p>
        
        ]]></description>
        
      </item>
    
      <item>
        <title>A Q&amp;A with JavaScript for Everyone author, Mat Marquis</title>
        <link>https://piccalil.li/blog/a-q-and-a-with-javascript-for-everyone-author-mat-marquis/?ref=announcements-category-rss-feed</link>
        <dc:creator><![CDATA[Mat Marquis]]></dc:creator>
        <pubDate>Thu, 16 Oct 2025 10:55:00 GMT</pubDate>
        <guid isPermaLink="true">https://piccalil.li/blog/a-q-and-a-with-javascript-for-everyone-author-mat-marquis/?ref=announcements-category-rss-feed</guid>
        <description><![CDATA[<div><h2>FYI</h2>
To celebrate the launch of [JavaScript for Everyone](https://piccalil.li/javascript-for-everyone?utm_campaign=js4e-launch&amp;utm_source=q-and-a-article), we gathered some questions from the community for [Mat](https://piccalil.li/author/mat-marquis/) to answer to give you some more insight into the _why_ of this course, along with some sage advice.
</div>
<h2>What is it about JavaScript that has you producing so much educational material about it, for so many years?</h2>
<p>So many years — so <em>very</em> many years. Listen, you're catching me at the end of writing and editing the course here; I'm 80,000 or so words deep in the weeds right now. I'm doing my best not to reply to this question by staring into the middle distance, haunted, for a little longer than is comfortable for anyone.</p>
<p>It's just that — listen — I <em>like</em> JavaScript. I think we do ourselves a disservice by pretending JavaScript is the web's shameful secret, only meant to be experienced by way of anodyne frameworks that try to buff down all the rough edges.</p>
<p>The web is supposed to be a little messy; it's made by — and for — <em>people</em>. The modern web — as glossy and corporate and soulless as it can feel, at its worst — was built on the foundation of a future imagined in the 90s and evolved through the work of countless authors, making decisions both good and bad. There are fingerprints on those built-in constructor functions, if you know where to look.</p>
<p>A little dust on the lens is all part of the charm.</p>
<h2>Why Piccalilli; why isn't this just on Udemy/Skillshare/Masterclass/etc?</h2>
<p>I'm going to side with an independent publisher every single time. That's the web I want to support.</p>
<p>From a purely logistical standpoint, well, I wanted to write this in my own voice, and I wanted to play with the medium a little. It's hard to imagine Skillshare responding favorably to late-night Slack messages to the tune of — just to pull some fictional examples out of thin air — "can we make it so clicking this link plays an MP3 of an airhorn" or "I have written an entire lesson as a bit; do you agree that it is cool to have done so Y/N_." JavaScript is weird; we might as well have a little fun with it, yeah?</p>
<h2>What do you think about the current JavaScript ecosystem, how it's evolving and what the future looks like?</h2>
<p>I tell you, I worry, same as anyone. If I'm being honest, right now the big one is one level higher than worrying about JavaScript as-it-is-written: the vague sales pitch — phrasing <em>very</em> deliberate — of LLM-based "press X to do JavaScript" tooling.</p>
<p>I mentioned this in the <a href="https://piccalil.li/javascript-for-everyone?utm_campaign=js4e-launch&amp;utm_source=q-and-a-article">JavaScript for Everyone</a> newsletter a little while back, but anyone that isn't trying to sell you something will pretty readily cop to the output of these tools being, let's say, "minimally viable.” That's where they've remained for the duration of their hype cycle, despite every promise otherwise. At <em>best</em>, they provide a means of producing quick prototypes. At worst, well, the purpose of a system is what it does: the primary output of the whole field of LLM-based code generation seems to be “justification for devaluing developers,” bought and sold back and forth by the unfathomably rich and powerful.</p>
<p>I worry about the part we could unwittingly play in that worst case scenario. The pitch for these tools, for <em>us,</em> is that they'll shield us from the frustrating parts of our work — but that's where the <em>experience</em> is.</p>
<p>What about those of us who come to rely on tools like this to abstract away the worst part of learning JavaScript (the “learning JavaScript” part)? If they largely experience JavaScript by way of a "write it for me" button, how can they oversee the results? How long before we, as an industry, would start to lose the ability to gauge just how "minimally viable" the output is? The bar would get lower and lower; our standards would meet the output of these tools, not the other way around. JavaScript gets worse for it; the web suffers for it, <em>users</em> suffer for it.</p>
<p>Doing the work is how we learn and improve. I don't <em>like</em> doing push-ups, but setting up a coal-burning push-up-doing machine in my basement isn't gonna get me any stronger, and it’s not gonna do my house a hell of a lot of good either.</p>
<p>I'm less worried about competing frameworks, these days. Mostly, I worry about <em>us</em>. I want us to get better, stronger, more <em>valued</em> — that takes work. That's why I'm here: to <em>help</em>.</p>
<h2>Why did you opt for a written course, instead of a video course?</h2>
<p>Well, "the devil you know," for one thing. Besides, I have more of a face for typing than television.</p>
<p>Mainly, though: video just isn't the water we developers swim in every day. Far as I'm concerned, learning JavaScript hinges on being able to try stuff out for yourself: copy a snippet of code, chuck it into your dev console, see what happens; move a semicolon to see how it breaks. If we’re working with lexical tokens, I figure the course should be made out of them too.</p>
<p>Besides, you can only fix so much "in post" — imagine finding a <em>typo</em> in a code snippet in a recorded video? Just the idea would keep me up at night.</p>
<h2>If you were to give a beginner one piece of advice, what would it be?</h2>
<p>Beginner to making websites? Listen. Bring it in. Lemme spin my chair around backwards, to show you that I am both cool and relatable, not some <em>square</em>.</p>
<p>Don't <em>start</em> here. Not with this; not with a deep-dive into JavaScript. Learn to write good HTML. Learn how the choices you make with it will directly impact a user's experience of the things you build. Learn how to build a flexible, resilient <em>foundation</em> before you go pricing out skylights and air conditioning units.</p>
<p>But after that — for a a beginner to <em>JavaScript</em>? Same advice, writ a little smaller: learn the <em>medium</em>, not the tooling. Working backwards from a framework is going to <em>feel</em> a lot faster up-front, but it's only going to slow you down in the grand scheme. Starting out with a fundamental understanding of JavaScript will set you up for success no matter where you go from there, unglamorous though it may feel.</p>
<h2>Away from JavaScript, what excites you the most about the web?</h2>
<p>The little pockets of weird are still out there. It feels like we're starting to shake off some of the... Apple-store-ification of the past couple decades.</p>
<p>I’m hugely into the resurgence of what I think of as “web brutalism” — websites that look like they’re <em>made out of website</em>. A couple examples are <a href="https://strange.website/">strange.website</a>, <a href="https://www.weatherishappening.com/">WEATHER IS HAPPENING</a>, <a href="https://solar.lowtechmagazine.com/">LOW-TECH MAGAZINE</a>, and fellow Piccalilli course creator <a href="https://scott.is/">Scott Riley</a>.</p>
<h2>What do you think people will gain from taking the course?</h2>
<p>I mean, one, I figure you walk away from this course with a deeper understanding of JavaScript; table stakes, right? I couldn’t ask for much more than that.</p>
<p>But if I <em>could</em> ask for more, what I’d really want, in my heart of hearts, is for you to be able to <em>laugh</em> at JavaScript a little. I know that setting out to learn JavaScript can be really intimidating, for how inconsistent and sprawling and frustrating the language can be; it feels like the realm of the capital-D Developer, a mythical creature born with a special gland-or-whatever that allows them to understand the rigid, analytical, calculating nature of JavaScript in a way we mortals never could.</p>
<p>Thing is, when you you really get in there — when you really start to see how the deep-down gears mesh — whew, what a mess. Big ol’ honking clownshoes, all the way down. “<em>Ooh</em>, I’m made of <em>computer science</em>; I’m so <em>scaaary</em>” — man, JavaScript, you can’t even do <em>math</em> right. C’mon, we’re not gonna let this thing push us around. We got this.</p>
<h2>Do I need a good foundational understanding of the author's pop culture consumption to understand the course content?</h2>
<p>Absolutely not. I'm a firm believer in the concept of "you gotta make your own fun," so any deep-cut dork references you encounter in this course are, by design, just for me. I promise, learning how generator functions work won’t hinge on the phrase "picture the 'pause' music from Goldeneye 64, here" resonating with you. Likewise, I don't think anyone will necessarily bat at eye at my saying, for example, that comments in code are a way to "chronicle your <em>expedition</em>s into JavaScript <em>for those who come after</em>," emphasis mine. Current-me mine, I mean.</p>

<p><strong>Editor's note</strong>: you will unfortunately have the Goldeneye pause music stuck in your head for quite a while.</p>

<p>But <em>some</em> of you — I see you out there. These can be just for you, too.</p>
<p><a href="https://piccalil.li/javascript-for-everyone">Check out JavaScript for Everyone</a></p>
        
        ]]></description>
        
      </item>
    
      <item>
        <title>A new article layout and better options for advertisers</title>
        <link>https://piccalil.li/blog/a-new-article-layout-and-better-options-for-advertisers/?ref=announcements-category-rss-feed</link>
        <dc:creator><![CDATA[Andy Bell]]></dc:creator>
        <pubDate>Tue, 05 Aug 2025 10:55:00 GMT</pubDate>
        <guid isPermaLink="true">https://piccalil.li/blog/a-new-article-layout-and-better-options-for-advertisers/?ref=announcements-category-rss-feed</guid>
        <description><![CDATA[<p>The big pull requests keep on landing here at Piccalilli. This time, it's our article view that has had a thorough re-work.</p>
<p><img src="https://piccalil.b-cdn.net/images/blog/old-article-view.jpg" alt="The old piccalilli article view with a massive hero unit that has a bright yellow background. There's an easy to miss banner at the bottom. The article layout is two column: article on the left and a sidebar on the right." title="Our old layout" /></p>
<p>The old article view was nice, sure, but it let us down in the following ways:</p>
<ol>
<li>All the author info was at the top at larger viewports</li>
<li>Advertising was easy to miss (as <a href="https://piccalil.li/blog/some-interesting-results-from-the-2025-piccalilli-survey/">reported by our readers in the survey</a>)</li>
<li>Content pushed out to the left was slightly awkward to read</li>
</ol>
<p>We feel like we've fixed <em>all of that</em> with our new layout.</p>
<p><img src="https://piccalil.b-cdn.net/images/blog/new-article-view.jpg" alt="The hero is much simpler: just a headline and because of that, the now yellow advertising banner is much easier to see. The article is now in a reasonably narrow, center-aligned container." title="Our fancy new layout" /></p>
<p>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 <a href="https://piccalil.li/the-index/">The Index</a> this year, featuring a central content column for <a href="https://piccalil.li/the-index/112">issue posts</a>.</p>
<p>We just wanted to give ourselves <em>time</em> to do it <em>right</em> because this article view covers articles, links and courses. That's most of the content on the site!</p>
<h2>Leveraging CSS grid and named areas</h2>
<p>We'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 code samples and images bleed out.</p>
<p><img src="https://piccalil.b-cdn.net/images/blog/new-article-grid.jpg" alt="The article view with Chrome dev tools open. The grid view is enabled, showing the five column grid" /></p>
<pre><code>.master-grid &gt; p:has(img) {
  grid-column: popout;
}
</code></pre>
<p>Named areas make it so much easier to scan the CSS in the long-term. The semantic names make the code really descriptive.</p>
<p><img src="https://piccalil.b-cdn.net/images/blog/new-article-video.jpg" alt="A video is full bleed demonstrated by prose content following it, in a much narrower context" /></p>
<p>This system allows us to give elements that need as much space as possible the space they need, such as mid-article videos like this one from <a href="https://piccalil.li/complete-css/?utm_medium=author-promo">Complete CSS</a>.</p>
<pre><code>.master-grid .video-player {
  grid-column: full-width;
}
</code></pre>
<h2>Syntax highlighting and a new mono font</h2>
<p>One of the most common pieces of feedback we got was about our overly-subtle syntax highlighting in code blocks. We've rolled out a custom theme to fix that along with <a href="https://tightype.com/typefaces/moderat-mono">Moderat Mono</a> as our new mono font.</p>
<p>CSS looks better.</p>
<pre><code>footer {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 0;
}
</code></pre>
<p>As does JavaScript.</p>
<pre><code>// Finds all buttons and attaches a click event to our handler
assignEvents() {
  const buttons = this.querySelectorAll('button');

  if (buttons.length) {
    buttons.forEach((button) =&gt;
      button.addEventListener('click', (event) =&gt; this.handleClick(event)),
    );
  }
}
</code></pre>
<p>And of course, HTML.</p>
<pre><code>&lt;share-actions&gt;
  &lt;p&gt;Copy this link to share with your friends.&lt;/p&gt;
  &lt;p&gt;
    &lt;code&gt;&lt;https://example.com&gt;&lt;/code&gt;
  &lt;/p&gt;
&lt;/share-actions&gt;
</code></pre>
<h2>We have much better options for advertisers now</h2>
<p>As <a href="https://bell.bz/were-aiming-to-run-piccalilli-full-time/">I've written on my blog</a>, we're pushing to run Piccalilli full time. To help make that happen, we've taken <em>very careful</em> steps to <a href="https://piccalil.li/advertise/">give advertisers better options</a> <em>and</em> maintain a priority with the reading experience for our treasured readers.</p>
<h3>Better banner ads</h3>
<p><img src="https://piccalil.b-cdn.net/images/blog/new-article-better-banner.jpg" alt="The top of the &quot;A (more) modern reset article&quot; showing a bright yellow banner that features text, a black button and rotated &quot;advert&quot; text" /></p>
<p>Banner ads got lost in the hero unit before, but now, they stand out a heck of a lot more. Companies can book exclusive coverage across all <a href="https://piccalil.li/blog/">articles</a> and <a href="https://piccalil.li/links/">links</a> on a monthly basis.</p>
<p><a href="https://piccalil.li/advertise/#opening-banner">More info and bookings</a></p>
<h3>Closing graphic ads</h3>
<p><img src="https://piccalil.b-cdn.net/images/blog/new-article-closing-ad.jpg" alt="A closing graphical ad, advertising Complete CSS" /></p>
<p>One of our most requested features from advertisers was being able to communicate their brand, visually. They can now with closing graphic ads! Again, companies can book exclusive coverage across all <a href="https://piccalil.li/blog/">articles</a> and <a href="https://piccalil.li/links/">links</a> on a monthly basis.</p>
<p><a href="https://piccalil.li/advertise/#closing-graphic-ad">More info and bookings</a></p>
<h3>Optional graphics on newsletter sponsor slots</h3>
<p><img src="https://piccalil.b-cdn.net/images/blog/new-article-newsletter-slot.jpg" alt="A newsletter sponsor slot which is a grey box, a pink themed graphical ad and prose content, plugging Mindful Design" /></p>
<p>Lastly, newsletter sponsors can supply a graphic for their exclusive sponsor slots. For both closing graphic ads and newsletter slots, <a href="https://set.studio/">our studio can be commissioned</a> to create assets that <em>work really well</em> too.</p>
<p><a href="https://piccalil.li/advertise/#newsletter-advertising">More info and bookings</a></p>
<h2>Wrapping up</h2>
<p>We hope you like the changes! This has been a heck of a lot of work 😅</p>
<p>Articles are much better looking and easier to read, so we're <em>really</em> happy with how it's turned out. If you're a company looking to advertise, our <a href="https://piccalil.li/advertise/">new advertising page</a> has all the info and booking links for you.</p>
        
        ]]></description>
        
      </item>
    
    </channel>
  </rss>
