| // 3D Dom viewer, copy-paste this into your console to visualise the DOM as a stack of solid blocks. | |
| // You can also minify and save it as a bookmarklet (https://www.freecodecamp.org/news/what-are-bookmarklets/) | |
| (() => { | |
| const SHOW_SIDES = false; // color sides of DOM nodes? | |
| const COLOR_SURFACE = true; // color tops of DOM nodes? | |
| const COLOR_RANDOM = false; // randomise color? | |
| const COLOR_HUE = 190; // hue in HSL (https://hslpicker.com) | |
| const MAX_ROTATION = 180; // set to 360 to rotate all the way round | |
| const THICKNESS = 20; // thickness of layers | |
| const DISTANCE = 10000; // ¯\\_(ツ)_/¯ |
| storybook:test-runner8: | |
| image: mcr.microsoft.com/playwright:v1.39.0-jammy | |
| stage: build-and-test | |
| artifacts: | |
| expire_in: 2 weeks | |
| when: always | |
| paths: | |
| - .storybook-images/__diff_output__/ | |
| - .storybook-images/__received_output__/ | |
| before_script: |
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
| { | |
| "Gore": [ | |
| "Blood", "Bloodbath", "Crucifixion", "Bloody", "Flesh", "Bruises", "Car crash", "Corpse", "Crucified", "Cutting", "Decapitate", "Infested", "Gruesome", "Kill (as in Kill la Kill)", "Infected", "Sadist", "Slaughter", "Teratoma", "Tryphophobia", "Wound", "Cronenberg", "Khorne", "Cannibal", "Cannibalism", "Visceral", "Guts", "Bloodshot", "Gory", "Killing", "Surgery", "Vivisection", "Massacre", "Hemoglobin", "Suicide", "Female Body Parts" | |
| ], | |
| "Drugs": [ | |
| "Drugs", "Cocaine", "Heroin", "Meth", "Crack" | |
| ], | |
| "Clothing": [ | |
| "no clothes", "Speedo", "au naturale", "no shirt", "bare chest", "nude", "barely dressed", "bra", "risqué", "clear", "scantily", "clad", "cleavage", "stripped", "full frontal unclothed", "invisible clothes", "wearing nothing", "lingerie with no shirt", "naked", "without clothes on", "negligee", "zero clothes" | |
| ], |
| import z from "zod"; | |
| export async function safeFetch<T>( | |
| schema: z.Schema<T>, | |
| input: RequestInfo, | |
| init?: RequestInit | |
| ): Promise<T> { | |
| const response = await fetch(input, init); | |
| if (!response.ok) { |
All of the following values for the <script type=" ••• "> will cause inline or external JavaScript to execute:
| Value | Note |
|---|---|
"" |
The default value of script.type (eg: no type attribute present) |
"text/javascript" |
The official JavaScript MIME type |
"application/javascript" |
Legacy MIME type from when semantics mattered |
"text/x-javascript" |
Legacy MIME type from before JavaScript was accepted as a valid MIME type |
| workflow: | |
| rules: | |
| - if: $CI_COMMIT_BRANCH == "main" | |
| image: node | |
| pages: | |
| variables: | |
| # Replace this variable with your own path. Just copy everything right behind the domain gitlab.io. Don't forget to add | |
| # the slash at the beginnig. |
| /* | |
| Functionality – when executed, these lines are copied to the clipboard: | |
| 1. The URL of the current web page. | |
| 2. The title of the current web page (as originally written) | |
| 3. The title of the current web page (converted to sentence case with a crude algorithm) | |
| 4. Optionally: The currently selected text (if any). | |
| Installation: Create a bookmark whose URL is the code below (including `javascript:{···}`): | |
| – Tested in Chrome and Safari. | |
| – Both browsers can handle URLs with multiple lines. |
| // Can you make this faster? Ping me. | |
| const escapeHtml = (function () { | |
| const serializer = new XMLSerializer (); | |
| const attr = document.createAttribute ( 'attr' ); | |
| const re = /[&<>"]/; | |
| return function escapeHtml ( str ) { | |
| if ( !re.test ( str ) ) return str; | |
| attr.value = str; | |
| return serializer.serializeToString ( attr ); |
This site throws in users and, most importantly, developers face, the fact publishing websites with hundreds of JS Kilobytes just to see some content, content that might also break due JS itself or browsers that haven't been tested or targeted, is very bad.
The same site is also great to remind everyone that a11y (accessibility) matters, and if you got upset by its disruptive technique, and you are a Web developer, now you know how it feels for people incapable of surfing the "modern Web" with its overly-bloated frameworks and practices that way too often don't take a11y into account.
However, JS is not to blame here, while developers abusing JS without following graceful enhancement practices, or without testing their sites offer some meaningful content even for users that might have disabled JS for whatever reason, are to blame so ... please "don't be that kind of developer".
That being said, as an exercise to see if I could surf it via JS, I've created this ti