1. weeknotes

    Weeknotes #23

    • wrote a new post: The CSS Mindset
    • saw a live show by Tool, one of my favourite bands
    • got lots of work done with the guys at Simpleloop
    • learned a bit about React hooks and how to use them.
    • 0
    • 0
    View Note
  2. weeknotes

    Weeknotes #22

    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.
    • 0
    • 1
    View Note
  3. 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!
    • 0
    • 0
    View Note
  4. 💡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
    }
    • 0
    • 0
    View Note
  5. 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

    • 0
    • 2
    View Note
  6. 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

    • 0
    • 0
    View Note
  7. 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

    • 0
    • 0
    View Note
  8. 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

    • 0
    • 1
    View Note
  9. 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.

    • 9
    • 0
    View Note
  10. 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.

    • 0
    • 0
    View Note