Fredrik Teschke ftes

## 01-composition-over-props.md

      
              8 files
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                ftes
                / 01-composition-over-props.md
            
            
              Created
              February 21, 2026 08:47
            
              
                Component library design patterns extracted from Adam Wathan's "Designing a Component Library" talk (Laracon US 2024). Covers composition over props, data-slot attributes, CSS grid input groups, isolate for z-index, subgrid alignment, responsive touch targets, and CSS custom properties as responsive props.
              
          
    Prefer Composition Over Props

Don't bundle label + input + description into a single component with props for every variation (size, descriptionPlacement, iconLeft, iconRight, layout). This leads to "prop city" — an ever-growing API that can never anticipate every use case.
Instead, expose composable child components:
<!-- ❌ Monolithic prop-driven API -->
<Input label="Price" description="Set your price" icon="dollar" icon-right="help" description-placement="top" size="md" layout="horizontal" />

  
## load-test.js
import http from "k6/http";
import ws from "k6/ws";

export const options = {
  // Key configurations for spike in this section
  stages: [
    { duration: "2m", target: 100 }, // fast ramp-up to a high point
    // No plateau
    { duration: "1m", target: 0 }, // quick ramp-down to 0 users
  ],

## reveal-slides.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <title>Let it Crash with Elixir</title>

## csv.ex
defmodule MyApp.CSV do
  @moduledoc false

  NimbleCSV.define(MyyApp.CSV.RFC4180,
    # defaults from NimbleCSV.Spreadsheet
    separator: ",",
    escape: "\"",
    line_separator: "\r\n",
    escape_formula: %{["@", "+", "-", "=", "\t", "\r"] => "'"}
  )

## heex-global-attr-override.exs
Application.put_env(:sample, Example.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install(
  [
    {:plug_cowboy, "~> 2.5"},

## exercises.md

      
              2 files
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                ftes
                / exercises.md
            
            
              Created
              March 14, 2023 06:39
            
              
                Software Developer Bootcamp
              
          
    Exercises


Codewars Java
Exercism


## dijkstra.livemd

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              3 stars
            
          
                ftes
                / dijkstra.livemd
            
            
              Created
              December 12, 2022 19:42
            
              
                Elixir Dijkstra's Shortest Path Algorithm
              
          
dijkstra

Mix.install(
  [
    {:kino, "~> 0.7.0"},
    {:vega_lite, "~> 0.1.6"},
    {:kino_vega_lite, "~> 0.1.7"}

  
## FormWebComponent.jsx
export default class ComboboxFormWebcomponent extends HTMLElement {
  connectedCallback() {
    // ...
    const inputId = this.getAttribute("input-id")
    this.inputEl = document.getElementById(inputId)
    this.inputEl.addEventListener("change", this.onValueChange)
    this.render()
  }

  disconnectedCallback() {

## PushEventHook.js
const PushEventHook = {
  mounted() {
    const target = this.el.attributes["phx-target"]?.value

    this.el.__pushEvent = (event, value, onReply = () => {}) =>
      target
        ? this.pushEventTo(target, event, value, onReply)
        : this.pushEvent(event, value, onReply)
  }
}

## projection.ex
defmodule Mixins.Projection do
  defmacro __using__(params) do
    table = Keyword.get(params, :table) || raise "Missing param :table"
    Module.register_attribute(__CALLER__.module, :table, persist: true)
    Module.put_attribute(__CALLER__.module, :table, table)

    quote do
      use Ecto.Schema
    end
  end
	import http from "k6/http";
	import ws from "k6/ws";

	export const options = {
	// Key configurations for spike in this section
	stages: [
	{ duration: "2m", target: 100 }, // fast ramp-up to a high point
	// No plateau
	{ duration: "1m", target: 0 }, // quick ramp-down to 0 users
	],
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
	/>

	<title>Let it Crash with Elixir</title>
	defmodule MyApp.CSV do
	@moduledoc false

	NimbleCSV.define(MyyApp.CSV.RFC4180,
	# defaults from NimbleCSV.Spreadsheet
	separator: ",",
	escape: "\"",
	line_separator: "\r\n",
	escape_formula: %{["@", "+", "-", "=", "\t", "\r"] => "'"}
	)
	Application.put_env(:sample, Example.Endpoint,
	http: [ip: {127, 0, 0, 1}, port: 5001],
	server: true,
	live_view: [signing_salt: "aaaaaaaa"],
	secret_key_base: String.duplicate("a", 64)
	)

	Mix.install(
	[
	{:plug_cowboy, "~> 2.5"},
	export default class ComboboxFormWebcomponent extends HTMLElement {
	connectedCallback() {
	// ...
	const inputId = this.getAttribute("input-id")
	this.inputEl = document.getElementById(inputId)
	this.inputEl.addEventListener("change", this.onValueChange)
	this.render()
	}

	disconnectedCallback() {
	const PushEventHook = {
	mounted() {
	const target = this.el.attributes["phx-target"]?.value

	this.el.__pushEvent = (event, value, onReply = () => {}) =>
	target
	? this.pushEventTo(target, event, value, onReply)
	: this.pushEvent(event, value, onReply)
	}
	}
	defmodule Mixins.Projection do
	defmacro __using__(params) do
	table = Keyword.get(params, :table) \|\| raise "Missing param :table"
	Module.register_attribute(__CALLER__.module, :table, persist: true)
	Module.put_attribute(__CALLER__.module, :table, table)

	quote do
	use Ecto.Schema
	end
	end