DEV Community: bronifty

Deno Deploy Static Site

bronifty — Thu, 15 Jun 2023 16:26:13 +0000

Use deployctl and Github Actions with a deploytcl task to deploy static sites to Deno Deploy

Steps:

Create the static site content (either html etc or run the vite and then build, move into dist dir)
run the deployctl script using http file server
- You'll need the access token to run the deployctl from your command line
- when add the repo in settings with github action in a subsequent step and 'link' the repo to your account, you won't need the access token to deploy

export DENO_DEPLOY_TOKEN=abcdefg
cd dist
deployctl deploy --project=careful-goat-90 https://deno.land/std@0.171.0/http/file_server.ts

Make sure you can get a deployment with that. Then we'll link the project to your github and use github action

deno run --allow-read --allow-write --allow-env npm:create-vite-extra@latest

the github action

name: Deploy

on: push

jobs:
  deploy:
    runs-on: ubuntu-latest

    permissions:
      id-token: write # This is required to allow the GitHub Action to authenticate with Deno Deploy.
      contents: read

    steps:
      - name: Clone repository
        uses: actions/checkout@v3

      - name: Install Deno
        uses: denoland/setup-deno@v1

      - name: Build
        run: deno task build

      - name: Deploy to Deno Deploy
        uses: denoland/deployctl@v1
        with:
          project: late-duck-63 # the name of the project on Deno Deploy
          entrypoint: https://deno.land/std/http/file_server.ts
          root: dist

React-Server-Components-From-Scratch

bronifty — Thu, 08 Jun 2023 11:08:17 +0000

codsandbox link

takes a minute to load; make sure it's using node 18; web page runs on 8080; yarn or npm start
codesandbox refreshes and acts weird especially with the browser history (back and fwd buttons) so you won't get a high fidelity experience with it; if you run it locally it is much better

github repo

youtube tutorial

Add TLS/SSL to Your VPS With Let's Encrypt or Caddy Server (Portainer Edition)

bronifty — Sun, 19 Feb 2023 11:00:57 +0000

youtube for this post

This is supplemental material for Rawkode's Portainer series, which shows the steps for initializing your environment with the VPS and DNS.

rawkode playlist
github

TLS

1) launch ubuntu vm with access to ports 22 80 443 (aws & gcp)
2) map ip address to domain in cloudflare
3) install deps (snap certbot docker)

Certbot Method

1) install certbot, symbollically link it to path and run the standalone server
2) run portainer with the volumes mapped to the cert and key

Caddy Method

1) update Caddyfile email and hostname
2) remove existing portainer docker container
3) run portainer without the mapping on 8000 and 9443
4) run caddy to reverse proxy from 80 and 443 to portainer on 9443

Install Portainer on a VPS

AWS EC2

Free tier eligible - t2.micro
- defaults

GCP

Free tier: - 1 non-preemptible e2-micro VM instance per month in one of the following US regions:
- Oregon: us-west1
- Iowa: us-central1
- South Carolina: us-east1
30 GB-months standard persistent disk

Use MinIO for AWS s3 Multipart Upload - Reference Implementation in Node.js

bronifty — Sun, 12 Feb 2023 01:17:13 +0000

Don't recreate the wheel with a multipart upload. MinIO has got you covered. Use their client (you don't need to install the server, it is generic S3 compatible)

1 update the .env.example file to .env and provide your AWS creds with bucket name
2 npm install and npm start
3 navigate to localhost:3000 and upload a file

check the repo for code and youtube for demo
blog
youtube
github

Dependency Injection With Deno 1.29.1 (Node Compatibility)

bronifty — Wed, 21 Dec 2022 13:25:00 +0000

Youtube Link
Github Repo

Leveraging Uncle Bob principles of Clean Code and Architecture to design some inversion of control and dependency injection in Deno's newest version with Node compatibility. The source uses classes instead of functions, because classes are cleaner (they house all properties and methods with access using a dot operator, instead of fishing around files and gathering exports).

To run this:

-make sure latest version of deno is installed
(deno 1.29.1) with npm: compatibility

deno run src/server.ts --allow-all

answer 'y' to all prompts

There are 2 endpoints

1 GET /
2 POST /users -d {name, age}

curl localhost:8080/

curl -X POST -H "Content-Type: application/json" \
 -d '{"name":"abc","age": 123}' \
 localhost:8080/users

Note

I did have an error in the node code because the post route kept creating duplicates despite the logic checking for that. For some reason, deno version runs much quicker and it doesn't have the bug.

Todo

add some tests

Obsidian Desktop Editor File System Bundle Splitting

bronifty — Fri, 04 Nov 2022 21:50:40 +0000

The Obsidian Editor splits your bundle of files on the os based on the folders you specify in the editor.

Analytics Engineering Study Topics

bronifty — Mon, 31 Oct 2022 01:06:36 +0000

DagsHub (Github for Data)

ClearML (ML in browser)

Dagster Blog - DuckDB Data Lake

Wes McKinney Stuff -

Phillip in the Cloud (IBIS Duckdb project)

Data Is a Wild West

bronifty — Thu, 27 Oct 2022 00:54:19 +0000

Data is a wild west even more than the web. We have different engines coming from different vendors doing different things. And even very sophisticated practitioners have difficulty categorizing all these things with abstractions that would make sense to a layperson. It even confuses practitioners who do nothing but data all day.

Iceberg is metadata; Parquet is data. Iceberg is metadata about a file pointing to the physical file in object storage. A catalog like Arctic organizes the metadata and the metadata files provide query plans or pointers to the files and locations in those files where the data lives.

Alex Merced shows us how to convert a csv file into Iceberg, which is the same process we use in query tools like mstr to map a semantic layer to a physical layer or a 'logical table' to a physical warehouse schema. In programming terminology, we are creating and assigning a struct or a tuple type to the data, which will help categorize it for queries related to the html form input, api format over the wire, and ultimately inside the data column in the db.

Here is a reference to Dremio Artic, a catalog for the metadata which provides organization and what the modern data stack presentation refers to as 'awareness', which, when coupled with the Iceberg metadata file mapping to Parquet, provides version control to the object storage, allowing in-place transformation and time-travel debugging.

As a personal anecdote, I have installed Dremio both on AWS and in Docker (have yet to try it in kubernetes on Okteto free tier). I do not know how to control my AWS bill when I fire up the cluster required to run this machinery. And the Docker instance is quite limited in terms of features, especially vis-a-vis various integrations. But it is great for a demo.

Study Topics; Pre-Project Brainstorming

bronifty — Sun, 23 Oct 2022 00:02:38 +0000

Study Topics

Some study topics I'm pursuing are based on various posts vids and titles. Manning, in particular, has a few books and projects that I am looking to peruse.

Web

API

Node

Platformatic DB

ETL

Web3

OSS Contribution

Node

Node Core

Qwik

Qwik Core Dev Training

Redux

Redux

Footnotes:

ETL

Node

Node Streams

Web

DSA

Prime

Auth

Data Viz

Graphql

Jamie Barton

Realtime Sync with Phoenix (Elixir)

bronifty — Sat, 22 Oct 2022 20:14:45 +0000

Our fav product dev Theo uses Pusher and some other websocket tools for his app Ping.gg

Theo - ping.gg

@t3dotgg

Ping is so good that you can't actually tell @linusgsebastian is calling in remotely

02:04 AM - 23 Apr 2022

Our fav maple leaf is using Liveblocks and Convex, among other things

MapleLeaf 🍁

@heyimmapleleaf

pubsub is not a solution, it's an implementation detail

20:24 PM - 21 Oct 2022

Investigating realtime sync app state and stumbled upon this tweet.

thomas 🌻

@thomasreggi

I love how @liveviewjs couples components with their server actions in one file, allowing you to not need an API for any event.

15:04 PM - 13 Oct 2022

So I looked into LiveView and it is built on Elixir lang's Phoenix web framework. That reminded me of this interview - Ockam with Mrinal Wadhwa with the Ockham boss who talks, specifically at @26:15 why they are using Elixir and the concerns around it compared to alternate solutions. This leads me to the conclusion that Phoenix built on Elixir is the framework to use for messaging or live syncing app state.

Video Live Streaming - a separate but not completely orthogonal (unrelated) subject

This video, which is part of a great series of Tech Bytes, discusses a similar subject of video live streaming.
TLDR; Whether you are capturing video from a camera or serving it from object storage, the process of streaming in chunks over the wire will be the same. It's similar to serving MD(X) from fs vs data from a remote API or CMS. Logic from the extraction step forward remains unchanged.

Web3 Version - LivePeer

boo 👻 nifty

@bronifty

There is 1 legit use case for web3 besides trading GBP for USD via USDC: video love streaming.

Live peer (or should I say love peer) distributes the workload from a centralized server to many nodes which -at once- 1. serve data & 2. get paid in tokens

14:38 PM - 18 Oct 2022

LivePeer

Node Core Dev Starter Kit

bronifty — Fri, 21 Oct 2022 20:25:20 +0000

Node TODO let's fire up the TODO app and commit a PR to node core.

Matteo Discord

Matteo Livestream on Twitch every Thursday at Noon EST

Changelog Podcasts where you will find discussions with Matteo Collina (@matteocollina) who talks about the details.

At Databases because you don't need ORM.

Patterns.Dev Rendering Notes (Deleted Twitter Posts)

bronifty — Thu, 20 Oct 2022 11:16:33 +0000

I do expect someone to correct me because I’m on a limb & veering into meta framework territory but feeling cute so will say anyway. Full SSR is hydrated once at the root of the DOM tree once all html is written & global closure of closures is constructed…
5:29 AM · Oct 20, 2022
·Twitter for iPhone
View Tweet analytics

boo 👻 nifty

·
1h
Replying to

Selective hydration can hydrate the DOM (attach React js handlers) before data is sent because html elements are wrapped in Suspense (a lazy load boundary synched with the server).
boo 👻 nifty

·
1h
What is server “sent” vs server “streamed”? It is the difference between serializing the DOM (stringnifying it as a convenient method of marshaling it over the wire by hyper-“text”-transfer-protocol) and piping it in chunks one at a time or several that is also fine
boo 👻 nifty

·
1h
What is this chunks? It is an automated task of node to slice a file into equal sized pieces, which are kept in order (like a linked list), and introduced into memory such that the server process may operate on them (eg pipe them to the browser). In the end, it is just an array.
boo 👻 nifty

·
1h
Stream is just array processing that node handles automatically with respect to memory contract management. Or memory management. You might say there is a contract as well.
boo 👻 nifty

·
45m
I'm going to refer to Addy & Lydia's 'Selective Hydration' as 'hydrating the skeleton' because handlers are attached to DOM sans data & fetcher could be isomorphic (same code on client & server produces same result; eg same call to db for data retrieval)
patterns.dev
Selective Hydration
How to use combine streaming server-side rendering with a new approach to hydration, selective hydration
boo 👻 nifty

·
14m
Finally, and I do expect pushback on this one, Islands Architecture is server rendered with JS sprinkles, meaning, like JQuery, it has multiple entry points without a single unified state lifecycle management paradigm...
boo 👻 nifty

·
14m
For instance, triggering a webhook would not send a message to the root of the app and cause it to rerender the component (to which the hook was attached as a handler during 'hydration') branch. The units of interactivity are as of yet (and for all time) unawares of one another

DEV Community: bronifty

Deno Deploy Static Site

React-Server-Components-From-Scratch

Add TLS/SSL to Your VPS With Let's Encrypt or Caddy Server (Portainer Edition)

TLS

Certbot Method

Caddy Method

Install Portainer on a VPS

AWS EC2

GCP

Use MinIO for AWS s3 Multipart Upload - Reference Implementation in Node.js

Dependency Injection With Deno 1.29.1 (Node Compatibility)

To run this:

There are 2 endpoints

Note

Todo

Obsidian Desktop Editor File System Bundle Splitting

Analytics Engineering Study Topics

Data Is a Wild West

Study Topics; Pre-Project Brainstorming

Study Topics

Web

API

Node

ETL

Video Distribution and Messaging

Auth

Observability

Reporting

Golang and Containers

Web3

OSS Contribution

Node

Qwik

Redux

ETL

Node

Web

DSA

Auth

Data Viz

Graphql

Realtime Sync with Phoenix (Elixir)

Video Live Streaming - a separate but not completely orthogonal (unrelated) subject

Web3 Version - LivePeer

Node Core Dev Starter Kit

Patterns.Dev Rendering Notes (Deleted Twitter Posts)