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.
tabindexhtml 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.
tabindexattribute 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.
tabindexwhen 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=-1. The active element then has
tabindex="0"to be get focus when the user "tabs" in and all the other elements
<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 that's it for today. ;)
There is a format called 'mhtml' that inlines assets
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?
MTHMLstands 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
.mthmlfiles are actually saved as HTML emails which is interesting.
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
.mhtmlcheck 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
When you execute
git statuswith 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 statuscommand 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
I started reading the docs and found out that there is also the
> 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 -shighlights the characters that give information on the status of a certain file so that it's easier to read. This is missing when using
So why's that? It turns out that
--porcelainis 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.
--porcelainalso 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
--porcelaincomes with different included versions (remember the backwards compability promise). Without a defined version
v1format which you see above. There is also a
v2available 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
v2includes more additional information.
For advanced automation using git,
--porcelaindefinitely can be very useful. The flag is also available e.g. for commands like
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=_blanklinks because I prefer to use
clickto 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:
clickalso lets the browser focus the new tab! 🎉