| customElements.define( | |
| "i-frame", | |
| class extends HTMLElement { | |
| #shadow = this.attachShadow({ mode: "closed" }); | |
| constructor() { | |
| super(); | |
| this.#shadow.innerHTML = ` | |
| <slot></slot> | |
| <iframe part="frame" srcdoc=""></iframe> |
This gist is a simple no-brainer description of the 3 ways (actually 2.5) the Web handle events.
The declarative inline HTML event listener is mostly an indirection of DOM Level 0 events, meaning this simply uses the equivalent of tag.onclick = listener behind the scene.
click me
| import { riff, route, html, indexRoute } from "../riff/riff.mjs"; | |
| import { serve } from "../riff/riff-express.mjs"; | |
| import { | |
| deleteTask, | |
| getProjects, | |
| getTasks, | |
| getUser, | |
| sendEmail, | |
| updateTask, | |
| createTask, |
Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.
It isn't rocket science, but a quick recap of how frameworks such as react do SSR:
| import invariant from "tiny-invariant"; | |
| class AmalgoBox extends HTMLElement { | |
| get input() { | |
| return this.querySelector("input") as HTMLInputElement; | |
| } | |
| get button() { | |
| return this.querySelector("button") as HTMLButtonElement; | |
| } |
| export default function MyMessage({ html, state }) { | |
| const { attrs } = state | |
| const { message='' } = attrs | |
| return html` | |
| <h1>${ message }</h1> | |
| <script type="module"> | |
| class MyMessage extends HTMLElement { | |
| constructor() { | |
| super() |
| /* | |
| Made by Elly Loel - https://ellyloel.com/ | |
| With inspiration from: | |
| - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/ | |
| - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/ | |
| - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE | |
| Notes: | |
| - `:where()` is used to lower specificity for easy overriding. | |
| */ |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Single File Web Component</title> | |
| </head> | |
| <body> | |
| <template id=single-file> | |
| <style> | |
| h1 { |
| import path from "node:path"; | |
| import fse from "fs-extra"; | |
| import svgstore from "svgstore"; | |
| import { glob } from "glob"; | |
| import prettier from "prettier"; | |
| let HEROICONS_PATH = path.join(process.cwd(), "node_modules/heroicons"); | |
| let ASSETS_PATH = path.join(process.cwd(), "assets"); | |
| let OUTFILE = path.join(process.cwd(), "app/components/sprite/index.svg"); |
| # Usage: | |
| # Copy this file with the same name "note-link-janitor-gh-action-workflow.yml" to the <repo>/.github/workflows/ folder | |
| # I keep all my *.md files in SRC and run janitor only on that folder. If you keep it in the root of repository or any other folder, feel free to update it on line 37 of this file | |
| # The workflow gets triggered every time you push to your repository | |
| name: note-link-janitor-gh-action-workflow | |
| # Run this workflow every time a new commit pushed to your repository | |
| on: push | |
| jobs: |
