RSS Validator Results: https://piccalil.li/feed.xml

RSS Validator

This service tests the validity of an RSS 2.0 feed, checking to see that it follows the rules of the RSS specification. For advice from the RSS Advisory Board on how to implement RSS and handle issues such as enclosures and HTML encoding, read the RSS Best Practices Profile. This checker is also a validator of Atom and RSS 1.0 feeds.

Use this tester regularly to ensure that your RSS feed continues to work well in the wide audience of RSS readers, podcast clients and other software that supports the format.

Jump to navigation

Congratulations!

This is a valid RSS feed.

Recommendations

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

line 25, column 90: Encode "&" and "<" in plain text using hexadecimal character references. [help]

... ary&gt;` elements are getting an upgrade</title>
                                             ^

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

<?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 - Everything</title>
<link>https://piccalil.li/</link>
<atom:link href="https://piccalil.li/feed.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 - Everything 2024</copyright>
<docs>https://www.rssboard.org/rss-specification</docs>
<pubDate>Fri, 22 Nov 2024 07:02:05 GMT</pubDate>
<lastBuildDate>Fri, 22 Nov 2024 07:02:05 GMT</lastBuildDate>
<item>
<title>The `<details>` and `<summary>` elements are getting an upgrade</title>
<link>https://piccalil.li/links/the-details-and-summary-elements-are-getting-an-upgrade/?ref=main-rss-feed</link>
<dc:creator><![CDATA[Stephanie Stimac]]></dc:creator>
<pubDate>Wed, 13 Nov 2024 12:00:00 GMT</pubDate>
<guid isPermaLink="true">https://piccalil.li/links/the-details-and-summary-elements-are-getting-an-upgrade/?ref=main-rss-feed</guid>
<description><![CDATA[Big fan of <code><details></code> and <code><summary></code> checking in but what I don’t like is having to add extra elements to present a nice look and feel for them. Dealing with the disclosed content also requires extra elements if you want to apply a layout, for example. 
It looks like that is changing though! I’m especially looking forward to giving the new <code>::details-content</code> pseudo-element a test drive, that’s for sure. 
<a href="https://blog.stephaniestimac.com/posts/2024/10/html-details-and-summary-update/">Check it out!</a>]]></description>
</item>
<item>
<title>Complete CSS launches on November 26</title>
<link>https://piccalil.li/blog/complete-css-launches-on-november-26/?ref=main-rss-feed</link>
<dc:creator><![CDATA[Andy Bell]]></dc:creator>
<pubDate>Wed, 13 Nov 2024 00:00:00 GMT</pubDate>
<guid isPermaLink="true">https://piccalil.li/blog/complete-css-launches-on-november-26/?ref=main-rss-feed</guid>
<description><![CDATA[<div><h2>FYI</h2>
We have news! We're in the home straight, finishing up <a href="https://piccalil.li/complete-css/">Complete CSS</a> and with that, we have a launch date: November 26 at 12pm GMT. <a href="https://piccalil.li/complete-css/#signup">Sign up to get updates</a> and we'll email you as soon as it is live.
</div>
We've been working on Complete CSS since February 2024. The aim of the game for me was to pull together all of the stuff I've been talking about over the last few years into a talk, workshop and course.
<img src="https://piccalilli.imgix.net/images/blog/andy-ff-conf.jpg" alt="An audience seated in a theater, looking at a large presentation screen with the slide text, 'You won't be the same developer,' in bold yellow text on a black background. The room is dimly lit, with red ambient lighting along the arched ceiling and walls. I'm stood at an FF Conf branded podium to the right of the screen" title="Me at FFConf '24" />
I delivered the talk, "Get the core right and the resilient code will follow" last week at the legendary <a href="https://2024.ffconf.org/">FFConf</a>. That talk was excerpted content from the principles module of the course where we learn about communication, planning, along with giving and receiving feedback. We also learn about progressive enhancement, being the browser's mentor, not its micromanager, CSS architecture, layout, along with fluid typography and spacing in that module of the course.
Condensing the first part of the princples module into a talk was a great way for me to refine what I think is the most important part of the course — core skills, often called "soft skills" — and get some feedback from people.
I also did a condensed version of that module along with planning, sketching and of course, writing CSS in my <a href="https://smashingconf.com/online-workshops/workshops/scalable-css-andy-bell/">Smashing workshop earlier in the year</a>. Again, this was to get more feedback from the kind people who bought a ticket.
I feel like this is probably my last big course. I've done three now, including Complete CSS and this one feels like I've finally managed to bring together the stuff I write about and do in my actual day job. It's been great to bring some of the consultancy work I did prior to founding <a href="https://set.studio/">Set Studio</a> to the table too.
It was really important to me to work on a talk, workshop and course at the same time, not just for efficiency purposes but also, it's meant the quality of the content is much higher because it's been refined on feedback. It's been a huge amount of work from the whole team at Piccalilli and Set Studio which has resulted in:
<ul>
<li>70,000+ words of written content</li>
<li>Detailed, specific videos teaching you important core and practical skills — especially with Figma</li>
<li>Hundreds of media assets</li>
<li>Unique UI elements such as chat windows to demonstrate communication principles throughout the course</li>
</ul>
I mean it when I say it: you will not be the same developer after completing this course.
<h2>This is only the first iteration of our course offering</h2>
My course is essentially a test bed. We've built the platform right into Piccalilli in a completely flexible manner with a view to publishing other author's work in the future, starting next year.
The platform is flexible because every author is different. Some authors — like me — prefer to produce written content and others, focus more on video. Our platform supports that without breaking a sweat.
What I'm really excited about though is every course — theoretically — can be completely unique in terms of media but also look and feel. I'm really excited about giving authors the full power of <a href="https://set.studio/">Set Studio</a> to craft something truly excellent that they are proud of.
<div><h2>FYI</h2>
I'll be reaching out to authors when Complete CSS is live, so keep an eye on your emails and DMs 👀
</div>
Because this is the first iteration, we won't be launching with automated Purchasing power parity (PPP) support or automated bulk company licences. Our support team will — for the first few weeks — deal with those requests manually. The system is ready for that functionality but we want to make sure we make it as easy as possible for users while also making it equitable and hard to game in the case of PPP.
<h2>What can you do to help?</h2>
There's so many kind people out there that have offered to help with promoting Complete CSS. I truly appreciate you all more than you'll ever realise.
The best thing you can do it talk about it. I know I do a lot (sorry Bluesky friends) but kind words from people really helps, trust me. I'd also love to get on some podcasts and live streams, so if you are someone who runs either of those, hit me up! That also really helps.
We're only small here at Piccalilli so any help from the community will always have a massive, positive impact.
<h2>Wrapping up</h2>
Thanks for reading this far! I haven't Blogged™ for a while: sorry about that. I'll be back on it after the course is live. I just want to take a moment to thank everyone that's given me support during this very long production process.
I'll see you in a couple of weeks when Complete CSS is live, so until then, <a href="https://piccalil.li/complete-css/#signup">sign up to get updates</a> and take it easy 👋
]]></description>
</item>
<item>
<title>A Friendly Introduction to Container Queries</title>
<link>https://piccalil.li/links/a-friendly-introduction-to-container-queries/?ref=main-rss-feed</link>
<dc:creator><![CDATA[Josh W. Comeau]]></dc:creator>
<pubDate>Mon, 11 Nov 2024 12:00:00 GMT</pubDate>
<guid isPermaLink="true">https://piccalil.li/links/a-friendly-introduction-to-container-queries/?ref=main-rss-feed</guid>
<description><![CDATA[Josh is here again with another stunner of an article and they’ve done a fantastic job of demonstrating how useful container queries can be in the real world. 
This is a really important part: 
<blockquote>
I don’t think most designers are even aware that they have this exciting new capability. It’s our job to share these developments with them, so that they can use them in their designs!
</blockquote>
A lot has changed in CSS so be a good developer and help your designer colleagues understand what is very much possible now and the future to unlock their creativity.
<a href="https://www.joshwcomeau.com/css/container-queries-introduction/">Check it out!</a>]]></description>
</item>
<item>
<title>Foundations: form validation and error messages</title>
<link>https://piccalil.li/links/foundations-form-validation-and-error-messages/?ref=main-rss-feed</link>
<dc:creator><![CDATA[Demelza Feltham]]></dc:creator>
<pubDate>Wed, 30 Oct 2024 00:00:00 GMT</pubDate>
<guid isPermaLink="true">https://piccalil.li/links/foundations-form-validation-and-error-messages/?ref=main-rss-feed</guid>
<description><![CDATA[This post is a great run down of how much thought and consideration goes into making form validation actually useful. This part really stood out to me:
<blockquote>
However, if not well-designed, in-line error messages can become overwhelming. For example, flagging a field as incorrect after just one character can be disruptive, especially if the person filling out the form hasn't finished typing.
</blockquote>
I'd say this is one of my biggest icks when filling out a form and I'm a fast typer! There's absolutely no need to shout as users while they are in the process of filling out your form.
Absorb all the goodness in this fantastic guide and make your forms great!
<a href="https://tetralogical.com/blog/2024/10/21/foundations-form-validation-and-error-messages/">Check it out!</a>]]></description>
</item>
<item>
<title>Making content-aware components using CSS :has(), grid, and quantity queries</title>
<link>https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/?ref=main-rss-feed</link>
<dc:creator><![CDATA[Eric Bailey]]></dc:creator>
<pubDate>Mon, 28 Oct 2024 10:32:06 GMT</pubDate>
<guid isPermaLink="true">https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/?ref=main-rss-feed</guid>
<description><![CDATA[A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well.
An example of this is a “Simple List” component I was helping to make. It’s a workhorse component, and not without its challenges.
Each of the Simple List component’s list items features slots for a title, a short description, a price, and a few actions. The title can also have a leading photo and trailing badges placed before and after the title, respectively:
<img src="https://piccalilli.imgix.net/images/blog/component-anatomy.png" alt="A wireframe illustration of a list component. There are three rows, one per item. Each list item has three columns and two rows. The first column is used for a leading photo area and stretches across both rows. The second column contains a title and trailing badges on the top row, and a short description on the bottom row. The third column contains a price on the top row, and actions on the bottom row. Each content area is labeled as such." />
The grid layout for this is relatively straightforward, especially if you <a href="https://thoughtbot.com/blog/concise-media-queries-with-css-grid">use named grid areas</a>:
<pre><code>grid-template-areas:
'leading-visual title title price'
'leading-visual badges badges price'
'leading-visual description description actions';
</code></pre>
The area where we’re focusing our attention on for this post is the slot for trailing badges. 
A short title and a single badge make for a clean-looking lockup:
<img src="https://piccalilli.imgix.net/images/blog/poached-eggs.png" alt="A simple list item for poached eggs. It has a single badge following the title that reads, “Popular”. There is also a photo of the meal, a short description, price, and options to favorite the item and add it to your shopping card." />
However, this is the real world, and the real world is messy. What do you do if the component consumer has a long title with a lot of badges?
<img src="https://piccalilli.imgix.net/images/blog/chicken-fajita-omelette.png" alt="A simple list item for a chicken fajita omelette. It looks very unbalanced. There are five badges placed after the title, making the layout break. The badges are stacked vertically and float weirdly in space. The title of “Chicken Fajita Omelette” is also stacked vertically because of the available space to work with. " />
Yech. That doesn’t look as nice.
One thing we could do to avoid this outcome is conditionally place the badges next to the title only if three or fewer badges are used.
<img src="https://piccalilli.imgix.net/images/blog/two-up.png" alt="Two simple list items stacked vertically, one for poached eggs and the other for a chicken fajita omelette. This time the badges for the omelette are on a separate line, making the entire design feel a lot more balanced and legible." />
Previously, you might have had to rely on some gnarly JavaScript to detect, and then adjust this. Fortunately, contemporary CSS lets us avoid it.
<h2>The right tool for the job</h2>
Doing this sort of work in CSS is the right move!
CSS exists to control the visuals of the web, and this potential problem is a visual concern.
CSS is also more fault-tolerant than JavaScript. This means the entire experience won’t be ruined if <a href="https://piccalil.li/blog/a-handful-of-reasons-javascript-wont-be-available/">something conspires to affect your website or web app loading properly</a>.
Content will be shown if CSS experiences an issue being applied. While it won’t look the way you want it to, it will still be readable by the people requesting it. And that’s the important bit.
<h2>Quantity queries</h2>
<a href="https://heydonworks.com/">Heydon Pickering</a> developed <a href="https://alistapart.com/article/quantity-queries-for-css/">the quantity query technique</a> all the way back in 2015.
Quantity queries are a way to conditionally style something depending on how many items of the same type are present at the same DOM level.
<img src="https://piccalilli.imgix.net/images/blog/quantity-query-demo-v1.png" alt="Two blocks of CSS code and two graphics. The first block of code shows how a child item can be styled to have a dark red background and be 100 pixels high by 100 pixels wide by default. The first graphic reflects this, with three red squares in a row placed inside a parent container. The second block of code uses a quantity query to modify the child items to use a background color of dark purple and become circles if more than four are present. The second graphic demonstrates this change, showing five child items that are now circular and purple." />
This technique is a fiendishly clever idea, and a great example of realizing CSS’ full potential.
<div><h2>FYI</h2>
If you’re intimidated by the syntax, don’t worry! There’s <a href="https://css-tip.com/quantity-queries/">a great generator website</a> that <a href="https://css-tip.com/">Temani Afif</a> made to help you craft the query you need.
</div>
We can use quantity queries to detect the number of badges present in the DOM on a per-component instance basis:
<pre><code>/* Apply styling instructions to the badges if there are 3 or fewer badges present */
.simple-list-item-badge:last-child:nth-child(-n + 3) { … }
</code></pre>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">:has()</a> then allows us to conditionally adjust the parent container’s grid layout, instead of just the badges themselves. That means moving the badges up to be placed alongside the title on the top row for this scenario:
<pre><code>/* Apply styling instructions to the parent list item container, provided three or fewer badges are present */
.simple-list-item:has(
.simple-list-item-badge:last-child:nth-child(-n + 3)
) {
grid-template-columns: var(--size-leading-visual) max-content 1fr max-content;
grid-template-areas:
'leading-visual title badges price'
'leading-visual description description actions';
}
</code></pre>
<h2>Going the extra mile with container queries</h2>
If you’re not familiar, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries">container queries</a> allow you to adjust a parent element and its children based on qualities the parent possesses, such as its current width. They are powerful stuff, and another example of CSS elegantly and efficiently taking on something that previously had only been the domain of JavaScript.
We can instil even more portability and resiliency for our simple list component with container queries, in terms of handling our badge count issue.
With regards to code, all we’re doing is embracing another older technique towards building web experiences: going <a href="https://www.lukew.com/ff/entry.asp?933">mobile-first</a>. We set the component to default to the badges having their own grid row. This handles our baseline concern of not a lot of horizontal space being available:
<pre><code>grid-template-areas:
'leading-visual leading-visual'
'title title'
'badges badges'
'description description'
'price actions';
</code></pre>
So, what does this get us? Good things! With this approach, the component is now set up to be able to shows badges flush with the list item title only if there is enough horizontal space available to accommodate the badge count. This is regardless of where the component is placed and how much horizontal space is available, and is accomplished via a container query:
<pre><code>@container simple-list (width > 38rem) {
.simple-list-item:has(
.simple-list-item-badge:last-child:nth-child(-n + 3)
) {
grid-template-areas:
'leading-visual title badges price'
'leading-visual description description actions';
}
}
</code></pre>
This approach is really good for design systems in particular.
You can’t be everywhere all the time to know where your components are being placed, how much content is being placed in them, how much available space there is where the component instance is used, and if it all actually looks good.
Now:
<ul>
<li>Your designers are happy because it doesn’t look bad,</li>
<li>Your engineers are happy because your neatly-separated concerns take care of corner-case problems for them, and</li>
<li>Your project managers are happy because there’s less velocity-slowing bugs they need to contend with.</li>
</ul>
<h2>Seeing it in action</h2>
Let’s put this all together now and see how it works!
To see this demo, head over to the <a href="https://cdpn.io/pen/debug/mdNwzvW">web version</a>.
<h2>Flaws with this approach</h2>
There are three big-picture things to be aware of here:
<ol>
<li>Author-supplied content,</li>
<li>Older browser support, and</li>
<li>Localization and internationalization.</li>
</ol>
<h3>Author-supplied content</h3>
One area where this approach may fall apart is a repeat of the original problem: we have no way of knowing the length of content per badge the person using the component will supply.
To my knowledge, CSS does not have a way to detect when arbitrary clusters of characters of an arbitrary count collide with a container whose width is dynamic.
Yes, there are things like <a href="https://drafts.csswg.org/css2/#inline-formatting">inline display calculation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/word-break">word break instructions</a>. However, none of these approaches allow us to handle the situation where we want an unknown number of badges, each with an unknown character count, to look good across a wide range of layouts and viewport widths. Given that, choosing to break to a new line after three badges have been used is a bit of a <a href="https://en.wikipedia.org/wiki/Magic_number_(programming)">magic number</a>. This said, I still think it’s a good approach.
Be a detective if you adopt this approach for your own component needs, and get answers to these questions:
<ul>
<li>What’s the average badge count and text length for existing, pre-componentitized content?</li>
<li>What are the outliers?</li>
<li>And why are they that way?</li>
</ul>
These answers can give you a good idea of what your component implementation magic number needs to be.
<h3>Browser support</h3>
The other thing to be mindful of is that <a href="https://caniuse.com/css-has"><code>:has()</code></a> and <a href="https://caniuse.com/mdn-css_at-rules_container_style_queries_for_custom_properties">container queries</a> are relatively new. Consider organizations that have to support older browsers, or knows that the people who use its <a href="https://css-tricks.com/evergreen-does-not-mean-immediately-available/">services are slow or reluctant to upgrade</a>. Enterprise and government services come to mind here.
Fortunately, we can <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">use <code>@supports</code></a> to have our cake and eat it too by providing a solid, less glamorous, but ultimately readable default, and then <a href="https://piccalil.li/blog/its-about-time-i-tried-to-explain-what-progressive-enhancement-actually-is/">enhance that experience</a> for browsers that can support newer platform features:
<pre><code>.simple-list {
/* Basic formatting */
/* Set up a container query only if the browser supports it */
@supports (container-type: inline-size) {
container: simple-list / inline-size;
}
}
.simple-list-item {
/* Mobile-first layout */
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
'leading-visual leading-visual'
'title title'
'badges badges'
'description description'
'price actions';
@supports (container-type: inline-size) {
@container simple-list (width > 38rem) {
/* Adjustments for when there is more horizontal space */
}
}
}
</code></pre>
For our use case that means starting with a mobile-friendly treatment, where all the badges on their own row. Then we can have badges on the same row as the title only if the browser supports it and there is enough horizontal space.
<h3>Other languages</h3>
The same word can have drastically different character counts depending on the language it is written in. Don’t believe me? <a href="https://translate.google.com/?sl=en&tl=de&op=translate">Translate your homepage’s content into German</a>. If your website or web app supports multiple languages, your magic number might not work across every language you provide. Fortunately, CSS has us covered here.
We can use an attribute selector to target a parent <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">lang declaration</a> declared higher up in the DOM:
<pre><code>[lang="en"] .simple-list-item:has(
.simple-list-item-badge:last-child:nth-child(-n + 3)
) {
/* Styling instructions for when there's three or fewer badges in English */
}
</code></pre>
Typically <code>lang</code> is declared on the <code><html></code> element, but it will also work for attributes declared inside the body element. This can be helpful for experiences that support multiple languages being used on a single page or view.
Granted, the weakness with this approach is it requires using the lang attribute in the first place. That’s <a href="https://www.w3.org/WAI/WCAG22/Understanding/language-of-page.html">something we should all be doing</a>, regardless.
We can then adjust our badge count on a per-language basis to better adapt to the average word length the language uses:
<pre><code>[lang="en"] .simple-list-item:has(
.simple-list-item-badge:last-child:nth-child(-n + 3)
) {
/* Styling instructions for when there's three or fewer badges in English */
}
[lang="de"] .simple-list-item:has(
.simple-list-item-badge:last-child:nth-child(-n + 3)
) {
/* Styling instructions for when there's only one badge in German */
}
</code></pre>
Note that we can’t use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties</a> within <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">pseudo classes</a> yet. The previous code can become a lot more terse once this capability is added to the platform, in that our magic number could be codified as a Custom Property and updated on a per-language basis.
Another suggestion here would be to also use <a href="https://piccalil.li/blog/getting-started-with-css-custom-properties/">logical properties</a>. This way your component can easily adapt to right-to-left and top-to-bottom languages as well.
<h2>Putting it all together</h2>
So, here you have it! A resilient, self-contained, content-aware component that can adapt to any language you throw at it.
To see this demo, head over to the <a href="https://cdpn.io/pen/debug/VwojGqQ">web version</a>.
Newer CSS features like <code>:has()</code>, grid, container queries, <code>@supports</code>, and logical properties are great for building <a href="https://www.trysmudford.com/blog/hyper-responsive-web-components/">hyper-resilient components</a>. They’re even more powerful when combined with the established techniques we know and rely on.
I’m excited for what the future of CSS holds, and hopefully after reading this you are too!
<hr />
Thank you to <a href="https://mastodon.social/@pecus">Matteo Fogli</a> and <a href="https://css-tip.com/">Temani Afif</a> for their feedback on newer, more terse quantity query syntax.
]]></description>
</item>
</channel>
</rss>

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

Download the "valid RSS" banner.
Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)
Add this HTML to your page (change the image src attribute if necessary):

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

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

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

Home · About · News · Docs · Terms

Software created by Sam Ruby, Mark Pilgrim, Joseph Walton and Phil Ringnalda

RSS Advisory Board

Really Simple Syndication specifications, tutorials and discussion

RSS Validator

Congratulations!

Recommendations

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