Skip to main content
tdro

Another wandering soul whispering into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by cdd20.

tdro micro.thedroneely.com view Markdown Plaintext Embed Permalink 103/50 words 34s read

Text fragments are a Chromium feature from a couple years ago. They (#:~:text=) emulate CTRL + F or window.find() from a . I experimented in times past with a snippet–like approach using <mark> with URL encoded terms on id + :target logic, such that clicking this link highlights the paragraph below.

text
https://web.dev/text-fragments/#:~:text=Text%20Fragments%20let%20you
The article says ’link boldy’, but personally fragments (any) work best on infrequently changing content. Long URLs do text fragments make. Annoying? Who knows/cares? They are not everywhere yet (Firefox). On another tangent; I discovered that hugo did have the urlquery function available (that nice blog saved me code surfing). #gists #webdev
tdro

Another wandering soul whispering into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by cdd20.

tdro micro.thedroneely.com view Markdown Plaintext Embed Permalink 68/50 words 23s read

It’s kinda neat how CSS animation rules are sort of simple in their construction. , rules could be made even simpler if the animation-delay property also allowed delays between iterations/intervals instead of at the start only. Interval delays could allow for writing drastically less key frame rules.

css
text-animation[hang] {
  animation: tilt-rightward 1.3s infinite, tilt-leftward 1.8s infinite;
}
Combining two key frame animations to create a hanging effect.
#gists #webdev
tdro

Another wandering soul whispering into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by cdd20.

tdro micro.thedroneely.com view Markdown Plaintext Embed Permalink 48/50 words 16s read
tdro

Another wandering soul whispering into the void. If you are looking for my blog you are in the wrong place. The profile and header pictures are brought to you by cdd20.

tdro micro.thedroneely.com (edited) view Markdown Plaintext Embed Permalink 140/50 words 47s read
My puppeteer scripts now use deno.

No more need for npm in my personal stack! spawnSync + which returns the local browser’s path.

javascript
import puppeteer from "https://deno.land/x/puppeteer@16.2.0/mod.ts";

const chrome = "firefox";   /* Browser Chrome: "firefox" | "chromium" | "google-chrome" | ... */
const product = "firefox";  /* Product Base:   "firefox" | "chrome" */

const { status, stdout, stderr } = Deno.spawnSync("which", {
  args: [ chrome, ],
});

const executablePath = new TextDecoder().decode(stdout).trim();

const browser = await puppeteer.launch({
  headless: false,
  executablePath: executablePath,
  product: product,
});

const page = await browser.newPage();
await page.setViewport({ width: 1024, height: 768, });

const sites = [ "example.com", ];

for (const site of sites) {
  await page.goto("http://" + site);
  await page.screenshot({ path: site + ".png" });
}

await browser.close();
Basic Boilerplate: Captures a picture of example.com (main.ts)
shell
deno run --allow-all --unstable main.ts
Deno Version: 1.23.0
#gists #webdev

Authors

Gallery

Following (6)

Web Ring