{"id":26,"date":"2023-11-11T15:00:41","date_gmt":"2023-11-11T15:00:41","guid":{"rendered":"https:\/\/webmccannic.com\/?page_id=26"},"modified":"2024-09-19T02:44:30","modified_gmt":"2024-09-19T02:44:30","slug":"26-2","status":"publish","type":"page","link":"https:\/\/webmccannic.com\/","title":{"rendered":"webweblog"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-05a06018 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<h2 class=\"wp-block-heading alignwide has-text-align-center\" style=\"font-size:clamp(2.629rem, 2.629rem + ((1vw - 0.2rem) * 3.952), 5rem);font-style:normal;font-weight:600\">A webweblog.<\/h2>\n\n\n\n<h1 class=\"wp-block-heading has-text-align-center has-x-large-font-size\"> <em> This is a notebook of stuff related to web building.<\/em> <\/h1>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image alignfull size-large home-cover op-bottom\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/20221016_141730-1024x576.jpg\" alt=\"Golden leaves in a Fall forest\" class=\"wp-image-10\" srcset=\"https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/20221016_141730-1024x576.jpg 1024w, https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/20221016_141730-300x169.jpg 300w, https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/20221016_141730-768x432.jpg 768w, https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/20221016_141730-1536x864.jpg 1536w, https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/20221016_141730-2048x1152.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40)\">\n<div class=\"wp-block-columns alignwide is-layout-flex wp-container-core-columns-is-layout-7e464bea wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\n<div class=\"wp-block-query is-layout-flow wp-block-query-is-layout-flow\"><ul class=\"wp-block-post-template is-layout-flow wp-block-post-template-is-layout-flow\"><li class=\"wp-block-post post-111 post type-post status-publish format-standard hentry category-to-read\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\">\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2025\/08\/04\/stuff-to-read\/\" target=\"_self\" >Stuff to read<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2025-08-04T15:06:41+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2025\/08\/04\/stuff-to-read\/\">Aug 4, 2025<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/to-read\/\" rel=\"tag\">To Read<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<p>Really need to catch up on some stuff&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-make-wordpress-core wp-block-embed-make-wordpress-core\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"P14XVKcr1p\"><a href=\"https:\/\/make.wordpress.org\/core\/2025\/03\/28\/wordpress-6-8-field-guide\/\">WordPress 6.8 Field Guide<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;WordPress 6.8 Field Guide&#8221; &#8212; Make WordPress Core\" src=\"https:\/\/make.wordpress.org\/core\/2025\/03\/28\/wordpress-6-8-field-guide\/embed\/#?secret=Tc6CNJ33iU#?secret=P14XVKcr1p\" data-secret=\"P14XVKcr1p\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-iconic wp-block-embed-iconic\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"TN65m9jiXK\"><a href=\"https:\/\/iconicwp.com\/blog\/ecommerce-product-photography\/\">Ecommerce Product Photography: The Ultimate 2025 Guide<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Ecommerce Product Photography: The Ultimate 2025 Guide&#8221; &#8212; Iconic\" src=\"https:\/\/iconicwp.com\/blog\/ecommerce-product-photography\/embed\/#?secret=ITho0D8XsV#?secret=TN65m9jiXK\" data-secret=\"TN65m9jiXK\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-105 post type-post status-publish format-standard hentry category-to-read\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\">\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2024\/09\/18\/fluid-type-reading\/\" target=\"_self\" >Fluid type reading<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2024-09-18T14:25:02+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2024\/09\/18\/fluid-type-reading\/\">Sep 18, 2024<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/to-read\/\" rel=\"tag\">To Read<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<p>Fluid type with CSS clamps is easy to set up, but knowing some scaling concepts help get it right.<\/p>\n\n\n\n<p>Read all the articles posted on the front page of <a href=\"https:\/\/utopia.fyi\/\">https:\/\/utopia.fyi\/<\/a><\/p>\n\n\n\n<p><\/p>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-100 post type-post status-publish format-standard hentry category-to-read\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\">\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2024\/02\/28\/figma-stuff\/\" target=\"_self\" >Figma stuff<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2024-02-28T16:41:53+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2024\/02\/28\/figma-stuff\/\">Feb 28, 2024<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/to-read\/\" rel=\"tag\">To Read<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<p>Some figma stuff:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.smashingmagazine.com\/2022\/08\/everything-developers-must-know-about-figma\/\">Everything Developers must know about Figma<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/spotify.design\/article\/how-spotify-organises-work-in-figma-to-improve-collaboration\">How Spotify Organises Work in Figma to Improve Collaboration | Spotify Design<\/a><\/p>\n\n\n\n<p><\/p>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-70 post type-post status-publish format-standard hentry category-to-read\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\">\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/15\/to-read\/\" target=\"_self\" >To read:<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2023-11-15T16:39:54+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/15\/to-read\/\">Nov 15, 2023<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/to-read\/\" rel=\"tag\">To Read<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>The goal: establish a visual identity, explain the principles behind it, and provide the resources needed to implement it as seamlessly as possible.<\/p>\n<cite><a href=\"https:\/\/www.smashingmagazine.com\/2023\/11\/designing-web-design-documentation\/\">Designing web design documentation<\/a><\/cite><\/blockquote>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-58 post type-post status-publish format-standard hentry category-blog\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\">\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/12\/css-centering\/\" target=\"_self\" >CSS Centering<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2023-11-12T16:13:08+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/12\/css-centering\/\">Nov 12, 2023<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/blog\/\" rel=\"tag\">Blog<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<p>Centering elelments used to be pretty hard. Now, there&#8217;s lots of way to do it.<\/p>\n\n\n\n<p>Think about how how center things in real life.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>define the dimensions of the container<\/li>\n\n\n\n<li>measure the center point of the container and the child<\/li>\n\n\n\n<li>align both center points on both axis<\/li>\n<\/ul>\n\n\n\n<p>To do this on the web, define (or understand the default) dimensions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>the width is by default, auto or 100% of the viewport<\/li>\n\n\n\n<li>define the height, the default is determined by the height of the content<\/li>\n\n\n\n<li>calculate the center points and align.<\/li>\n<\/ul>\n\n\n\n<p>The last step is easy with today&#8217;s browsers doing the calculation for you.<\/p>\n\n\n\n<p>So the simplest way to center one thing in the browser window:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">body {\ndisplay: grid;\nheight: 100vh;\nplace-items: center;\n}<\/code><\/pre>\n\n\n\n<p>Place-content will use the content box (the parent) to center items together,<br>while place-items will center the items using the available space (spreading them out) centering each item within the box of its parent.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Methods<\/h2>\n\n\n\n<p>Display grid the parent, margin: auto the content.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">.autobot {\ndisplay: flex;\n}\n.autobot &gt; *{\nmargin: auto;\n }<\/code><\/pre>\n\n\n\n<p>You can center content in a full-width element by putting display: grid on the parent, with justify-content: center; giving a grid-template-column: one column with the width you want. minmax() works well here:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">```css\n.full-width-example {\n  display: grid;\n  grid-template-columns: minmax(300px, 600px);\n  justify-content: center;\n  background-color: rgb(255, 211, 130);\n }\n  ```<\/code><\/pre>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-40 post type-post status-publish format-standard has-post-thumbnail hentry category-web-development tag-css tag-image-positioning tag-web-development\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\"><figure style=\"aspect-ratio:16\/9;\" class=\"wp-block-post-featured-image wp-container-content-9cfa9a5a\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" src=\"https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/image-1699716529-scaled.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" style=\"width:100%;height:100%;object-fit:cover;\" \/><\/figure>\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/11\/how-to-achieve-focal-point-positioning-on-an-image-with-css\/\" target=\"_self\" >How to Achieve Focal Point Positioning on an Image with CSS<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2023-11-11T15:34:49+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/11\/how-to-achieve-focal-point-positioning-on-an-image-with-css\/\">Nov 11, 2023<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/web-development\/\" rel=\"tag\">Web Development<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<p><\/p>\n\n\n\n<p class=\"has-contrast-2-color has-text-color has-link-color wp-elements-1969677419b9161718eeeac80e97ed38\">To achieve focal point positioning on an image with CSS, you can make use of the <code>object-position<\/code> property. This property allows you to specify the position of the focal point on the image.<\/p>\n\n\n\n<p class=\"has-contrast-2-color has-text-color has-link-color wp-elements-e507febb95546d196dbaf8eff7a70cbb\">First, you need to set the image as the background of a container element. Then, you can use the <code>object-position<\/code> property to adjust the position of the focal point. For example, if you want the focal point to be at the center of the image, you can set the value to <code>50% 50%<\/code>.<\/p>\n\n\n\n<p class=\"has-contrast-2-color has-text-color has-link-color wp-elements-89a27ab09530440d3bdbdb2a1216e827\">Additionally, you can also use the <code>object-fit<\/code> property to control how the image fills the container. This property allows you to specify whether the image should be scaled, stretched, or cropped to fit the container.<\/p>\n\n\n\n<p class=\"has-contrast-2-color has-text-color has-link-color wp-elements-a9e0cd7d2c5b83aaccf1719ac55460d7\">By combining the <code>object-position<\/code> and <code>object-fit<\/code> properties, you can achieve precise focal point positioning on an image with CSS. This technique is particularly useful when you want to highlight a specific area of an image or create visually appealing designs.<\/p>\n\n\n\n<p>Okay, so that&#8217;s what AI came up with (slightly edited for fluff). It does introduce the <code>object-position<\/code> property, and let&#8217;s us know it needs to be a background, but doesn&#8217;t really tell us how.<\/p>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-6 post type-post status-publish format-standard has-post-thumbnail hentry category-web-development tag-2024-theme tag-web-development tag-wordpress\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\"><figure style=\"aspect-ratio:16\/9;\" class=\"wp-block-post-featured-image wp-container-content-9cfa9a5a\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1707\" src=\"https:\/\/webmccannic.com\/wp-content\/uploads\/2023\/11\/image-1699544920-scaled.jpg\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" style=\"width:100%;height:100%;object-fit:cover;\" \/><\/figure>\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/09\/web-development-with-a-focus-on-wordpress-6-4-and-the-2024-theme\/\" target=\"_self\" >Web Development with a Focus on WordPress 6.4 and the 2024 Theme<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2023-11-09T15:48:41+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/09\/web-development-with-a-focus-on-wordpress-6-4-and-the-2024-theme\/\">Nov 9, 2023<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/web-development\/\" rel=\"tag\">Web Development<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\"><p>When it comes to web development, WordPress has been a popular choice for many developers and website owners. With its user-friendly interface and robust features, WordPress makes it easy to create and manage websites. The latest version, WordPress 6.4, brings even more enhancements and improvements to the platform.<\/p>\n<p>One of the standout features of WordPress 6.4 is the introduction of the 2024 theme. This new theme offers a modern and sleek design, perfect for showcasing your content in a visually appealing way. With its responsive layout, the 2024 theme ensures that your website looks great on any device, whether it&#8217;s a desktop computer, tablet, or smartphone.<\/p>\n<p>But what sets WordPress 6.4 and the 2024 theme apart from previous versions? The answer lies in the performance and customization options. With improved loading times and optimized code, WordPress 6.4 ensures that your website loads quickly and efficiently, providing a seamless user experience.<\/p>\n<p>Customization is also a breeze with the 2024 theme. With a wide range of customization options, you can easily personalize your website to match your brand and style. From choosing the color scheme to customizing the layout, the 2024 theme gives you the flexibility to create a unique and professional-looking website.<\/p>\n<p>Whether you&#8217;re a seasoned web developer or just starting out, WordPress 6.4 and the 2024 theme offer a powerful combination for building stunning websites. With its user-friendly interface, performance enhancements, and customization options, WordPress continues to be the go-to platform for web development.<\/p>\n\n\n<p class=\"has-contrast-2-color has-base-2-background-color has-text-color has-background has-link-color wp-elements-8188973ef8f5bb587212e0acf43547b0\">Sheesh. I&#8217;m surprised you made it to the bottom of this absolutely worthless post. Maybe it&#8217;s not the AI&#8217;s fault for writing such fluff, I really didn&#8217;t do much of a prompt.<\/p>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><li class=\"wp-block-post post-1 post type-post status-publish format-standard hentry category-blog\">\n\n<article class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-353c4f5a wp-block-group-is-layout-flex\">\n\n<h2 class=\"wp-block-post-title has-large-font-size\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/09\/hello-world\/\" target=\"_self\" >Hello world!<\/a><\/h2>\n\n<div class=\"wp-block-template-part\">\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n\t\n\t<div class=\"wp-block-group is-content-justification-left is-layout-flex wp-container-core-group-is-layout-dfe8e91f wp-block-group-is-layout-flex\">\n\t\t<div class=\"wp-block-post-date\"><time datetime=\"2023-11-09T15:38:32+00:00\"><a href=\"https:\/\/webmccannic.com\/index.php\/2023\/11\/09\/hello-world\/\">Nov 9, 2023<\/a><\/time><\/div>\n\n\t\t\n\t\t<p class=\"has-contrast-2-color has-text-color\">\u2014<\/p>\n\t\t\n\n\t\t\n\t\t<p class=\"has-small-font-size has-contrast-2-color has-text-color\">by<\/p>\n\t\t\n\n\t\t<div class=\"wp-block-post-author-name\"><a href=\"https:\/\/webmccannic.com\/index.php\/author\/paul\/\" target=\"_self\" class=\"wp-block-post-author-name__link\">paul<\/a><\/div>\n\n\t\t<div class=\"taxonomy-category wp-block-post-terms\"><span class=\"wp-block-post-terms__prefix\">in <\/span><a href=\"https:\/\/webmccannic.com\/index.php\/category\/blog\/\" rel=\"tag\">Blog<\/a><\/div>\n\n\t<\/div>\n\t\n<\/div>\n\n\n<\/div><\/article>\n\n\n<div class=\"entry-content wp-block-post-content is-layout-flow wp-block-post-content-is-layout-flow\">\n<p>I used to blog when these things were called web logs. We&#8217;re talking pre-WordPress.<\/p>\n\n\n\n<p>Give me a minute or two to get this thing running right.<\/p>\n<\/div>\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<\/li><\/ul>\n\n\n\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:10%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\"><aside class=\"wp-block-template-part\">\n<div class=\"wp-block-group is-layout-flow wp-container-core-group-is-layout-0ba1ad86 wp-block-group-is-layout-flow\" style=\"padding-right:0;padding-left:0\">\n<hr class=\"wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-1e17d720 wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" style=\"font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.935), 1.6rem);\">Categories<\/h2>\n\n\n<ul class=\"wp-block-categories-list wp-block-categories has-small-font-size\">\t<li class=\"cat-item cat-item-1\"><a href=\"https:\/\/webmccannic.com\/index.php\/category\/blog\/\">Blog<\/a>\n<\/li>\n\t<li class=\"cat-item cat-item-11\"><a href=\"https:\/\/webmccannic.com\/index.php\/category\/to-read\/\">To Read<\/a>\n<\/li>\n\t<li class=\"cat-item cat-item-2\"><a href=\"https:\/\/webmccannic.com\/index.php\/category\/web-development\/\">Web Development<\/a>\n<\/li>\n<\/ul><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-5ad7779d wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-b2c973f4 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\" style=\"font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.935), 1.6rem);\">Links<\/h2>\n<\/div>\n\n\n<nav style=\"font-style:normal;font-weight:400;\" class=\"has-small-font-size  is-vertical wp-block-navigation is-layout-flex wp-container-core-navigation-is-layout-ea0cb840 wp-block-navigation-is-layout-flex\" aria-label=\"Navigation 2\"><ul style=\"font-style:normal;font-weight:400;\" class=\"wp-block-navigation__container has-small-font-size  is-vertical wp-block-navigation has-small-font-size\"><li style=\"text-decoration:underline;\" class=\"has-small-font-size wp-block-navigation-item is-style-arrow-link wp-block-navigation-link\"><a class=\"wp-block-navigation-item__content\"  href=\"https:\/\/kiplog.com\"><span class=\"wp-block-navigation-item__label\">KIPlog<\/span><span class=\"wp-block-navigation-item__description\">A regular blog<\/span><\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<hr class=\"wp-block-separator has-text-color has-contrast-color has-alpha-channel-opacity has-contrast-background-color has-background is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-stretch is-layout-flex wp-container-core-group-is-layout-38a18bb4 wp-block-group-is-layout-flex\">\n<h2 class=\"wp-block-heading\" style=\"font-size:clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.935), 1.6rem);\">Search the website<\/h2>\n\n\n<form role=\"search\" method=\"get\" action=\"https:\/\/webmccannic.com\/\" class=\"wp-block-search__button-outside wp-block-search__text-button wp-block-search\"    ><label class=\"wp-block-search__label screen-reader-text\" for=\"wp-block-search__input-1\" >Search<\/label><div class=\"wp-block-search__inside-wrapper \"  style=\"width: 100%\"><input class=\"wp-block-search__input\" id=\"wp-block-search__input-1\" placeholder=\"Search...\" value=\"\" type=\"search\" name=\"s\" required \/><button aria-label=\"Search\" class=\"wp-block-search__button wp-element-button\" type=\"submit\" >Search<\/button><\/div><\/form><\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--10)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<\/div>\n<\/aside><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull has-global-padding is-layout-constrained wp-container-core-group-is-layout-d89aad35 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>A webweblog. This is a notebook of stuff related to web building.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":16,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/pages\/26\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/webmccannic.com\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}