some notes.md

List of links

libhunt

Trunk based dev

https://trunkbaseddevelopment.com/

OpenAPI

https://openapi-generator.tech/ Swagger

About node_modules

• check find . -name "node_modules" -type d -prune -exec du -sh '{}' +

• delete find . -name "node_modules" -type d -prune -exec rm -rf '{}' +

Tailwind

https://csskatas.com/tracks

https://tailwind.run/new and https://rogden.github.io/tailwind-config-viewer/ and https://flowbite.com/docs/components/buttons/ and https://play.tailwindcss.com/ and https://github.com/netlify/classnames-template-literals

Some analytics

Umami

Load Testing

• ab used as: ab -k -n 1000 -c 100 http://localhost:4043/see to run "keep-alive" a total number of 1000 request, 100 at a time against our endpoint
• wrk used as: wrk -t5 -c100 -d30s --latency http://127.0.0.1:4043/sse, uses 5 threads, 100 connections against the app for 30s.
• loader.io -flood.io

Blazemeter University

• [HTTP2 tester](https://http2.pro/check>

Echo servers

• echo websockets with article

• echo HTTP

• https://github.com/PSPDFKit-labs/bypass

HTML tips:

• mailto, tel, sms: <a href="mailto:{email}.., <a href="tel:{phone}..

• spellcheck attribute: <input type="text" id="input1" spellcheck="true">

• sliders with type="range": `

• clear button with type="search": `

• pictures: source/img

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- Fallback if `.webp` images or <picture> tag not supported by the browser. -->
  <img src="logo.png" alt="logo">
</picture> 

Some tricks:

• tabindex -meter,
• ol-start,
• datalist,
• download attribute (<a href='path/to/file' download>),
• poster with <video poster="path/to/image">

Responsiveness on mobile to scroll on x

<div style="overflow-x:auto;">
  <table>
    ..table headers and rows
  </table>
</div>

Take a look at < < https://dev.to/turinumugisha_s/the-most-awesome-trick-for-tables-mobile-responsiveness-you-will-ever-need-32cp>

Copy to clipboard

• in terminal:

pbcopy ~/.ssh/id_rsa.pub

• in browser

function copyToClipboard(text) {
  navigator.clipboard.writeText(text);
} 

JS

• Instead of console.log(("number: ", number), do console.log({number}) !!

• access to dataset:

<div id="user" data-name="John Doe" data-age="29" data-something="Some Data">
  John Doe
</div>

<script>
  const user = document.getElementById('user');
  console.log(user.dataset); 
  // { name: "John Doe", age: "29", something: "Some Data" }
  console.log(user.dataset.name); // "John Doe"
</script> 

CSS

Drawer (muenu): pur CSS, no JS https://daisyui.com/components/drawer/

Cheat sheet: https://github.com/Pradeep-Pandey13/CSS-Cheatsheets

https://fjolt.com/

https://markodenic.com/css-tips/

Spinners

https://github.com/n3r4zzurr0/svg-spinners

https://epic-spinners.epicmax.co/

Markdown emojis

https://gist.github.com/rxaviers/7360908

QR code generator ofr a link

https://markodenic.com/tools/qr-code-generator/

Authorization - Authentication ...

2FA

• 2FA: https://authy.com/

MFA Authelia

https://www.authelia.com/

https://ettayeb.fr/configurer-authelia-avec-nginx-proxy-manager/

Credentials

Phoenix Authorization

Credential Api

Refresh token

Recaptcha

Google recaptcha

with React

Dynamic IP address

https://www.duckdns.org/

https://dynv6.com

https://noip.com

List here

https://dokku.com/ && deploy on Dokku

https://cloud.google.com/blog/topics/developers-practitioners/where-should-i-run-my-stuff-choosing-google-cloud-compute-option

Admin Panel

https://tabler.io/

Automatic HHTPS: Caddy, Nginx Proxy Manager

https://nginxproxymanager.com/

• reverse proxy
• https://caddy.community/t/using-caddy-as-a-reverse-proxy-in-a-home-network/9427 Permissions: https://community.letsencrypt.org/t/how-should-i-configured-permissions-for-this-server/144822

Websockets

• node: https://blog.logrocket.com/websockets-tutorial-how-to-go-real-time-with-node-and-react-8e4693fbf843/

Elixir

Elixir tips

CLI app

Livebook to connect to app via Wireguard tunnel

Esbuild - Elixir

https://aswinmohan.me/pagewise-js-liveview

Map - JSON

• via Postgres jsonb: https://elixirforum.com/t/convert-map-to-json-when-saving-to-database/20110/3

Elixir Desktop

<Building native-like Elixir apps for Windows, MacOS, Linux, iOS and Android using Phoenix LiveView!>

Dotenv, configuration and Elixir

https://blog.nytsoi.net/2020/05/05/elixir-time-for-configuration

https://blog.nytsoi.net/2021/04/17/elixir-simple-configuration

https://elixirforum.com/t/how-to-reload-env-vars-when-restarting-a-mix-release-app/49211/3

Liveview and React

https://stephenbussey.com/2022/04/13/react-in-liveview-how-and-why.html

GenServer - memory posts, (GC - Garbage Collection)

A common pattern for handling memory-expensive operations inside a GenServer is to spawn a separate process to do the processing - this means the process itself does not grow extensively in size, and the memory used for the computation can be freed immediately (when the “operation” process terminates) - you could even consider starting the process with a bigger initial heap to eliminate GC completely (though, that might be risky and excessive without thorough measurement).

For example, this could look like this:

def handle_call(_req, from, state) do
  task = Task.async(fn ->
    # some computation
  end)
  {:reply, Task.await(task), state}
end

Or in case the response could be delivered asynchronously, even like this:

def handle_call(_req, from, state) do
  Task.start_link(fn ->
    # some computation
    GenServer.reply(from, reply)
  end)
  {:noreply, state}
end

• :recon.bin_leak(10): :recon.bin_leaks(10) forces a garbage collect on all processes, and measures how many reference-counted binaries were freed per process.

• hibernate:

def handle_call(req, _from, state) do
  ...do something with state
  {:noreply, next_state, :hibernate}
end

https://elixirforum.com/t/trying-to-understand-genserver-memory-leak/49260/5

https://elixirforum.com/t/extremely-high-memory-usage-in-genservers/4035

Deploy Elixir / Phoenix

Digital Ocean with Docker

Coba

Example

Blog Elixir/Phoenix

https://bpaulino.com/entries/modern-webapps-with-elixir-phoenix-typescript-react

https://yiming.dev/blog/

https://kobrakai.de/

https://devtalk.com/elixir

https://willschenk.com/

Blog: session, comm LiveViews, https://thepugautomatic.com/tag/elixir/

https://weakty.com/blog/

https://smartlogic.io/blog/

https://nickstalter.com/

https://davelucia.com/

https://curiosum.com/blog/elixir-key-skills-junior

https://hidnasio.github.io/

Livebook

https://dashbit.co/blog/livebook-as-an-educational-tool

Ecto

Ex raw sql queries

Read? https://dev.to/cultofmetatron/database-modeling-with-ecto-part-1-376h

starter: https://serokell.io/blog/ecto-guide-for-beginners

https://blog.appsignal.com/2020/11/10/understanding-associations-in-elixir-ecto.html

Ecto/Reduce: https://weakty.com/blog/2022-07-08-refactoring-ecto-queries-with-reduce.html

CASE: https://manusachi.com/blog/sql-case-ecto

<https://cbailey.co.uk/posts/compositional_elixirecto_query_patterns?utm_medium=email&utm_source=elixir-radar

Multi intro: https://smartlogic.io/blog/introduction-to-ecto-multi/

Multi: https://smartlogic.io/blog/advanced-ecto-multi-usage/

Many2many: https://medium.com/coletiv-stories/ecto-elixir-many-to-many-relationships-66403933f8c1 Many2many: https://lostkobrakai.svbtle.com/a-case-against-many_to_many

PubSub

• via Endpoint: https://earthly.dev/blog/real-time-phoenix-elixir/
• via Phoenix.PubSub: https://abulasar.com/building-realtime-liveview-app-using-phoenix-pubsub
• • via Channel: https://info.codecast.io/blog/how-to-use-phoenix-channels

To read

• live cursors: https://koenvangilst.nl/blog/phoenix-live-cursors

• dynamic LV forms: https://weakty.com/blog/2022-05-03-dynamic-live-view-forms.html

• media storage - cdn : https://lofi.limo/blog/media-storage-and-cdn-with-phoenix-and-elixir

• music streaming: https://lofi.limo/blog/building-a-streaming-music-service-with-phoenix-and-elixir

• code smells : https://github.com/lucasvegi/Elixir-Code-Smells

• Git with Elixir: https://hidnasio.github.io/elixir/git/2022/05/03/git-history-with-elixir.html

• localStack/Broadway: https://hidnasio.github.io/elixir/2022/04/02/local-development-with-localstack-and-elixir-broadway.html

• data fetch: https://kobrakai.de/kolumne/data-fetching-using-livecomponents/

• upload files: https://smartlogic.io/blog/phoenix-file-upload-via-javascript/ and https://www.phoenixframework.org/blog/phoenix-live-view-upload-deep-dive

• misuse pubsub ? https://manusachi.com/blog/n%2B1-with-pubsub-liveviews-detect-with-open-telemetry

• save LV state: https://fly.io/phoenix-files/saving-and-restoring-liveview-state/

• Persistance client side: localstorage https://nickstalter.com/phoenix-liveview-with-localstorage-or-sessionstorage.html

https://thepugautomatic.com/2020/05/persistent-session-data-in-phoenix-liveview/

• init ETS table: https://elixirforum.com/t/how-to-initialize-an-ets-table-in-phoenix/29431

• Dangers Genserver: https://learn-elixir.dev/blogs/dangers-of-genservers

• Tasks :https://learn-elixir.dev/blogs/uses-of-elixir-task-module

https://launchscout.com/blog/distributed-elixir-with-livebook

https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-form-basics

https://thenewstack.io/implement-node-and-pod-affinity-anti-affinity-in-kubernetes-a-practical-example/

https://thenewstack.io/tutorial-apply-the-sidecar-pattern-to-deploy-redis-in-kubernetes/

https://learnk8s.io/sidecar-containers-patterns

https://learnk8s.io/authentication-kubernetes

https://mkaszubowski.com/2021/01/09/elixir-event-handling.html

https://blog.appsignal.com/2019/08/13/elixir-alchemy-multiplayer-go-with-registry-pubsub-and-dynamic-supervisors.html

https://www.thegreatcodeadventure.com/how-we-used-elixirs-genservers-dynamic-supervisors-to-build-concurrent-fault-tolerant-workflows/

Liveview sesions: https://pentacent.com/blog/phoenix-live-views-sessions/

Cache Elixir: https://www.openmymind.net/Building-A-Cache-In-Elixir/

Book Elixir: https://book.elixircryptobot.com/add-support-for-multiple-transactions-per-order.html

Rails

Blog Rails

https://world.hey.com/this.week.in.rails

Etherum?

https://www.ludu.co/course/ethereum/what-is-ethereum

Maps:

Maplibre G

Leaflet-map: https://github.com/bennypowers/leaflet-map

Leaflet Lit LV: https://github.com/jaredleishman/leaflet_live_view/blob/master/assets/js/leaflet/leaflet-map.js

Flight Simulator: https://alembic.com.au/blog/building-a-flight-simulator-in-phoenix-liveview

https://elixirforum.com/t/push-event-from-update-function-frontend-seems-to-not-receive-events/42495/3

Graphics

• vega-lite and https://github.com/livebook-dev/vega_lite

• Graphviz & dot language