This Web Components keeps the year in your copyright notice up-to-date.
export { CopyrightYearElement }
const name = "copyright-year";
class CopyrightYearElement extends HTMLSpanElement {
// 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; // ¯\\_(ツ)_/¯ |
/* | |
Serve is a very simple static file server in go | |
Usage: | |
-p="8100": port to serve on | |
-d=".": the directory of static files to host | |
Navigating to http://localhost:8100 will display the index.html or directory | |
listing file. | |
*/ | |
package main |
#!/bin/bash | |
# usage: ./watermark.sh "your text" input_image_path.png | |
convert -background none -fill "rgba(128,128,128,0.25)" -font Arial -rotate -30 -pointsize 14 label:"$1" /tmp/wm.png | |
convert $2 -alpha on \( +clone -tile /tmp/wm.png -draw "color 0,0 reset" \) -composite result.png | |
#rm /tmp/wm.png |
I liked the way Grokking the coding interview organized problems into learnable patterns. However, the course is expensive and the majority of the time the problems are copy-pasted from leetcode. As the explanations on leetcode are usually just as good, the course really boils down to being a glorified curated list of leetcode problems.
So below I made a list of leetcode problems that are as close to grokking problems as possible.
以下転載:
If you don't want to deal with styling a mostly text-based HTML document, plop these lines in and it'll look good:
html {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-size: 1.3em;
max-width: 40rem;
padding: 2rem;
margin: auto;
line-height: 1.5rem;
/** | |
* Tiny customElement wrapper that enables scalable web component architecture. | |
* Define custom elements with a configuration object that separates markup from css and javascript. | |
* Uses a slotted light DOM (no shadow DOM) to allow for powerful component extension, | |
* composition and easier styling with external stylesheets and global css variables. | |
* Exports a component class that can be imported and explicitly used to be picked up by module bundlers. | |
* See comments for examples and GNU license below. | |
*/ | |
export function defineComponent(name, config) { |
import { Context, HonoRequest, Next } from "hono"; | |
import { validateFramesPost } from "@xmtp/frames-validator"; | |
export const xmtpSupport = async (c: Context, next: Next) => { | |
await next(); | |
const isFrame = c.res.headers.get("content-type")?.includes("html"); | |
if (!isFrame) return; | |
if (!(await isXMTP(c.req))) return; |