luillyfe

export function todosLoader(queryClient: QueryClient) {
  return async function (): Promise<{ todos: Task[] }> {
    const { queryKey, queryFn } = todosQuery();

    // It does the trick for returning any data we have in the cache, even if it's stale.
    // If the query does not exist, queryClient.fetchQuery will be called and its results returned.
    const todos = (await queryClient.ensureQueryData({
      queryKey,
      queryFn,
    })) as Task[];

luillyfe

function formingMagicSquare(s) {
   const magicSquares = getMagicSquares(3)
   const distances = getDistances(magicSquares, s)
   
   return distances.sort((a,b) => a-b)[0]
}

function getDistances(magicSquares, square) {
    return Object.keys(magicSquares).reduce((distances, key) => {
        distances.push(getDistance(magicSquares[key], square))

luillyfe

<mat-grid-list cols="1" rowHeight="16:1">
    {{ todos | map }}
</mat-grid-list>

luillyfe

template: `
    <mat-grid-list cols="1" rowHeight="16:1">
      <mat-grid-tile *ngFor="let todo of todos">
        {{ todo.text }}
      </mat-grid-tile>
    </mat-grid-list>
  `,

luillyfe

...
template: `
    <mat-grid-list cols="1" rowHeight="16:1">
      {{
        todos.map(todo => <mat-grid-tile [id]="todo.id">{{todo.text}}</mat-grid-tile>)
      }}
    </mat-grid-list>
  `,
...

luillyfe

resources:
- type: virtual machine
  name: my virtual machine
  properties:
    zone: close to me
    machineType: F1_MICRO
    disks:
       ...
    networkInterfaces:
       ...

luillyfe

pokemons.map(async ({ pokemon }) => {
  const url = await getPokemon(pokemon.url);
  return (
    <Suspense fallback={<h1>Loading pokemons...</h1>}>
      <GridListTile key={pokemon.name} cols={1}>
        <img src={url} alt={pokemon.name} />
      </GridListTile>
    </Suspense>
  );
})

luillyfe

<GridList cellHeight={160} className={classes.gridList} cols={3}>
  {pokemons ? (
    pokemons.map(async ({ pokemon }) => {
      const url = await getPokemon(pokemon.url);
      return (
        <GridListTile key={pokemon.name} cols={1}>
          <img src={url} alt={pokemon.name} />
        </GridListTile>
      );
    })

luillyfe

<form class="mx-3">
    
    <div class="form-group">
      <label for="email">Email address</label>
      <input [ngModel]="email" (ngModelChange)="emailHandler($event)" 
             name="email" type="email" class="form-control" id="email" 
             aria-describedby="email" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    

luillyfe

  <form class="mx-3">
    <div class="form-group">
      ...
      <input name="email"
        type="email" class="form-control" id="email" 
        aria-describedby="email" placeholder="Enter email">
          
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    ...