digitarald

{
    "github.copilot.chat.experimental.codeGeneration.useInstructionFiles": true,
    "github.copilot.chat.experimental.codeGeneration.instructions": [
        {
            "text": "Use concise one-liners when possible, but avoid sacrificing clarity for brevity."
        },
        {
            "text": "Comment any generated code that has complex logic, especially around asynchronous operations or state management."
        },
        {

digitarald

• Default to Server Components in app/, only using Client Components with 'use client' if they use hooks like useState or useRouter, or DOM interactions.
• Fetching data in Server Components: use fetch(), avoid useEffect.
• For TypeScript: Enforce interfaces and types for all props and state.
• Nest layout.tsx files for consistent UI across sections.
• For async operations: prefer async/await, add appropriate error handling and UI loading states.

digitarald

• Core Concepts:

  • FastHTML Basics: Framework for building fast, scalable web applications using pure Python. Integrates seamlessly with HTML, CSS, and JavaScript via HTMX.
  • ASGI and Uvicorn: FastHTML operates on ASGI with Uvicorn as the ASGI server. Starlette provides high-level functionality on top of ASGI.

• Routing and HTTP Methods:

  • Route Definitions: Use @rt decorator to define routes. Function names (get, post, put, delete) map directly to HTTP methods.
  • Dynamic Routing: Use path parameters and types for dynamic route handling. Example: @rt("/{fname:path}.{ext:static}").

• HTML and Components:

• Component Creation: Build reusable components using Python functions that return HTML elements. Example: def hero(title, statement): return Div(H1(title), P(statement), cls="hero").

digitarald

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import { bundleMDX } from "mdx-bundler";

export const POSTS_PATH = path.join(process.cwd(), "data/_posts");

export const getSourceOfFile = (fileName) => {
  return fs.readFileSync(path.join(POSTS_PATH, fileName));
};

digitarald

VS Code Tips & Tricks

Harald @digitarald Kirschner - June 2021

Cheat sheet with instructions to try out the tips & tricks covered in the talk.

Part 1: Personalize the look & feel.

Auto Save

digitarald

<script>
  console.log('%cline-height: 1.5', 'line-height: 1.5; background-color: red; color: white')
  console.log('%cline-height: 1.5em', 'line-height: 1.5em; background-color: red; color: white')
  console.log('%cline-height: 50px', 'line-height: 50px; background-color: red; color: white')
</script>
See DevTools Console

digitarald

Long Frames: Main
16-20: 2156
20-40: 1015
40-60: 203
60-80: 116
80-100: 95
100-120: 61
120-140: 44
140-160: 24
160-180: 33

digitarald

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var folders = {
    APP: path.resolve(__dirname, '../app'),
    BUILD: path.resolve(__dirname, '../build'),
    BOWER: path.resolve(__dirname, '../bower_components'),
    NPM: path.resolve(__dirname, '../node_modules')
};

digitarald

28014 http request GET https://registry.npmjs.org/semver
28015 verbose request uri https://registry.npmjs.org/hosted-git-info
28016 verbose request no auth needed
28017 info attempt registry request try #1 at 1:30:45 PM
28018 verbose request using bearer token for auth
28019 verbose etag "CTVPC6MTOOUB33OPF9OBO9WB7"
28020 http request GET https://registry.npmjs.org/hosted-git-info
28021 verbose request uri https://registry.npmjs.org/validate-npm-package-license
28022 verbose request no auth needed
28023 info attempt registry request try #1 at 1:30:45 PM

digitarald

diff --git a/cache-then-network/sw.js b/cache-then-network/sw.js
index 9449f5f..8170159 100644
--- a/cache-then-network/sw.js
+++ b/cache-then-network/sw.js
@@ -6,15 +6,12 @@ var cacheName = 'cache-then-network';
 
 self.addEventListener('install', function(ev) {
   console.log('SW install event');
-  self.skipWaiting();
-  ev.waitUntil(self.clients.claim());