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
  • 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
  • 143/50 words 48s read
    My puppeteer scripts now use deno.

    No more need for npm in my personal stack! The native browser’s path comes from which.

    javascript
    import puppeteer from "https://deno.land/x/puppeteer@16.2.0/mod.ts";
    
    const chrome = "chromium";  // Browser Chrome: "firefox" | "chromium" | "google-chrome" | ...
    const product = "chrome";   // Product Base:   "firefox" | "chrome"
    
    const command = new Deno.Command("which", { args: [chrome] });
    const { status, stdout, stderr } = command.outputSync();
    const executablePath = new TextDecoder().decode(stdout).trim();
    
    const browser = await puppeteer.launch({
      headless: false,
      executablePath: executablePath,
      product: product,
    });
    
    const site = "example.com";
    const page = await browser.newPage();
    
    await page.setViewport({ width: 1024, height: 768 });
    await page.goto("https://" + site);
    await page.screenshot({ path: site + ".png" });
    
    await page.waitForSelector('a');
    
    const url = await page.evaluate(() => {
      return document.querySelector('a').href;
    });
    
    console.log(url);
    
    await browser.close();
    Basic Boilerplate: Captures a picture of example.com (main.ts)
    shell
    deno run --allow-all main.ts
    Deno Version: 1.45.5
    #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
  • 37/50 words 12s read

    I’ve got so many feeds in my feed reader that selectively filtering terms is a necessity — it gets real meta huh? I know all I need to know about Next.js at this point, no more :-)

    #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

    Static dynamic is a marketing trick. If truth be told a lot of tech marketing is highly suspicious…

    “The finest eloquence is that which gets things done; the worst is that which delays them.”

    I don’t know who said that, but that quote sums it all up.

    #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 (edited) view
  • Markdown Plaintext Embed Permalink
  • 81/50 words 27s read

    Flexbox as a base layout is convenient but tricky due to or “jank”. If the dimensions of the base flex container(s) are ambiguous, then the browser constantly recomputes the dimensions as streams in.

    My favorite trick is to give the browser dimension hints and avoid computational properties like flex. Set as many dimensions (width/height) as possible unambiguously. My Internet speed is sufficiently slow enough that I can see layout shifts in many sites, including my own (this micro blog).

    #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
  • 44/50 words 15s read

    The “CSS router” has always been quite the clever trick for navigating sufficiently small sites. This site uses it to scroll switch pages, and portable.fyi gets clever with visibility :target switching. Do it just right and no one notices unless they “inspect the elements”.

    #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
  • 49/50 words 16s read

    It’s always humbling when I get around to reading a web related spec. and have a lot of functionality. JavaScript’s not bad (it’s the easiest part of web development) but gives you just enough rope to do super silly things like reinventing all built in browser functions.

    #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
  • 59/50 words 20s read

    White spaces in trick many into writing complex — web development is trollish that way. Firefox’s developer tools show generated white spaces! Hopefully your abstraction is munging HTML faithfully. It’s easy to fight white spaces without realising it. That generally leads to using unsuitable display types and other shenanigans.

    Firefox Developer Tools
    Firefox’s white space detector
    Index: Cache · Source
    #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
  • 50/50 words 17s read

    WordPress rants are a joy to read, but where’s the simpler, safer replacement? Never forget that software is highly corporatized and mostly crafted for corporations, not humans. WordPress sits among the few that mere mortals can work with and understand. The complete revival of static sites might save us, maybe.

    #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
  • 80/50 words 27s read
    Web servers can be spun up quickly on the command line but with gotchas.

    Take the innocent web server .

    shell
    php -S 127.0.0.1:8080

    Best not to use PHP’s web server cli (even for PHP) because routes with a dot (.) are assumed to be static files. Use a real web server or superior cli web servers with minor gotchas.

    shell
    python -m http.server --bind 127.0.0.1 8080
    busybox httpd -f -p 127.0.0.1:8080
    ruby -run -e httpd . -p 8080
    #gists #webdev

    Authors