Node 22 was recently introducedhttps://nodejs.org/en/blog/announcements/v22-release-announce as the current active version. The thing that caught my attention in the release notes is the built-in task runner. In this post we'll look at the Node task runner available in Node 22, how it works and what are its limitations. You run the Node Task Runner using the --run flag with the name of a script listed in the package.json located in the current directory. For example, to run a build script, use the following command: bash node --run build The task runner, as implemented in the current release of Node 22, has...
The picture element was added to the HTML specification as part of the responsive images effort. This post will dive into the picturehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture, sourcehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/source and imghttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/img elements along with the srcsethttps://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset property and explore how we can use them to create responsive images in different scenarios. At its simplest, picture is a wrapper for images created using the img element. html What we're more likely to see is one or more source child elements. html The source element is similar, but not identical, to what we use in video and audio elements. It uses srcset instead of src to indicate...
Sometimes it's nice to put some sort of emphasis on our text to highlight elements or because we just want it to look different. One way to create these highlights is to use the text-emphasishttps://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis property. This property will add the chosen character or symbol on top of the text, one instance on top of each character of the text. The text-emphasis property is a shorthand for text-emphasis-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style and text-emphasis-colorhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color. There is also a text-emphasis-positionhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position property that controls the position of the emphasis related to the text. If there is not enough space to place the emphasis characters in their...
In the previous article, we discussed inline-size container queries. There is another type of container query: style queries. There are some significant differences Unlike inline-size queries, every element is a style query container. You can also use CSS conditional properties AKA: CSS variables as the condition in the style query. We first define the condition in the parent element, in this case article-wrapper. We then define the style query in the .article child element and include the styles we want to highight the featured article. css .article-wrapper { --featured: true; } .article { @container style--featured: true { / Custom CSS...
Container queries introduce an additional and complementary way to create content in addition to what media queries allow. This post will look at container queries and how to use them to build a reusable card component. What are container queries and how do they work With container queries, you can apply styles to an element based on the size of the element's container rather than the viewport like we can with media queries. For example, if a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Using container queries Using container...
When I see figures, this is what I think about and what I see the most often, maybe with srcset and sizeshttps://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset attributes to handle responsive images. See the Pen figure and image by Carlos Araya @caraya on CodePen. According to the HTML specificationhttps://html.spec.whatwg.org/multipage/grouping-content.htmlthe-figure-element emphasis mine: > The figure element represents some flow content, optionally with a caption, that is self-contained like a complete sentence and is typically referenced as a single unit from the main flow of the document. > > ... > > The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc. In...
There are two ways to measure content in CSS. Explicit measurements are what we're most familiar with. These are the pixels, rems and ems. Intrinsic sizes don't provide exact dimensions but size elements based on their content. This post will cover these intrinsic, content-based, measurement units min-content The min-content value is the intrinsic minimum width, which means that it’s equal to the width of the element’s content longest word. According to the CSS Working Group: > The inline size that would fit around its contents if all soft wrap opportunities within the box were taken. See the Pen min-content and...
The Writing Modeshttps://drafts.csswg.org/css-writing-modes-3/ specification reached full recommendation status almost 5 years ago. I've written about it before but I think it's time to revisit them again and see how they could be applied to design. The three specific areas we'll cover in this post are: directionhttps://www.w3.org/TR/css-writing-modes-3/direction writing-directionhttps://www.w3.org/TR/css-writing-modes-3/block-flow text-orientationhttps://www.w3.org/TR/css-writing-modes-3/text-orientation Direction The directionhttps://developer.mozilla.org/en-US/docs/Web/CSS/direction CSS property is a complement to the HTML dirhttps://developer.mozilla.org/en-US/docs/Web/HTML/Globalattributes/dir attribute. It allows you to set the global value of when used in the root element and change when used in children elements the direction of the text on the page. The two possible values are ltr for left to...
One way of thinking about HTML and web content is to think about boxes, multiple boxes surrounding your content. You can see these nested boxes in your browser's Dev Tools as shown in figure 1. !CSS Box Modelhttps://res.cloudinary.com/dfh6ihzvj/images/v1698731828/publishing-project.rivendellweb.net/box-model-2/box-model-2.png?i=AA Starting from the inside, the boxes are: content box : The area that the content lives in. : If the box-sizinghttps://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing property is set to content-box and the element is a block element, the content area's size can be explicitly defined with the following properties: : widthhttps://developer.mozilla.org/en-US/docs/Web/CSS/width : min-widthhttps://developer.mozilla.org/en-US/docs/Web/CSS/min-width : max-widthhttps://developer.mozilla.org/en-US/docs/Web/CSS/max-width : heighthttps://developer.mozilla.org/en-US/docs/Web/CSS/height : min-heighthttps://developer.mozilla.org/en-US/docs/Web/CSS/min-height : max-heighthttps://developer.mozilla.org/en-US/docs/Web/CSS/max-height padding box : surrounds the...
CSS Shapeshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSshapes have been around for a long time and allow developers to wrap text around the shape of the image. According to MDNhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSSshapes: > The CSS shapes module describes geometric shapes that can be in CSS. For the Level 1 specification, CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box. Basic Examples The most basic example uses an image to create the shape that the text flows...
