HTML

<css-demo>
    <div class="panels">
        <style spellcheck="false" contenteditable>
@scope {
    /* Demo CSS */
}
        </style>
        <div class="demo">
            <!-- Demo HTML -->
        </div>
    </div>
</css-demo>

Our custom tag <css-demo> has display: inline by default, just like a span. We need to change it in CSS later.

With contenteditable attribute on a tag you can edit the text of the tag. We’ve already used it here.

Add spellcheck="false" to disable automatic spell checking. Yeah, browser, I see that my CSS is not really English.

CSS

All the magic happens here.

Let’s make a grid with two columns of the same width.

* {
    box-sizing: border-box;
}

css-demo {
    --height: 100vh; /* let's make it fullscreen */

    height: var(--height);
    display: block; /* fix default `inline` behaviour */

    .panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: var(--height);
        border: 3px solid #777;

        > style {
            height: 100%;
        }

        > .demo {
            display: grid;
            place-items: center;
            border-left: 3px solid #777;
        }
    }
}

Yeah, I use CSS Nesting, why not? It looks suitable here. And there is a pretty border to separate the code and the demo.

I added a .panels wrapper to Miriam’s example to have more freedom to style the container.

Then we need to make our <style> content visible and readable.

style {
    display: block; /* magic! */
    font-family: "Fira Code", monospace;
    white-space: pre;
    overflow: scroll;
    padding: 1em 1.5em;
}

You can use any monospaced font to display the code.

Make sure you use white-space: pre to display the CSS code as it was written in your demo source code.

Let’s make it adaptive and embeddable. CSS Container Queries — that’s your time!

css-demo {
    container: css-demo / size;
}

@container css-demo (width < 800px) {
    .panels {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

And let’s make our demo better for dark theme users.

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

Combine it all.

* {
    box-sizing: border-box;
}

@media (prefers-color-scheme: dark) {
    html {
        color-scheme: dark;
    }
}

css-demo {
    --height: 100vh;
    height: var(--height);
    display: block;
    container: css-demo / size;

    .panels {
        display: grid;
        height: var(--height);
        grid-template-columns: 1fr 1fr;
        border: 3px solid #777;

        > style {
            display: block;
            font-family: "Fira Code", monospace;
            white-space: pre;
            overflow: scroll;
            height: 100%;
            padding: 1em 1.5em;
        }

        > .demo {
            display: grid;
            place-items: center;
            border-left: 3px solid #777;
        }

        @container css-demo (width < 800px) {
            & {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr 1fr;

                > .demo {
                    border-top: 3px solid #777;
                    border-left: none;
                }
            }
        }
    }
}

You can play with the component here.

Unfortunately, right now, this CSS editor only works in stable Chrome and Safari Technology Preview. But I believe it will work in Firefox soon.

When coding, I usually have several versions of the website open: the production version, the local version, and the version on the testing stage. When they all have the same title and the same favicons, it can be confusing.

It will be handy if the tab in the browser looks different for different builds. And I can change the favicon, can’t I?

The simplest favicon

Lea Verou twitted a modern way to make a minimalistic emoji favicon.

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100">
    <text y=".9em" font-size="90">🍉</text>
</svg>

That’s it. Simple, three lines of code, working.

This is handy for three reasons:

1. It’s easy to update.
2. You can make numerous different favicons.
3. They look equally good in light and dark themes.

Ok, now just save your favorite emoji to favicon_dev.svg.

Add the favicon to the project

There are several options here.

Build

Most likely, you have a website build script. So, at build time, you can throw an environment variable to the builder.

{
    "scripts": {
        "build": "eleventy && gulp build",
        "build:prod": "ELEVENTY_ENV=production npm run build",
        "build:dev": "ELEVENTY_ENV=development npm run build",
    }
}

My blog is built using Gulp (yeah, yeah, and what are you going to do to me, I’m in another city). I would make this kind of replacement at build time.

var gulp = require('gulp');
var replace = require('gulp-replace');

gulp.task('favicon', function() {
    if (process.env.ELEVENTY_ENV === 'production') {
        return new Promise((resolve) => resolve());
    }

    return gulp
        .src(`${PUBLIC_PATH}/**/index.html`)
        .pipe(replace(
            /<link rel="icon" href="https://mefody.dev/chunks/favicon-dev/\/favicon\.ico">/g,
            '<link rel="icon" href="https://mefody.dev/chunks/favicon-dev/favicon_dev.svg" type="image/svg+xml">'
        ))
        .pipe(gulp.dest(PUBLIC_PATH));
});

Templating language

My blog is a static site. There is Eleventy under the hood. The page templates are written using the Nunjucks. Here’s how to teach Eleventy to swap out the favicon.

1. Place environment variables into the data cascade.

// file: src/data/isdevelopment.js

require('dotenv').config();

module.exports = function() {
    return process.env.ELEVENTY_ENV === 'development';
};

2. Use the variable in your header template.

{% if isdevelopment %}
    <link rel="icon" href="/favicon_dev.svg" type="image/svg+xml">
{% else %}
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/images/favicon/favicon-180.png">
{% endif %}

Client

You can move the logic of changing the favicon to the client.

if (location.hostname === "localhost" ||
    location.hostname === "127.0.0.1") {
    const faviconEl = document.querySelector('link[rel=icon]');
    faviconEl.setAttribute("href", "/favicon_dev.svg");
    faviconEl.setAttribute("type", "image/svg+xml");
}

Sources

• Different Favicon for Dev and Prod
• How to Favicon in 2024: Six files that fit most needs

Disclaimer: People expect some defaults by… default. And the selection is one of such things. Don’t change the default behavior just because you can. The selection should be obvious.

Selection

If the default blue background for the selection on your website is not compatible with the design of your website, you can use ::selection pseudo-element to change it.

::selection {
    color: var(--color-text);
    background: var(--color-accent);
}

For ancient Firefox versions (61 and below) don’t forget about ::-moz-selection.

::-moz-selection {
    color: white;
    background: red;
}

The ::selection pseudo can change not all the CSS properties inside of it. The list is really short:

• color;
• background-color;
• text-decoration;
• text-shadow.

If you use SVG, you can also change stroke-color, fill-color, and stroke-width.

This restriction can be simply explained. When the user selects the text, they expect to have an immediate response. And, of course, there should not be any layout shifts. Any background images can cause an image loading, and any margins will cause layout shifts. So, you can change only fast for rendering properties. And when you use background: blue, the browser will change it to background-color: blue.

It’s important to remember accessibility. The contrast ratio between the background color and text color must be at least 4.5:1. Don’t forget about the contrast between selection background and element background. If they have almost the same color, your users will be confused.

By default, browsers try to use system settings for selection. For example, macOS users can change the selection color via “OS Settings → General” and Chrome respects this color. There is no way to get this color from JS or CSS (it will be a big privacy issue if they can).

Target selection

There is another selection that Blink browsers have by default. Try to visit this link. If you use Chromium-based browser you will see the selection on a text fragment passed to the URL. And you can style this selection too.

::target-text {
    color: white;
    background-color: tomato;
}

The ::target-text has the same restrictions as ::selection. MDN proposes to change font-weight in their example, but I hope this PR will be merged soon.

Sources

• CSS Pseudo-Elements Module Level 4

So, how to debug such ninja elements? Let’s use Chrome DevTools possibilities for that.

Toggle element state

The most general solution is to choose :hover state in the Toggle Element State panel.

Let’s see it in action.

Unfortunately, in many cases, enabling pseudo-classes is not enough.

Emulate a focused page

For pages that use JavaScript to toggle a focused state you can try to emulate focus on a page. Did you know that you can call a Command Menu with Ctrl Shift P (⌘ ⇧ P for macOS)? It has a command Emulate a focused page that can help us with our issue.

Let’s see it in action.

Break on attribute modifications

In some very strange cases, the hover state is set with JavaScript. And it is difficult to debug such cases because JS doesn’t handle a focus state. But we have a “hammer” for that.

When the class attribute of the element is changed, we’ll have a JavaScript breakpoint triggered.

Let’s see it in action.

Materials

• Inspect an element shown on hover
• Run commands in the Command Menu

Why do I need to make something accessible?

Do you have a perfect vision? Will it be perfect forever?

Have you had your hand broken sometime? Arm dislocation, maybe? Cut your finger? How was it to use websites?

Did you have a broken mouse sometime? Broken touchpad? Imagine that your touchpad is broken, and you need to find some repair service to fix it, but your phone is discharged, and the search page is made the way you can’t follow the link using the keyboard. Good luck!

We (developers) still do not know how to calculate the lost profit. Anatoly Popko (my blinded colleague from Yandex) said that he wants to spend his money using some services but the services don’t want to get his money just because their functionality is inaccessible.

When we make our websites comfortable for people with disabilities, we make these sites very comfortable for us.

How can people use your site?

• With a screenreader. The website is voiced by a screenreader. It’s useful for blinded people.
• With keyboard. There is a possibility to use website without mouse, using Tab, Enter, Space and arrows. It’s useful for people with locomotor system disabilities or somebody who just want to use a keyboard.
• With a mouse. It’s useful for people who can’t use a keyboard.
• With zoom. Just because I have poor eyesight.
• With contrast. For people with color blindness.
• Without animations. For people with epilepsy.
• With left hand. For left-handed persons.

How to make the component accessible?

1. Use ready-made solutions

You are not the first person who wants to make an accessible component. Smashing Magazine has an awesome article with many links about the a11y.

2. Use semantic tags

Screenreader will do all the job if you have nav, ul, button, a, dialog, etc. It can’t do the same if you use div and span only.

3. Use ARIA

If you can’t solve your task with semantic tags only. But please, try point 2 first.

4. Do not use tiny interactive elements

Try to touch some tiny 5×5 button to close some adv popup. It enrages! Use 44px as a minimum dimension for any interactive element, it’s enough for fingers.

5. Link <a> should have some text inside it

Screenreader reads the URL if it hasn’t. Let me guess, you don’t have readable URLs for all your links, have you? If your links don’t have texts by design, add <span class="visibility-hidden">Text</span> for that. But try to talk to your designer first.

6. Links vs Buttons

Do you have the web-app state recoverable by URL? It’s an <a> link. Haven’t you? It’s a <button>.

7. Don’t use only icons for buttons or links

Add some hidden span or aria-label to give that element a text. Talk to your designer to make the element better. Not every person understands your icons, but almost everybody understands the text.

8. Add alt to your images

Blind people want to read them too. Can’t you do that? Use alt="" to hide the image from screenreader. It will announce the URL if you haven’t an alt attribute. Let me guess, you don’t have readable URLs for all your images, have you?

9. Don’t hide visual focus

If you don’t like the default style of a focus, make your own custom styles. Explain to your designer, that you can’t hide the focus. If they argue with you, add the cursor: none to their Firgma workspace to explain it more clearly.

10. Trap the focus inside the modal.

The focus shouldn’t move outside.

11. Move the focus inside the modal on its opening

12. Return the focus back when the modal is closed

13. Don’t use only the colors to create some difference

If you use red to mark errors and green to mark success messages, somebody sees some color to mark something… Add icons, text, underlines instead. Why in general we use red color to mark something dangerous, huh?

14. Use captions for videos

Don’t use videos with forced subtitles, they can’t be translated.

15. Use prefers-* media features

For example, prefers-reduced-motion or prefers-contrast. If I’ve set such an option for my OS, I have some reasons for that.

16. Don’t use tiny font size

It’s annoying. I can’t see tiny texts. If your designer decided to use 10px as a font-size, make his Figma workspace better with font-size: 5px !important everywhere. But try to talk with them first.

17. Don’t try too hard

Make your general scenarios work first. If your ’BUY’ button doesn’t work, it makes no sense to add perfect captions to all the images on a page. Fix the main scenario first.

18. Use correct texts for interactive elements

Don’t use Button text inside the <button>. All the roles are read by the screenreader by default.

Resources

• A Complete Guide To Accessible Front-End Components

So, what’s the problem?

If you have the title ’I ❤ Frontend’, it is rendered differently in different browsers on different operating systems. For example, on Android and iOS it looks like emoji. And that’s a huge problem if you have to style the title.

Unicode

It’s all about rendering. Nikita Prokopov described it in his detailed article about emojis.

Every symbol you use has its UTF-8 sequence. For example, letter A is U+0041, letter Z is U+005A, $ is U+0024, etc. The same is for emoji, ❤ is U+2764.

You can even paste it into your HTML as a Unicode sequence, not a symbol.

<span>I ❤ Frontend</span>
or
<span>I &#x2764; Frontend</span>

&#x is for Unicode prefixing.

But what if the current font hasn’t any glyph that can render your UTF-8 symbol? OS tries to find any font that has that glyph. So, iOS will find the Apple Color Emoji font, Android will find the Noto Color Emoji font, etc. And it looks like we have some possibilities to control it.

Fonts

The first decision is to have a font that has all your necessary glyphs. For example, Arial. Or some custom font. You need to add that font to font fallbacks in your CSS.

body {
    font-family: 'Text Font', 'Custom Glyphs Font', sans-serif;
}

I don’t like such solutions because I can’t control all the glyphs in the text. Especially if I have some kind of content management system. And it’s a pain to rebuild the font every time I need a new glyph.

Variation selectors

Luckily, we have another option. UTF has special characters to control the rendering. U+FE0E asks OS and browser to render the previous glyph as text, U+FE0F asks to render the previous glyph as emoji.

So, let’s try to use it.

<ul>
    <li>&#x2600; can be rendered differently.</li>
    <li>&#x2600;&#xFE0F; should look like a sun emoji.</li>
    <li>&#x2600;&#xFE0E; should look like a sun text symbol.</li>
</ul>

• ☀ can be rendered differently.
• ☀️ should look like a sun emoji.
• ☀︎ should look like a sun text symbol.

So, if you need to disable emoji in your text, convert the symbol to UTF-8 or UTF-16 sequence (symbol.codePointAt(0).toString(16)), than add &#xFE0E to it.

<span>I &#x2764;&#xFE0E; Frontend</span>

But it won’t work for the heart emoji on Android. I don’t know why. When we tested it last year, it was ok, but… You can play around with different emojis in this sandbox. As for me, something is better than nothing.

Accessibility

Remember that all emojis have text representations. For example, ⭐︎ is white medium star, ► is black right-pointing pointer, etc. And screen readers will use these texts.

So, our I ❤ Frontend becomes I Red Heart Frontend. I suppose we didn’t mean that.

To fix it, use the glyph the right way.

<span role="img" aria-label="Love">&#x2764;</span>

And the final result we used on the conference website is below.

<h1>
    I <span role="img" aria-label="Love">&#x2764;&#xFE0E;</span> Frontend!
</h1>

Resources

• Emoji under the hood
• Unicode symbol as text or emoji
• U+FE0E VARIATION SELECTOR-15
• Accessible emoji

We are people, not machines

I found the answer on humanstxt.org. It’s a really cool initiative to add info about all the creators of the website.

We are always saying that, but the only file we generate is one full of additional information for the searchbots: robots.txt. Then why not doing one for ourselves?

And that’s true. So I’ve added such file to my blog.

Also, I found a lot of websites that already use the file in different ways.

• Google added humans.txt to their domain almost ten years ago.
• GitHub redirects requests to this file to their ‘About’ page.
• Evil Martians made redirect from humans.txt to martians.txt with the same format.

How to?

1. Add the file humans.txt to the root of your site.
2. Add info about all the site creators to this file.
3. Add <link rel="author" href="/humans.txt"> to the <head>.

Read more: humans.txt: Quick start

Automation

I want to keep the section /* THANKS */ with the list of all contributors actual. So I’ve added some automation to update the list on every local build:

1. Get data from git shortlog -sne. s is for summary only, e is for contributors emails, n is for the number of commits.
2. Remove contributors with my emails from the list.
3. Save the list to data file.
4. Put the list to humans.txt on every build.

Source code.

Resources

• Humans TXT: We Are People, Not Machines.

README.md

You can add a chapter to the README.md file with instructions on setting up git hooks locally. With links to gists or something like that. But this way is not the true way.

npm prepare

There is a way to add some automation to your package after npm install run. Npm has useful lifecycle scripts that can help you. The prepare script looks really suitable for our task to install git hooks on a local machine.

{
    "scripts": {
        "prepare": "bash ./copy-hooks.sh"
    },
}

But you still need to write your copy-hooks.sh script. Not a good way for frontend beginners.

Separate folder

To make git hooks a part of a repository, you can just move them to a separate folder. For example, to .githooks or .config/githooks. But you still need to have some steps that will make these hooks executable.

Git can help you with it. Command git config core.hooksPath .config/githooks tells your local git to use .config/githooks as a folder with hooks. Pretty simple.

{
    "scripts": {
        "prepare": "git config core.hooksPath .config/githooks"
    },
}

Konstantinos Leimonis proposes another trick with symlinks.

find .git/hooks -type l -exec rm {} \\;
find .githooks -type f -exec ln -sf ../../{} .git/hooks/ \\;

This code links scripts from .githooks folder to .git/hooks/. So when git tries to call some hook from its default directory it will execute the hook from your separate directory.

Git hooks managers

There is a lot of projects that can help you to avoid bash learning if you just want to use web technologies for development. My favorite tools are:

• husky — hooks manager on steroids with a big community. It is lightweight and MIT licensed in the stable version. I use it in my work projects.
• simple-git-hooks — hooks manager for small-sized projects. I use it in my blog repo.

With these managers, you don’t need to write any bash scripts, but you can. And their auto-installation is still simple. My package.json looks like this:

{
    "scripts": {
        "prepare": "npx simple-git-hooks"
    },
    "simple-git-hooks": {
        "pre-push": "npm run lint"
    }
}

Honestly, you don’t need all this prepare stuff for simple-git-hooks because it uses its own postinstall script and makes all the automation by itself. Husky had such automation before, but they decided to change the behavior.

Resources

• npm scripts
• How To Ease Your Team’s Development Workflow With Git Hooks
• Husky docs

Git hooks basics

Git hook is a snippet triggered when the git executes something. For example, if you have a strict rule “No tabs for indentation”, you can create a hook that checks all the changed files to satisfy the rule. Git will run this check and stop the action (push, commit), if the rule has been ignored by some impudent contributor.

There are many git actions you can interfere with:

• pre-commit
• pre-merge-commit
• prepare-commit-msg
• commit-msg
• post-commit
• pre-rebase
• post-checkout
• post-merge
• pre-push
• etc.

You can find more information about all existing git hooks here.

To set up a hook, you should create an executable file in the .git/hooks directory named according to the spec.

Let’s create a simple hook that runs linters on every git push. It will help to keep the repo clean.

cd .git/hooks # go to the hooks directory
vi pre-push # create or edit the hook

Paste the following code to the file.

#!/bin/sh
npm run lint

Pretty simple, right? This hook just runs a custom npm script from your package.json. You can use my config as an example.

Save, exit, commit, profit!

Note: it’s important to make the hook file executable. The magic will not happen without it.

chmod +x pre-push # make the file executable

Useful git hooks

If you know bash language a little, you can add many useful git hooks to your project.

Of course, you can use not only bash for your git hooks. It can be everything executable, like Python or even JS. But remember that bash is preinstalled and can be run on most environments, whereas other languages should be installed and configured before their usage. So I prefer bash.

Check these projects to have inspiration:

• aitemr / awesome-git-hooks
• compscilauren / awesome-git-hooks

Put the Task ID to commit messages

If your team decided to use task ids from the task tracker (JIRA, Wrike, whatever else) in commit messages, create a prepare-commit-msg file in the .git/hooks directory and paste the following code there.

#!/bin/sh

# .git/hooks/prepare-commit-msg

COMMIT_MSG=$(cat $1)
CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)
TASK_ID_REGEX="[A-Z]+-[0-9]+" # corresponds to JIRA-123 or SERP-666
TASK_ID_FROM_CURRENT_BRANCH=$(echo "$CURRENT_BRANCH" | grep -Eo "$TASK_ID_REGEX")

if [ ! -z "$TASK_ID_FROM_CURRENT_BRANCH" ]; then
    echo "$TASK_ID_FROM_CURRENT_BRANCH: $COMMIT_MSG" > $1
fi

It parses your branch name, and if the name contains something looking like the task ID, the hook prepends this ID to the commit message. For example, if you have the branch named AREA-51 and your commit message is Find UFO, the final commit message will be AREA-51: Find UFO.

You can make this hook much smarter like here.

Get notified about new dependencies after checkout

Paste the following code to the .git/hooks/post-checkout.

#!/bin/sh

# .git/hooks/post-checkout

PREV_COMMIT=$1
POST_COMMIT=$2

if [ -f package-lock.json ]; then
    if ! git diff --quiet $PREV_COMMIT..$POST_COMMIT -- package-lock.json; then
        echo "'package-lock.json' has been changed. Please, run 'npm ci' to update dependencies."
    fi
fi

You can make it more colourful and even let it running npm ci automatically like here. But I don’t like when my tools install something without my permission.

Disable direct commits to the main branch

It’s a common pattern to have no direct commits to the main branch. Let your CI do all the thing. Of course, you must configure your repository to avoid such situation, but it’s ok to add more confidence with an extra check on a git level.

Paste the following code to the .git/hooks/pre-push.

#!/bin/sh

# .git/hooks/pre-push

CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)

if [ "$CURRENT_BRANCH" = "main" ]; then
    echo "YOU SHALL NOT PASS!\nDear $USER, you don't want to commit directly to the 'main' branch ;)"
    exit 1
fi

Note: it’s important to keep exit 1 in the code to stop the push.

I found a cool example of public alerting about the accident here. But you should be sure all your teammates are ok with such sort of blaming.

simple-git-hooks with lint-staged

If your project is small and you don’t need complicated hooks with dozens of checks, try to use a lightweight library simple-git-hooks. It has some limitations but its possibilities are enough for my opensource projects.

I use the next flow:

1. Run linters on staged files before commit and fix the files automatically if it’s possible.
2. Run linters on all files before push.

To work with staged changes only I use another useful library lint-staged.

Let’s configure the project to implement the flow. Firstly, install the packages.

npm install --save-dev simple-git-hooks lint-staged

Then add a configuration to your package.json.

{
    "scripts": {
        "lint": "npm run lint:editorconfig && npm run lint:css && npm run lint:js"
    },
    "lint-staged": {
        "*": [
            "editorconfig-checker"
        ],
        "*.js": [
            "eslint --fix"
        ],
        "*.css": [
            "stylelint --fix"
        ]
    },
    "simple-git-hooks": {
        "pre-commit": "npx lint-staged",
        "pre-push": "npm run lint"
    }
}

As you can see, I use editorconfig to check all the files and separate linters for JS and CSS files. So when I commit, simple-git-hooks calls the lint-staged, and lint-staged does all the magic connected to fixing the staged files.

When I try to push my local changes to the remote repo, simple-git-hooks starts linters with npm run lint, and if the linters fail, the push will be stopped until I fix all the errors.

To apply the config, run the following command.

npx simple-git-hooks

More: Git Hooks: share with your team

Conclusion

It’s easier to have clean code in your repo when you have git hooks configured. Add clear warning messages with helpful tips, links, and instructions to help other people contribute to your project. And don’t waste your time fixing the accidents instead of preventing them.

Resources

• Git Hooks documentation
• Bitbucket: Git Hooks tutorial
• Git Hooks
• Tips for using a git pre-commit hook

When we want to change these default colors, we have to use some of 1001 ways to create custom-styled form controls with all their bugs coming.

Imagine if you could change the color of checkboxes to match the theme color of your site…

If your heart is beating faster after the words above, what do you think about the accent-color CSS property?

accent-color

Last year, I found an interesting issue in the CSSWG drafts titled ‘Allow specifying the “accent color” of a form control element’.

Adam Argyle made me dream about this feature again this February after his tweet:

accent-color: hotpink; 🎉 Chromium is prototyping the style feature for forms! I couldn’t wait, so I went and tried it out in a custom build. Here it is! hotpink checkboxes with 1 line of CSS 😎

Disclaimer: it still doesn’t work, don’t try to use it at home. Or maybe you can use it as a progressive enhancement?

So what does the spec say? Let’s visit the CSS Basic User Interface Module Level 4.

The accent-color CSS property allows the author to specify the accent color for user-interface controls generated by the element.

The UA should use the specified accent-color to draw whichever parts of the element’s control(s) would have otherwise been styled with an accent color.

Sounds interesting. If my website has some theme colors, can I use them to make all the form controls more… design integrated? Without hacks and bugs.

:root {
    --color-accent: #ffcc00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-accent: #880088;
    }
}

body {
    accent-color: var(--color-accent);
}

Just one line of CSS!

If you see not defaultish form controls below, then the future has arrived, and your browser supports accent-color right now.

Early demos

During the last GDE meeting Joey Arhar showed us a really curious demo of his implementation of the accent-color property in Chrome: https://accent-color.glitch.me/.

If you see all of the form controls on the page blue, it’s ok. To see the rainbow, you need a Canary version of Chrome with “Experimental Web Platform features” enabled:

1. Go to chrome://flags/.
2. Enable “Experimental Web Platform features”.
3. Restart the browser.
4. Ta-da!

With Firefox Nightly, you can do the same:

1. Go to about:config.
2. Enable “browser.preferences.experimental”.
3. Restart the browser.
4. Ta-da!

If you did everything right, you might see something like this.

PWA

If you’ve already made your web application installable (PWA), you can set the theme color of its standalone version.

<meta name="theme-color" content="#ffcc00">

In the new Safari 15 this tiny snippet will make your website look trendy on macOS too.

But the next step will be full coloring of your PWA.

<meta name="theme-color" content="#ffcc00">
<style>
    body { accent-color: #ffcc00; }
</style>

Browser support

The accent-color is now supported under experimental flags in Firefox and Chrome. You can watch the statuses in bug trackers:

• Chrome Platform Status
• Firefox Bugzilla
• WebKit Bugzilla

It still has some bugs and difficulties that need to be solved. You can set the color you want, but the user agent must keep the form control accessible. So it’s still in beta. But you can help browsers test the early implementations of the feature and share your feedback in bug trackers.

Content-Disposition header

The most valid way is to add a Content-Disposition header on the server.

Content-Disposition: attachment; filename=kitten.jpg

When your browser finds the attachment value, it starts to download the file, not to show it.

But sometimes you can’t change any server configs, so we need a more browserish way to solve the problem.

download attribute

The easiest way to do this is to add the download attribute to your link.

If you just add it without any value, your browser will try to get the name of the file from its Content-Disposition header (yeah, it has high priority) or its path.

<a href="images/kitten.jpg" download>
    <img src="images/kitten-preview.jpg" alt="Kitten photo preview">
</a>

Try it: demo link.

You can set some value to download if you want to change the default name. It can help when you have some strange auto-generated URL like https://cdn/images/a1H5-st42-Av1f-rUles.

<a href="images/1h24v9lj.jpg" download="kitten">
    Download
</a>

Try it: demo link.

Important! All this attribute magic is not for cross-origin links. You can’t control the stuff from cross-origin sources due to security issues.

And remember that IE and old Safari are unaware of download. Check it.

blob: and data:

Another lifehack to help your users save pictures of kittens in a format convenient for them. If you use AVIF or WebP images on your site, it is a huge chance that no one will be able to save them on their computer or phone to view them later. More precisely, they can save the image, but they can’t view it. Very sad.

To help them, use data: or blob: URLs inside the href attribute.

Step 1. Draw the image on a canvas.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function () {
    ctx.drawImage(image, 0, 0);

    // TODO: put the magic here
};
image.src = 'kitten-170.avif';

Step 2a. Save the image as a blob to the link href.

const blobLink = document.getElementById('blob-link');

canvas.toBlob(blob => {
    const blobUrl = URL.createObjectURL(blob);
    blobLink.href = blobUrl;
}, 'image/jpeg', 0.9);

Yes, I can save AVIF as JPEG. Cool, right? The user downloaded just 4 KB AVIF from a server and got his 13 KB JPEG on a client!

Step 2b. Save the image as a data to the link href.

Some browsers can’t use blobs, so you can help them with data-urls.

const dataLink = document.getElementById('data-link');

dataLink.href = canvas.toDataURL('image/jpeg', 0.9);

It’s even easier, but not so performant.

You can play with the full demo here:

• Demo
• Source code

Sources

• Wiki: Content-Disposition
• MDN: A
• MDN: canvas.toDataURL
• MDN: canvas.toBlob

Supported animation of the tab-size CSS property (r274939)

The first one: “WAT? We had tab-size property all this time?”

The second one: “WAAAAAT? It can even be animated?”

tab vs space

At the beginning of time, an endless war began. What should I use to indent my code? One character that costs 1 byte to store, or 4 characters that cost 4 bytes? If you have 1KB of memory on your storage device, it’s pretty critical.

Today we have a 2MB median page on the web, so who cares? Code minification, gzip, and IDE settings are your best friends to avoid the holy war. For example, I use EditorConfig for all my projects. Just to be sure I and my collegues use the same code style.

But what if I prefer tabs and want to show some code snippet to somebody who prefers spaces? How can I help him or her to save the peace of mind?

tab-size

Let’s make a demo. I want to share the snippet that shows how to use a tab-size property.

pre {
	tab-size: 4;
}

You can’t see it by default but I use a \t character to make an indentation. And because of the default styles of Prism code highlighter attached to my blog, it looks the same as the next snippet with 4 spaces to indent.

pre {
    tab-size: 4;
}

Let’s change the value.

pre {
    tab-size: 8;
	color: black;
}

Now you can see the difference when your colleague has made a commit with --no-verify, oh, little villain.

So, the tab-size: 4 in CSS says “I want to make a tab character width equal to 4 space characters width”. And it works!

But I can make this width not relative but absolute.

pre {
	tab-size: 1em;
}

If you read this article in Safari 13-, sorry — you won’t see the difference. But for other browsers, you can set the width of \t to absolute units like px, em, etc.

And yeah, it can be animated.

pre {
	tab-size: 4;
	animation: tab 3s ease-in-out infinite alternate;
}

@keyframes tab {
	from { tab-size: 1; }
	to { tab-size: 8; }
}

Pretty useless, but fun!

Don’t forget about vendor prefixes, tab-size still requires a -moz- prefix in Firefox. Add your vote here to increase the bug weight.

IE? No.

Sources

• MDN: tab-size

document.cookie

Let’s take a look at the classic way to work with cookies. We’ve had cookies in the specification since 1994, thanks to Netscape. Netscape implemented document.cookie in 1996 in their Netscape Navigator. Look at this definition of a cookie from those days.

A cookie is a small piece of information stored on the client machine in the cookies.txt file.

You can even find the chapter about document.cookie in the “Javascript. The Definitive Guide. Second Edition, January 1997”. 24 years ago. And we are still using that old way to work with cookies because of backward compatibility.

So, what’s the way?

Get cookies

const cookies = document.cookie;
// returns "_octo=GH1.1.123.456; tz=Europe%2FMinsk" on GitHub

Yeah, that’s it. It returns a string with all cookies separated by ;.

How to get a single cookie value? Right, split the string manually.

function getCookieValue(name) {
    const cookies = document.cookie.split(';');
    const res = cookies.find(c => c.startsWith(name + '='));
    if (res) {
        return res.substring(res.indexOf('=') + 1);
    }
}

How to get some cookie expiration date? No way.

How to get some cookie domain? No way.

You can parse the HTTP Cookie header if you want.

Set cookies

document.cookie = 'theme=dark';

It creates the cookie named theme with the value equals dark. Ok, does it mean that document.cookie is a string? Nope. It’s a setter.

document.cookie = 'mozilla=netscape';

It doesn’t rewrite the old cookie named theme, it creates the new one named mozilla. Now you have two cookies.

By default, a created cookie expires when the browser is closed. You can set the expiration date.

document.cookie = 'browser=ie11; expires=Tue, 17 Aug 2021 00:00:00 GMT';

Yeah, right, that’s what I want, calculate the expiration date in GMT format every time I want to set a cookie. Ok, let’s write some more JavaScript.

const date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000)); // love it
document.cookie = `login=mefody; expires=${date.toUTCString()}; path=/`;

Fortunately, we have another option to set the cookie expiration.

document.cookie = 'element=caesium; max-age=952001689';

The max-age part is a lifetime of a cookie in seconds and it has more priority than the expires part.

Don’t forget about path and domain. By default, the cookie is set for the current location and the current host. If you need to set the cookie for the entire domain, add ; path=/; domain=example.com.

Delete cookies

document.cookie = 'login=; expires=Thu, 01 Jan 1970 00:00:00 GMT';

To delete the cookie you should set its expiration date to some past date. To be sure that it will be deleted, use the Unix epoch start.

Service Workers

No. Just no. Working with document.cookie is a synchronous operation, so you can’t use it in service workers.

Cookie Store API

There is a draft of an awesome API that can help us to avoid a lot of pain in the future. It’s Cookie Store API.

Firstly, it’s an async API. It means you can use it without blocking the main thread. And service workers can use them too.

Secondly, it’s more clear for understanding.

Get cookies

const cookies = await cookieStore.getAll();
const sessionCookies = await cookieStore.getAll({
    name: 'session_',
    matchType: 'starts-with',
});

The method getAll returns an array, not a string. That’s what I expect when I try to get a list of something.

const ga = await cookieStore.get('_ga');
/**
{
    "domain": "mozilla.org",
    "expires": 1682945254000,
    "name": "_ga",
    "path": "/",
    "sameSite": "lax",
    "secure": false,
    "value": "GA1.2.891784426.1616320570"
}
*/

Whoa! I can get the expiration date, domain and path info without hacks!

Set cookies

await cookieStore.set('name', 'value');

or

await cookieStore.set({
    name: 'name',
    value: 'value',
    expires: Date.now() + 86400,
    domain: self.location.host,
    path: '/',
    secure: self.location.protocol === 'https:',
    httpOnly: false,
});

Love this syntax!

Delete cookies

await cookieStore.delete('ie6');

Or you can set the expiration date to the past date if you want, but what for?

Cookie events

cookieStore.addEventListener('change', (event) => {
    for (const cookie in event.changed) {
        console.log(`Cookie ${cookie.name} changed to ${cookie.value}`);
    }
});

Yeah, you will have a possibility to subscribe to cookies changes without thread blocking polling. Fantastic!

Service Workers

// service-worker.js

await self.registration.cookies.subscribe([
    {
        name: 'cookie-name',
        url: '/path-to-track',
    }
]);

self.addEventListener('cookiechange', (event) => {
    // process the changes
});

Can I use it right now?

Be careful, but you can. The Cookie Store API works in Chrome 87+ (Edge 87+, Opera 73+). For other browsers, you can use the polyfill that doesn’t return the full cookie info as an original API. Progressive enhancement is the thing.

Keep in mind that this API specification is still in “Draft Community Group Report” status. But if your DX is an important thing for the project, try the modern way.

Sources

• Netscape cookies
• Cookie Store API Spec
• Cookie Store API Explainer
• Chrome Status: Cookie Store API
• MDN: Cookie Store API

Did you know that you can hold an Alt (⌥ for macOS) to make you happy with it?

Works in Chrome (Edge, Opera, Yandex Browser) and Firefox.

Twitter

<a href="https://twitter.com/intent/tweet?text=Awesome+article&url=https%3A%2F%2Fmefody.dev&hashtags=html,css&via=dev_tip" target="_blank">
    Share on Twitter
</a>

Parameters:

• text — tweet text. It should be URL-encoded. I prefer to use + for spaces.
• url — the page URL. Should be URL-encoded too.
• hashtags — obviously. Separated by comma.
• via — your twitter username without @.

The complete text of the tweet will be Awesome article https://mefody.dev #html #css via @dev_tip.

Documentation: Tweet button

Facebook

<a href="https://www.facebook.com/sharer.php?u=https://mefody.dev" target="_blank">
    Share on Facebook
</a>

Parameters:

• u — the page URL.

Unfortunately, the Facebook sharer no longer supports any customization. If you need custom text, try to use Dialog for that:

https://www.facebook.com/dialog/share?app_id=42&display=popup&href=https%3A%2F%2Fmefody.dev

But this way requires app_id, so you have to register your Facebook app. Not very friendly.

Documentation: Facebook Share

VK

<a href="https://vk.com/share.php?url=https://mefody.dev" target="_blank">
    Share in VK
</a>

Parameters:

• url — the page URL.

Documentation: VK Link Posting

LinkedIn

<a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmefody.dev" target="_blank">
    Share in LinkedIn
</a>

Parameters:

• url — the page URL.

Documentation: Share Plugin

Attributes

I also add these attributes to my share links:

• target="_blank" to open the link in a new window.
• rel="noopener" to reset window.opener.

I have been using the GitHub CLI for half a year and it has boosted my productivity a lot. Let’s talk about typical cases.

To get started with the GitHub CLI, you need the gh package to be installed. Use brew install gh or check the official installation guide.

Issues

Imagine a situation when you forked some project to make it better. Suddenly, you encounter a bug that is not related to the changes you made. What should you do to fix it? Open a browser, find a repo, open issues, create a new one, fill it with details…

Or you can enter a simple command into the terminal.

gh issue create # will ask you for the title and body

If you prefer Web UI, add --web as an option.

gh issue create --web # will open the issue creation page

Pull Requests

What do you do when you need to check a pull request made by another developer? Find the fork url, add a new upstream, fetch the branch with changes, checkout…

Or you can get the id of a pull request (it’s 42 for the url github.com/owner/repo/pull/42) and use it as an option for gh pr.

gh pr checkout 42

Ok, we have the necessary changes. What’s next? Code review!

Yeah, gh still doesn’t allow you to leave a comment on certain lines of code. But if you just need to approve the PR or request any changes, do it from the terminal.

gh pr review --approve --body "LGFM"
# or
gh pr review --request-changes --body "Wanna more emojis"

Let’s merge the PR if it’s OK.

gh pr review --approve --body "Looks great, thank you!"
gh pr merge --squash --delete-branch

Of course, you can also open the pull request page via terminal.

gh pr view --web

What if I want to propose my changes to the project? I can do it through the web interface, but it takes too many clicks. I can use the link that git prints for me when I push the branch, it’s faster. But the fastest way is to create PR with gh.

gh pr create # will ask you for the title and body
# or
gh pr create --web # will open the PR creation page

Gists

Sometimes I need to share some code snippets with my colleagues. Gist makes it simple. And you can create gists with gh.

cat awesome.js | gh gist create # private by default

Sources

• GitHub CLI: Manual

HTML

Andrey Sitnik wrote a great article about video codecs for the web. I customized the snippet from the article for my needs.

<video width="600" height="400" controls muted playsinline preload="metadata">
    <source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08">
    <source src="video.h264.mp4" type="video/mp4">
</video>

This snippet works great in modern Chrome and Firefox with AV1-codec supported, falling back to the bulletproof H264-codec for other browsers.

ffmpeg

To convert source videos for the web you can use ffmpeg. For macOS, it’s just brew install ffmpeg. This is a really great tool to work with videos. But its synopsis is not so easy to remember. And it’s not copypastable because of the strict order of arguments. For example, here is a snippet for converting to H264.

ffmpeg -i input.mov -map_metadata -1 -an -c:v libx264 \
-crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p \
-movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
output.h264.mp4

I don’t want to remember it!

Bash aliases

Let’s make aliases for Bash. Open your ~/.bashrc (or ~/.zshrc if you use ZSH instead of Bash). Add the next code to the end of the file.

function convert-to-h264 {
    if [[ $2 ]];
        then output=$2
        else output=${1%.*}.h264.mp4
    fi

    ffmpeg -i $1 -map_metadata -1 -an -c:v libx264 \
    -crf 24 -preset veryslow -profile:v main -pix_fmt yuv420p \
    -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
    $output
}

Save the file, then apply it with source ~/.bashrc (or source ~/.zshrc for ZSH). Voila, you can use new alias to easily convert your videos.

convert-to-h264 input.mov # converts to input.h264.mp4 by default
# or
convert-to-h264 input.mov output.mp4

I also have other aliases for my blog videos.

function convert-to-av1 {
    if [[ $2 ]];
        then output=$2
        else output=${1%.*}.av1.mp4
    fi

    ffmpeg -i $1 -map_metadata -1 -an -c:v libaom-av1 -crf 50 -b:v 0 \
    -pix_fmt yuv420p -movflags +faststart -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" \
    -strict experimental -cpu-used 1 \
    $output
}

function resize-to-width {
    if [[ $3 ]];
        then output=$3
        else output=${1%.*}@$2.${1##*.}
    fi

    ffmpeg -i $1 -vf "scale="$2":trunc(ow/a/2)*2" $output
}

So my workflow with videos usually consists of three commands.

resize-to-width source.mov 1200 video.mov
convert-to-h264 video.mov
convert-to-av1 video.mov

Sources

• Better web video with AV1 codec
• FFmpeg Documentation
• HOWTO: Bash functions