De retour de Hambourg, avec le teint hâlé qui va bien. Le port est magnifique et le Fishmarkt est plein de surprises !
- Tweets11.5K
- Following202
- Followers101
- Likes3.2K
ALT TypeScript and Angular code in share-link.ts. Function pack(state) turns JSON.stringify(state) into a Blob stream, pipes it through new CompressionStream('deflate-raw'), reads the bytes with new Response(zipped).bytes() and returns bytes.toBase64({ alphabet: 'base64url', omitPadding: true }). Function unpack<T>(text) does the reverse with Uint8Array.fromBase64, DecompressionStream('deflate-raw') and new Response(unzipped).json(). Below, an Angular component Orders with a "Copy link" button. It has a state input (the ?state=... URL param), a resource with params: this.state and loader: unpack<View>(params), and view = linkedSignal(() => this.shared.value() ?? defaultView). Its share() method sets the 'state' URL param to await pack(this.view()) and copies the URL to the clipboard. The CompressionStream, toBase64 and state input lines are highlighted.
![Angular code in editor.ts. A component with selector 'app-editor', imports: [DatePipe], and host: { '(document:keydown.control.s)': 'save($event)', '(document:keydown.meta.s)': 'save($event)' }. The template: <textarea #area [value]="draft()" (input)="draft.set(area.value)"></textarea>, then @if (savedAt(); as time) { <small>Saved at {{ time | date: 'shortTime' }}</small> }. In class Editor: readonly draft = signal(localStorage.getItem('draft') ?? ''); readonly savedAt = signal<Date | null>(null). The method save(event: Event) calls event.preventDefault(), localStorage.setItem('draft', this.draft()) and this.savedAt.set(new Date()). The two host listener lines are highlighted.](https://pbs.twimg.com/media/HWb1rJ6W4AA3daC.jpg?name=orig)
ALT Angular code in editor.ts. A component with selector 'app-editor', imports: [DatePipe], and host: { '(document:keydown.control.s)': 'save($event)', '(document:keydown.meta.s)': 'save($event)' }. The template: <textarea #area [value]="draft()" (input)="draft.set(area.value)"></textarea>, then @if (savedAt(); as time) { <small>Saved at {{ time | date: 'shortTime' }}</small> }. In class Editor: readonly draft = signal(localStorage.getItem('draft') ?? ''); readonly savedAt = signal<Date | null>(null). The method save(event: Event) calls event.preventDefault(), localStorage.setItem('draft', this.draft()) and this.savedAt.set(new Date()). The two host listener lines are highlighted.
![JavaScript code in folder.js. A class Folder has a constructor(name, children = []) that stores this.name and this.children. It has a generator method *[Symbol.iterator]() (highlighted) that does yield this; then, for (const child of this.children), yield* child. Usage: const src = new Folder('src', [new Folder('app', [new Folder('pages')]), new Folder('assets')]). Then [...src].map((folder) => folder.name) gives ['src', 'app', 'pages', 'assets'].](https://pbs.twimg.com/media/HWR4fanWcAA5L0P.jpg?name=orig)
ALT JavaScript code in folder.js. A class Folder has a constructor(name, children = []) that stores this.name and this.children. It has a generator method *[Symbol.iterator]() (highlighted) that does yield this; then, for (const child of this.children), yield* child. Usage: const src = new Folder('src', [new Folder('app', [new Folder('pages')]), new Folder('assets')]). Then [...src].map((folder) => folder.name) gives ['src', 'app', 'pages', 'assets'].
