Tyler Barker

An office desk with two KRK studio monitors, a MacBook Pro and external display, a midi piano keyboard and split ergo keyboard, with Reason open for music making.

The real reason to get a split keyboard 🧠

Phoenix LiveView 1.1 is an exciting release in a lot of ways, but the highlight for me is the JS is getting types! Huge thanks to the maintainers 💜

github.com/phoenixframe...

Have you tried the agentic editing in @zed.dev? Pretty incredible.

Thanks Rodrigue! Really appreciate that :)

Indefinite Hiatus - Tyler Barker For anyone following my work, it will have become quite obvious in recent months that Prototape, and the Tape Echoes podcast/blog has received exactly zero updates. I’m not quite ready...

Indefinite Hiatus: tylerbarker.com/posts/indefi...

So I've mentioned that I'm working on a new library for extremely pluggable/composable LLM workflows, especially agentic ones. I'm getting closer to opening that up. One thing that underpins this is the ability to use NimbleOptions for function calling and structured outputs via JSONSchema. 1/2

GitHub - mixmark-io/turndown: 🛏 An HTML to Markdown converter written in JavaScript 🛏 An HTML to Markdown converter written in JavaScript - mixmark-io/turndown

I’ve found for cases like this it’s pretty effective to create a project a curate a knowledge base to fill the holes. Find the best docs, blog posts, etc and convert them to markdown: github.com/mixmark-io/t...

You’ll usually need to tidy up the resulting MD, but still.

I do not like the Notion API. I do not like it one bit.

Vibrating with excitement expert-lsp.org #ElixirLang

I’ve seen Membrane! Looks really cool. Been meaning to integrate it into Prototape for a while just haven’t got around to it 😅

Plaintext formatted to read as a table, outlining the WAV file specification. It reads: ``` WAV File Format Structure ------------------------ Position | Sample Value | Description ----------|-------------|------------- 1-4 | "RIFF" | Marks the file as a riff file. Characters are each 1 byte long. 5-8 | File size | Size of the overall file - 8 bytes, in bytes (32-bit integer). | (integer) | Typically, you'd fill this in after creation. 9-12 | "WAVE" | File Type Header. For our purposes, it always equals "WAVE". 13-16 | "fmt " | Format chunk marker. Includes trailing null 17-20 | 16 | Length of format data as listed above 21-22 | 1 | Type of format (1 is PCM) - 2 byte integer 23-24 | 2 | Number of Channels - 2 byte integer 25-28 | 44100 | Sample Rate - 32 bit integer. Common values are 44100 (CD), | | 48000 (DAT). Sample Rate = Number of Samples per second, or Hertz. 29-32 | 176400 | (Sample Rate * BitsPerSample * Channels) / 8 33-34 | 4 | (BitsPerSample * Channels) / 8 | | 1 - 8 bit mono | | 2 - 8 bit stereo/16 bit mono | | 4 - 16 bit stereo 35-36 | 16 | Bits per sample 37-40 | "data" | "data" chunk header. Marks the beginning of the data section. 41-44 | File size | Size of the data section. | (data) | Note: Sample values shown are for a 16-bit stereo source. ```

An Elixir code sample that showcases the power of pattern matching binaries as bitstrings - in this case for a WAV audio file. The code reads: ``` <<"RIFF", chunk_size::little-size(32), "WAVE", "fmt ", subchunk1_size::little-size(32), audio_format::little-size(16), num_channels::little-size(16), sample_rate::little-size(32), byte_rate::little-size(32), block_align::little-size(16), bits_per_sample::little-size(16), data_chunk::binary>> = File.read!("./banger.wav") ```

Maybe the most amazing thing about Elixir to me pattern matching on binaries. Parsing a WAV file is almost as simple as writing down the file spec verbatim - look at this! #ElixirLang

The proposed syntax for type annotations: ‘$ Schema.t() -> Schema.t()’ 😉

Elixir Lang's logo superimposed over Jayson Tatum exclaiming "What they gonna say now?" after winning an NBA championship, referencing instead Elixir after getting a type system.

Saving this for the dozens of us in the NBA <> Elixir Venn diagram when that day comes.

Once #ElixirLang gets the type system I'll be making it rain $$$ every day.

GitHub - plausible/analytics: Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics. Simple, open source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics. - plausible/analytics

Not sure about its relevance to phx.gen.auth but it doesn’t get much more real-world and in production than Plausible Analytics: github.com/plausible/an...

Haskell got me interested in functional programming, Elixir got me functional programming. #ElixirLang

Huge release! 💎

LiveView Is Not a Zero-JS Framework, It’s a Zero-Boring-JS Framework - Tyler Barker A recent Twitter discussion about the “ceiling” of server-side rendered frameworks like Phoenix LiveView has caused quite a stir. Most of it was in good faith, and many devs have responded...

I don’t cover Solid but this article goes over a lot of the kinds of stuff I’m talking about: tylerbarker.com/posts/livevi...

Yep! It’s helpful to pass the hook object (this) into the component as a prop.

After you init signals in the component fn, setup your handleEvents with the hook obj to interact with LV, and fire any pushEvents to get initial data from LV before returning your HTML (Solid component fns run once).

Yep exactly. You just pass whatever HTMLElement you like, be it the hook.el or another you’ve queried for as the 2nd arg to render (the file needs to be JSX/TSX).

- I've not tried using Solid with E2E reactivity because I treat each usage like an embedded micro-frontend with handleEvent + pushEvent.
- Multiple instances of a JS hook can share state if you return the hook object from a function and manage state in the closure.

- IndexedDB is great for persisting state across connections, I use it for audio files.
- I often write hooks in a TSX file alongside Solid.js when I need it, it's very simple to render from mounted().

I write a lot of front-end code for my LiveView app because it does client-side audio recording/playback/processing. A few takeaways:

- Phoenix esbuild is great, but I much prefer the control I get from ejecting from that to a build.js file.
- JS hooks can get you really, really far.

Haha that’s aliased to “pix” for me. Got it from a mentor at my first Elixir gig in 2018 and it stuck.

Ever wanted your LiveView components to sparkle? Use this hook: gist.github.com/tylerbarker/...

#ElixirLang #LiveView

Apps that fall into the category of "Open at Login" have such a huge attention advantage, gotta follow those ideas.

Apologies tw_screen_size friends, I only just noticed I've been making you uninstall to get your LiveView 1.0 upgrade - just released v1.1.0 to fix! #ElixirLang

Didn't you hear? Bloke Youdontalkto joined Telegram!

GitHub - tylerbarker/tanstack-bun-wasm-starter: An extremely shiny React app starter using Bun + Tanstack + TailwindCSS + Rust/WebAssembly + Docker. An extremely shiny React app starter using Bun + Tanstack + TailwindCSS + Rust/WebAssembly + Docker. - tylerbarker/tanstack-bun-wasm-starter

This was pretty well received, so I've made a template repo for anyone who'd like to give it a try: github.com/tylerbarker/...

Let me know if you run into any issues!

cc: @tanstack.com @ashtonlance.com @missionctrl.dev @junedomingo.bsky.social

Haha no stress at all.