My bookmarks and blogposts regarding Software Development in .NET, C#, Angular, JavaScript, CSS, Html
Validating user input in HTML forms can be a tedious task. In this new series, we’ll look at how Angular can help us implement painless form validation. First, it’s essential to know that Angular relies primarily on native browser validation features that use modern HTML properties. For instance, if a form field has to be filled out, you can mark it as required using the required HTML attribute
Source: Basic form validation with Angular | Angular Newsletter
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>
Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.
css-tricks.com/snippets/css/complete-guide-grid/
Pinegrow Web Editor, website builder for professionalsPinegrow is a Mac, Windows and Linux web editor that lets you build modern websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and support for Bootstrap, Tailwind CSS and WordPress.Pinegrow is a desktop website editor that opens and saves standard HTML and CSS files.
Source: Pinegrow Web Editor | Website Builder for Professionals
Source: Flex Cheatsheet
Here is a table to understand the behaviors of all the different values for property white-space:
| New lines | Spaces and tabs | Text wrapping | |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| pre | Preserve | Preserve | No wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
Source: white-space | CSS-Tricks
Use Interpolate: body height: calc(100% – #{$body_padding})
Source: css3 – Sass Variable in CSS calc() function – Stack Overflow
Snippet for positioning items centered horizontally and vertically:
display: flex; /* turn flexbox on */ justify-content: center; /* center children horizontally */ align-items: center; /* center children vertically */
Snippets for container positioning items and IE10 rules:
/* IE 10 flexbox cheatsheet */ /* enable flexbox */ display: flex; display: -ms-flexbox; /* container - horizontal align items */ justify-content: flex-start | flex-end | center | space-around | space-between; -ms-flex-pack: start | end | center | distribute | justify; /* container - vertical align items */ align-items: flex-start | flex-end | center | stretch | baseline; -ms-flex-align: start | end | center | stretch | baseline; /* container - vertical height for items when extra space is available (multi line) */ align-content: flex-start | flex-end | center | space-around | space-between | stretch; -ms-flex-line-pack: start | end | center | distribute | justify | stretch;
Read more here:
css-tricks.com/snippets/css/a-guide-to-flexbox/
Legacy browser support: (E.g. Internet Explorer 10):
https://css-tricks.com/using-flexbox/
Cheatsheet flexbox equiv. for IE10:
https://gist.github.com/Paul-frc/3ed765ed10c9635384e98f58334081e4
Different depth of nodes will use different colour allowing you to see the size of each element on the page, their margin and their padding. Now you can easily identify inconsistencies when working with the overall layout of elements…
* { background-color: rgba(255,0,0,.2);
outline: 1px solid rgba(255, 0, 0, 0.5);
}
* * { background-color: rgba(0,255,0,.2); }
* * * { background-color: rgba(0,0,255,.2); }
* * * * { background-color: rgba(255,0,255,.2); }
* * * * * { background-color: rgba(0,255,255,.2); }
* * * * * * { background-color: rgba(255,255,0,.2); }
* * * * * * * { background-color: rgba(255,0,0,.2); }
* * * * * * * * { background-color: rgba(0,255,0,.2); }
* * * * * * * * * { background-color: rgba(0,0,255,.2); }
One device and app feature I’ve come to appreciate is the ability to change between light and dark modes. If you’ve ever done late night coding or reading, you know how amazing a dark theme can be for preventing eye strain and the headaches that result. macOS recently implemented a native dark mode but that mode doesn’t convert websites to a dark interface, so you’re still getting a bright site regardless of native theme. Wouldn’t it be amazing if websites would also go dark or light based on user’s system preference?