Coding right

Git: custom command with powershell

Cem Soyding — Tue, 04 Feb 2025 07:33:35 GMT

One of the most annoying thing that I have to do every once in a while is to clean up all the dead references in my git repositories. When the branches get integrated through PRs, they have no reason to continue living on my computer. We have configured Azure DevOps to automatically delete the merged branch on the remote server but we still have them locally on our computers.

I have addressed the issue by creating my own git subcommand: `git putz`.

For the record, `putz` means cleaning in german. It is a short and fun name for this operation ^^

Create a script and save it somewhere in your path

I have picked powershell because my workstation runs on Windows. The same can be achieved with other script languages.

# Script to delete merged, obsolete, and untracked git branches

# Fetch latest changes from remote and prune references
Write-Host "Fetching latest changes and pruning references..." -ForegroundColor Yellow
git fetch --prune

# Get current branch
$currentBranch = git rev-parse --abbrev-ref HEAD

# Get list of merged branches (excluding main, master, and develop)
$mergedBranches = git branch --merged |
    Where-Object { $_.Trim() -notmatch '^(\*|\s*(master|main|dev)$)' } |
    ForEach-Object { $_.Trim() }

# Get list of branches where the remote is gone
$goneBranches = git branch -v |
    Where-Object { $_ -match '\[gone\]' } |
    ForEach-Object { $_.Split()[0] } |
    Where-Object { $_ -notmatch '^(\*|\s*(master|main|dev)$)' }

# Get list of local branches with no upstream tracking branch
$untrackedBranches = git branch -vv | 
    Where-Object { $_ -notmatch '\[.+\]' } |
    ForEach-Object { 
        if ($_ -match '^\*?\s*(\S+)') {
            $matches[1]
        }
    } |
    Where-Object { $_ -notmatch '^(master|main|dev)$' -and $_ -ne $currentBranch }

if ($mergedBranches.Count -eq 0 -and $goneBranches.Count -eq 0 -and $untrackedBranches.Count -eq 0) {
    Write-Host "No branches to clean up!" -ForegroundColor Green
    exit 0
}

# Display branches to be deleted
Write-Host "`nThe following branches will be deleted:" -ForegroundColor Yellow

if ($mergedBranches.Count -gt 0) {
    Write-Host "`nMerged branches:" -ForegroundColor Cyan
    $mergedBranches | ForEach-Object { Write-Host "  - $_" }
}

if ($goneBranches.Count -gt 0) {
    Write-Host "`nBranches with gone remotes:" -ForegroundColor Cyan
    $goneBranches | ForEach-Object { Write-Host "  - $_" }
}

if ($untrackedBranches.Count -gt 0) {
    Write-Host "`nLocal branches with no upstream:" -ForegroundColor Cyan
    $untrackedBranches | ForEach-Object { Write-Host "  - $_" }
}

# Prompt for confirmation
Write-Host "`nDo you want to proceed with deletion? (Y/N)" -ForegroundColor Yellow
$confirmation = Read-Host

if ($confirmation -eq 'Y' -or $confirmation -eq 'y') {
    # Delete merged branches
    foreach ($branch in $mergedBranches) {
        Write-Host "Deleting merged branch: $branch" -ForegroundColor Cyan
        git branch -d $branch
    }

    # Delete gone branches
    foreach ($branch in $goneBranches) {
        Write-Host "Deleting gone branch: $branch" -ForegroundColor Cyan
        git branch -D $branch
    }

    # Delete untracked branches
    foreach ($branch in $untrackedBranches) {
        Write-Host "Deleting untracked branch: $branch" -ForegroundColor Cyan
        git branch -D $branch
    }

    Write-Host "`nBranch cleanup completed!" -ForegroundColor Green
} else {
    Write-Host "`nOperation cancelled." -ForegroundColor Yellow
}

The script lists merged, gone and untracked branches, asks for confirmation and deletes theme all at once. What a relief !

2. Create an alias for git

Simply run the following command by making sure to fix the script path:

git config --global alias.putz "!powershell.exe -File C:/Tools/git_delete_gone_branches.ps1"

That's it, now run `git putz`:

The following branches will be deleted:

Local branches with no upstream:
  - feature/cnc_auto_reset_manual
  - features/architecture_updates
  - features/barrier_crossed_guard
  - features/blazor_server
  - features/cnc_wait_resilience
  - features/dummy_branch
  - features/dummy_to_merge
  - features/emergency_ack
  ...
  
Do you want to proceed with deletion? (Y/N)
Y
Deleting untracked branch: feature/cnc_auto_reset_manual
Deleted branch feature/cnc_auto_reset_manual (was 81a3233d7).
Deleting untracked branch: features/architecture_updates
Deleted branch features/architecture_updates (was 6ccd947b9).
Deleting untracked branch: features/barrier_crossed_guard
Deleted branch features/barrier_crossed_guard (was 3a1e85cef).
Deleting untracked branch: features/blazor_server
Deleted branch features/blazor_server (was dec07d9be).
...

Branch cleanup completed!

CSS: Alignment tips

Cem Soyding — Fri, 12 Jan 2024 10:46:40 GMT

Alignment

Now that we've covered the most common CSS properties, here is a summary to how to center an element.

text-align

Text inside block level elements can be aligned with text-align.

h1 {
   /* Possible values are : left, right, center, justified*/
   text-align: center; 
}

margin

Another common technique for center alignement in block level elements is to use margin: 0 auto, as explained in Margins chapter.

position

To align an element with respect to the viewport or its containing element, you can use absolute position with left, right, top, bottom properties. See Positionning chapter.

float

You can align an element left or right inside its container with float:left (or right). See Float chapter.

CSS: Elements styling

Cem Soyding — Mon, 08 Jan 2024 10:45:36 GMT

Here are some element-specific styling properties that you will necessarily use at some point.

Text

h2 {
    /* Text color */
    color: #5470f0;
    /* Horizontal alignment (left, right, center, justified).
     * 'justify' stretches each line so that they all have equal width
     * except for the last one. */
    text-align: center;
    /* Add a line under, on or on top of the text (underline, line-through, overline, none).
    *  Tip: used 'none' with 'a' to remove the default underline for links*/
    text-decoration: 14px;
    /* Set the case (uppercase, lowercase, capitalize.
     * 'capitalize' sets the first letter of each word to uppercase */
    text-transform: uppercase;
    /* Indent the first line or a paragraph (%, px or any length value) */
    text-indent: 10px;
    /* Customize space between characters (px or any length value)*/
    letter-spacing: -3px;
    /* Customize space between words (px or any length value)
     * Note: If alignment is set to 'justify', word-spacing is affected. */
    word-spacing: 2px;
    /* Set inter-lines spacing (%, px or any length value) */
    line-height: 1.2; /* when setting a number, you set a ratio of the font size */

    /** CSS3 **/

    /* Configure how overflowing text (e.g. container too small) should be rendered.
     * 'clip': overflowing text is clipped and becomes invisible
     * 'ellipsis': displays '...' at the end of the line
     * string value: displays the provided string value at the end of the line */
     text-overflow: ellipsis;
     /* Define wether the long words at the end of the line should overflow ('normal') or be wrapped 
      * onto next line ('break-word') */
     word-wrap: break-word;
     /* Define how words with '-' character should be displayed when they are too long for the line.
      * 'break-all': the entire word is wrapped onto next line
      * 'keep-all': the word is cut on '-' character and the non-fitting part is wrapped */
     word-break: keep-all;
}

Links

The default rendering of links can be easily edited thanks to pseudo-class selectors fo a:

:link: univisted link
:visited: visited link
:hover: mouse over link
:active: active link

a:link {    /* unvisited link */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* visited link */
    color: #ff00ff;
}
a:hover {    /* mouse over link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* active link */
    color: #00ffff;
}

Lists

The following styles apply to all types of list (ul, ol, dl).

/* The next styles could also be applied to 'ul li' */
ul {
    /* Change default marker (bullet or number) type.
     * (disc (default), circle, square, upper-roman, lower-latin,...) 
     https://developer.mozilla.org/fr/docs/Web/CSS/list-style-type#disc
     */
    list-style-type: square;
    /* Set the position of the marker to be inside text boxes or 
     * outside (default) */
    list-style-position: inside;
    /* Use an external image for the bullet */
    list-style-image: url("images/bullet.png");
}

Shorthand

A less verbose property can be used to set all properties at once.

ul  {
    /* Shorthand notation: type position image */
    list-style: square inside url("images/bullet.png");
}

Tables

By default, tables are rendering without borders. CSS offers several styling enhancements.

table, th, td {
    /* Define border : thickness type color */
    border: 1px solid black;
    /* Since each table element (table, th, td) has its own border
     * you get duplicated lines by simply setting a border. You can
     * collapse these lines so that there is no duplication anymore
     * with this option. Values are 'collapse' and 'separate' (default) */
    border-collapse: collapse;
    /* Only applicable if collapse is set to 'separate', this property
     * sets the space between the borders of the cells. In other conditions
     * simply use the 'padding' property */
    border-spacing: 10px;
    /* Only applicable if collapse is set to 'separate', this property
     * configure the behavior of the view with empty cells. By default
     * their border is drawn (show) but it can be hidden (hide) */
    empty-cells: hide;
    /* By default, the table will adapt the column width to their content.
     * You can override this behavior by telling it to distribute the space
     * evenly among columns for a fixed size. 
     * Values: auto (default), fixed (limited but faster rendering) */
    table-layout: fixed;
    width: 400px;
    /* Set horizontal text alignment in rows.
     * By default, td is left-aligned while th is centered */
    text-align: right;
    /* Set vertical text alignment in rows.
     * By default, the alignment is middle. */
    vertical-align: bottom;
}
/* Zebra striped table. Every odd row of the table will have a darker
 * background color thanks to the pseudo-class slector 'nth-child.
 * Note that the style is only applied to rows of html5's tbody element
 * so that headers are not included */
tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}
caption {
    /* Positionning of the caption (top, bottom).
     * Use text-align to align left or right.*/
    caption-side: bottom;
}

Responsiveness

By default, tables are not responsive. To add scrolling support, you need to wrap the table in a div and apply the style overflow-x: auto to it as shown below.

 
    
        ... table content ...

Cursors

The cursor is the mouse pointer displayed when you navigate through a website. Many html elements define their own, such as links or inputs, which is why the cursors changes when you hover them. With cursor you can change the displayed cursor or define your own with .cur (default standard), .gif, .png or .jpg images (in recent browsers only).

a {
    /* There are many built-in cursors (default, pointer, text, wait, progress, crosshair, move,...)
     * and you can also use images to display custom ones.
     * When you select several cursors, make sure to set a valid one at the end so that there is 
     * always a valid fallback value */
    cursor: url("custom.gif"), crosshair;
}

Overflow

overflow (and overflow-x, overflow-y) define how the content of an element should be displayed when it is bigger than its content area (e.g. when height and width are too small).

div {
    height: 50px;
    width: 100px;
    /* Define how the value will be rendered.
     * 'visible' (default) : content rendered outside of its box and overlaps other elements
     * 'hidden': content clipped and extra data not visible
     * 'scroll': content clipped but scrollbars let see the hidden parts
     * 'auto': scrollbars are created if content is too big */
    overflow: auto;
}

CSS: Effects

Cem Soyding — Fri, 05 Jan 2024 10:42:20 GMT

Effects

Color

color property defines the foreground color of an element (in general). It is generally used for text but could also apply to borders or outlines for instance when their respective border-color or outline-color hasn't been specified.

h1 {
    color: #4457ff;
}

color is automatically inherited by child elements, except for elements.

A color value can be defined in various formats:

color keyword: red, blue, purple, ... (full list here)
hex value: #FFAB01 (or shorthand notation #ffcc00 same as #fc0)
rgb value: rgb(255, 0, 2) or rgb(50%, 0%, 5%)
[CSS3] rgba (see below)
[CSS3] hsl (or hue, saturation and lightness) or hsla (same as rgba but for hsl)

Transparency

CSS3 has introduced a new way to specify a color with transparency with rgba.

div {
    /* the alpha parameter here controls the the transparency from 0 (transparent) to 1 (opaque) */
    background: rgba(10, 200, 100, 0.5);
}

CSS3 has also introduced opacity to control the transparency of any element in the page.

img.choice {
    /* Value between 0 (transparent) to 1 (opaque) */
    opacity: 0.6;
}

Note that the transparency applied with rgba does not affect child elements whereas using opacity does.

Gradients

CSS3 introduced an easy solution to generate smooth gradients of colors.

body {
    /* Top to bottom color gradient */
    background: linear-gradient(blue, green);
    /* Left to right color gradient */
    background: linear-gradient(to right, blue, green); /* or with angle: (90deg, blue, green)
    /* Diagonal color gradient */
    background: linear-gradient(to top right, blue, green);
    /* Top to bottom gradient with more colors */
    background: linear-gradient(blue, green, yellow);
    /* Top to bottom gradient with positionnal colors stops */
    background: linear-gradient(blue, green 25%, yellow 70%);
}

You can also repeat a gradient with repeating-linear-gradient (same syntax) or use radial-gradient for concentric gradients.

Background

CSS has several properties to style the background of an element.

body {
    /* Set the background color of an element.
     * The definition of the color value respects the rules as for `color` property.
     * As opposed to `color`, `background-color` is not inherited by child elements 
     * but since the default value is `transparent`, the parent's background color will 
     * still be visible by default. */
    background-color: #4457ff;
    /* Set an image as a background of an HTML element. 
     * Several additional properties are available to tune the rendering (see below) */
    background-image: url("images/tile.png");
    /* By default, the image is repeated horizontally and vertically to fill the entire 
     * area of an element. `background-repeat` lets you change this behavior.
     * `repeat` (default) : repeats on x and y
     * `repeat-x` (default) : repeats on x only
     * `repeat-y` (default) : repeats on y only
     * `no-repeat` (default) : no repeat, a single image is displayed and doesn't fill the page (unless big enough) */
    background-repeat: no-repeat;
    /* By default, the image is displayed at coordinates (0,0). With `background-position` 
     * you can set another location. The position is defined with 2 values : first for horizontal, 
     * second for vertical. The values can be expressed with keywords (`left|right|top|bottom`), 
     * percents (`10% 0;`) or any length value (`px`, `em`, ...). */
    background-position: right top;
    /* Determines whether the image is fixed with regard to the viewport or scrolls along the containing block. */
    background-attachment: fixed;

    /** CSS3 **/

    /* Adjust the size of the background image.
     * 'contain': scale as large as possible by keeping original image ratio
     * 'cover': scale to the smallest possible size to fill the container (with repeat) by keeping
     *          original image ratio
     * 'auto': scales automatically by keeping original image ratio
     * : stretches the width of the image (height becomes auto)
     * <2 length values or 2 persentages> : stretches the width and the length of the image */
    background-size: 1.5em;

    /* Delimitates where the background is applied in the Box Model
     * 'border-box' : applies to all layers of the Box Model (except margin)
     * 'padding-box' : applies to content area and padding layers (border is excluded)
     * 'content-box' : applies to content area (padding and border are excluded) */
    background-clip: content-box;

    /* Define where the image origin (x:0, y:0) should be positionned in the Box Model.
     * Values are identical to 'background-clip' (border-box, padding-box and content-box) */
    background-origin: border-box;
}

Shorthand

Since adding every background- property to the CSS is verbose, you have the option to use the shorthand notation:

/* background: color image repeat attachment position; */
body {
    background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;

    /** CSS3 **/

    /* Use layering to display images on top of each others to compose the
     * background image. You can have as many layers as you like. */
    
    background: url("images/cheese.png") no-repeat center, /* top layer */
                url("images/ham.png") no-repeat center,
                url("images/sauce.png") no-repeat center,
                url("images/dough.png") no-repeat center, /* bottom layer */
                lightblue; /* background color */
}

Fonts

CSS provides several properties to set a font.

body {
    /* Select the font and specify fallback fonts with ',' */
    font-family: Arial, Helvetica, "Times New Roman", sans-serif;
    /* Define if the text should be normal, italic or oblique 
    * 'italic' uses an italic version of the font whereas 'oblique' 
    * skews the 'normal' font*/
    font-style: italic;
    /* Set font size with pixels, percents, any length value ('px', 'em',..), 
       special keywords (xx-small, x-small, small, medium, large, x-large, xx-large)
       or viewport units 'vw', 'vh'.
       It is recommended to use percents or 'em' */
    font-size: 14px;
    /* Set he boldness of the font with either keywords (normal, bold, bolder,
     * lighter) or numeric values (100-900) */
    font-weight: 400; /* same as 'normal' */
    /* Pick the small caps variation where the lowecase characters are displayed
     * as smaller versions of the corresponding upper case characters */
    font-variant: small-caps;
}

Font size techniques

em is a unit relative to the parent element. 1em equals to the font size defined in the parent's element, 2em is two times the parent's font size and so on.
CSS3 introduced rem which is a unit relative to the root element (). A popular technique mixes percents and rem to easily convert em to pixels.

html {
    /* The default font-size is 16 px */
    font-size: 62.5%;    /* font-size becomes 10px (1rem) */
}
/* remaining sizes are then easy to convert */
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

Shadows

Box shadow

With CSS3 you have a simple syntax to add one (or multiple, comma-separated) shadows to your box.

div {
    /* Add a shadow under the div, shifed by x=7px and y=8px, with a blur radius of 10px
     * in gray. The syntax is    .
     * Blur radius defines how sharp the edges of the shadow are. The higher, the smoother. */
    box-shadow: 7px 8px 10px gray;
}

Text shadow

On the same principle, you can also add a shadow on a text.

h3 {
    /* Same syntax as 'box-shadow' */
    text-shadow: 7px 8px 10px blue;
}

Geometrical Transforms

In CSS3, you can simply apply 2D or 3D effects on your elements, such as rotating, moving or skewing. The edited element will not occupy more space on the page as its Box will remain as if no effect was applied but it can overlap with its siblings.

h1 {
    /* Shift an element on X and Y axes.
     * If the second parameter (y) isn't specified, it is considered to be 0.
     * See also translateX and translateY */
    transform: translate(10px, 60px); 
    /* The 3d variant lets you specify a shift value along Z axis. However,
     * the effect on Z is only meaningful if it is combined with 'perspective' or 
     * 'perspective-origin' that modify the size of the element as it goes higher on Z.
     * See also translateZ. */
    transform: translate3d(10px, 60px, 60px); 
    /* Rotate an element around it origin.
     * Negative values are supported.
     * See also rotateX and rotate Y */
    transform: rotate(30deg); 
    /* The 3d variant accepts [x,y,z] vectors as inputs and an angle.
     * It rotates the element around the selected axes with the given magnitude and the specified angle 
     * See also rotateZ. */
    transform: rotate3d(0, 1, 2, 30deg); /* rotates 2x more on z axis than on y */
    /* Increase or decrease the size of an element proportionnally on x and y 
     * If the second parameter (y) isn't specified, it is considered to be 0.
     * See also scaleX and scaleY */
    transform: scale(1.2, 0.3);
    /* The 3d variant accepts [x,y,z] vectors as inputs. The scaling is applied with the 
     * provided magnitudes along each axis. 
     * See also scaleZ. */
    transform: scale3d(1, 4, 1);
    /* Skew the element along x and y yith the specified angle.
     * If the second parameter (y) isn't specified, it is considered to be 0.
     * See also skewX and skewY */
    transform: skew(10deg);
    /* And of course, you can chain several effect */
    transform: translate(10px, 60px) rotate(30deg) skew(10deg);
}

Transitions

In CSS3, Transitions allow you to add delays and effects when the styling of an element gets updated (usually triggered with user interaction). The result is that instead of seeing the visual appearance changing instantly, it will smoothly occur over a specified amount of time.

Any property with a value that is a number, length, percentage or color should be animatable.

button {
    background: pink;
    border-color: green;
    /* To apply a transition, you first need to select the properties for which
     * you want to add a transition. 
     * Note that we're using shorthand properties here which means that the transition will apply 
     * to all underlying css properties */
    transition-property: background, border;
    /* Then you need to set a duration for the transition (in seconds 's' or milliseconds 'ms')
     * Note that the coma separates the duration for each property 
     * specified above.*/
    transition-duration: 1s, 500ms;
    /* Optionnally, you can set a start delay so that the transition does not 
     * start immediately (in seconds 's' or milliseconds 'ms') */
    transition-delay: 0.1s, 0s;
    /* Optionnally, you can pick from different transition styles which differ in how
     * the value change is applied. By default, the transition is linear, meaning that the 
     * value changes gradually over time but you have several other options.
     * 'linear' (default)
     * 'ease': value changes quickly at the beginning and slows down at the middle
     * 'ease-in': value changes slowly at the beginning and accelerates at the end
     * 'ease-out': value changes quickly at the beginning and slows down at the end
     * 'ease-in-out': value changes slowly at the beginning, accelerates at the middle and slows down at the end
     * 'cubci-bezier(n, n, n, n)': manual speed curve with values from 0 to 1 */
    transition-timing-function: ease-out;
}
button:hover {
    background: red;
    border-color: blue;
}

Shorthand

All transition properties can be set at once with the shorthand notation.

button {
    /* Syntax is : property duration timing-function delay 
    * As usual, if a value is missing its default value is used instead. The default value
    * for 'property' is 'all', meaning that all css properties will be affected */
    transition: background 1s ease-out 0.1s;
}

Animations

Transitions are great for simple animations but when you need more granularity on what property should change at a given moment in the transition, animation offer all the flexibility you need. Animations consist of @keyframes which describe the style to apply at a given time of the animation.

h1 {
    /* Animations only apply to non-static positions */
    position: absolute;
    /* Each animation is identified with a name. You can see the declaration
     * of the animation further below */
    animation-name: moveright;
    /* Just like 'transitions', animation have a duration in 's' or 'ms' */
    animation-duration: 3s;
    /* [Optional] Same as 'transition-timing-function */
    animation-timing-function: ease;
    /* [Optional] Same as 'transition-delay */
    animation-delay: 200ms;
    /* [Optional] Set the number of times the animation should play (each iteration 
     * will last for 3s here). Note that you could also use 'infinite' so that the 
     * animation never ends */
    animation-iteration-count: 3;
    /* [Optional] If the number of iteration is superior to 1, the direction let you 
    * chose in which direction the animation should play.
    * 'normal' (default)
    * 'reverse': starts at the end and ends at the beginning
    * 'alternate': plays forward on first cycle and reverse in second and continues alternating
    * 'alternate-reverse': same as alternate but in reverse order */
    animation-direction: alternate;
    /* [Optional] Specifies if the styles defined in the animation applies to the element 
    * before the beginning of the animation and/or after the end of the animation.
    * 'none' (default)
    * 'forwards': The final style applied by the animation is persisted on the element. In this example,
    *             the text would stick to the right after third iteration.
    * 'backwards': The initial style of the animation is applied to the element before the animation starts
    *             (only visible if you've set a delay)
    * 'both': combination of 'forwards' and 'backwards' */
    animation-fill-mode: none;
    /* [Optional] This is mostly for javascript as it lets you pause or run the animation 
    * Values: 'running' (default) or 'paused': */
    animation-play-state: running;
}

/* An animation is an 'at-statement' with entries describing the style 
 * at each step. In the example below, we use 'from' and 'to' for the beginning
 * and end states but you could have chosen to use percentage (0% and 100%) instead.
 * You get the idea, with percentage you can add additional moment (25%, 53%, ...)
 * and fine-tune your animation.
 * This animation will move the title from left to right for 3 seconds. The final position of the text
 * will be the one it occupies in the normal flow which means that here, the text will come back
 * to where it started.*/
@keyframes moveright {
    from { left: 0 };
    to { right: 60% }
}

Shorthand

You can pass all properties at once for more consistency.

h1 {
    /* Syntax: name duration timing-function delay count direction */
    animation: moveright 3s ease 200ms 3 alternate;
}

CSS: Layouts

Cem Soyding — Mon, 01 Jan 2024 10:40:43 GMT

Layout

Understanding the Box Model is not enough to have a clear vision of how CSS will style your page. Many other factors have an influence on the final rendering such as :

display type of html element (block or inline)
positioning scheme (normal flow, float or absolute)
viewport size, image dimensions, etc...

Display

The default display property (block or inline) of html elements can be overriden in CSS stylesheet and heavily affects how the page is rendered. Here is what differs between each display type:

Type	Description
`inline`	Element is displayed inline (no breaks). `width` and `height` properties have no effect. Instead it always occupies as much width as its content.
`block`	Element is displayed as a block (breaks at beginning and end). It takes up the full width available.
`inline-block`	Element is displayed inline as a block (no breaks). `width` and `height` are properly applied
`flex`	[CSS3] Element is displayed with a flexible block-level layout entirely built in CSS
`inline-flex`	[CSS3] Element is displayed with a flexible inline-block layout entirely built in CSS
`none`	The element does not appear because no box is generated for it (or its children). It simply does not exist.

span {
    display: block; /* replaces default 'inline' */
}
p {
    display: inline; /* replaces default 'block' */
}

Make sure to always remember the html rules:

an inline element can't have a child with a block display

Changing the default display type of an element does not overrule that, you still won't be able to have block elements inside (orignally) inline elements.

Flexbox

The flexbox properties introduced with CSS3 are quickly becoming the new standard for creating layouts without interfering with the html markup. It consists in having a flexible container (e.g. a div) that will hold flex items. To understand how they are rendered, it is important to visualize the spatial representation of a flexbox:

         A flexbox can be represented in a 2D space but lays out items in 1 direction

                            Main axis 
        (oriented according to local writing direction)
                .------------------------------------------->
                | ---------------------------------------
                | |  Flex     ||  Flex     ||  Flex     |
    Cross axis  | |__Item 1___||__Item 2___||__Item 3___|
(orthogonal to  | 
Main axis)      | Each element inside a flex container automatically 
                |  becomes a flex item
                v

By default, flex items are displayed in a row along the flex line (the Main axis). The direction can however be modified with flex-direction:

row (default) : depending on local culture, from left to right
row-reverse : opposite of row
column : same as row but top to bottom
column-reverse : opposite of column

.container {
    display:flex;
}
.items {
    flex: 1;
}

With the code above, the items will be laid out on full width, sharing all the available space. This behavior can be modified with flex-wrap:

nowrap (default) : items fit in one line
wrap : when there is no more space to display an item, it wraps onto next line. The first line is at the top and each new line is added under
wrap-reverse : same as wrap but first line is at the bottom and each line gets added above

Note that there is a shorthand to set direction and wrap at once:

.items {
    flex-flow: column wrap;
}

Speaking of shorthand notations, the flex property used in the first example is a shorthand for several properties:

flex-grow: specifies how much of the container's remaining space should be assigned to the item. When it is set to 1, the space is evenly shared by flex items. However, if 2 items have a value of 1 and a third has a value of 2, the total space is (1+1+2) 4 which means that the third item will occupy half of the container.
flex-basis: initial main size of an item
flex-shrink: it's the opposite of flex-grow. It gives a ratio factor indicating by how much the size of the item should be divided (if 0, original size is used)

but it is recommended to always use flex as it resets unspecified properties correctly.

/* As specified on mdn documentation, the meaning of flex properties varies depending on 
 * the units */

/* One value, unitless number: flex-grow */
flex: 2;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

Important: float, clear, vertical-align and column have no effect in flex containers.

Covering everything that it is possible to do with Flexbox in a single article is difficult. Besides, some great resources are hard to beat so I strongly recommend you to visit css-tricks and/or to watch the very nice video series What the Flexbox that covers it very well.

Visibility

With visibility, you can change the rendering of html elements without changing the structure of the tree, meaning that the boxes won't be deleted if the element is hidden (as opposed to display:none).

div {
    /* Sets the visibility of an element.
     * 'visible' (default) : the box and its content are visible
     * 'hidden' : the box and its content are invisible but still are in the layout
     * 'collapse' : same as 'hidden' except for tables (see below)
     * 'inherit' : applies visiblity of the parent */
    visibility: hidden;
}

When applying collapse to table elements, they get removed. However, they still affect the layout of the table.

Positioning

We've seen how the display property affects the rendering of an element in the layout. This is called the Normal Flow, a rule based solely on the block or inline nature of the elements.

The positioning method of an element is static by default, meaning that the element in positionnend into its normal position in the Normal Flow.

p {
    /* Makes absolutely no difference in the display */
    position: static;
}

Then there is the relative position which lets you shift the element from its original position in the Normal Flow with top, left, bottom, right properties.
When shifted, the content of the element will overlap with others but the space reserved in the layout for the element will remain identical.

p {
    /* The paragraph box will be at the same position on screen but the element will appear shifted down,
     * potentially overlapping the element that was right below */
    position: relative;
    top: 150px;
}

If you opt for absolute position, there are 2 things to consider:

it takes the element out of the Normal Flow, meaning that its box will take no space among siblings
the position is relative to the first parent that has a position different than static (or the top-left corner if none is found)

The elements positioned with absolute will very likely be overlapping their siblings.

.inner {
    position: absolute;
    /* Here again, use 'top', 'left', 'right', 'bottom' properties */
    left: 2px;
}

If we consider the following html code, the inner div will apear on top of the paragraph, simply because it is taken out of the Normal Flow.


    
        This content will overlap the siblings
    
    Dummy context that will be positioned below the inner div

Finally, if you want to position an element absolutely on a page that does not move when the page is scrolled, use fixed positioning. With fixed, the element is fixed with respect to the browser's viewport.

.inner {
    position: fixed;
    /* Here again, use 'top', 'left', 'right', 'bottom' properties */
    top: 50px;
    left: 300px;
}

Layers

In addition to position that lets you place elements in a 2D space, z-index offers you an option to place elements on top of each others, along the z axis.

Note: z-index is only applicable to elements with a position different than static (default).

.above {
    position: absolute;
    top: 50px;
    /* z-index is expressed with an integer that gives the level of the element on z axis.
     * If higher, the element is placed on top. Negative values are also possible */
    z-index: 2;
}

Float

Put simply, float lets you rearrange elements within a container by stacking (some of) them left or right. Neighbour elements will be inlined next to them on the horizontal line (we say that they float around them). It is a popular technique used to wrap text around images.

Remember how absolute positionning was removing an element from the Normal Flow ? Well there is more complication if you use float. By definition, float removes an item from Normal Flow but the element is still in the flow. It is some sort of reordering of the Normal Flow that also alters how neighbour elements are displayed.

1
  2
  3
  
    This text will be inlined after div '2' and before div '3'

div {
  margin-left: 5px;
  width: 50px;
  height: 150px;
}

.left {
  /* You can float left or right (none is the default) */
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}

If you want to prevent some elements from floating around, you can use the clear property by telling which side of the element should be cleared. In the example above, we will print the paragraph on next line.

p {
    /* since by default, elements float from left to right, clearing the left edge will 
     * reposition this element onto next line */
    clear: left; 
}

None of the div has been repositionned and there is now an empty space between them.

Columns

When you want to display an element throughout several columns you can chose to set one of the following properties:

column-count: Explicitely defined the number of columns to apply
column-width: Defines the ideal width of the each column and the total number is deduced (the final size will depend on the available space).

p {
    /* You can only use one or the other. Don't mix 'count' and 'width' */
    column-count: 4;
    /* [Optional] Set the distance between columns */
    column-gap: 10px;
    /* [Optional] Draw a vertical line between columns (thickness style color)
     * This is a shorthand, you can also use independent properties ('column-rule-color',
     * 'column-rule-style' and 'column-rule-width') */
    column-rule: 1px solid blue;
    /* [Optional] Define how the content is spread among columns 
    * 'auto' (default): columns filled sequentially 
    * 'balance': content balanced among columns */
    column-fill: balance;
}

Another common approach to build a multi-column layout is to combine float and box-sizing.

.box {
    width: 30%;
    padding: 20px;
    margin-left: 3px;
    background: #f2f2f2;
    float: left;
    box-sizing: border-box;
}
.box:first-child {
    /* With 'first-child' pseudo selector, we can remove the left margin on first
     * element */
    margin-left: 0;
}


    First column .....
    Second column .....
    Third column .....

Each

column is stacked on the left with a margin of 3px between them.

Note that you can also use flexbox properties to create this type of layout.

CSS: Box Model

Cem Soyding — Fri, 29 Dec 2023 10:29:51 GMT

Box Model

Each html model consists of an encapsulation of boxes (i.e. rectangles).

The content area is where the value (content) of an html element goes. The content space is shared with the padding, meaning that if a background color is applied to the element, the padding area gets colored as well. The border box wraps the content area and has its own attributes. Finally, the margin area controls the position of an element relatively to its parent. It is by the way styled according to the parent's content area.

On this picture, we can see that padding concentrates the content relatively to the element's border. margin on the other hand pushes the element relatively to its parent edges.

When width and height are set on an element, they only apply to the content area. If margin, border and padding are different than 0, then the element occupies more space on screen

total width = width + padding left + padding right + border left + border right + margin left + margin right

Same reasoning with height of course.

Dimensions

As explained above, you can set the width and height of the content area of any html element in CSS.

div {
    /* You can set width and height in px, % or any length value (px, em, rem,...).
     * Besides, you can use 'auto' to let the browser calculate suitable dimension(s),
     * 'initial' to set the default value(s) or 'inherit' to use parent values. */
    width: 300px;
    height: inherit;
    /* When the dimesion of the content is dynamic (not fixed), you can define dimension
     * limits to control the display to some extent, for instance to define a range of valid
     * dimensions */
    max-width: 500px; /* can't grow above this width, even with width set to a higher value */
    max-height: 50px; /* can't grow above this height */
    min-width: 50px; /* can't shrink below this width */
    min-height: 5px; /* can't shrink below this height */
}

Note: By default, html block elements will have a width of 100%. In general, avoid setting fixed dimensions unless it is necessary (prefer using em, rem, %).

Padding

You can specify padding values for each sides of the content area (padding-xxx with xxx one of (top, right, bottom, left)).
Negative values aren't supported.

div {
    /* The value can be set in px, % or any length values (em, rem, ...).
     * You can also use 'inherit' to apply the same padding value as the parent */
    padding-top: 50px;
    padding-right: inherit;
}

Shorthand

The shorthand notation lets apply all padding values in one line:

pre {
    padding: 2px; /* applies to all sides */
    padding: 1px 2px; /* vertical and horizontal */
    padding: 1px 2px 1.5px; /* top, horizontal and bottom */
    padding: 1px 2px 1px 2px; /* top, right, bottom and left */
}

Border

The border sits between the margin and the padding areas an could be styled with various options.

h1 {
    /* Border style defines how the border looks like. 
     * none/hidden : no border (default)
     * dashed: line is dashed
     * dotted: line is dotted
     * double: 2 parallel lines are drawn
     * inset/outset: bicolor 2d frame is drawn
     * groove/ridge: bicolor 3d frame is drawn */
    border-style: dashed;
    /* Set the thickness of the border. You can use any length value (p, em, rem...)
     * or pick one of predefined profiles : 'thin', 'medium' or 'thick' 
     * Note: this is a shorthand notation, you could also set width for each side.
     * Note: border-style must be different than 'none'/'hidden'*/
    border-width: 1px;
    /* Set the color of the border. 
     * Note: this is a shorthand notation, you could also set color for each side.
     * Note: border-style must be different than 'none'/'hidden'*/
    border-color: #ff0030;
    /* Create rounded borders. The value represents the size of the arc. */
    border-radius: 20px;
    /* With CSS3 you can use an image to draw the border. The sides and corners
     * of the specified image will be replicated and stretched to wrap your content */
    border-image: url("border.png") 20 20 round;
}

Shorthand

As usual, there is a shorthand notation to set all properties at once.

p {
    /* In this order: width, style, color.
    * Note: You can omit a parameter (2px red) and it will take its default 
    * value if any) */
    border: 2px dotted red;
}

Margin

The margin is upper coating of the box model and is always transparent.
You can specify margin values for each sides of the content area (margin-xxx with xxx one of (top, right, bottom, left)).
Negative values are supported.

div {
    /* The value can be set in px, % or any length values (em, rem, ...).
     * You can also use 'inherit' to apply the same margin value as the parent 
     * or 'auto' to let the browser compute the ideal margin value */
    margin-top: 50px;
    margin-right: inherit;
    margin-bottom: -1px;
}

Shorthand

The shorthand notation lets apply all margin values in one line:

pre {
    margin: 2px; /* applies to all sides */
    margin: 1px 2px; /* vertical and horizontal */
    margin: 1px 2px 1.5px; /* top, horizontal and bottom */
    margin: 1px 2px 1px 2px; /* top, right, bottom and left */
}

Horizontal centering technique

When the margin is set to auto, the free space in container's width is split to calculate the margin values on each side of the element. As a consequence, the element is centered. This is a common technique use in frontend development.

div {
    width: 200px;
    margin: 0 auto;
}

Outline

Outlines are used to indicate focus on elements by drawing a line outside their border, in the margin area. Although they look similar to borders, they differ in many important ways:

The outline is not part of the Box Model
An outline does not take space, it overlaps. The dimensions of your element with it
You can style the outline on each side of the element

Syntactically, the outline is very similar to the border.

h1 {
    /* Outline style defines how the outline looks like. 
     * none/hidden : no border (default)
     * dashed: line is dashed
     * dotted: line is dotted
     * double: 2 parallel lines are drawn
     * inset/outset: bicolor 2d frame is drawn
     * groove/ridge: bicolor 3d frame is drawn */
    outline-style: double;
    /* Set the thickness of the outline. You can use any length value (p, em, rem...)
     * or pick one of predefined profiles : 'thin', 'medium' or 'thick' 
     * Note: outline-style must be different than 'none'/'hidden'*/
    border-width: 1px;
    /* Set the color of the outline. 
     * Note: outline-style must be different than 'none'/'hidden'*/
    border-color: #ff0030;
}

Shorthand

The shorthand notation to set all properties at once.

p {
    /* In this order: width, style, color.
    * Note: You can omit a parameter (2px red) and it will take its default 
    * value if any) */
    outline: 2px dotted red;
}

Common usage

By default, active links have an outline drawn. You can change the default style if you need to.

a, a:active, a:focus {
    outline: none;
}

Box sizing

Since adding a padding and/or a border affects the actual size of the element, creating nice layouts that fit in the viewport could be an intricate task. To ease it up a little bit, CSS3 introduced the box-sizing property so that the size of padding and border is substracted out of the content's width/height. In other word, it is like applying width/height to the whole Box.

.sized {
    width:100%;
    padding: 10px;
    background: pink;
    border: 5px solid #ffff33;
    /* Thanks to this line, no scrollbar will appear and the 
     * element will occupy full width with padding and border applied */
    box-sizing: border-box;
}

CSS: absolute basics

Cem Soyding — Mon, 25 Dec 2023 10:27:49 GMT

We start this CSS learning journey by introducing the basics you must know beofre going further. As usual with the articles on this blog, the focus is on the code with insightful comments instead of long and boring explanations.

In this article series, I assume that you are not a stranger to software development and you have an idea of what CSS is. You came here to find a concise presentation of CSS features that you can quickly pick and use in-code. For in-depth explanations, do not hesitate to consult mdn.

Base syntax

/* selector { property:value; property: value; ... } */
h1 { color: red; }

Selectors

Selector	Description
Universal: `*`	Matches every single element on the page
Type: `p`	Matches every element on the page
Id: `#cmpId`	Matches every element where `id="cmpId"` on the page
Class: `.cmpClass`	Matches every element where `class="cmpClass"` on the page
Descendants: `ul.nav li a`	Matches every element inside an inside a where `class="nav"` on the page
Child: `ul > li ol`	Matches every element inside an of elements
Adjacent siblings: `ul.sports + p`	Matches every element appearing after a at the same hierarchical level where `class="sports"`
General siblings: `ul.sports ~ p`	Matches every element appearing before or after a at the same hierarchical level where `class="sports"`

Pseudo-selectors

Pseudo-selectors let you target the states of an element to adapt its style dynamically depending on user interactions. A pseudo-selector can be target using the following syntax :

/* selector:pseudo-selector { property:value; property: value; ... } */
button:hover {
    color: blue;
}

Common examples are :hover, :first-child and :last-childs (in lists), :focus, nth-child(n) (tables or lists) ...

Pseudo-elements

Pseudo-elements allow you to select parts/areas of an element that do not have an ID or a class. It is helpful when you want to style the first letter of a paragraph or when you want to insert some content before/afer the element.

/* selector::pseudo-element { property:value; property: value; ... } */
p::first-line {
    color: blue;
}

::before and :: after

::before and ::after are common pseudo-selectors used to decorate an element with rich content that is not part of the page's actual markup. You can inject strings, images or other resources using them.

h1::before{
    content: url("img/bullet.png");
}

Attributes

You can match elements by their attributes as well, by either checking the attribute existence or its value. This is particularly useleful for styling forms.

/* selector[attrbiute expression] { property:value; property: value; ... } */

/* matches all elements that have a 'name' attribute */
[name] {
    color: blue;
}

/* matches input elements of type 'password' */
input[type="password"] {
    background-color: gray;
}

/* matches div elements where one of the attributes is 'navbar' */
div[type~="navbar"] {
    background-color: gray;
}

/* matches a elements where the 'href' attributes starts with a particular pattern */
a[href^="ftp://"] {
    background-color: gray;
}

/* matches a elements where the 'href' attributes ends with a particular pattern */
a[href$=".docx"] {
    background-color: gray;
}

/* matches p elements where the 'class' attributes contains a particular pattern */
p[class*="intr"] {
    background-color: gray;
}

Medias

The formatting of a web page is usually made to render on a screen but CSS supports several other types. The targeted device is called media and you can adjust the styling of a page depending on the media that will render it.

Most common medias are screen, print (for printers when printing a page) and all.
To adapt the styling to each media, simply tag the css entries with @media:

@media screen {
    h1 {
        font-size: 14px;
        font-family: Arial, sans-serif;
    }
}
@media print {
    h1 {
        font-size: 11px;
        font-family: Times, sans-serif;
    }
}

/* This style block applies to all medias */
h2 {
    font-size: 10px;
}

You can also specify the media with the @import statetement, at the beginning of the file

@import url("css/printer.css") print;
@import url("css/browser.css") screen;

or with tags in html:

Units

Many CSS properties use length values which must be specified with a number and a unit.
The length can be expressed with absolute or relative values.

Note: Whitespaces between the number and the unit are forbidden.

Absolute

Absolute values will be applied whatever media is rendering the page. As a consequence, if the page was designed for desktop, it won't be rendered beautifully on mobile devices since all dimensions are hard-coded and were specified for bigger screens. For scalibility, always prefer relative lengths.

p {
    /* You can pick any unit from the followings:
     * 'in': inches (~2.54cm)
     * 'cm': centimeters
     * 'mm': millimeters
     * 'pt': point=1/72 inch (~0.35mm)
     * 'pc': picas=12 pt
     * 'px': pixel=0.75pt 
     * For on-screen display, consider using 'px' only as the others are better for 
     * print media or other high resolution devices. */
    margin: 12px;
}

Relative

Relative length units are ratios of an absolute dimension.

p {
    font-size: 10px;
    /* You can pick any unit from the followings:
     * 'em': ratio of current font-size
     * 'ex': ratio of the height of letter 'x' in current font 
     * 'rem': ratio of root's font size 
     * 'vh' : 1% of viewport's height 
     * 'vw' : 1% of viewport's width
     * '%' : 1% of parent's property */
    padding: 1.2em; /* 12 px */
}

Note that font-size could have been specified with relative units as well. In that case, the font-size of the parent element would be used, and if relative as well, its parent and so on until reaching the body's default which is 16px.

HTML fundamentals

Cem Soyding — Fri, 22 Dec 2023 10:01:09 GMT

Welcome to the HTML Fundamentals article, where we'll explore key HTML elements and concepts that form the foundation of web pages. Whether you're a seasoned developer or just starting your journey, this series aims to provide valuable insights into HTML, the markup language that structures the content of the World Wide Web.

Each chapter provides concise explanations, code snippets, and practical examples to empower you with a solid understanding of HTML fundamentals.

Head

The head elements collectively describe the properties of the document (title, character set, stylesheets, scripts).


    
    
    My fantastic website

Page layout

HTML5 introduced new tags to better structure a web page and no longer rely only on div tags:

: header of a document or a section
: footer of a document or a section
: section with navigation links
: represents a section of a document
: self-contained unit of information (such as a blog post)
: content losely related to the page content (such as a section for ads)

Here is how these tags can be applied to a section or a document:

----------------------------------------
              header
----------------------------------------
       |                       |
  Nav  |        Section        |  Aside
       |                       |
       |  -------------------- |--------
       |  |      Article     | |
       |  |                  | |
       |  -------------------- |
----------------------------------------
               footer
----------------------------------------

And here is an example of layout in HTML5:


    
        Sports news
    
    
        
            
                Home
                Soccer
                Basketball
            
        
        
            Lakers failed again
            The desire of success was not...
        
    
    
        copyright © sports news

Note that depending on how you want to wrap elements or how you want to style them, use div tags to create groups.

HTML Element types

There are two groups of elements:

block level: used to structure the page (div, p, h1-h6, form, ul, ol, ...). They start by a line break, end with a line break and expand on full width.
inline level: used to fill the content (img, a, span, strong, b, input, button ...). They are inserted in place and just take the required space.

Note that the default display type of an element can be overriden with css (display).

Empty elements

Some elements don't need closing tags. Here is an example with

This is 
 great

Note that is different than self-closing tags as it does not end with />. This if fine for HTML, only xHTML always requires />.

Attributes

General purpose

Some attributes are valid for all HTML elements : id, title, class, style.

Boolean attributes

Several attributes do not consist of name/value pairs but just of a name, such as checked, disabled, readonly ... The shortened syntax is equivalent to checked="true" for instance.

Headings

h1 to h6.
Don't use them to display big or bold text. Instead, use them to structure your documents as search engines index the structure and the content of the pages.

Paragraphs

Use

(paragraph) to publish text on a page. Note that any space or line breaks in the text written within

is not taken in consideration when rendering.

The spaces     and line
    breaks      of this paragraph    won't show
    at rendering. Instead,   you'll  se a single line with no   spaces

You can combine

with the following tags to customize the output:

: line break
: horizontal delimitation with a line between paragraphs
: special character (here non-breaking space)

The spaces `   and line 
 breaks of this paragraph

will show at rendering

Alternatively, consider

to render a text exactly like it's written:

The spaces     and line
    breaks      of this paragraph    will show
    at rendering.

Text formatting

This is bold text.
This is strongly important text.
This is italic text.
This is emphasized text.
This is highlighted text.
This is computer code.
This is smaller text.
This is _subscript and ^superscript text.
This is deleted text.
This is inserted text.

vs and vs

Both are used to format a text in italic or bold respectively. The only difference is that em emphasizes that its content is important while i is pure styling.
Same goes for b and strong where b is pure styling while strong stresses the importanced of its content.

Quotations

Use

to auto-indent a qutotation block that comes from other sources.
This text is an extract of an external resources - M. Author
is used to describe a reference to a creative work. It must include the author name or the title of the work or eventually an URL.
Inline quotations can also be inserted by using
As once said by a wise man, live your dreams
Note that in this case, the text will simply be surrounded with double quotes ".
Abbreviations
Not everyone knows all the abbreviations that you could use in your text. solves this problem by attaching a description to an abbreviation that the user can see by hovering over it.
The UN decided to not take action
The abbreviation will have a dotted underline to catch user's attention.
Address
HTML provides a special tag to encapsulate a contact information.
Nico Burger 7 Brooklyn Avenue London
Images
Images can be inserted with the inline and empty element .
A drawing made by an artist
alt provides an alternative text for the image if it cannot be displayed.
lets you set the image dimensions with height and weight attributes but you can also assign those in the CSS stylesheet.
Picture
comes with several limitations:
scaling the image to fit different devices is difficult
changing height and width attributes does not reduce the file size
HTML5 introduced a new tag to accomodate these limitations.
works like a switch/case. The browser evaluates the best match among the specified source tags and uses the default tag if none matches.
Note that the default tag is mandatory.
Image maps
As often used on facebook, your image can contain clickable links on its surface. This is possible with :
references the map by its name. Each area inside the map defines a clickable link.
Since creating these maps manually is not convenient, you could consider using one of the numerous online tools.
Note that is not search-engine-friendly.
Tables
Use tables to display tubular data only (never use them to build the layout of a page, they're slow to render and hard to maintain).
A
is made of rows , columns , and tfoot.
and can eventually contain a caption caption and a header .
Users Info Name Phone John Carter 5550192 5550152
In the example above, the header is horizontal (along a row) and we're making use of the colspan attribute to span the header Phone on 2 columns.
Here is another example with a vertical header and the use of rowspan to span the header on 2 rows:
Name: John Carter Phone: 55577854 55577855
Finally, not that HTML5 introduced additional tags to add more structure into a table woth

Items Expenditure

Stationary 2,000

Furniture 10,000

Total 12,000

Items	Expenditure
Stationary	2,000
Furniture	10,000
Total	12,000

Lists

Unordered

The displayed elements are marked with a bullet.


    Butter
    Milk
    Sugar

Ordered

The displayed elements are marked with a number.


    Open the box
    Replace the battery
    Close the box

By default, start attribute equals 1 which the starting number for the ordering. However, you can set it to other values if needed.

Description

A description list

with a definition or description: for each. The descriptive text is usually automatically indented by browsers.
Bread A baked food made of flour. Coffee A drink made from roasted coffee beans.
Forms
Forms are used to collect user inputs and submit them.
Name:
accepts several types of attributes:
name: name of the form. Must be unique in the document and not empty
action: url of program or script that will process the inputs
method: http verb used to send the data : post (default) or get (means that the data is visible in browser's address bar)
target: specifies where the response should be displayed (_blank, _self, _parent, _top)
A form can contain several type of controls depending on what it does.
Inputs
Most commonly used element, the input can take different forms depending on its type attribute.
Username: Comment: Password: Male Female Use dark mode Use 24h mode Upload: City:
There are other inputs as well for colors, email, datetime, number, range, search, phone number, url ...
Groups
You can add more structure to your forms by grouping some inputs together in named panels with
and legend.
Name Firstname: Lastname: Contact Details Email Address: Phone Number:
iFrame
lets you display an external html page inside yours. It pretty much acts like a mini web browser within a web browser.
Note: height and width can be expressed in % as well.
The iFrame can also be used to render a link accessed within the page thanks to target and name attributes.
Show weather in Paris
The external link will be rendered inside of the iFrame.
Canvas
HTML5 only.
The canvas is a two-dimensional rectangular area that can be used to draw graphics on the webpage via Javascript.
Drawing on Canvas
You can draw many shapes and colors in a canvas. The content of a canvas can be saved into a file.
SVG
HTML5 only.
An SVG is an XML-based image format that can be scaled without any loss of quality. The SVG also supports animations and can be edited dynamically with Javascript.
Audio
HTML5 only.
element lets you embed sound in web pages.
Video
HTML5 only.
element lets you embed videos in web pages.
Web storage
HTML5 only.
HTML5's we storage provides you with a solution to store 5MB of data locally on computer whereas a cookie was only capable of storing 4KB and had the inconvenient of being transferred on each request.
There are 2 types of storages with different scope and lifetime as explained below.
Local storage
Stores data permanently for an entire website.
Session storage
Stores data temporarily for a single browser tab and deletes the data when the browser or tab is closed.
Application cache
HTML5 only.
Caching helps with performances as your browser will store some of the resources accessed for a web page and load them back from storage instead of requesting them againg from the server. In HTML5, a caching manifest can be specified on server side to tell the browser what to cache:
CACHE MANIFEST # v1.0 : 10-08-2014 # All the items under CACHE: will be cached CACHE: # pages index.html # styles & scripts css/theme.css js/jquery.min.js js/default.js # images /favicon.ico images/logo.png # All the items under CACHE: will not be cached # meaning that the access to login.php is only # possible if the user is online NETWORK: login.php # Fallback URIs. The index of the page will be redirected # to offline.html when the user is offline FALLBACK: / /offline.html
The cache manifest needs to be indicated in the html element:
Web workers
HTML5 only.
The execution of javascript in the web browser is single threaded by default, meaning that any pending execution will prevent the user from interacting with the page.
For intensive computations that can be executed in background, HTML5 has introduced web workers to keep the page responsive.
To use this feature, you must first create a javascript file which will contain the code to be executed in background. Note that this code cannot access the DOM.
// worker.js var i = 0; function countNumbers() { if(i < 100000) { i = i + 1; postMessage(i); } // Wait for sometime before running this script again setTimeout("countNumbers()", 500); } countNumbers();
Now from the web page, you can control the execution of the worker and/or consume its result as shown below:
Using Web Worker Web Worker Demo
Server sent events
HTML5 only.
When a client communicates with a server, the connection is closed after receiving the response which is sufficient most of the time but does not cover the situations where data needs to be streamed.
In HTML5, a web page can hold a connection open so that the web server can send new responses automatically at any time. Server-Side Events (or SSE) are unidirectional responses delivered from server to client.
// server_time.php
On client side, we simply attach an event handler to the EventSource object.
Using Server-Sent Events

Resolving RabbitMQ Administration Issues on Windows

Cem Soyding — Tue, 14 Nov 2023 15:43:22 GMT

Introduction
Managing RabbitMQ on Windows machines can sometimes present unexpected challenges. Recently, I dedicated some time to delve into the inner workings of RabbitMQ, and I finally grasped the core issues causing difficulties with using command-line scripts. In this article, I will share my findings and the solution I've discovered to address these problems.
The User Context Challenge
The root of the problem lies in the active user on the machine. RabbitMQ is initially installed with the "Administrator" user, and this is where the cookie file is configured. The RabbitMQ service also starts under the "Administrator" user. However, it seems to ignore or not read environmental variables, based on my testing.
On the other hand, command-line tools located in the installation directory run under the current user's account (in our case, "Setup") and take into account environmental variables. This stark contrast between different users leads to significant issues.
Disappointing Results
The consequences of this problem are as follows:
The RabbitMQ service starts as expected, but with the default name and not the one we defined in "RABBITMQ_NODENAME."
Command-line tools run but fail to locate the cookie and attempt to connect to "RABBITMQ_NODENAME," which is destined to fail.
The Solution: "rabbitmq-env-conf.bat"
The proposed solution involves using the optional configuration file, 'rabbitmq-env-conf.bat'. This batch file is executed when the service (and tools) starts, making it the ideal place to configure the node name.
Firstly, it's essential to remove the use of "RABBITMQ_NODENAME" env variable (and stop creating it). Secondly, to use command-line tools effectively, you need to specify the cookie. Execute the following line before using them:
set RABBITMQ_ERLANG_COOKIE=
Replace with the content of the ".erlang.cookie" file from the "Administrator" user.
Please note that this last environmental variable may not be used in the latest RabbitMQ versions, so you might need to find an alternative.
Node renaming script
Now that you're all set, run the script below to rename the default node effectively.
@echo off REM Set the NODENAME environment variable and create rabbitmq-env-conf.bat file echo set NODENAME=machine@localhost > "C:\Users\Administrator\AppData\Roaming\RabbitMQ\rabbitmq-env-conf.bat" REM Create a system environment variable named RABBITMQ_BASE setx RABBITMQ_BASE "C:\Users\Administrator\AppData\Roaming" /m REM Stop RabbitMQ service C:\Program Files\RabbitMQ Server\rabbitmq_server-3.11.0\sbin\rabbitmq-service.bat stop REM Remove mnesia directories rmdir /s /q "%AppData%\RabbitMQ\db" rmdir /s /q "%AppData%\RabbitMQ\log" REM Copy .erlang.cookie file to C:\Users\Administrator copy "C:\Windows\SysWOW64\config\systemprofile\.erlang.cookie" "C:\Users\Administrator" REM Uninstall the RabbitMQ Windows service C:\Program Files\RabbitMQ Server\rabbitmq_server-3.11.0\sbin\rabbitmq-service.bat remove REM Re-install the RabbitMQ Windows service C:\Program Files\RabbitMQ Server\rabbitmq_server-3.11.0\sbin\rabbitmq-service.bat install REM Start the RabbitMQ Windows service C:\Program Files\RabbitMQ Server\rabbitmq_server-3.11.0\sbin\rabbitmq-service.bat start echo RabbitMQ setup completed.

Conclusion
Resolving RabbitMQ administration challenges on Windows machines can be perplexing, but understanding the user context and making use of the "rabbitmq-env-conf.bat" configuration file can help streamline the process. By addressing these issues, you can ensure a smoother experience when working with RabbitMQ in a Windows environment.

I am building an SFFPC : Case selection

Cem Soyding — Fri, 10 Nov 2023 10:27:46 GMT

In my previous article, we've covered the essential components required for assembling your Small Form Factor PC (SFFPC). Now, there's one element left to complete your build: the case. It's both logical and recommended to select the case as the final step. The most aesthetically pleasing cases may not necessarily be the most suitable for your specific configuration. You'll often find yourself facing a dilemma between style and volume. This step is not only crucial but also one of the most challenging. Here's an overview to help you navigate through the case selection process:
SFFPC Case Size: SFFPCs are often compared to the dimensions of a shoebox, with a target volume of around 10 liters—a goal for purists in the SFFPC community. However, achieving this goal is not always straightforward.
Component Sizes and Cooling: As previously mentioned, component sizes have been on the rise, accompanied by increased power consumption. Naturally, this requires more efficient cooling solutions, often leading to larger cases.
Modern Case Volumes: In contemporary SFFPC builds, case volumes typically range from 15 to 20 liters. This represents nearly a doubling in size compared to our initial point of reference.
Is Size a Concern? In absolute terms, the increased case size is not inherently problematic. SFFPC cases still remain significantly smaller than traditional towers while exuding a stylish and compact aesthetic. However, if you had envisioned the convenience of easily transporting your PC to gaming sessions at your friends' places, the larger cases may present a challenge compared to the shoebox-sized options that can readily fit in a backpack.
Size vs. Power: As emphasized in the introduction, striking the right balance is the key challenge. Honesty with yourself is paramount in determining your ideal SFFPC. Do you truly need a 12-core CPU? Is a cutting-edge graphics card a necessity? Will you be moving your PC regularly? Start by answering these questions honestly, and then proceed with selecting the case that aligns with your practical requirements and personal preferences.
By thoughtfully considering these factors, you can confidently select a case that complements your SFFPC configuration, ultimately achieving the perfect blend of aesthetics and performance for your compact system.
Case Shapes
SFFPC cases come in various shapes, each with its unique design and advantages. Understanding these different case shapes can help you make the right choice for your compact system:
Classic: This design resembles a traditional ATX tower case, allowing you to assemble your SFFPC components much like a standard PC. While it offers flexibility, the interior volume optimization is not a primary focus in classic SFFPC cases. This classic style is becoming increasingly rare in the SFFPC landscape.
Console: Console-style cases are characterized by a vertical, elongated form factor, reminiscent of gaming consoles like the PS5. One of the popular examples of this style is the Fractal Ridge case. Console cases offer a unique and sleek appearance, often fitting seamlessly into entertainment setups.
Sandwich: Sandwich-style cases divide the interior into two distinct zones—one for the motherboard and another for the graphics card. These two sections are connected by a PCIe extension cable, often referred to as a Riser cable. This design is similar to the console form, where the layout emphasizes a compact, vertical orientation. The sandwich-style case is currently one of the most commonly used designs in the SFFPC community.
Open-air: In open-style cases, your PC components are assembled on a structure (or backbone) without a traditional enclosure. This design allows all components to be exposed, facilitating efficient cooling. However, it also makes the system more susceptible to dust, which can accumulate more readily without an enclosed case.
Understanding these different case shapes enables you to make an informed decision based on your preferences, the components you plan to use, and the overall aesthetics you desire for your SFFPC build.
Case Dimensions
Beyond the overall volume, it's crucial to carefully review the specifications of your chosen case, paying particular attention to length, width, and height. While most ITX cases can accommodate a motherboard and power supply, the same isn't always true for the CPU cooling solution or the graphics card.
Two important factors to consider are the length and thickness of the graphics card you select. For instance, if you opt for the Nvidia GTX 4080, you should be aware that it measures at least 30.4 cm in length, potentially even more depending on the manufacturer. It's advisable to choose a case that has a length of at least 35 cm to accommodate this card comfortably. Additionally, keep in mind that the card is quite thick, requiring three slots on the case's front. Not all cases can accommodate this width, so it's essential to verify compatibility.
GTX4080 at the top
When it comes to CPU cooling, modern processors often come with high Thermal Design Power (TDP) ratings. If you plan to use an air cooler, you'll notice that the heatsinks provided can be quite substantial. They're often tall and, in some cases, quite wide. Thus, it's crucial to confirm the maximum heatsink height supported by your chosen case. Furthermore, ensure that the cooler you select is compatible with your CPU, considering both TDP and the CPU socket. It's worth noting that achieving compatibility can sometimes be challenging.
To further complicate matters, the width of the coolers can also be a deciding factor, as they may interfere with your RAM or VRM (the L-shaped section on the left that powers your CPU). In these situations, online forums and tutorial videos can be invaluable resources, as you're unlikely to be the first person attempting such a build. These resources provide insights and guidance based on the experiences of others in the SFFPC community.
Conclusion
As you've undoubtedly gathered, assembling a Small Form Factor PC (SFFPC) is no small feat; it's a challenging and often costly endeavor that may deter many. However, the unique aesthetics and the gratification of building one's SFFPC from the ground up serve as compelling incentives for enthusiasts like myself.
While I remain realistic about not attempting to rival the world of ATX systems in terms of sheer performance, I firmly believe that SFFPCs have the potential to pack a considerable punch. With this conviction in mind, I'm embarking on my own SFFPC build, driven by the desire to discover just how formidable a compact powerhouse can be. The SFFPC world is a realm where the balance between performance and form factor truly comes to life, making it an enticing endeavor for those who appreciate both the art and science of PC building.

Langchain : introduction

Cem Soyding — Mon, 06 Nov 2023 14:49:24 GMT

Today, we only hear about AI, and more specifically, Generative AI, since the emergence of ChatGPT. Everyone enjoys using it on the OpenAI website, typically to obtain information or for interactive assistance. This technology is also heavily used for creating dedicated assistants for very specific tasks. If you too want to integrate this kind of functionality or even develop a tool from scratch based on Generative AI, you'll find that there are several alternatives, and organizing them can be tricky.
In this new series of articles, I am creating a guided journey for building applications based on large language models using a popular framework called Langchain. We will see how this set of libraries simplifies the creation of applications around AI through diagrams and code examples.
While Python is the preferred language for AI, I've opted here for the JS variant of the library in order to easily integrate these features into a modern tech stack such as Next.js.
In this first article, I describe the main challenges you'll face when working with AI and introduce the basic concepts of Langchain.
Challenges
Limited Text Size
The prompts you may have used with ChatGPT support a limited number of tokens. In other words, the amount of text you feed into the AI cannot exceed a certain number of words. For instance, ChatGPT accepts around 3,800 words, and it's much less for other models. However, you may be looking to customize your AI with large volumes of input text which constitutes an initial obstacle for your application development.
Briefly, here's a quick reminder of what a token is: a token is a text unit identified by the AI within a text. Although one might think that a word is equivalent to a token, that's not the case. Some words are divided into multiple tokens if they contain a sequence of characters recognized by the AI based on its training set. The character sets most frequently seen in the texts it was trained on will be tokenized and thus recognized in words because the AI considers them as being significant for understanding the sentence. Feel free to try it yourself.
The commonly used rule of thumb to estimate the number of tokens in a sentence is that one token is equivalent to 3/4 of a word (in English).
Very General Training Data
Large Language Models (referred to as LLMs) have been trained on a huge amount of data and you can't verify its content or authenticity. If you want to build an application focused on a specific domain, how can you be sure that the selected AI contains all the relevant data for your business?
Although the models are somewhat documented, the limited information you have inevitably exposes you to inaccuracies in the tool's responses.
However, it is possible to provide reference information to a model to make it more relevant to your needs, as we'll see later.
The Complexity of Prompts
To be efficient, a prompt must contain a complete context that will help the tool respond as accurately as possible to the query. This involves defining roles, instructions, including things not to do/say, and providing examples. Besides, for your prompt to be usable by your customers, it will partially contain information that they provide and achieving a precise solution in all cases will not be easy.
Furthermore, the size of the prompt is a problem, as well as scaling it to address a growing number of customers.
Formatting Unstructured Data
The external data you that you may want to add to your model can be in various formats, such as PDF, Excel, or even proprietary ones. To make your model capable of using this data, you will need to convert it into the format expected by the model first. The question of storing this information will also be a point to address to easily make it exploitable in the future.
Pricing
OpenAI has become quite popular on social media with ChatGPT, but using it in an application (API calls) is not free. Billing is done per token and varies depending on the selected model (gpt 3.5, gpt 4, ...).
GPT4 pricing
Although it may seem cheap, prices can quickly add up when dealing with large volumes of text.
Langchain
Langchain is a framework for developing applications based on LLMs with a set of components that can be assembled to build chains. Each component has a specific role in the chain and allows you to fine-tune the performance of the LLM for your application. The concept of chaining things is very representative of how the library works because each component is actually a link that plays its role and passes the result to its neighbor.
One of Langchain's major strengths is the availability of predefined chains that are suitable for the simplest types of applications in just a few lines of code, such as creating a chatbot or a summarization tool.
Another major advantage for me is the number of third-party API integrations that let you use various models or tools very easily.
Components
The official documentation is, of course, the reference point, and this article does not intend to replace it. Here are the main components of a chain and their roles.

Component Description

Model I/O The minimal chain will always consist of input text (or prompt), an LLM, and output text (response). This component provides tools to format the prompt by integrating parameters, examples, etc. (PromptTemplate), to select from available models (LLM, ChatModel), and to extract useful information from the returned response (OutputParser).

Data connection This set of tools is intended for customizing your model by injecting third-party data. You can load documents (DocumentLoader), break them into smaller chunks for LLMs (document transformers), convert them into a format understandable by LLMs (Embedding), store them (VectorStore), and finally query them for information retrieval (Retrievers).

Chains Chaining multiple components (including other chains) is possible with this library. Ready-to-use chains are also available.

Memory Memory typically serves to retain the conversation state so that each new message is not interpreted out of context.

Callbacks As the name suggests, this component allows attaching intermediate logic in the execution of your chains.

Typical Use Cases
With the concept of Runnable, all components are independent and can be chained or nested. However, it is not necessary to always use all of the components as illustrated below.
Basic Q&A
Basic Q&A
The simplest approach for using an LLM is to instantiate it and call it with a query to obtain a response. This solution is based entirely on the default training of the LLM.
import { OpenAI } from "langchain/llms/openai"; import * as dotenv from 'dotenv'; // Load your .env file containing your private api keys dotenv.config(); // Create the LLM const llm = new OpenAI({}); // Call the LLM const res = await llm.call("Tell me a joke"); // Print the output console.log(res);
Chain with Advanced Prompt
When you want to add context to the prompt to achieve better results, the use of a PromptTemplate is helpful.
Using prompt template
import { OpenAI } from "langchain/llms/openai"; import * as dotenv from 'dotenv'; // Load your .env file containing your private api keys dotenv.config(); // Create parametric prompt const promptTemplate = new PromptTemplate({ template: "Give me a {adjective1} and {adjective2} name for my watch manufacturing company", inputVariables: ['adjective1', 'adjective2'] }) // Create the LLM const llm = new OpenAI({ temperature : 1 }); // Create a chain const chain = new LLMChain({ llm: llm, prompt: promptTemplate }); // Execute chain const res = await chain.call({ adjective1: "friendly", adjective2: "innovative" }); // Print the output console.log(res.text);
Please note that the LLM has been configured to be creative with the temperature parameter. 0 makes the LLM precise, while 1 makes it imaginative. Feel free to use intermediate values to gauge the creativity of your LLM.
Chain with Memory
In the following example, we define a buffer for storing messages exchanged with the AI. Memories are primarily used for chatbot-type applications.
Adding memory to a conversation chain
import { OpenAI } from 'langchain/llms/openai'; import { BufferMemory } from 'langchain/memory'; import { ConversationChain } from 'langchain/chains'; import * as dotenv from 'dotenv'; // Load .env dotenv.config(); // Declare model const model = new OpenAI({}); const memory = new BufferMemory(); const chain = new ConversationChain({ llm: model, memory }); const res1 = await chain.call({ input: "Hi I'm Jimmy" }); const res2 = await chain.call({ input: "What is my name ?" }); // outputs Jimmy thanks to memory
Indexes
Information extraction from external documents is done through a pipeline that involves loading the text, breaking it down, and transforming it into vectors that are then stored in a database. This storage can be injected into a chain to enhance the quality of the response.
The pipeline of document conversion into embeddings
import { loadQARefineChain } from "langchain/chains"; import { OpenAI } from "langchain/llms/openai"; import { TextLoader } from "langchain/document_loaders/fs/text"; import { MemoryVectorStore } from "langchain/vectorstores/memory"; import { OpenAIEmbeddings } from "langchain/embeddings/openai"; // Create the models and chain const embeddings = new OpenAIEmbeddings(); const model = new OpenAI({ temperature: 0 }); const chain = loadQARefineChain(model); // Load the documents and create the vector store const loader = new TextLoader("./my_grandma_recpies.txt"); const docs = await loader.loadAndSplit(); // Store it in memory const store = await MemoryVectorStore.fromDocuments(docs, embeddings); // Select the relevant documents const question = "What's the recipe of french crepes ?"; const relevantDocs = await store.similaritySearch(question); // Call the chain const res = await chain.call({ input_documents: relevantDocs, question, }); console.log(res);
The TextSplitter divides the large initial text (using \n, \n\n, and ) into smaller pieces to optimize searching with the similaritySearch call. These smaller chunks of text are then transformed into vectors (or Embeddings) relative to the selected model. This means that the number of dimensions in your vector will vary depending on the model you're working with. There are different vector comparison algorithms:
dot product: a scalar value representing the sum of the products of vector magnitudes
cosine similarity: the cosine of the angle between two vectors, calculated by dividing the dot product of the vectors by the product of their magnitudes.
The closer the result is to 1, the closer the vectors are. The number of vector dimensions plays a significant role in your model's performance. A higher number of dimensions leads to longer computations. So, while accuracy increases with dimension, performance decreases.
Agents
With agents, you enter the world of automation. You have the option to integrate tools that complement your LLM's capabilities. The most impressive aspect here is that the agent is controlled by an Executor, which will iteratively process the initial request until the final result is obtained. Thus, the request will be internally evaluated and broken down into a series of actions delegated to the LLM or one of the tools. The response will then be assessed, determining the necessary next steps for constructing the response.
import { OpenAI } from 'langchain/llms/openai'; import {SerpAPI} from 'langchain/tools'; import {Calculator} from 'langchain/tools/calculator'; import {initializeAgentExecutorWithOptions} from 'langchain/agents'; import * as dotenv from 'dotenv'; // Load .env dotenv.config(); // Declare model const model = new OpenAI({ temperature: 0 }); // Declare tools const tools = [ // Google search api new SerpAPI(process.env.SERPAPI_API_KEY, { hl: 'en', gl: 'us', }), new Calculator() ]; // Create agent const executor = await initializeAgentExecutorWithOptions(tools, model, { agentType: "zero-shot-react-description", verbose: true, // debugging feature tracing all intermediate steps }); // Execute agent const res = await executor.call({ input: "prompt", })
Conclusion
This first article provides a very schematic overview of the working concepts of Langchain. In the following articles, I will delve into specific cases that make the most of the many tools made available by this framework.

I am building an SFFPC

Cem Soyding — Sun, 05 Nov 2023 12:43:39 GMT

A Small Form Factor PC, or SFFPC, is a compact computer system designed with a significantly smaller volume than a standard ATX tower. To give you a perspective, SFFPCs are often compared to shoeboxes, with a volume of approximately 10 liters. There is an even smaller category known as Ultra Small Form Factor, represented by devices like NUCs and HP Elite, which utilize low-power components commonly found in laptops. However, our focus here lies on the category just above this, as we aim to maximize the use of standard desktop components within a minimized enclosure.
At first glance, you might think this is a straightforward endeavor, but in reality, it comes with numerous challenges. The limited volume of the enclosure introduces significant constraints, affecting the temperatures during operation. Therefore, it becomes crucial to select an appropriate cooling solution tailored to both your CPU and GPU, as well as the form factor of your case. Not everything will fit, and this also applies to other components like the graphics card, whose dimensions increase with each generation, thus requiring a delicate balancing act.
Another crucial consideration is noise. While it might not be a top priority for gamers who play with headphones on, individuals utilizing the computer for resource-intensive tasks such as 3D rendering or video editing prefer a silent PC. However, cooling solutions can often be noisy, leading to yet another decision to be made.
It's worth reiterating that temperature is the arch-nemesis of performance in a PC, and the goal here is to achieve maximum performance. As you gain a better understanding of the challenges of this PC form factor, you'll need to skillfully select your components to strike the right balance among volume, temperature, performance, and noise.
Additionally, there's the cost factor to consider, as building an SFFPC typically comes at a higher price.
At this juncture, you should be in a position to choose your path:
If you lean towards getting the most performance at the lowest cost and aren't bothered by the size of the PC, then sticking with ATX is the way to go.
However, if you have a penchant for challenges and value the compact size of your PC, welcome to my first guide, which aims to assist you in choosing your components.
Processor
TDP
The Thermal Design Power (TDP), expressed in watts, serves as an indicator of a processor's heat output, distinct from its actual power consumption. This value plays a pivotal role in the selection of an appropriate cooling solution for your system. Going beyond a processor's designated TDP can result in thermal throttling, a process where the CPU's frequency is deliberately lowered to avert overheating. Operating electronic components at elevated temperatures not only compromises their performance but can also induce anomalies, failures, and even permanent damage. The TDP figure is influenced by a combination of factors, encompassing the process node, number of transistors, cores, voltage, cache size, and the presence and utilization of an integrated GPU. Careful consideration of these variables is essential to ensure your processor functions optimally while maintaining safe thermal conditions.
Manufacturer : Intel vs AMD
When it comes to CPU manufacturers, the two main players are AMD and Intel. Intel is often favored for its superior performance and overall value for money, making it an attractive choice for many users. However, it's essential to note that Intel processors typically exhibit higher power consumption, which can pose challenges for Small Form Factor PCs (SFFPCs) unless equipped with expensive cooling solutions. In the realm of SFFPCs, where power efficiency is of paramount importance, AMD emerges as a more favorable alternative. Notably, there are several intriguing SFFPC processors on the market, including the i5-13600K, Ryzen 7-7700X, and, particularly for gaming enthusiasts, the Ryzen 7-5800X3D, each offering a unique blend of performance and efficiency tailored to the demands of compact computing.
Cache
The CPU cache is a vital component that enhances program execution speed. Acting as a high-speed, short-access memory, the cache stores frequently accessed data, reducing the CPU's reliance on accessing data from the slower system RAM. What sets the cache apart is its remarkable speed; cache access times are notably faster than those of RAM, with various cache levels offering different access times. In resource-intensive tasks like gaming, the cache's size becomes of paramount importance. A larger cache serves to significantly reduce the CPU's need to access the system's RAM, resulting in smoother, more responsive performance, ultimately making it an indispensable asset for demanding computing endeavors.
Socket
The CPU socket serves as the physical interface connecting your CPU to the motherboard. It plays a pivotal role in ensuring compatibility between your selected processor and motherboard. Different CPUs are designed to fit specific socket types, so matching them correctly is crucial. For example, the Ryzen 7-7700X utilizes the AM5 socket, the Ryzen 5-5800X is compatible with the AM4 socket, and the i5-13600K pairs with the LGA1700 socket. This careful alignment of CPU and socket is essential.
RAM compatibility
Matching your RAM to your CPU is a critical consideration, as RAM size and frequency compatibility can vary. Adhering to the manufacturer's specified limits is essential to ensure optimal performance and system stability. For instance, the Ryzen 7-7700X supports a maximum of DDR5-5200 RAM and the Ryzen 5-5800X is compatible with up to DDR4-3200. Understanding and adhering to these limits ensures your CPU and RAM work seamlessly together to deliver the best possible performance for your specific computing needs.
Overclocking
While the prospect of overclocking, which entails boosting a CPU's clock frequency, might be enticing for some, it contradicts the fundamental principles of Small Form Factor PCs (SFFPCs). Overclocking typically demands a more robust cooling solution and a larger case to manage the increased heat generated. It's important to note that not all CPUs are designed for overclocking. In Intel's lineup, models intended for overclocking are labeled with a "K" suffix, signifying their unlocked potential. On the other hand, all AMD Ryzen CPUs support overclocking, providing users with the flexibility to enhance performance within the parameters of their SFFPC build, although it should be approached with caution, keeping thermals and case constraints in mind.
Motherboard
When it comes to selecting a motherboard for your SFFPC build, several key considerations can significantly impact your system's functionality. Once you've determined the appropriate CPU socket for your build, the next step is to find a motherboard in the ITX form factor. Here are some crucial aspects to bear in mind during the selection process.
RAM support
ITX motherboards have specific limitations, particularly concerning RAM compatibility. Ensure that your chosen motherboard supports the desired RAM type, whether it be DDR5 or DDR4. If your CPU supports DDR5, and your budget allows, opting for this newer standard is often advantageous.
BIOS Flashback
A valuable feature to look for in a motherboard is the capability to perform a BIOS flashback. This functionality allows you to update or reflash the BIOS without having installed RAM or a CPU. It's exceptionally convenient for testing new features or accommodating compatibility with new processors, simplifying the upgrade process.
Connectivity
Pay close attention to the available connectivity options, as ITX motherboards often have limited space for ports and slots. Your preferences matter here. Whether you prioritize multiple USB-A ports over USB-C or require a 7.1 audio setup, thoroughly examine the motherboard's specifications to ensure it aligns with your connectivity needs.
M.2 PCIe slots
ITX motherboards typically feature at least one M.2 PCIe slot for the insertion of M.2 SSDs. These drives are not only compact but also offer high performance. With two M.2 slots, you can dedicate one for booting and the other for data storage, optimizing your storage configuration.
PCIe slots
Most ITX motherboards come equipped with a single PCIe slot, which is typically used for the graphics card. However, verify the available PCIe version. The communication speed is notably enhanced with PCIe 4 compared to PCIe 3, provided that both your graphics card and CPU support this standard. It's worth noting that some motherboards may support both versions and can be configured in the BIOS accordingly.
Wifi 6
With Wi-Fi 6 becoming a standard feature, it's almost expected on modern motherboards. Ensure that your chosen ITX motherboard includes Wi-Fi 6 support, as it offers improved wireless connectivity and performance, ensuring a more seamless online experience for your SFFPC.
Graphic card
Are you a gamer? If not, there's no need to chase after large, expensive, power-hungry graphics cards. Instead, consider a CPU with integrated graphics (often referred to as an APU in the case of AMD) or an entry-level graphics card.
For gamers, the current landscape offers a challenging scenario. Graphics cards have soared to exorbitant prices, making it necessary to allocate at least $800 for something decent and potentially up to $1200 for a high-end card.
The issue doesn't end there. Graphics card sizes and power consumption are on the rise, requiring careful consideration when selecting your case. If you opt for a minimalist design to maximize space-saving, cooling becomes a significant challenge. Adequate space is necessary for proper airflow or for accommodating cooling solutions, such as liquid cooling.
Another critical factor to keep in mind with high-end graphics cards is their capacity to run games in 4K at high frame rates. Before diving into the world of 4K gaming, ask yourself the following questions:
Do you have a monitor capable of handling this resolution and high frame rates?
Does your motherboard offer the necessary connectivity to utilize these capabilities? A DisplayPort 1.4 port, for instance, allows you to achieve 4K at 120 or 144Hz, while an HDMI port typically limits you to 60Hz.
Ultimately, the choice is yours and should align with your personal preferences and budget. It's essential to be honest with yourself about what you truly need from your SFFPC. The allure of an SFFPC lies in the balance between case size and machine power. If you're seeking excessive power, it might be more practical to opt for an ATX build, which would save you a lot of potential headaches in your pursuit of high-end performance.
RAM
Selecting the appropriate RAM for your Small Form Factor PC (SFFPC) is a crucial step in tailoring your system's performance to your needs. Here are some key considerations to guide your RAM selection.
Number of RAM Slots
The number of available RAM slots on your motherboard, as well as their individual capacities, plays a vital role in determining the optimal RAM configuration for your SFFPC. This directly affects your system's total memory capacity.
16GB as a Starting Point
As a starting point, 16GB of RAM is a solid choice for most SFFPC builds. It strikes a balance between performance and cost-effectiveness. However, it's essential to consider the maximum RAM frequency supported by your motherboard. If the motherboard specifies frequencies with an "(o.c)" notation, it means that the default RAM frequency may be lower than the memory module's maximum capabilities. In such cases, you may need to overclock your RAM from the BIOS to unlock its full potential. We'll explore the overclocking process in more detail shortly.
RGB or Non-RGB
The inclusion of RGB (colorful LED lighting) on your RAM modules is a matter of personal customization. If you enjoy the aesthetic appeal and wish to add a touch of personal style to your SFFPC, RGB RAM modules can be a fun choice. Prices for RGB and non-RGB RAM modules are typically similar, so this decision ultimately boils down to your personal preferences and whether you prefer the vibrant look or a more understated design for your system.
By thoughtfully considering these factors, you can ensure that your RAM selection aligns with the specific needs and objectives of your SFFPC build, ultimately contributing to a well-balanced and customized computing experience.
Power supply
Choosing the appropriate power supply unit (PSU) is a critical step in your Small Form Factor PC (SFFPC) build. Here are essential considerations to guide your PSU selection
Calculate Your System's Power Consumption
Once your system configuration is determined, you have the option to calculate the maximum power your system will consume. Fortunately, there are convenient tools available for this purpose, such as the Newegg Power Supply Calculator, where you simply input your build's components to obtain the power consumption estimate. For example, a setup featuring a Ryzen 7 7700X, a GeForce RTX 3070Ti graphics card, and 16GB of RAM may reach a consumption level of around 700 watts. In this scenario, opting for a 750W or 800W PSU would be advisable to ensure sufficient power for your system.
Safe bet : Corsair SF750
A highly regarded PSU for SFFPCs is the Corsair SF750. Priced at just a little over $150 and boasting an 80 Plus Gold certification, this PSU offers reliability, low noise operation, and minimal heat generation, making it an excellent fit for SFFPCs. The SF750 is known for its compact form factor, ideal for smaller cases, and delivers the power you need without compromising on efficiency or reliability.
By thoughtfully considering these factors and performing a power consumption calculation, you can ensure your PSU selection aligns with the specific requirements of your SFFPC build, providing the necessary power for your components while maintaining efficiency and reliability.
Cooling Systems
Effective cooling is a crucial consideration. Here is a brief overview of the most common cooling systems.
Air Cooling
Air cooling relies on large heatsinks and fans to dissipate heat from your components. While it's cost-effective and readily available, it can be relatively bulky and might generate more noise compared to other cooling options.
AIO (All-In-One) Liquid Cooling
AIO cooling systems combine elements of both air and liquid cooling. They consist of a fluid circuit with a radiator that features one, two, or even three fans. AIO coolers are known for their excellent efficiency, requiring minimal maintenance. Over the years, their reliability has significantly improved. Although they are pricier than air coolers, their cost-to-performance ratio is compelling. A 240mm AIO cooler, ideal for SFFPCs, typically costs around $100. If it fits in your case, it's a solid choice.
Custom Liquid Cooling Loop
For the DIY enthusiasts with deep pockets, custom liquid cooling loops offer an irresistible aesthetic. They allow for personalization, letting you choose the liquid color to match your preferences. However, these systems can be extremely expensive, with costs easily adding up for tubing, fittings, reservoirs, and pumps, often reaching around $800 or more. Furthermore, due to their complexity, custom liquid cooling systems are more susceptible to issues like leaks and malfunctions. Nevertheless, water cooling remains the most efficient cooling solution, capable of adapting to your graphics card, delivering exceptional silence and outstanding performance—when it's working as intended.
Each cooling system has its advantages and drawbacks, making it essential to consider your priorities and budget when selecting the right cooling solution for your SFFPC build.
Cable Management
Finally, let's address the issue of cables. Power supply units come with relatively long cables designed to accommodate a wide range of PC configurations. While this versatility is beneficial, it may not be the best fit for your specific SFFPC build. Consequently, you'll be left with a multitude of cables to manage neatly, adding another layer to the challenges of building an SFFPC.
Cable management will improve the aesthetics and air flow of your build
Fortunately, some online stores offer custom-made cables tailored to specific cases or requirements. These cables can be customized in terms of color, and some even support RGB lighting, allowing you to further personalize your build. However, this level of customization comes at a price. Some custom cables can cost up to $50 each, and you'll likely need at least three or four to ensure your SFFPC looks both clean and organized.
Custom cables can make a huge difference
Efficient cable management is a vital aspect of your SFFPC build, as it not only enhances the aesthetics of your system but also aids in optimizing airflow and cooling. So, while it may add an extra expense, it's an investment that can greatly improve the overall functionality and appearance of your compact powerhouse.
Conclusion
Picking the right components takes time and you should take it if you want to complete and enjoy the sffpc of your dreams.
In my next article, I'll address the selection of the case which should naturally come at the end of the selection process to be sure that everything fits in with ideal thermal conditions.

Javascript: advanced

Cem Soyding — Thu, 02 Nov 2023 08:40:32 GMT

This is already my 10th article about javascript's programming syntax. Today, I'm stepping into some of the advanced features that appeared with ES6+ revisions. Read it carefully since many of these concepts are fundamental if you're planning to learn React for instance.
The following features appeared with latest javascript revisions (ES6 and beyond).
Template literal string
This operator is similar to $"" in C# as it allows you to create interpolated strings.
The syntax is a bit different here as show below.
const car = { model: 'Toledo', vendor: 'Seat' }; // Use ${} inside back ticks to interpolate data console.log(`${car.vendor} ${car.model}`); // Seat Toledo
Destructuring
Unpacks values from arrays or objects into distinct variables.
// Array destructuring let [x, y] = [24, -5]; console.log(x, y); // 24 -5 [x, y] = [8, 6, 8]; // remaining items are ignored console.log(x, y); // 8 6 // Works on any iterable let [pair1, pair2] = new Map([ ['H', 'Hydrogen'], ['O', 'Oxygen'], ]); console.log(pair1, pair2); // ['H', 'Hydrogen'], ['O', 'Oxygen'] // Object destructuring (since ES2018) const person = { name: 'Oliver', age: 25 }; let { name, age } = person; console.log(name, age); // 'Oliver' 25 person.age = 24; // has no effect on destructured items console.log(name, age); // 'Oliver' 25
Important: when using object destructuring, keep in mind that you're collection the properties of an input object. So the variables names used on left-hand necessarily point to a property with the same name. You can use : to specify the target variable if you want to use a different name.
You can use 2 sytaxes : binding pattern and assignment pattern.
const car = { vendor: 'Fiat', model: 'Punto', mileage: 14578 }; // binding pattern requires 'var', 'let', or 'const' // 'mileage' receives the value const { mileage } = car; let carProperties = []; // assignment pattern requires parenthesis // left hand declares the target of assignment thanks to ':' ({ vendor: carProperties[0], model: carProperties[1] } = car); console.log(carProperties); // ['Fiat', 'Punto']
Finally, note that a destructured property can have a default value, used if input value is undefined or absent.
const [x = 0] = []; // x = 0 const {x = 0, y = 1} = { x: undefined, y: null }; // x = 0, y = null
Rest operator
Use rest operator (...rest) to end destructuring and collect all remaining properties of an object.
const [a, b, ...remaining] = [24, -5, 8, 6, 8]; console.log(a, b, remaining); // 24 -5 [8, 6, 8] // You can also use binding pattern as the rest property // don't forget that you destructure input object, so here you read the length // property of input array, to use it later in a new const with the same name const [x, y, ...{ length }] = [24, -5, 8, 6, 8]; console.log(x, y, length); // 24 -5 1
Spread operator
Syntactically similar to Rest operator, Spread syntax can be used to expand elements from an object or an array into a new array or object.
const firstCounts = [0,1,2]; const allCounts = [...firstCounts,3,4,5]; console.log(allCounts); // [0,1,2,3,4,5] // Handy when passing arguments to a method const dateFields = [1970, 0, 1]; // 1 Jan 1970 const d = new Date(...dateFields); // You can also use it to copy an arra let copy = [...firstCounts]; // same as firstCounts.slice() // It works with objects as well. Here, we merge two objects const engine = { power: '120hp', cylinders: 8 }; const design = { doors: 5, length: '9ft', width: '4ft' }; const car = { ...engine, ...design };
Object literal improvements
For reminder, object literals let you create an object on the fly, without the class keyword.
var car = { fuel: 'SP95', model: '208', vendor: 'Peugeot', mileage: 125478, printMileage: function() { console.log(mileage); } };
ES6 improved these declarations in many ways:
// initialization from variables // no need to write repetitive things like 'a: a, b: b' const a = 3, b = 'Notre Dame'; const myObject = { a // same as a:a b // same as b:b } // shortened method definition const robot { // same as 'moveLeft: function(d) {}' in ES5 moveLeft(d) { /* code */ }, // or arrow syntax // same as 'moveRight: function(d) {}' in ES5 moveRight: (d) => /* code */ }
Null coalescing operator
Similar to C# but here, the ?? operator also works with undefined.
let a = null ?? "default"; let b = undefined ?? "value"; console.log(a, b); // default value
Null coalescing assignment
With almost the same syntax, you can set the value of a variable if it is null or undefined
let b = null; let a ??= "default"; let b ??= "value"; console.log(a, b); // default value
Optional chaining
Similar to C# but returns undefined instead of null.
const obj = { name: 'John', house: { address : '45 johnson street', city: 'Malibu' }, dog : null, }; console.log(obj.house.garage?.surface); // undefined console.log(obj.dog?.name); // undefined
Symbol
Symbols solves an issue that appeared with the flexibility of javascript, ahich allows you to add keys into your objects from all over the place.
At some point, one might override an existing key by redefining it again which would obvisouly introduce issues in code.
A Symbol is a new type of primitive in ES6 and its purpose is to create unique keys that you can then use to in your object. In a sense, it comes close to an enum value with a unique reference.
// Consider the following object const jet {}; jet["company"] = 'Js arilines'; console.log(jet); // { company: 'Js arilines'} // Anyone can alter existing key in the codebase jet["company"] = 'Airbus'; console.log(jet); // { company: 'Airbus'} // To prevent this type of accident, use Symbols // A symbol can be declare with Symbol() with an optional // input description that you can reuse later to provide context // The description does not identify the symbol, it it is purely informative let company = Symbol("The airline company"); // Now you can add this as a key in the object jet[company] = 'Js airline'; console.log(jet); // { company: 'Airbus', [Symbol(The airline company)]: 'Js airline'} // Now you can only access the property you created with THE symbol console.log(jet[company]); console.log(jet[Symbol("The airline company")]); // undefined // Here is another example const color = {}; let red = Symbol('R'); let green = Symbol('G'); let blue = Symbol('B'); color[red] = 145; color[green] = 0; color[blue] = 60; // unless you have access to 'red', 'green', 'blue', // you can't edit color[red], color[green] and color[blue]

Javascript: modules

Cem Soyding — Tue, 31 Oct 2023 12:56:53 GMT

8th article in my exploratory work on javascript and this time I sched light on javascript modules system.
Javascript modules let you to break up your code into separate files.
By default, the code written in a js file is not exported.
Explicit export keywords should be used to export variables or functions and transform your javascript file into a javascript module.
// The following consts are visible to all other javascript code since // they're declared in the global space export const name = "Ben"; export const age = 12;
It is also possible to declare a default export as shown below:
function foo() { ... } // Only 1 default export is allowed per file export default foo;
The difference is in how the module is used in other js files:
import { name, age } from "person.js"; // several exports import foo from "person.js"; // default export
Note: import is only allowed for scripts declared with type="module"
Legacy module systems
This is where it gets confusing.
Since javascript did not initially have any standardized module system, the community created many of them :

Name Description Code example

CJS CommonJS, defined for back-end code. Export: module.exports = function sendEmail{ ... } Import: const myModule = require('./sendEmail.js'). When you import a module, you synchronously get a copy of the module

AMD Asynchronous Module Definition, defined for front-end code. Import: define(function(require) { var sendEmail = require('./sendEmail.js); return function() { /* do something */ }}). The syntax is less intuitive. Here, the import is done asynchronously.

UMD Universal Module Definition, works on front and back ends. UMD is a pattern used to configure several module systems. It is actually some code that'll check which module system is in use and adapt the import. if(typeof define === "function" && define.amd) { /* AMD */} else if(typeof exports == "object") { /* UMD */} ...

Luckily, ES6 introduced a standard called ESM (for ES Modules) and this is what we will focus on. The code examples given in the first section are leveraging ESM :
import { units, convertUnit } from './physics';
export const units = ["Meter", "Centimeter", "Inch"]; export function convertUnit(input { // ... });
Note: Node.js uses CJS by default but there several ways of enabling ESM as described here
npm
npm is the module management utility in Node.js. You can use it to install 3rd party modules with a very simple syntax:
npm i
Tree-shaking
There are several ways of importing code with ESM:
// Import a default export called 'alpha' in module.js import alpha from "./module.js"; // Import all exports from a module import * as services from "./services.js"; // Import some exports from a module (with or without an alias) import { getVersion, getWindowHeight as getHeight } from "./services.js"; // Import none but execute the global code of a js file import "./setContext.js"; // Use import as an async function let module = await import("./hotcoffee.js"); // or import("./hotcoffee.js").then((module) => { // Do something }); // Usages console.log(alpha()); console.log(services.printVersion()); console.log(getVersion()); console.log(getHeight());
One thing that you should keep in mind: javascript is an expensive resource. It has to be decompressed, parsed, compiled and executed. As a consequence a common technique applied by developers, called code splitting, consists in splitting your code into small chunks which only contain the required code for a route or a component. It reduces the overall memory footprint and the execution time. Although efficient, it is complicated to apply in big codebases and this is where tree shaking helps.
Tree shaking is a good practice forcing you to only pick the exports you need instead of importing the whole file. It basically says:
Do this: import {a, b, c} from "./devices.js;
Instead of this: import * as devices from "./devices.js
Module bundlers do that out of the box.
Module bundlers
Nowadays, you don't manually include your js dependencies in your html files. Instead, you bundle them into a static file that you can load with a single line of code.
A bundler is a tool that combines multiple javascript files into a single one for production.
In the dependency resolution phase, the bundler scans all of your dependencies (and their dependencies) to build a dependency graph. This graph is then used to get rid of unused files, prevent naming conflicts, etc ...
Then the bundling starts in a phase known as packing where the dependency graph is leveraged to integrate the code files, inject required functions and return a single executable bundle that can be loaded by your browser. Things like code splitting or tree-shaking are often applied during the process.
Popular bundlers
There are several bundlers out there such as Webpack, parcel or rollup. They usually require a config file where you specify the main js file (i.e. root of your dependency graph) and the name of the output file (ex: bundle.js).
Ex: Rollup
To use Rollup in your app, start by adding the package
npm i rollup
Then add some configuration:
export default { input: 'src/main.js', output: { file: 'bundle.js', format: 'cjs' } }
Relative vs Absolute paths
As a closing note, I'd like to emphasize that you should, as much as possible, avoid relative paths when importing your modules. Relative paths can quickly become difficult to read when reaching a distant js file (i.e. ..\..\components\myModule.js). You should prefer using absolute paths to improve the overall readability (i.e. components\myModule.js).
You will start by configuring your environment to define the root path. Here are the common options:
Webpack:
// webpack.config.json resolve: { alias: { components: path.resolve(__dirname, 'src/') } }
React:
// jsconfig.json { "compilerOptions": { "baseUrl": "src" } }
Typescript
// tsconfig.json { "compilerOptions": { "baseUrl": "src/", } }
then you can use remove the root path from your import paths:
import { engine } from "components/services.js";

Blazor : how to use OpenCV in a component

Cem Soyding — Mon, 30 Oct 2023 15:39:00 GMT

Since v3.3.1, OpenCV is available for javascript. It is actually built from LLVM (c++) binaries thanks to emscripten. The releases are available here.
Script size
If you look at the size of the different versions of opencv.js, you'll see that it ranges from ~4Mb to 9Mb for v4.8.0. Depending on what you're trying to achieve, picking a version that covers your need for a minimal size is imo the recommended approach. However if you don't care about memory usage or loading times, then go for the latest stable version.
Recompiling the library
You always have the option to recompile the script by disabling the modules that you don't need which could cut the size in half (especially by disabling -DBUILD_opencv_dnn). It could be a good compromise between having the latest version but limited to your application's need.
Precautions:
At this day you can't build opencv.js from a Windows environment (unless you use a linux distro in WSL)
In my experience, the built image had a flaw, well explained here. My js component wouldn't work with the compiled file whereas it worked fine with the official release. Didn't dig deeper into this issue, but if you have weird errors like right-hand side of 'instanceof' is not an object, consider trying with the official script.
The recompiling steps are documented in official documentation. I had no trouble to build it, just used the following command instead of the one provided in docs (from opencv repo's root directory):
python platforms/js/build_js.py build_out --emscripten_dir ../emsdk/upstream/emscripten --build_wasm --clean_build_dir
Adding it to Blazor
Statically
If you read the docs, you simply need to add the following lines in your index.html file to start using OpenCV in your javascript modules:
Note: This example supposes that your opencv.js file is under wwwroot in your component's project.
And well, here start the troubles. The following error messages will occasionnally happen when you start your software:
TypeError: Failed to execute 'compile' on 'WebAssembly': Cannot compile WebAssembly.Module from an already read Response
Module.ready couldn't be redefined
For someone new to webassmbly and Blazor, these errors are really not helpful. After reading a bit on emscripten and after several dry attempts to find a solution online, here is what I finally did to make it work. Open your opencv.js file and replace the last lines as shown below:
if (typeof Module === 'undefined') Module = {}; return cv(Module); }));
with
if (typeof OpenCvModule === 'undefined') OpenCvModule = {}; return cv(OpenCvModule); }));
My understanding is that emscripten creates a Module variable in the global space by default when compiling a js file. Since _framework/blazor.webassembly.js also defines Module, the runtime complains. Renaming the variable fixes the issue. There is probably a cleaner way of resolving this issue and I'll update this article accordingly when I get more familiar with emscripten and webassembly in general.
Dynamically
If you only want to load opencv when needed, you need to load it dynamically from javascript. Copy paste the following function in your typescript class (or convert it to a function) :
private initOpenCv() { if (typeof cv === 'undefined') { // OpenCV.js not loaded yet, load it asynchronously let script = document.createElement('script'); script.setAttribute('async', ''); script.setAttribute('type', 'text/javascript'); script.addEventListener('load', async () => { // Checking the loading of the buildInformation if (cv instanceof Promise) { cv = await cv; console.info("OpenCv ready"); console.log(cv.getBuildInformation()); this._isOpenCvRuntimeReady = true; } else if (cv != 'undefined' && cv.getBuildInformation) { console.info("OpenCv ready"); console.log(cv.getBuildInformation()); } else { // Web Assembly check cv['onRuntimeInitialized'] = () => { console.info("OpenCv ready"); console.log(cv.getBuildInformation()); this._isOpenCvRuntimeReady = true; } } }); script.addEventListener('error', () => { console.error('Failed to load opencv'); }); script.src = '_content/MyComp/opencv.js'; let node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(script, node); } else { console.info("OpenCv already loaded"); this._isOpenCvRuntimeReady = true; } }
This script basically modifies the DOM to add the

Component	Description
Model I/O	The minimal chain will always consist of input text (or prompt), an LLM, and output text (response). This component provides tools to format the prompt by integrating parameters, examples, etc. (`PromptTemplate`), to select from available models (`LLM`, `ChatModel`), and to extract useful information from the returned response (`OutputParser`).
Data connection	This set of tools is intended for customizing your model by injecting third-party data. You can load documents (`DocumentLoader`), break them into smaller chunks for LLMs (document transformers), convert them into a format understandable by LLMs (`Embedding`), store them (`VectorStore`), and finally query them for information retrieval (`Retrievers`).
Chains	Chaining multiple components (including other chains) is possible with this library. Ready-to-use chains are also available.
Memory	Memory typically serves to retain the conversation state so that each new message is not interpreted out of context.
Callbacks	As the name suggests, this component allows attaching intermediate logic in the execution of your chains.

Name	Description	Code example
`CJS`	CommonJS, defined for back-end code.	Export: `module.exports = function sendEmail{ ... }` Import: `const myModule = require('./sendEmail.js')`. When you import a module, you synchronously get a copy of the module
`AMD`	Asynchronous Module Definition, defined for front-end code.	Import: `define(function(require) { var sendEmail = require('./sendEmail.js); return function() { /* do something */ }})`. The syntax is less intuitive. Here, the import is done asynchronously.
`UMD`	Universal Module Definition, works on front and back ends. UMD is a pattern used to configure several module systems. It is actually some code that'll check which module system is in use and adapt the import.	`if(typeof define === "function" && define.amd) { /* AMD /} else if(typeof exports == "object") { / UMD */} ...`