Forem: Tea Reggi

When to use an Astro component over a Web Component.

Tea Reggi — Thu, 14 Dec 2023 21:11:05 +0000

For my personal website (built with Astro) I wanted a way to abstract out something I call a heading fragment, it combines the concept of a heading tag (h1, h2, h3, ect) and a fragment link #reference-to-id-on-the-page. This seems like a no-brainer for any blog or website to provide permalinks to specific sections of a blog post or article.

In an ideal world this looks like this:

<h-frag>Hello World</h-frag>

This would:

Wrap it all in an anchor
Kebab-case the text and add it as the id somewhere near this element.
For extra measure I wanted hover behavior so that when you hover you get a link icon that shows up to the left of the text.

Now, the question is should this be an astro component? Or a web component?

What is an Astro component?

Astro is a web framework with a main-focus on static-site generation (ssg). It allows you to have .astro files that are a bit different than your average .js / .ts file.

---
const text = 'hello world'
---
<div>{text}</div>

Astro files are a hybrid of Javascript / Typescript, JSX-like syntax, and HTML. Asto has a bunch of tricks up its sleeve to optimize all of these things, especially <style> and <script> tags.

What does `HeadingFragment` look like in Astro?

This code below might be new to you if you've never seen an astro component, but it's really simple. It just uses html, js, and css, that's it.

---
const { as: As = 'h1' } = Astro.props;
const text = await Astro.slots.render('default')

function toKebabCase(str: string): string {
    return str
        .match(/[A-Z]?[a-z]+|[0-9]+/g)!
        .map(word => word.toLowerCase())
        .join('-');
}

const id = toKebabCase(text)
---

<As class="heading items-center" id={id}>
  <a class="flex" href={`#${id}`}>
    <span class="icon w-0 overflow-hidden" style="transition: width 0.3s;">🔗</span>
    <span>{text}</span>
  </a>
</As>

<script>
  document.querySelectorAll('.heading').forEach(heading => {
    const icon = heading.querySelector('.icon')

    heading.addEventListener('mouseover', () => {
      icon.classList.add('hovered');
    });
    heading.addEventListener('mouseout', () => {
      icon.classList.remove('hovered');
    });
  });
</script>

<style>
  .hovered {
    width: 32px;
  }
</style>

What does `heading-fragment` look like as a web component?

The web component is a bit more involved. Disclaimer: it does have one "extra feature" which is to find the font-size of the tag used and compensate for the "icon" width dynamically (ignore this).

class HeadingFragment extends HTMLElement {

  static kabob (value: string) {
    return value
      .match(/[A-Z]?[a-z]+|[0-9]+/g)!
      .join('-')
      .toLowerCase()
  }

  static elmWidth (tag: string, text: string) {
    const elm = document.createElement(tag)
    elm.style.display = 'inline'
    elm.style.visibility = 'hidden'
    elm.innerHTML = text
    document.body.append(elm)
    const width = elm.offsetWidth
    elm.remove()
    return width
  }

  defaultEmoji = '🔗'
  emoji: string
  emojiWidth: number = 0
  constructor() {
    super()
    this.as = this.getAttribute('as') || 'h1'
    this.emoji = this.getAttribute('emoji') || this.defaultEmoji
    this.emojiWidth = HeadingFragment.elmWidth(this.as, this.emoji)
  }

  as: string
  text: string
  id: string
  connectedCallback() {
    this.text = this.textContent || ''
    this.id = HeadingFragment.kabob(this.text)

    const heading = this.heading
    const anchor = this.anchor
    const icon = this.icon
    const main = this.main

    heading.addEventListener('mouseenter', () => {
      icon.style.width = (this.emojiWidth + 5) + 'px'
    })

    heading.addEventListener('mouseleave', () => {
      icon.style.width = '0px'
    })

    anchor.appendChild(icon)
    anchor.appendChild(main)
    heading.appendChild(anchor)

    this.innerHTML = ''
    this.appendChild(heading)
  }

  get heading () {
    const e = document.createElement(this.as)
    e.setAttribute('id', this.id)
    return e
  }

  get anchor () {
    const e = document.createElement('a')
    e.style.display = 'flex'
    e.setAttribute('href', `#${this.id}`)
    return e
  }

  get icon () {
    const e = document.createElement('span')
    e.style.overflow = 'hidden'
    e.style.width = '0'
    e.style.whiteSpace = 'nowrap'
    e.style.transition = 'width 0.3s'
    e.textContent = this.emoji
    return e
  }


  get main () {
    const e = document.createElement('span')
    e.textContent = this.text
    return e
  }
}

customElements.define('heading-fragment', HeadingFragment)

Conclusion

Now that I showed both ways which is better? I think the Astro component is better, here's why:

1) It's simpler
2) It's easier to read / maintain
3) It's semantically better

What does "Semantically Better" mean?

When using the web component you're dynamically adding a heading tag to the page using Javascript, this means when the page loads there's no headings on the page. This isn't great. I know that search engines have come a long way when it comes to crawling html, but for something essential for screen-readers it still scares me a little to not be rendering h2 tags statically.

Your thoughts?

What do you think? Which do you think is "better", the Astro component or the Web Component?

Editing Videos Using ffmpeg + TypeScript and Deno.

Tea Reggi — Thu, 07 Dec 2023 17:31:01 +0000

TLDR: I wrote a module using typescript / deno that wraps ffmpeg and offers a better developer experience when editing a bunch of video clips together 👉 deno/x/movie.

I've been recording small clips of video on my old "retro" 🤣 "vintage" 😭 Nikon point-and-shoot digital camera. I'm trying to think more visually and thinking about using video as a medium to explore concepts I'm experiencing in life, and evoke a feeling.

I kinda hate modern video editing software, mainly using iMovie. I briefly looked into other open-source alternatives to iMovie, but nothing stood out. Then I thought about ffmpeg, a command-line tool I've used once or twice in the past to convert video or audio to another format.

I started a deep-dive in learning ffmpeg. How to do things like remove sound entirely from a clip. How to manipulate saturation, gamma, and contrast. How to raise the volume of a clip. All of these are done within ffmpeg as "filters". Given that it's a command-line tool every character matters and a lot of information is condensed into a short command. The syntax is a bit hard to understand. I found that breaking the command down using new lines and a \ was the only way to really read it.

Brief Explainer

Here's a simple script that merges two videos:

ffmpeg \
-i ./example/originals/DSCN3700.AVI \
-i ./example/originals/DSCN3701.AVI \
-filter_complex "\
[0:v:0][0:a:0]\
[1:v:0][1:a:0]\
concat=n=2:v=1:a=1[outv][outa]" \
-map "[outv]" -map "[outa]" \
./example/output.mp4 -y

Here's a simple breakdown of this command:

-i are inputs 0 and 1
0:v:0 refers to input 0 and video feed 0
0:a:1 refers to input 0 and audio track 0

This is because files can have different video and audio tracks, think about the feature of supporting a video with multiple language tracks. Track 0 may be English, track 1 may be Japanese.

This is a simple example, a more complex example would look like this:

ffmpeg \
-i ./example/originals/DSCN3700.AVI \
-i ./example/originals/DSCN3701.AVI \
-filter_complex "\
[0:a:0]volume=3,atrim=start=4:duration=4,asetpts=PTS-STARTPTS[audio0];\
[0:v:0]fps=25,crop=480:480:0:0,trim=start=4:duration=4,setpts=PTS-STARTPTS[video0];\
[1:a:0]volume=4,atrim=end=17:start=15,asetpts=PTS-STARTPTS[audio1];\
[1:v:0]fps=25,crop=480:480:0:0,trim=end=17:start=15,setpts=PTS-STARTPTS[video1];\
[video0][audio0]\
[video1][audio1]\
concat=n=2:v=1:a=1[outv][outa]" \
-map "[outv]" -map "[outa]" \
./example/output.mp4 -y

This does the same for imports
This adds in the notion of a "filter" assigned from a track to a "variable"

[0:a:0]volume=3,atrim=start=4:duration=4,asetpts=PTS-STARTPTS[audio0];\
  ^ the track -----------[ the filter(s) ]-- the new variable    ^

Each of these definitions are followed by a ;

Then we have the concatenation definition after the last ;:

[video0][audio0]\

This specifies this audio video pair from the definitions followed by the next and so on and so on.

So I view the -filter_complex value as this:

{all the filter transformations, declaring a new variable };
{the concatenations, paired audio + video}

I built a wrapper

Early when learning the filters I wanted a better way so I created some glue-code to wrap ffmpeg in a way that was easier to move clips around and be more flexible.

https://deno.land/x/movie@1.0.0

Here's the video I made with it 👇🎬🎥

Recreating Mastodons Audio Player as a Web Component

Tea Reggi — Mon, 04 Dec 2023 18:19:20 +0000

TLDR: I recreated mastodons audio player as a web component, available reggi/mastodon-audio-player-web-component.

What was the goal?

The goal was to have a audio-player embed like this:

<audio-player src="/file.mp3" poster="/image.jpg"></audio-player>

The goal was also to have it look exactly like the audio-player that mastodon uses.

Why

I was creating a Astro component MastodonStatus, something like:

<MastodonStatus href="https://indieweb.social/@thomasreggi/111518126442493327"/>

And I really wanted to display all the extra post-types, images, poll, video, but when it came to audio there was an issue, there was no drop-in player that resembled the mastodon player. Mastodon wrote the original player using React, so it wasn't exactly easy to implement as it was. I really just wanted a web-component version to exist for me to drop in and pass the mp3 and an image and be on my way.

Once I started to dive into it and reverse engineer the existing player I started to have hope that it was possible. Everything from the custom volume-slider to figuring out the visualizer was pretty complex. This was also my first time working with the web Audio api, which was surprisingly easy to work with.

Making and working with a complex web-component like this wasn't simple but there are some things that helped along the way.

No template or style tags, I went pure in-js solutions for all dom elements and styles. I think this saved me in the long run. I hate working with long template strings for html and css.
Grouping initializable elements in a class method, I would break down every element into a function and attach it to it's parent at the very end, makes it easy to call on elements in other methods.
Grouping all event handlers, this made it easy to track all the events within the component.

What's next?

I'm hoping that other people will find this useful. In an ideal world mastodon also would adopt this component and the community can build on it and make it better. There's some work needed to make sure that the component is accessable, but it was a lot of work to get where I am (I feel like I just lifted a bounder up a mountain). I'm totally open to any pull-requests that address any accessability issues with the component. Let's try and push web-components to be a better standard that are meant to be shared, worked on, and maintained collectivley.

Project Context

This project was born as a dependency to another project astro-cache-embed. The projects look something like this, with each being a dependency of the other: reggi.com -> astro-cache-embed -> mastodon-audio-player-web-component. Here's a demo of the mastodon-embed. Here's a demo of the mastodon-audio-player-web-component.

In Defense of Having All Code in a Single File.

Tea Reggi — Thu, 02 Nov 2023 15:51:15 +0000

I recently wanted to split of a series of scripts I made for a postgres project I was working on into its own cli tool. I started by outlining the tool, I wanted a pgrun bundle, and a pgrun test command. This is what I had after a little bit of development:

.
├── README.md
├── args.ts
├── bundle.ts
├── cli.ts
├── context.ts
├── main.ts
├── options.ts
├── organizer.ts
├── organizer2.ts
├── parse.ts
├── run.sh
├── shake.ts
├── sort.ts
├── sort2.ts
├── sql.ts
└── walk.ts

I had a whole bunch of functions spit into their own files, and it started to be a headache to maintain. I felt every time I made some new thing, I'd isolate it in it's own file. I've vented about files and folders in the past, as well as invented whole new ways to organize typescript projects.

But nothing is as simple as this:

.
├── README.md
├── bin.ts
├── deno.lock
├── mod.ts
├── test.ts
└── types.ts

What's the shift? Simply having all the functions in one mod.ts file, it's still under 500 lines. It became a shift slightly but utilizing search and replace within the same file became much easier than digging around the files for the function, and having to deal with import / exports.

This is a gentle reminder to myself to not break things out early on, and keep it simple, keep it all contained in one file if you can, it makes it so much easier to manage.

Why Can't I Just Use This Function? The Struggles with Code Reusability in JS

Tea Reggi — Wed, 25 Oct 2023 19:30:07 +0000

We've all been there. You know an open-source project does something you need, deeply nested in the dark trenches of a specific file in the repo. You finally, after hunting for a couple minutes you find it. You start to untangle that core functionality and see if there's any feasible way to decouple it from the rest of the project. Is it nested within a rats-nest of classes? You don't need or can't realistically call the parent's parent's parent's class without all the data needed to instantiate those classes. It's all a headache. It shouldn't be this darn hard.

It's not a project maintainers fault that they didn't release this small piece of there project for reuse. However that doesn't take away that it's frustrating the way that code is bundled and distributed.

A whole project might be released as a server or framework. Frameworks like fresh, and astro) both have had things deep within them that I've wanted to reuse, within fresh it's the esbuild configuration, and islands functionality, and within astro it's the rendering of astro files themselves.
A project might be released as a CLI tool, with a whole host of flags and options, .rc files.
A project might be released as a module to run within a specific runtime, NPM, Deno, Bun
A project may or may not be written with typescript, js, mjs, js modules and may or maynot be built within the repo.

This post is mostly just to vent about the sad state of JavaScript. There are more complexities when talking about how people organize their projects, and dependencies, barrel files, front-end frameworks, etc.

I don't know what the right answer is. I just wish that there was a standard format that we could all use that sort of built up functions within a project and allowed us to call them via cli, or server, routes, natively through code. Deno as a runtime is the closest thing to that for me because of how it handles URL imports. It makes it really easy to manage scripts. It also makes it easy to have any file within a repository be the entry point, and it's dependencies, without the need to download the entirety of a project as the dependency, even within this mindset authors need to not use barrel files because it breaks tree-shaking. Overall URL imports are something I don't hear enough people rave about.

The "Postgres First" Trend

Tea Reggi — Tue, 17 Oct 2023 17:23:08 +0000

TLDR: Because of serverless, the need for database wrapper api's like PostgREST have become mainstay. Supabase allows RPC postgres function calls which can house more complex "database logic" eliminating the need for an in-app model. Omnigres is a project aiming to take this concept one step further with including an HTTP server within postgres itself. I also was writing a bunch of pg functions this week which is why I noticed this trend.

There's a new way of thinking about databases / apps that's slowly morphing the way people think and opening developers up to new possibilities and ways of building apps. There's something brewing because i've been having this idea and I'm also seeing others have it as well.

The idea overall is to set postgres as the main "backend api". That we shouldn't really ever need to bundle multiple queries into a transaction in a different programming language or server at all.

To be honest i've fallen in love with Supabase. This post is not sponsored by them in any way. I just really love the product, and for me, as a champion of self-hosting and open source that's saying a lot. I believe that everyone should have their own personal database / api and "own their own data" and Supabase aids in that mission. I really love that they also have a storage solution so all your data (like a blog post and images) can live truly live one place.

There's two ways to use Supabase through the API they provide, or directly with any postgres client. If you wanted to run postgres queries directly you can, but if you wanted some of their out-of-the-box features like auth and signup flow, you can use that too. It's a real swiss-army knife. What I find really interesting is something they provide called Supabase RPC which allow you to call a custom postgres function from the supabase client. Calling functions directly can minimise the mount of vendor-lockin you have with supabase because if you use their api client, you can't make queries directly and so you'd have to make a model system using their library which is proprietary. This whole mess is made complicated and necessary when it comes to serverless hosting, which requires the need for an API rather then a direct postgres connection.

So while I was brewing about all these ideas I've been thinking of designing a slew of postgres functions that would act somewhat as "the api" i'd write the to my postgres database and call those functions rather than a traditional model, things like pagination, joins, merging, user data etc, any data massaging you'd normally do within your app.

Then the other day while scrolling hacker news this came up:

omnigres / omnigres

The All-in-One Database

Omnigres

Documentation | Bounties

Omnigres makes Postgres a developer-first application platform. You can deploy a single database instance and it can host your entire application, scaling as needed.

Running application logic inside or next to the database instance
Deployment provisioning (Git, containers, etc.)
Database instance serves HTTP, WebSocket and other protocols
In-memory and volatile on-disk caching
Routine application building blocks (authentication, authorization, payments, etc.)
Database-modeled application logic via reactive queries
Automagic remote APIs and form handling
Live data updates

Blogs and Publications

Omnigres blog

🏃 Quick start

The fastest way to try Omnigres out is by using its container image:

docker volume create omnigres
docker run --name omnigres --mount source=omnigres,target=/var/lib/postgresql/data \
           -p 127.0.0.1:5432:5432 -p 127.0.0.1:8080:8080 -p 127.0.0.1:8081:8081 --rm ghcr.io/omnigres/omnigres-17:latest
# Now you can connect to it:
psql -h localhost -p 5432 -U omnigres omnigres # password is `omnigres`

Tip

Replace ghcr.io/omnigres/omnigres-17…

View on GitHub

omnigres is "Postgres as a platform" that takes all of this one step further.

Omnigres makes Postgres a developer-first application platform. You can deploy a single database instance and it can host your entire application, scaling as needed.

What's interesting is I had started working on a whole bunch of json function for postgres the same week I found omnigres on HN. Take a look at my progress here:

reggi / pg_json_functions

A collection of Postgres functions designed to work with supabase's RPC calls.

What do I hope to achive?

I've been tinkering around with different ideas when it comes to the idea of having structured data in the database without the need to utilize the typical relational-table based (normal) way you'd use postgres.

I've been messing around with things like yunohost.org, my own personal json API for blog posts, and other forms of structured content using strapi.io (a headless cms that utilizes postgres). The state of self-hosted software has deviated slightly from my vision of a simple easy to use utopia. On one side of the spectrum is yunohost.org, which offers a way to have a single server "install" other third-party self-hosted apps and using complex nginx rules route request to running ports all on the same machine, which is resource intensive, for each "app" running on the same box more ram, cpu, and storage is needed if you want to…

View on GitHub

It's a bunch of functions that make it slightly easier to interact with jsonb columns, and it's mostly me tinkering around with functions and trying to learn the syntax with ChatGPT.

Anyway, that's all I got for this post. I do think there's a shift in how people are thinking about what a database should be and should do. Mainly because at some point in the 'serverless' architecture there needs to be a single server (or cluster of servers) to manage database connections, and what we ask of that server might change over time.

Hosting Services List

Tea Reggi — Tue, 17 Oct 2023 16:17:57 +0000

This is a list of hosting services I find I want to keep all in one place.

Static-Site hosting

App hosting

Tunneling Self-hosting / Install platform

Framework Interoperable Component Libraries Using Lit Web Components.

Tea Reggi — Sun, 08 Oct 2023 04:08:32 +0000

TLDR: This post is made to rave about repo I found called json-schema-form-element a lit-based component library for form generation that works with all major front-end / metaframeworks, but also to show how I'm betting on Lit for the future of the web._

Lit is having a moment, one would say it's on fire 🔥🤣. It's being used everywhere from the web version of Photoshop to Microsoft's new windows app store. I think something clicked for me recently as to why lit is the major choice when it comes to the future of the web, and web components overall.

Component libraries, love them or hate them it's how web developers quickly cobble together bits of code to form a semi-usable website. From Bootstrap to things like Material UI and more recently Radix UI and Tailwind. With the way that front-end frameworks have been proliferating there are a lot of frameworks out there React, Angular, Solid, Vue, Astro and Lit. How are we able to write framework agnostic component libraries? That way you don't need to re-learn and find alternatives to the things you love to use if you want to build an app in a different framework.

Enter Shoelace an undoubtedly witty pin on "Bootstrap", that aims at bringing back direct usable components but by offering web-components by default, but it also offers web-components wrapped in a react component as well. This is at the core of building a framework interoperable component library, 1) use web-components, 2) wrap them in that specific language's syntax.

While I haven't used Shoelace directly yet, they tout that it's possible to fully customize the components styles, unlike bootstrap which was expected to be used as is. The overuse of bootstrap ultimately led to the homogenization of web-design, making websites feel "bootstrap". With things like CSS Variables and custom styles I'm hoping Shoelace doesn't fall into this trap.

I've been very passionate about a project called react-jsonschema-form (github, editor). I personally hate writing forms, and love the idea of serializable components, schema, validation all in one. I've always wanted an alternative to this project that offered an alternative to react, and possibly the ability to render a schema form to static HTML (like ssg).

I've thought about this a lot while using other frameworks like Deno Fresh which uses Preact under the hood, mainly for JSX templating, but also for islands functionality. Within that framework you can't really use React component libraries. You start to think more about generating static HTML like this example from the Deno blog [A Whole Website in a Single JavaScript File, cont'd](https://deno.com/blog/a-whole-website-in-a-single-js-file-continued, which shows building a simple webpage with routes all in one typescript file, a site that serves no Javascript to the browser.

The other day I stumbled upon my dream project the other day json-schema-form-element (github, editor) which is heavily inspired by the react counterpart. It's exactly what I wanted to make. This project, json-schema-form-element is a masterclass in how to make a modern web-component-first / "authored" library which is also interoperable with all other frameworks.

The example repo uses Astro which allows the author to demo all of the usages for the library, check it out here: index.astro. Using Astro for this is just another thing the author got right here.

I'm really excited about all this, and it makes me have some faith in the web again. I think that Lit is a step in the right direction especially the ability to do SSR / SSG and hydrate a web page. Hopefully 🤞 Shoelace can get SSR running, which is currently one hurdle, but I think it is achievable.

Anyway, what do you think of Lit? What do you think of the approach that json-schema-form-element takes at making an interoperable component library? Comment below 👇 and let me know!

Follow me on Mastodon for more thoughts on the future of web-development, web components, and typescript stuff @indieweb.social@thomasreggi.

Using Supabase as a database and image store with Strapi CMS.

Tea Reggi — Sun, 01 Oct 2023 17:03:46 +0000

I love the idea of a headless CMS to maintain my own personal API. The goal is to have a central source for all your data, blog posts, link lists, even job history data for a resume, small blurbs, summaries, and I have one for a list of github projects.

I fell in love with Strapi a couple months back and was interested in revisiting the project I created locally. What's cool about it is you can create custom content types with their own fields and you get an API from it.

I also love Supabase I think it's a great service with a ton of useful parts, it's a full postgres database, and an API layer too, so you don't even need to use Strapi's api if you wanted to. Strapi could just be used to write data to Supabase. Strapi also supports media uploads, and rather then using AWS or GCP I liked the idea of everything being under one service.

Here's the setup on how to use Supabase as both your database and media storage.

Once you have a strapi project setup you need to simply set your env vars to your supabase credentials that's the easy part then you're interacting with supabase directly.

To get the image store to work I had a bunch of issues. I found a module on github https://github.com/crubier/strapi-provider-upload-supabase I ended up going with a more up to date fork https://github.com/arkivedao/strapi-provider-upload-supabase you can npm install this by using the github url.

Create a new file config/plugins.ts:

export default ({ env }) => ({
  upload: {
    config: {
      provider: "strapi-provider-upload-supabase",
      providerOptions: {
        apiUrl: env('SUPABASE_API_URL'),
        apiKey: env('SUPABASE_API_KEY'),
        bucket: env('SUPABASE_BUCKET'),
        directory: env('SUPABASE_DIRECTORY'),
      }
    },
  }, 
})

Once I set this up I was getting this error:

{
  "statusCode": "401",
  "error": "Invalid JWT",
  "message": "new row violates row-level security policy for table \"objects\""
}

I had to turn of RLS for the object store in order to get it to work using the answer found here: https://stackoverflow.com/questions/72861584/supabase-bucket-policy-to-insert-file-not-working

Then to get thumbnails to work locally I needed my config/middlewares.ts file to look like this:

export default ({ env }) => [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:', 'http:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'res.cloudinary.com', // cloudinary images
            'lh3.googleusercontent.com', // google avatars
            'platform-lookaside.fbsbx.com', // facebook avatars
            'dl.airtable.com', // strapi marketplace,
            "market-assets.strapi.io",
            env('SUPABASE_API_URL'),
          ],
          'media-src': ["'self'", 'data:', 'blob:', env('SUPABASE_API_URL')],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

And it worked. Now I have a Strapi server wired up to use Supabase! Hope this helps someone out there.

A custom "iterable" class

Tea Reggi — Sat, 08 Jul 2023 06:31:28 +0000

Let's say you want to create a custom class, this class has a constructor parameter. For this example let's say we want to manage a "person", more like a "Person".

type PlainPerson = {
  name: string,
  age: number,
}

Let's say from this plain object we want to add some cool getters or methods:

class Person {
  constructor (public value: PlainPerson) {}
  get name () {
    return this.value.name;
  }
  get age () {
    return this.value.age;
  }
  get isOver20 () {
    return this.value.age >= 20
  }
}

Let's now say I want to iterate over many people. I can easily use an Array.

const john = new Person({ name: 'john', age: 30 })
const people = [john]
const filteredPeople = people.filter(person => person.isOver20)

And this works, this is perfectly acceptable. But what if you wanted more?

What if you wanted a collection of Person to do more then just what a normal array could provide?

What if I wanted to add all ages up for all the "people"?

Then I might consider a People class as well.

class People {
  get totalAge () {
    return value.reduce((acc, person) => person.age + acc, 0)
  }
}

But now the question is what should the constructor of People recieve? Should it recieve Person, or PlainPerson? Should it recieve an array of these? Can they be spread? Can People recieve many People and flatten them down?

I found myself asking these questions and decided to create something that would fix this issue and create a basic reproducable structure for any custom iterable. It kind of works like this:

const [Person, People] = FactoryIterable()

This returns two standard classes that you could use similar to how I described above. A Person and People they don't have any custom methods yet. In order to add them we need to extend these base-classes. So it may be best to rename them. I usually use the prefix Proto.

const [ProtoPerson, ProtoPeople] = FactoryIterable<PlainPerson>({
  multipleConverter: (value: PlainPerson | PlainPerson[] | undefined): PlainPerson[] => {
    if (value instanceof Array) {
      return value;
    } else if (typeof value === "object") {
      return [value];
    }
    throw new Error("Invalid value");
  },
})

class Person extends ProtoPerson {
  get name () {
    return this.value.name;
  }
  get age () {
    return this.value.age;
  }
  get isOver20 () {
    return this.value.age >= 20
  }
}

class People extends ProtoPeople<typeof Person, typeof People> {
  arrayMethods = this.generate(Person, People);
  get totalAge () {
    return value.reduce((acc, person) => person.age + acc, 0)
  }
}

The coolest thing about how these work is the input resolving. A Person can take PlainPerson and

const plainJohn = { name: "John", age: 20 }
const john = new Person(plainJohn)
const john2 = new Person(john)

assertEquals(john.value, plainJohn)
assertEquals(john2.value, plainJohn)

const a = new People(plainJohn)
const b = new People(john)
const c = new People(a)
const d = new People(b)
const e = new People([plainJohn])
const f = new People([john])
const g = new People([a])

assertEquals(a.value, [plainJohn])
assertEquals(b.value, [plainJohn])
assertEquals(c.value, [plainJohn])
assertEquals(d.value, [plainJohn])
assertEquals(e.value, [plainJohn])
assertEquals(f.value, [plainJohn])
assertEquals(g.value, [plainJohn])

That's a pretty bare-bones overview of how you'd use it. There are a could of extra details when it comes to input types and even circular input types, as well as adding generics. I have a couple examples of FactoryIterable in the wild as well as the source code.

Here's a main working test that demos this Person / People class https://github.com/reggi/tree_lint2/blob/main/factory_iterable/test.ts

Here's the source https://github.com/reggi/tree_lint2/blob/main/factory_iterable/mod.ts

Here are a couple other examples:

Node:
https://github.com/reggi/tree_lint2/blob/main/graph/node/mod.ts

EdgeNode https://github.com/reggi/tree_lint2/blob/main/graph/edge_node/mod.ts

Edge https://github.com/reggi/tree_lint2/blob/main/graph/edge/mod.ts

I invented a CLI tool to organize my typescript projects.

Tea Reggi — Fri, 23 Jun 2023 08:11:16 +0000

TLDR: This article is about a command-line tool designed to analyze and enforce a specific hierarchical folder structure within TypeScript projects called tree lint.

I often find myself coding outside the standard guidelines of a framework; no MVC for me. I'm usually deep in the weeds making file-system calls, reading here, writing there, and creating a CLI script using node or deno - something I want to be reusable down the line. I frequently struggle to wrangle all the files and folders I create. I usually start out with the approach to have the whole structure be flat, full of focus and vigilance.

However, soon after adopting this philosophy, things start to unravel. The entire folder becomes swamped with too much happening. Without compartmentalization of the files and folders into their respective silos, there's chaos.

Flat structures in entire projects can make it exceedingly difficult to segment things if you want to break the project out into multiple repositories. I often find myself coding and creating something within that project that could be utilized elsewhere and in other projects. Unfortunately, flat structures make it impossible to easily isolate a single node in the hierarchy, thereby forcing you to dismantle everything.

So, I've been trying to create smaller files and more of them, and placing them into different subdirectories where they share some characteristic or logic. I usually attempt to keep all these directories flat at the root of the project to avoid deep nesting, but the same thing repeats itself.

I often create one of these silos, make it perfect, and then realize I've duplicated logic from outside the silo that the rest of the code needs. What to do? I'm not a big fan of one "project" that's siloed reaching into the "cookie-jar" of another project that's supposedly siloed.

All of this adds to the complexity of a project. Not having a clear hierarchy of how the files and folders interact really throws me off. Even when I "invent" a structure myself, I come back to it days or even hours later, look at it and ask, "What have I done?"

If none of the issues I've described resonate with you because you write components in a components folder for a living, please feel free to close this browser tab. This post isn't for you.

Introducing tree_lint, a CLI tool that scans a directory and advises you on how the hierarchy should appear. It adheres to a few simple rules. These guidelines facilitate the understanding of which code utilizes what. Furthermore, they simplify the process of sectioning off chunks and transforming them into their own repositories.

Now, a repository is worth a thousand words, so it might be best to just go check out the repo and get an understanding of the layout from there:

reggi / tree_lint

🌴 ✅ A command-line tool designed to analyze and enforce a specific hierarchical folder structure within TypeScript projects.

tree lint

This is a command-line tool. Its job is to help you organize your TypeScript projects. The philosophy of the structure is to allow you to keep all relevant files within the same hierarchy node so it's easy to break it out into its own repository. The rules for how the directories/projects work are as follows:

Each dir is a "project".
Each project can contain whatever files you want. The convention is ideally a single mod.ts, test.ts etc file.
Dependents of the project live as a sibling next to its mod.ts in a folder and so on, building a hierarchy.
Projects that are not used by any other project will be at the top of the tree.
Projects with only one usage should be nested within that project.
Projects that are used by more than one project are placed as a sibling of the highest (top-most) project in…

View on GitHub

Each dir is a "project".
Each project can contain whatever files you want. The convention is ideally a single mod.ts, test.ts etc file.
Dependents of the project live as a sibling next to its mod.ts in a folder and so on, building a hierarchy.
Projects that are not used by any other project will be at the top of the tree.
Projects with only one usage should be nested within that project.
Projects that are used by more than one project are placed as a sibling of the highest (top-most) project in the tree.
Circular projects will be siblings.

There's a lot of complex logic to get circular dependencies to work correctly and to do this hoisting logic to make things siblings. If you're interested, feel free to check out the repo.

This might very well just be a "me" problem. But on the off chance that it's not, I'd love to hear about it. Comment below if this is useful or if you, too, struggle with the agonizing task of organizing "files" and "folders". I'm now at peace, knowing there's a lintable solution, and I don't need to think about it anymore 🧘.

My Frustration With Web Components.

Tea Reggi — Mon, 29 May 2023 18:51:40 +0000

TLDR: I want to tool to build and bundle a HTML file (with <template> and <script> into a single JS file

I have a bone to pick with Web Components at the moment. Mainly tooling around bundling and the overall experience of creating them. All which lead to a hit in performance when using them.

One use case I come back to over and over is a markdown editor. I've cobbled together a working version of a simple-mde web component. You can see it for yourself in this gist. It's loosely based off this 5-year-old repo here — a repo filled with outdated build tools, gulp and bower.

The format for this component is fairly straightforward. It includes a <template> with a single nested <style> tag. And a single <script> tag that creates the HTMLElement and adds it to the DOM. The issue with this code is that both the CSS and JS have external dependencies, totaling 4. They load from CDNs, which comes with its host of pros and cons. At this point, we've agreed that it's best practice to pull down and minify all of this.

To make matters worse, the way I've built this file in HTML is unusable. There's no standard way to include HTML within a document. A couple of years back, browsers teased us with being able to do <link rel="include" href="/component.html">, which doesn't work anymore, is impossible to even find ever existed on the internet. Here's a post about it. Of course, this functionality can still be added via custom code.

But what I want is a way to take the WORKING file I created above for my simple-mde web component and convert that HTML file to a bundled and minified JS file. I want all of the dependencies to be bundled into the file, the <template> code to be converted to a string, and automatically add it to the DOM when the file loads. Finally, the <script> tag would be removed. All of this can be bundled as a single JS file, so the entire component is contained.

Why don't we have a way to bundle web components this way? 😤

Forem: Tea Reggi

When to use an Astro component over a Web Component.

What is an Astro component?

What does HeadingFragment look like in Astro?

What does heading-fragment look like as a web component?

Conclusion

What does "Semantically Better" mean?

Your thoughts?

Editing Videos Using ffmpeg + TypeScript and Deno.

Brief Explainer

I built a wrapper

Recreating Mastodons Audio Player as a Web Component

What was the goal?

Why

What's next?

Project Context

In Defense of Having All Code in a Single File.

Why Can't I Just Use This Function? The Struggles with Code Reusability in JS

The "Postgres First" Trend

omnigres / omnigres

The All-in-One Database

Omnigres

Blogs and Publications

🏃 Quick start

reggi / pg_json_functions

A collection of Postgres functions designed to work with supabase's RPC calls.

What do I hope to achive?

Hosting Services List

Static-Site hosting

App hosting

Tunneling Self-hosting / Install platform

Framework Interoperable Component Libraries Using Lit Web Components.

Using Supabase as a database and image store with Strapi CMS.

A custom "iterable" class

I invented a CLI tool to organize my typescript projects.

reggi / tree_lint

🌴 ✅ A command-line tool designed to analyze and enforce a specific hierarchical folder structure within TypeScript projects.

tree lint

My Frustration With Web Components.

What does `HeadingFragment` look like in Astro?

What does `heading-fragment` look like as a web component?