1. weeknotes

    I’m giving this “weeknotes” thing a shot after seeing it on some other blogs! (I’m starting with 22 because that’s the current calendar week).

    • Started digging into webcomponents with lit-html. So far I like it, feels very straightforward.
    • Met Manuel for drinks and shoptalk. Interesting stuff is happening!
    • Saw Ethan’s Talk “The World-Wide Work” from New Adventures Conf, which really got me thinking about the general direction the web is taking, and our role as developers in it.
    • Booked a flight for a spontaneous short trip to Tbilisi, Georgia.
    View Note
  2. We use gitlab issues at work, which supports tagging commit messages with an issue number, to make that commit appear in the issue thread. I often forget to tag my messages though, and then remember a second after committing.

    So I wrote a little helper function as a custom git command:

    #!/bin/sh

    OLD_MSG=$(git log --format=%B -n1)
    git commit --amend -m "$OLD_MSG, #$1"

    It’s just a simple shell script that fetches the last commit message and appends the issue number. So I can do this:

    $ git commit -m "add css grid support"
    # ah fuck, forgot that this is related to an issue!
    $ git append-issue 27
    # commit msg is now: "add css grid support, #27"

    To make it work:

    • Name the shell script git-append-issue (no extension)
    • save it in a folder in your home directory, i.e. ~/git-commands
    • make it executable with chmod 555
    • add that folder to your $PATH
    • git now recognizes your custom command!
    View Note
  3. 💡Friendly reminder: if you include analytics or other tracking scripts on your site, please respect the “Do Not Track” client setting. You can check for it like this:

    function allowsTracking() {
    const dnt =
    window.doNotTrack ||
    navigator.doNotTrack ||
    navigator.msDoNotTrack
    if (dnt === 1 || dnt === '1' || dnt === 'yes') {
    return false
    }
    if ('msTrackingProtectionEnabled' in window.external) {
    return !window.external.msTrackingProtectionEnabled()
    }
    return true
    }

    if (allowsTracking()) {
    // Analytics Tracking Code Here
    }
    View Note
  4. detecting autofill on form inputs is not very straightforward. One solution involves hooking up an empty animation to the :-webkit-autofill pseudo class, then listening for that animation in JS. (works in chrome/safari) code: https://codepen.io/mxbck/pen/XQrymm

    View Note
  5. biggest win for semantic HTML? It’s just waaaay easier to type <button> and be done with it than to try and bolt shit on a div with lots of attributes and JS. With everything you get for free, why would you want to do all that extra work?

    RT twitter.com/AdamRackis/status/1109526799455784960

    View Note
  6. Usually, when writing print CSS, you would want to omit background-color declarations to improve readability (and save ink).

    I had a case at work today though where I actually needed them to print. It was used in some progress indicators that didn’t make any sense without it. But some browsers ignore background-color by default in print, unless the user selects otherwise.

    If you absolutely have to override that, there’s -webkit-print-color-adjust: exact.
    It only works in Chrome and Safari though.

    -webkit-print-color-adjust on MDN

    View Note
  7. TIL there’s a media query for display-mode, triggered i.e. when a PWA is launched from the homescreen in standalone mode.
    via Google Developer Web Fundamentals

    View Note
  8. While I applaud the new wave of people publishing on their own blogs, I still feel this is too hard to do for non-tech folks. Here’s what I’d love to see:

    A platform that includes

    • free hosting
    • the ability to buy a custom domain
    • a simple CMS for writing posts
    • an integrated RSS feed reader to “follow” your friends
    • a “content stream” showing recent posts of blogs you subscribed to
    • webmention support - see reactions to your post
    • the ability to get it all up and running without ever touching code

    I think Netlify / NetlifyCMS checks a lot of these boxes, but still requires some tech knowledge, i.e. you need to have a git repo and understand some of the basic concepts (“deploy”, “build”, “static”…)

    Ideally, I’d like a page with a big “start your own blog” button, and a process that’s just as easy as signing up for Facebook.

    View Note
  9. Ever wanted to inspect some UI that only appears on specific interactions? Run window.setTimeout(() => {debugger}, 5000) in the devtools console: page will freeze in 5 seconds.

    View Note
  10. The internet used to be a weird funny place, and a lot more people just hacked stuff together. Can we get that back? https://jarredsumner.com/codeblog/

    View Note