I went through the article https://github.com/zellwk/zellwk.com/blob/master/src/posts/2019-03-20-publish-to-npm.md and it was very informative. I am curious about how we might integrate this with tools like commitizen and semver which may generate the next release version number automatically based on the commits that went in.

In workflow
chown $(whoami) . can be replaced with chown root . ?

There is a broken link on the article title "Improving my memory and brainpower over three days".
Check line 113 on 2019-03-13-memory.md file.

First of all your article is really helpful - so thank you for publishing it! Vertical rhythm is something I've always tried to apply but never quite known the best way to do so. But Im still a little unsure on relative units. Until now, I've simply set the following as an scss variable:
$xs-baseline:24px
$lg-baseline:28px

and then applied all height-related measurements as a multiple of these throughout my entire site. for example:

h1 {
    font-size:60px;
    line-height:$xs-baseline * 3;
    margin-bottom:$xs-baseline * 2;
    @include breakpoint(lg) {
        font-size:76px;
        line-height:$lg-baseline * 3;
        margin-bottom:$lg-baseline * 2;
    }
}

.logo {
    height:$xs-baseline * 2;
    margin-bottom:$xs-baseline;
    @include breakpoint(lg) {
         height:$lg-baseline * 2;
        margin-bottom:$lg-baseline;
    }
}

I have always been aware I should switch to relative units, but I've never quite understood how - as whenever I've tried, I end up with non-whole pixel values which is not so bad with fonts, but when you have things like SVG icons or graphics, their heights not being explicitly defined as pixels means you risk them being fuzzy and not crisp. The way I've been doing it above is tedious, especially when I need to switch the baseline value for mobile and desktop, but it does mean I know that I can ensure all my graphics are a multiple of 24px or 28px as I can be completely confident that everything is always going to be a multiple of them.

So I wondered if you could help me understand your use of relative units a little more and how to handle this better? Any advice would be really appreciated :)

This is not an issue per se. A suggestion rather. In the below section, you mentioned that you use Zsh since you have scripts written in bash and don't want to convert to fish.
https://github.com/zellwk/zellwk.com/blob/master/src/posts/2020-05-06-bash-fish-zsh.md#the-verdict-bash-zsh-or-fish

Well, you might probably not have to. please checkout this github repo: https://github.com/edc/bass. It's a nice way to run bash scripts in Fish shell. If not, for simple bash script can also be run as, exec bash -c "source some-bash-setup.sh; exec fish"

Thank you for your article on Inconsistent behavior among browsers when clicking on buttons. It was both surprising and enlightening.

I also appreciate your suggested fix for the problem and tend to agree that the Chrome implementation makes the most sense.

Testing shows that Chrome fires the blur before the click, so I modified the "fix" to be a little more general and to invoke focus on the way down (the capturing phase), instead of on the way back up (bubbling phase).

window.document.addEventListener('click', function (event) {
	if (event.target && event.target !== window.document.activeElement && typeof (<any>event.target).focus === 'function')
		(<any>event.target).focus();
}, {capture: true});

This seems to be working, but I have only tested it on Safari and Mac Chrome.
Do you have any suggestions or criticism of this modification?

Your .gitattributes file in the repo lists a bunch of asset patterns:

*.png
*.svg
*.jpg
*.webp
*.mp4
*.m4v
*.m4a

This matches the files to those patterns but you've not provided anything actionable to anything matched, the file isn't serving any purpose currently.

What you perhaps meant for these particular files was to indicate that they're binary, which would ensure they're not mistaken by git as text files(which could potentially doing EOL normalization), and not attempt to produce any diffs.

Just add a space followed by binary to each line if that was the intended purpose:

*.png binary
*.svg text -diff

SVG you may want to treat as text since that's what it is, but indicate not to produce any diffs(usually they're worked on in graphical programs or generated, rather than editing code directly). That will allow for EOL normalization at checkin(git add / git commit), and potentially at checkout too. Not likely to cause any problems, but if you want to avoid that, binary can be used.

text is good when you want to ensure a file is treated as text by git, and indicates to normalize to LF line endings when stored in the repo(desirable).

pattern="\s*\S+.*"

seems to match/not match your input strings properly:

// Should not match
''
' '
'  '
'   '

// Should match
'one-word'
'one-word '
' one-word'
' one-word '
'one phrase with whitespace'
'one phrase with whitespace '
' one phrase with whitespace'
' one phrase with whitespace '

it was very easy for me to come up with it, so I wonder: am I missing something? What was your difficulty with creating proper RegExp?

First off, thanks for your article on getting focusable elements with JS! It was very helpful as I was implementing a focus trap in an accessible modal.

I just wanted to point out that elements with the contenteditable attribute are also focusable, so you might want to add [contenteditable] to the CSS selector string.

Is there a way to enlarge the terminal panel when in focus and then move back to the original size when the editor tabs are in focus? Wanted to highlight the terminal in some way. Any other suggestions are also appreciated.

Thanks.

Context of Issue

Reading post titled Setting up Visual Studio Code for Web Development. Noticed a couple typos and could not find the files here on GitHub.

Fixes

• Replace "de-factor" with "de facto":

We use Prettier because Prettier is the de-factor code formatter in the industry.

• Insert "code" or "project" here: "to lint your ____ , you need"

If you want Standard to lint your, you need to add Standard to your project with npm.

I couldn't find a link on 2018-03-21-calculator-part-1.md that connects to the part 2 of the tutorial.

I it intentional? If not, could you add it please?

Hi there, something to point out that is commonly overlooked, negating benefits of async.

In your article, you said:

1. If you want to execute await calls in series, use a for-loop (or any loop without a callback).
2. Don’t ever use await with forEach. Use a for-loop (or any loop without a callback) instead.

This is would be incorrect because your for-loop example makes operations synchronous:

const fruitBasket = {
  apple: 27,
  grape: 0,
  pear: 14
}

const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
}

const getNumFruit = fruit => {
  return sleep(1000).then(v => fruitBasket[fruit])
}

const fruitsToGet = ['apple', 'grape', 'pear']  

const forLoop = async _ => {
  console.time()
  for (let index = 0; index < fruitsToGet.length; index++) {
    const fruit = fruitsToGet[index]
    const numFruit = await getNumFruit(fruit)
    console.log(numFruit)
  }

  console.timeEnd()
}

Compared to this:
```js
const promises = []
const forLoopAsync = async _ => {
  console.time()

  for (let index = 0; index < fruitsToGet.length; index++) {
    const fruit = fruitsToGet[index]
    const numFruitPromise = getNumFruit(fruit)
    promises.push(numFruitPromise)
  }

  const fruits = await Promise.all(promises)
  console.log(fruits)
  console.timeEnd()
}

forLoop() // ~3000ms to run
forLoopAsync() // ~1000ms to run

Consequently, forEach or map is actually better if you want better semantics (although to note generally performance of for > #forEach > #map):

#map:

const getFruitsViaMap = async () => {
    console.time()
    const fruitsPromises = fruitsToGet.map(fruit => getNumFruit(fruit))
    const fruits = await Promise.all(fruitsPromises)
    console.log(fruits)
    console.timeEnd()
}

getFruitsViaMap()

I think you might want to adjust the article.

First off, thanks so much for this post, it saved me a bunch of time trying to figure out how to do this exact thing.

The specific post I am discussing is: https://github.com/zellwk/zellwk.com/blob/master/src/posts/2021-03-17-github-actions-deploy.md

The only issue I ran into with it was in how your instructions say to set up a bogus known_hosts entry, and then run a script to populate it based on whatever is responding at that domain name when the script runs. This completely defeats the purpose of the known_hosts security mechanism, it allows anyone who is masquerading at that host when the script runs to steal the connection.

What you actually want to do is search through the known_hosts file on your local machine for the line that begins with the domain name of the host you are trying to deploy to, that you have successfully used ssh to connect to from your local machine, so you know that the known_hosts signature is correct. There should be only one such line in the file, and you just copy that entire line into your Action. Here’s an example of what that looks like in the Action I just got working thanks to your help: https://github.com/Deep-Symmetry/bytefield-svg/blob/58e64fbb71c482abbbc85d15ee61024dfd9151ca/.github/workflows/guide.yml#L21

Hi Zell,
In your post 2020-08-05-copy-properties-of-one-object-to-another-object there are a couple of broken image links.

I have checked the \assets\images\2020\copy-accessors folder where the other images for the post are to be found but the following are absent.

• /images/2020/accessor.png
• /images/2020/normal-prop.png

After forking your repo I tried to locate the images to provide a fix and PR but I could not find the missing images.

Thanks for the great posts.

My best regards, Tracy-Gregory Gilmore

I was unable to replicate the async example. is this what you were using?

I think "const control = async _ => " does not get started, hence no result.

const sleep = ms => {
return new Promise(resolve => setTimeout(resolve, ms))
}

const getNumFruit = fruit => {
return sleep(1000).then(v => fruitBasket[fruit])
}

const control = async _ => {
console.log('Start')

const numApples = await getNumFruit('apple')
console.log(numApples)

const numGrapes = await getNumFruit('grape')
console.log(numGrapes)

const numPears = await getNumFruit('pear')
console.log(numPears)

console.log('End')
}

https://aspiringguru.github.io/async_await_loop_fetch_tut/demo_x_broken.html
https://github.com/aspiringguru/async_await_loop_fetch_tut/blob/master/demo_x_broken.html

So if I set full path ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:/path/to/the/folder, it didn't connect. First I need to connect to ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} and then go to /path/to/the/folder. After it, I replace files. Do you have any ideas on how to implement that without "git pull"?

It looks like your fantastic article on asking questions has some missing image(s):

Was experimenting with your codesandbox
Combobox with aria-activedescendant (Method 2)
The voice over seems to work now when the input has text in it. I tested this on chrome for mac ios

Can I work on this? I will be glad to contribute to this feature. !

Screenshot_20230601_160431.jpg

Per your comment here https://zellwk.com/blog/es6/ to let you know of any typos, here you go :)

Note: This may **no** be best way to make HTML elements - you mean not

Hello Zell,

Many thanks you for this article.

I've followed the steps and I've noticed the following:
It seems that installing WSL from Windows Feature panel and from Powershell command are doing the same thing and that you could choose only one method.

Best regards

Your otherwise great flex/cssgrid combined calendar widget leaves the last column (Saturday) empty when the flexbox version is used on Firefox (68/macOS). The css grid version works correctly.

Error: ENOENT: no such file or directory, open './secrets/variables.env'

At very first when i download and run the code it gives me this error:

`
fs.js:120
throw err;
^

Error: ENOENT: no such file or directory, open './secrets/variables.env'
at Object.openSync (fs.js:449:3)
at Object.readFileSync (fs.js:349:35)
`

My suggestion is we should keep "dev.env" and "production.env" file as a separate and could include it it based on the environment.

Thanks

the img tag inside the figure is missing a closing "
this throws the code below out of a code block.

const getOne =_=> {
   return sleep(1000).then(v=1)
}

Hi there,
I'm having an issue where I can't seem to get rsync with the EC2 server working. I have tried the methods that was in your website, however it seems to get stuck in the known hosts saying it can't find the file or something. Alternatively it also gives an error with rsync taking too long and the connection timing out. Current in order for me to ssh into the server I need to use a pem file to log in

Any advice?

Hey there, thanks for writing up this article. It's been helpful.

I struggled to get things to work for a while, and found that I had to install the package that Jest recommends here: https://jestjs.io/docs/en/mongodb

Might be worth mentioning.

I was able to set up the Git Bash as the default shell wich opens a terminal with the WSL as default directory.

1. Add Git-Bash to the new Windows Terminal: Based on this article i added the git bash as windows terminal profile.
2. To set the starting directory of the terminal, set startingDirectory to desired folder. See Profile settings in Windows Terminal

    "profiles":
    {
        "defaults":
        {
            "startingDirectory": "//wsl$/Debian/",
        },
        "list":
        [
            {
              "guid": "{00000000-0000-0000-ba54-000000000002}",
              "hidden": false,
              "name": "Git Bash",
              "commandline": "%PROGRAMFILES%/git/usr/bin/bash.exe -i -l",
              "icon": "%PROGRAMFILES%/Git/mingw64/share/git/git-for-windows.ico",
            }
        ]
    },

Context of Issue

Reading post titled Setting up Visual Studio Code for Web Development. Noticed a couple typos and tried to find and correct them here on GitHub. (Will create separate issue for typos.)

Problem

Clicking the link to source code at the bottom of the post to correct some typos leads to GH's 404 "Page not found" error.

Thoughts

• Check for deployment bug with Eleventy or CircleCI
• If some posts are intentionally not open source, I suggest removing the GH link from those specific posts.

Error Message

Argument of type '(done: DoneCallback) => Promise<void>' is not assignable to parameter of type 'ProvidesCallback | undefined'.
  Type '(done: DoneCallback) => Promise<void>' is not assignable to type '(cb: DoneCallback) => void | undefined'.
    Type 'Promise<void>' is not assignable to type 'void'. ts(2345)

my code:

describe("GET /api/tasks", () => {
    it("should return status code 200 if successful", async done => {
        const res = await request(app)
            .get("/api/tasks")
        expect(res.statusCode).toEqual(200)
        done();
    })
})

Env:

"@types/jest": "^27.4.1",
"ts-jest": "^27.1.4",
"supertest": "^6.2.2",

Please help me to handle this error.

ref : https://zellwk.com/blog/endpoint-testing/