max-lt

Not all random values are created equal - for security-related code, you need a specific kind of random value.

A summary of this article, if you don't want to read the entire thing:

• Don't use Math.random(). There are extremely few cases where Math.random() is the right answer. Don't use it, unless you've read this entire article, and determined that it's necessary for your case.
• Don't use crypto.getRandomBytes directly. While it's a CSPRNG, it's easy to bias the result when 'transforming' it, such that the output becomes more predictable.
• If you want to generate random tokens or API keys: Use uuid, specifically the uuid.v4() method. Avoid node-uuid - it's not the same package, and doesn't produce reliably secure random values.
• If you want to generate random numbers in a range: Use random-number-csprng.

You should seriously consider reading the entire article, though - it's

max-lt

import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter, map } from 'rxjs/operators';

import { logger } from '~/logger';
import { Config } from '~/config';

const log = logger.getLogger('AnalyticsService');

// Global variables used by piano analytics

max-lt

<!-- Pagination -->

<ul class="pagination">
  <li class="page-item">
    <button class="page-link" (click)="goPrevious()" [disabled]="0 === current">Previous</button>
  </li>
  <li class="page-item" *ngFor="let n of nums;">
    <button class="page-link" (click)="goPage(n)" [disabled]="n - 1 === current || n === '...'">{{ n }}</button>
  </li>
  <li class="page-item">

max-lt

import { Directive, ElementRef, HostListener, Input, OnInit, Renderer2 as Renderer } from '@angular/core';

@Directive({ selector: '[tooltip]' })
export class TooltipDirective implements OnInit {
  private tooltip!: HTMLElement;

  @Input('tooltip')
  content!: string;

  @Input()

max-lt

<ng-template #logo>
  <a href="#" class="flex items-center">
    <img src="/favicon.ico" class="mr-3 h-8" alt="AppName Logo" />
    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">AppName</span>
  </a>
</ng-template>

<ng-template #lorem_ipsum>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

max-lt

Setup a Vite/React/Tailwind project

Setup your Vite/React app

See https://vitejs.dev/guide/#scaffolding-your-first-vite-project

npm create vite@latest
# name      > {project-name}
# framework > React

max-lt

/// <reference lib="webworker" />
/// <reference lib="es2017" />

declare const env: {
  GITHUB_SECRET: string;
};

if (!env.GITHUB_SECRET) {
  throw new Error("Invalid or missing GITHUB_SECRET");
}

max-lt

import { AbstractControl, ValidationErrors } from '@angular/forms';

const luhnArr = [0, 2, 4, 6, 8, 1, 3, 5, 7, 9];

// https://portal.hardis-group.com/pages/viewpage.action?pageId=120357227
export function checkSIRET(control: AbstractControl): ValidationErrors {
  if (!control.value) {
    return null;
  }

max-lt

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "none",
  "endOfLine": "lf",
  "arrowParens": "always",
  "printWidth": 120
}

max-lt

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Router, ActivatedRoute, Event, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap, shareReplay } from 'rxjs/operators';
import { IRouteData } from '~/app/interfaces/route-data';

@Injectable({ providedIn: 'root' })
export class RouterDataService {
  public readonly data$: Observable<IRouteData>;