Category: Uncategorized

CSS Selectors: A Visual Guide & Reference | fffuel

CSS Selectors: A Visual Guide ✨ Here’s a visual guide to the most popular CSS selectors. CSS selectors are patterns used in CSS to select and style HTML elements on a page, allowing us to dictate how styles apply to specific HTML elements. Along with traditional CSS selectors, we also have pseudo-classes and pseudo-elements. Great resource even for seasoned css selector wizards!
fffuel.co/css-selectors/

Zod – Typescript based validation library

Zod is a TypeScript-first schema declaration and validation library. I’m using the term “schema” to broadly refer to any data type, from a simple stringto a complex nested object.
Zod is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and Zod will automatically infer the static TypeScript type. It’s easy to compose simpler types into complex data structures.
zod.dev/?id=basic-usage

How to set width for table columns in CSS

Tables in html behaves differently than other elements on a page since the table, rows, th and td elements are displayed in a special way. The column width is automatically adjusted based on the content.

Here is a trick to set the column width using the colgroup element which affects both the th and td at once.

A table with 3 columns and 2 rows:

<table>
  <colgroup>
    <col class="col-select" />
    <col class="col-product" />
    <col class="col-country" />
  </colgroup>
  <thead>
    <tr>
      <th>Select</th>
      <th>Product</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox">Select</td>
      <td>Product 1</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td><input type="checkbox">Select</td>
      <td>Product 2</td>
      <td>Norway</td>
    </tr>
  </tbody>
</table>

We have 3 columns: Select, Product and Country
To set the widths we use css classes col-select and so on.

.col-select { 
  width: 1%; 
} 
.col-product { 
  width: 75%; 
} 
.col-country {
  width: 24%; 
}

Here we set the select to be as “narrow” as possible (1%). And the others to relative % numbers.
To further “force” the widths we should allow long words to be wrapped, e.g add the following css class for the columns you wish this behavior for:

.text-break {
  overflow-wrap: break-word;
}

Usage:

<colgroup> 
  <col class="col-select" /> 
  <col class="col-product text-break" /> 
  <col class="col-country text-break" /> 
</colgroup>