Braunson Yager Braunson

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }

	<!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">
	<title>Alpine Ajax test</title>
	</head>
	<body>
	<h1>Users API Retrieval Test</h1>

	<?php

	/**
	* Get google reviews
	* @return array Google reviews data
	*/
	function get_google_reviews(){

	// URL to fetch
	$google_api = 'https://maps.googleapis.com/maps/api/place/details/json?placeid=<your_place_id>&sensor=true&key=<key>';

	<div :class="imageUrl && 'border-orange-500 dark:border-pink-500'"
	class="flex justify-center items-center border-2 border-gray-300 dark:border-dark-line border-dashed rounded-md h-48 overflow-y-hidden"
	x-data="fileUpload">
	<template x-if="!imageUrl">
	<div class="space-y-1 text-center px-6 pt-5 pb-6 w-full">
	<svg aria-hidden="true" class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor"
	viewBox="0 0 48 48">
	<path
	d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
	stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>

	// Usage
	// <x-card-weather-forecast location="Guwahati" api-key="your-weatherapi.com-api-key" />

	@props([
	"location" => "Guwahati",
	"apiKey" => "",
	"poll" => 10000
	])

	<div class="bg-white shadow rounded-lg p-5 dark:bg-gray-800 max-w-full"

	<?php

	namespace App\Http\Livewire;

	use App\Models\Tag;
	use App\Models\User;
	use Illuminate\Database\Eloquent\Builder;
	use Rappasoft\LaravelLivewireTables\DataTableComponent;
	use Rappasoft\LaravelLivewireTables\Views\Columns\BooleanColumn;
	use Rappasoft\LaravelLivewireTables\Views\Column;

	# Add to your .env.example and .env files
	CSP_ENABLED=true
	CSP_REPORT_ONLY=true

	<script data-turbo-eval="false">
	document.addEventListener('turbo:before-render', () => {
	let permanents = document.querySelectorAll('[data-turbo-permanent]')

	let undos = Array.from(permanents).map(el => {
	el._x_ignore = true

	return () => {
	delete el._x_ignore
	}

	<!DOCTYPE html>
	<html lang="en" class="dark">
	<head><!-- head stuff --></head>
	<body class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-grey-200 font-sans transition transition-colors ease-out">
	<main role="main" class="container mx-auto">
	<div x-data="{text: ['Light', 'Dark']}">
	<button
	class="border p-2 font-bold bg-gray-900 dark:bg-white text-white dark:text-grey-900"
	@click="document.documentElement.classList.toggle('dark'); text = text.reverse()"
	x-text="text[0]"

	PORTAL_DOMAIN=localhost
	SESSION_DRIVER=shared