Bram Esposito

Tag: javascript

  • A word counter for Gutenberg blocks

    One of the main goals of – albeit slowly – setting up this blog, is writing more. And I also want to keep track of the length of the posts I make (I’d love to be able to call them articles one time 😉).

    That’s why I implemented a word counter today, that displays the words you’ve written, in the editor, as you type. I based the functionality on the code found here. It didn’t work anymore, but after some research I managed to make it work again.

    Turns out the Gutenberg editor (aka Block editor) is often running in an iframe. Which makes it a tiny bit harder to access the blocks in the editor with javascript.

    Screenshot of the editor with the counter in the top right displaying: 34 words.
    Screenshot of the Block editor with the counter in the top right displaying: 34 words.

    Download the WordPress plugin

    You can find the WordPress plugin here on Github.

    What’s next?

    I want to improve this functionality with a post-wide counter that displays the total amount of words over every block in the post.

  • Add capability classes to your html element

    Couldn’t come up with the Javascript library that adds capabilities supported by your browser as a class to your html element.

    It was Modernizr, a library way more popular in the more turbulent years of the browser wars and the start of Web 2.0

  • Avoid sudo if you can

    I ran npm update on a project today, which returned this error:

    npm error code EACCES
npm error syscall open
npm error path /Users/-username-/.npm/_cacache/index-v5/ab/83/-long-hash-
npm error errno EACCES
npm error
npm error Your cache folder contains root-owned files, due to a bug in
npm error previous versions of npm which has since been addressed.
npm error
npm error To permanently fix this problem, please run:
npm error   sudo chown -R 501:20 "/Users/-username-/.npm"
npm error A complete log of this run can be found in: /Users/-username-/.npm/_logs/2024-12-11T10_37_38_225Z-debug-0.log

    I avoid running sudo commands, especially when it’s node or npm suggesting this.

    My solution: 

    rm  -r /Users/-username-/.npm

    And running npm update again.

    Always think twice before running a root command, especially when it’s coming from an online tool.