WebMcCannic

A webweblog.

This is a notebook of stuff related to web building.

Golden leaves in a Fall forest

  • Fluid type with CSS clamps is easy to set up, but knowing some scaling concepts help get it right.

    Read all the articles posted on the front page of https://utopia.fyi/

  • Some figma stuff:

    Everything Developers must know about Figma

    How Spotify Organises Work in Figma to Improve Collaboration | Spotify Design

  • The goal: establish a visual identity, explain the principles behind it, and provide the resources needed to implement it as seamlessly as possible.

    Designing web design documentation

  • Centering elelments used to be pretty hard. Now, there’s lots of way to do it.

    Think about how how center things in real life.

    • define the dimensions of the container
    • measure the center point of the container and the child
    • align both center points on both axis

    To do this on the web, define (or understand the default) dimensions:

    • the width is by default, auto or 100% of the viewport
    • define the height, the default is determined by the height of the content
    • calculate the center points and align.

    The last step is easy with today’s browsers doing the calculation for you.

    So the simplest way to center one thing in the browser window:

    body {
display: grid;
height: 100vh;
place-items: center;
}

    Place-content will use the content box (the parent) to center items together,
    while place-items will center the items using the available space (spreading them out) centering each item within the box of its parent.

    Other Methods

    Display grid the parent, margin: auto the content.

    .autobot {
display: flex;
}
.autobot > *{
margin: auto;
 }

    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:

    ```css
.full-width-example {
  display: grid;
  grid-template-columns: minmax(300px, 600px);
  justify-content: center;
  background-color: rgb(255, 211, 130);
 }
  ```

  • To achieve focal point positioning on an image with CSS, you can make use of the object-position property. This property allows you to specify the position of the focal point on the image.

    First, you need to set the image as the background of a container element. Then, you can use the object-position 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 50% 50%.

    Additionally, you can also use the object-fit 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.

    By combining the object-position and object-fit 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.

    Okay, so that’s what AI came up with (slightly edited for fluff). It does introduce the object-position property, and let’s us know it needs to be a background, but doesn’t really tell us how.

  • 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.

    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’s a desktop computer, tablet, or smartphone.

    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.

    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.

    Whether you’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.

    Sheesh. I’m surprised you made it to the bottom of this absolutely worthless post. Maybe it’s not the AI’s fault for writing such fluff, I really didn’t do much of a prompt.

  • I used to blog when these things were called web logs. We’re talking pre-WordPress.

    Give me a minute or two to get this thing running right.