Lachlan Miller lmiller1990

## content.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                lmiller1990
                / content.md
            
            
              Created
              January 30, 2024 21:39
            
              
                Questions for Basarat
              
          
    Congrats!

You had your 20K sub special 3 months ago. You are now at 141K.  Holy smokes! The growth is exponential.
Congrats, well deserved. You are one of my favorite creators - I don't watch every video, only so many hours in a day, but I always have a good time when I do! I first found you via your TypeScript handbook, that was very useful, thanks!
On Content

Looking at your videos, some are hugely popular (50K+) and others are sub 1K. The algorithm is fickle.
I do see many other creators getting much more consistent view counts. Any thoughts on this, what they might be doing different?

  
## lib.es5.d.ts
type Awaited<T> = T extends null | undefined ? T : // special case for `null | undefined` when not in `--strictNullChecks` mode
    T extends object & { then(onfulfilled: infer F, ...args: infer _): any; } ? // `await` only unwraps object types with a callable `then`. Non-object types are not unwrapped
        F extends ((value: infer V, ...args: infer _) => any) ? // if the argument to `then` is callable, extracts the first argument
            Awaited<V> : // recursively unwrap the value
        never : // the argument to `then` was not callable
    T; // non-object or non-thenable

## Form.vue
<template>
  <input v-model="formData.name" />
  <p v-if="!formStatus.name.valid">{{ formStatus.name.message }}</p>
</template>

<script setup lang="ts'>
const formData = reactive({
  name
})

## promise.js
import pdefer from "https://unpkg.com/p-defer@4.0.0/index.js";

/** @returns {Promise<Record<string, boolean>} */
async function fetchAllFeatures() {
  console.log("Making network call...");
  return new Promise((res, rej) => {
    setTimeout(() => {
      res({});
    }, 500);
  });

## future.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                lmiller1990
                / future.md
            
            
              Created
              August 10, 2023 06:13
            
              
                Integrate with the Stack
              
          
    Component Testing Toolchain Mess

So for the last while (~10 years?) component tooling has been in a weird state, where it kind of "bolts on" to your app. Except once you start to do anything remotely complex (eg: in the real world, where you really want tools like Storybook, Jest, Cypress CT, whatever) things go off the rails, since "we integrate with your dev server and tooling" never seems to "just work".
Every year, a new layer of misdirection is added:

2015: webpack, importing non JS assets (like import './style.css')
2016: JSX, .vue file, babel, now we can live in the future RIGHT NOW
2017: TypeScript, and of course, TSX
2018: Jest gains popularity. It does NOT work with webpack, now you need *-jest-preprocessor


## conditionalCypress.js
before(() => {
  const isHeadless = Cypress.config('isTextTerminal')

  if (isHeadless) {
     // do something
  }
})

// Or ...

## README.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                lmiller1990
                / README.md
            
            
              Created
              December 20, 2022 01:01
            
              
                What is the Composition API
              
          
    What is an API?

An API, or Application Programming Interface, is how a programmer communicates their intent to a system.
Vue and React are systems. They take some data and produce an interstitate representation (a Virtual DOM, but this could change - it's an implementation detail).
When some data changes, the Virtual DOM is updated, and based on the changes, the real DOM is then updated to reflect the changed data.
Options API, Class Components


## index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="/index.js"></script>
  <title>Demo</title>
  <style>

## GameplayScore.tsx
import type { FunctionalComponent } from "vue";

export interface Timing {
  window: string;
  count: number;
}

export interface GameplayScoreProps {
  percent: string;
  timing: Timing[];

## Helping.vue
<template>
  <div class="container home">
      <div class="row">
        <h3>Enter Employee Number or Name to Search</h3>
        <div class="spacer"></div>
        <form @submit.prevent="submitSearchForm" @reset="resetSearchForm">
          <div class="row">
              <div class="col-3">
                <label for="Employee Name"></label>
                <input type="text" v-model="mySearch.personName" placeholder="Enter Employee Name"/>
	type Awaited<T> = T extends null \| undefined ? T : // special case for `null \| undefined` when not in `--strictNullChecks` mode
	T extends object & { then(onfulfilled: infer F, ...args: infer _): any; } ? // `await` only unwraps object types with a callable `then`. Non-object types are not unwrapped
	F extends ((value: infer V, ...args: infer _) => any) ? // if the argument to `then` is callable, extracts the first argument
	Awaited<V> : // recursively unwrap the value
	never : // the argument to `then` was not callable
	T; // non-object or non-thenable
	<template>
	<input v-model="formData.name" />
	<p v-if="!formStatus.name.valid">{{ formStatus.name.message }}</p>
	</template>

	<script setup lang="ts'>
	const formData = reactive({
	name
	})
	import pdefer from "https://unpkg.com/p-defer@4.0.0/index.js";

	/** @returns {Promise<Record<string, boolean>} */
	async function fetchAllFeatures() {
	console.log("Making network call...");
	return new Promise((res, rej) => {
	setTimeout(() => {
	res({});
	}, 500);
	});
	before(() => {
	const isHeadless = Cypress.config('isTextTerminal')

	if (isHeadless) {
	// do something
	}
	})

	// Or ...
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="/index.js"></script>
	<title>Demo</title>
	<style>
	import type { FunctionalComponent } from "vue";

	export interface Timing {
	window: string;
	count: number;
	}

	export interface GameplayScoreProps {
	percent: string;
	timing: Timing[];
	<template>
	<div class="container home">
	<div class="row">
	<h3>Enter Employee Number or Name to Search</h3>
	<div class="spacer"></div>
	<form @submit.prevent="submitSearchForm" @reset="resetSearchForm">
	<div class="row">
	<div class="col-3">
	<label for="Employee Name"></label>
	<input type="text" v-model="mySearch.personName" placeholder="Enter Employee Name"/>