helabenkhalfallah

// https://codesandbox.io/p/sandbox/mystifying-goldberg-7n73cn?file=%2Fpublic%2Findex.html%3A7%2C28
awesome-project/
├── src/
│   ├── components/
│   │   ├── Button.svelte
│   │   └── Header.svelte
│   ├── routes/
│   │   ├── Home.svelte
│   │   └── About.svelte
│   ├── App.svelte

helabenkhalfallah

<script>
  import { afterUpdate, beforeUpdate, onDestroy, onMount, tick } from 'svelte';

  onMount(() => {
    console.log('the component has mounted');
  });

  beforeUpdate(() => {
    console.log('the component is about to update');
  });

helabenkhalfallah

<!-- CustomButton.svelte -->

<button on:click> Click me </button>

<style>
 button {
  height: 4rem;
  width: 8rem;
  background-color: #aaa;
  border-color: #f1c40f;

helabenkhalfallah

/* Select the 2nd child. */
:nth-child(2)

/* Select all even children (2nd, 4th, 6th, 8th, and so on). */
:nth-child(2n)

/* Select all odd children (1st, 3rd, 5th, 7th, and so on). */
:nth-child(2n+1)

/* Select the 1st (=(5×0)+1), 6th (=(5×1)+1), 11th (=(5×2)+1), … child. */

helabenkhalfallah

// Syntax: <target>:has(<condition>) { <styles> }

/* Select the .card element when it 
   contains a <figure> immediately
   followed by a paragraph. */
.card:has(figure + p) {
  flex-direction: row;
}

/* Selects an h1 heading with a

helabenkhalfallah

.hero-image {
  height: 100dvh; /* Height will adapt to the address bar's appearance */
}

.sticky-footer {
  height: 100svh; /* Remains visible and consistent */
}

.fullscreen-gallery {
  height: 100lvh; /* Utilizes the entire screen, no UI */

helabenkhalfallah

@container (max-width: 500px) {
    /* Normal css styles can go here */
}
@container (min-width: 500px) {
    /* Normal css styles can go here */
}
@container (width > 500px) {
    /* Normal css styles can go here */
}
@container (width >= 500px) {

helabenkhalfallah

.card-container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  border: 1px solid #ccc;
  padding: 1rem;

helabenkhalfallah

<div class="card-container">
   <div class="card">
      <div class="card-header">
         <img
            src="https://img.freepik.com/premium-photo/retro-video-game-console-gaming-background_670382-215491.jpg?w=400"
            alt="Game image"
            />
      </div>
      <div class="card-body">
         <strong>World Impact</strong>

helabenkhalfallah

class BTree {
  constructor(order) {
    /** @type {number} */
    this.order = order;
    /** 
     * Root node of the tree.
     * @type {BTreeNode} 
    */
    this.root = null;
  }