This month I learned - November 2017

Winter's coming (oh noooo!) and my highlight this month was definitely that I participated in Inclusive Design 24 which is a 24 hour online event full only dealing with accessibility and inclusive design. So far I only made it to watch a few videos but it's definitely worth it.

Apart from that I dealt with timezones for a project and these are always "fun"... I learned something that still puzzles me. Timezones are not always described with full hours. There is e.g. Indian Standard Time (UTC+05:30) and or the Nepal Time Zone (UTC+05:45). What? 🤣

Anyways... this month I had four learnings covering a format called MHTML, git and focus handling. Enjoy!

  • What's 'roving tabindex'?

    Focus handling is essential for accessible and well functioning interfaces. Especially when building complex interfaces with custom UI components we all should check if we can achieve our goals by using the keyboard only.

    The tabindex html element attribute plays a big role when dealing with focus. So let's quickly recap what values you can set:

    <!-- 
      tabindex="0" -> element should be focusable 
      in sequential keyboard navigation
    -->
    <foo tabindex="0">Foo</foo>
    
    <!-- 
      tabindex="-1" -> element should be focusable, 
      but should not be reachable 
      via sequential keyboard navigation
    -->
    <bar tabindex="-1">Bar</bar>

    You can also set positive numbers but this is considered to be an anti-pattern because you can define the focus order of elements and this usually harms more than it helps.

    With the tabindex attribute you can control if elements can be focusable and if they should be reachable with keyboard navigation. This can become very useful when you want to lead the focus to elements after certain user interactions.

    I use tabindex when it makes sense but I never heard the term "roving tabindex" until recently (or I simply forgot).

    This "roving tabindex" is a technique to maintain focus state. Think of a group of a few custom radio elements. What should be the behavior when you "tab" into this group? I'm expecting the following:

    - tab into         👉🏻 the active radio gets focus
    - left/right arrow 👉🏻 another radio element get focus
    - another tab      👉🏻 focus goes out of the radio group
    - tab back in      👉🏻 the last active radio get focus

    This can be achieved with a smart usage of setting tabindex=0 and tabindex=-1. The active element then has tabindex="0" to be get focus when the user "tabs" in and all the other elements tabindex="-1" to not be reachable by the keyboard. A little bit of JavaScript then toggles the given states in case another elements becomes active.

    <radio tabindex="-1">1</radio>
    <radio tabindex="-1">2</radio>
    <radio tabindex="0">3</radio>
    <radio tabindex="-1">4</radio>
    <radio tabindex="-1">5</radio>

    And this technique of toggling tabindex is called "roving tabindex". I discovered that Rob Dodson even recorded a whole a11ycast episode on this topic so make sure to check this one out.

    And that's it for today. ;)

  • There is a format called 'mhtml' that inlines assets

    Last week I attended my first IndieWebCamp in Berlin. In case you don't know IndieWeb on their site is written that IndieWeb is "a people-focused alternative to the 'corporate web'".

    But what does that mean? It focuses on three things:

    • owning your own data
    • connecting of websites without third parties
    • giving control to people doing things in the web

    These three points are huge so when you're interested in learning more check their site. IndieWeb has very interesting ideas and technologies that are definitely worth a look.

    But back to topic... at the event I learned about MHTML. What is that?

    MTHML stands for MIME Encapsulation of Aggregate HTML Documents and it's purpose is to archive a particular site. The idea of this format is to include all needed resources in a single document so that you really have a complete state when saving it as .mhtml. This way you can e.g. document the progress or the evolution of a site quite nicely.

    I gave it a shot and what I first discovered is that .mthml files are actually saved as HTML emails which is interesting.

    From: 
    X-Snapshot-Version: 1.0
    X-Snapshot-Title: =?utf-8?Q?Stefan's web dev journey?=
    X-Snapshot-Content-Location: https://www.stefanjudis.com/
    Subject: Stefan's web dev journey
    Date: Mon, 12 Nov 2017 13:17:49 -0000
    MIME-Version: 1.0
    Content-Type: multipart/related;
        type="text/html";
        boundary="----MultipartBoundary--YzyWG99RMsqjUz8wY8LIZ2io3lmh8mmIKJAd7bejyV----"
    
    ------MultipartBoundary--YzyWG99RMsqjUz8wY8LIZ2io3lmh8mmIKJAd7bejyV----
    Content-Type: text/html
    Content-ID: 
    Content-Transfer-Encoding: quoted-printable
    Content-Location: https://www.stefanjudis.com/
    
    <!DOCTYPE html><html data-n-head=3D"lang" lang=3D"en" class=3D"gr__stefanju=
    dis_com">...</html>

    Going further I checked how images are included in the document.

    <!-- I have no idea how this works -->
    <img src=3D"https://images.contentful.=
    com/f20lfrunubsq/qZrrGql6VwaoE2YU8CUuE/a4276082432402bd90933ab3de335bf7/sto=
    ck-photo-227882431.jpg?w=3D150" alt=3D"Stefan Judis" class=3D"c-person__ima=
    ge" width=3D"142" height=3D"142">

    I expected images to be inlined in the image elements but they are not. You can find the images inlined at the end of the file.

    ------MultipartBoundary--YzyWG99RMsqjUz8wY8LIZ2io3lmh8mmIKJAd7bejyV----
    Content-Type: image/jpeg
    Content-Transfer-Encoding: base64
    Content-Location: https://images.contentful.com/f20lfrunubsq/qZrrGql6VwaoE2YU8CUuE/a4276082432402bd90933ab3de335bf7/stock-photo-227882431.jpg?w=150
    
    /9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdC...

    I don't really understand how this works technically but I think it's good to know that you can safe a complete website in a single document. Maybe I start archiving my own site every month? :D

    If you want to start using .mhtml check the Wikipedia entry. It describes how you can use it in your browser of choice.

  • The short version of 'git status' and the close but different '--porcelain' mode

    A while back I came across a tweet by Ben Lesh and he mentioned a CLI flag for the git status command I didn't know – --porcelain.

    When you execute git status with this flag the result looks as follows:

    > git status --porcelain
     M nuxt.config.js
     M package-lock.json
     M package.json
    ?? untracked.file

    This is pretty nice. I use git for quite a while now and I usually go with the "normal" git status command whose output is a little bit more verbose.

    > git status
    On branch master
    Your branch is ahead of 'origin/master' by 1 commit.
      (use "git push" to publish your local commits)
    
    Changes not staged for commit:
      (use "git add ..." to update what will be committed)
      (use "git checkout -- ..." to discard changes in working directory)
    
        modified:   nuxt.config.js
        modified:   package-lock.json
        modified:   package.json
    
    Untracked files:
      (use "git add ..." to include in what will be committed)
    
        untracked.file
    
    no changes added to commit (use "git add" and/or "git commit -a")

    The problem with this is that it shows a lot of help and information I'm actually not interested in. I think I'll go with the compact version from now.

    But what is this porcelain flag about?

    I started reading the docs and found out that there is also the -s or --short flag.

    > git status -s                                                                                                                                                                                  
     M nuxt.config.js
     M package-lock.json
     M package.json
    ?? untracked.file

    On the first look, these seem to be very similar, but there is one difference that is only visible in my terminal.

    Git status -s vs git status --porcelain

    git status -s highlights the characters that give information on the status of a certain file so that it's easier to read. This is missing when using --porcelain.

    So why's that? It turns out that --porcelain is used to get output that is easily parseable by a script. Imagine you run some automation that has to check the status of a git repository first. What you don't want to have is help text and terminal colors included in the output then.

    And what you also don't want is that the output changes or differs from git version to git version. --porcelain also guarantees that there won't be backwards incompatible changes to the output so that your scripts won't break with a git update. That's really cool!

    The last thing I learned is also that --porcelain comes with different included versions (remember the backwards compability promise). Without a defined version --porcelain uses the v1 format which you see above. There is also a v2 available which looks like that:

    > git status --porcelain=v2
    1 .M N... 100644 100644 100644 9f49fa176b56de04416172603c0f8e623706cf7a 9f49fa176b56de04416172603c0f8e623706cf7a nuxt.config.js
    1 .M N... 100644 100644 100644 7042578104220c9fa983a749e8f87d488a7a9e80 7042578104220c9fa983a749e8f87d488a7a9e80 package-lock.json
    1 .M N... 100644 100644 100644 823ac73a97a0f9c9c73e9bd775bd3421d7a2940c 823ac73a97a0f9c9c73e9bd775bd3421d7a2940c package.json
    ? untracked.file

    v2 includes more additional information.

    For advanced automation using git, --porcelain definitely can be very useful. The flag is also available e.g. for commands like push or blame.

    Really cool! 🎉

  • cmd/ctrl + shift + click opens a new tabs focuses it

    That's a really quick one. I'm not a big fan of target=_blank links because I prefer to use cmd/ctrl + click to open a new tab when I like it. The problem with this is that it always opens a new tab in the background.

    I find myself navigating to the new tab then very often but there is help:

    cmd/ctrl + shift + click also lets the browser focus the new tab! 🎉

Disqus loads a ton of things and I'd like to save this. If you want to comment hit the button below.

If you like this post share it or follow me on Twitter.