| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Single File Web Component</title> | |
| </head> | |
| <body> | |
| <template id=single-file> | |
| <style> | |
| h1 { |
| -- Based off IETF draft, https://datatracker.ietf.org/doc/draft-peabody-dispatch-new-uuid-format/ | |
| create or replace function uuid_generate_v7() | |
| returns uuid | |
| as $$ | |
| begin | |
| -- use random v4 uuid as starting point (which has the same variant we need) | |
| -- then overlay timestamp | |
| -- then set version 7 by flipping the 2 and 1 bit in the version 4 string | |
| return encode( |
| // paste the code below into browser console in any youtube page and call `record(from, to)` | |
| // from and to are in seconds | |
| async function record(from, to) { | |
| var mediaElement=document.querySelector('video') | |
| var recordedChunks = []; | |
| var mimeType = 'audio/webm;codecs="opus"' | |
| var ac = new AudioContext(); | |
| var mediaSource = new MediaElementAudioSourceNode(ac, {mediaElement}); |
It's come to my attention that some people have been spamming issue trackers with a link to this gist. While it's a good idea to inform people of the situation in principle, please do not do this. By all means spread the word in the communities that you are a part of, after verifying that they are not aware yet, but unsolicited spam is not helpful. It will just frustrate people.
A number of things have happened since the last update.
| // WARNING: There's much more to know/do around hooks, and | |
| // this is just a simplification of how these work. | |
| // shared references, updated | |
| // per each hook invoke | |
| let execution = null; | |
| let current = null; | |
| let context = null; | |
| let args = null; |
I am recently re-branding my libraries as µ (micro), refactoring these when necessary, dropping IE < 11 support, improving the logic where possible, or providing a better, more robust, or faster, API.
In few words, on the right there is the modern version of libraries I've used for the last ~5 years in production or for side projects, and I suggest anyone having one of the earlier dependencies, to have a look at their modern, micro, counterpart.
All sizes are minified, brotli compressed, and representing these two files, when possible:
It's React Hooks for Remote Data Fetching, a hook designed to render data on demand.
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher);