MXIi

notes on electronic projects and other things

JavaScript spoiler with a twist (collapsing up or down)

I thought that I will eventually need to use spoilers in this blog to hide long and optional blocks of text. And at the same time I’m often unhappy with collapsible block implementations across the Internet.

So I decided to design my own spoiler with one useful feature: it can be collapsed not only from the top edge but also from the bottom edge — you will not lose the line you were reading and you don’t have to scroll all the way to the beginning of the spoiler.

Examples:

click to showhide

This spoiler can be expanded up and down. And your mouse is left right over the button you just pressed whenever it is possible (on top and bottom of a page there may be not enough stuff to keep it so, obviously).

click to showhide
click to showhide

This spoiler can be expanded in one direction only. Collapsing behaviour is still the same. The difference is just a few lines in CSS.

click to showhide

Keep reading to see how it is done.

PowerShell, Explorer, square brackets and Unicode paths

Let’s make a folder C:\[test] and try to open PowerShell there from Explorer (using Ribbon or context menu).

set-location: Cannot find path 'C:[test]' because it does not exist. At line:1 char:1

Oops!

Let’s see what we can do with this.

HTML aspect ratio box using Custom Element

There is a standard trick to make HTML block with given proportions:

<div id="containingBlock">
    <div id="wrapper" style="position:relative; width:100%; height:0px; padding-bottom:56.25%;">
        <div id="content" style="position:absolute; left:0; top:0; width:100%; height:100%">
            ...
        </div>
    </div>
</div>

Since padding is computed according to containing element width, it’s possible to use it along with width to get required proportions (16:9 in this example, 56.25% = 100% * 9 / 16). And content block is positioned absolutely to use the space taken by padding.

After learning about Custom Elements I decided to see if I can abstract the trick and turn it into something clean and reusable. So it could be used just like this:

<ratio-box ratio="16:9">
    ...
</ratio-box>

Custom Elements is quite recent feature in HTML, with version 0 available only in Chrome and version 1 just coming into play. It also requires JavaScript to work. So it is not practical to use yet, but still an interesting experiment.

See the code and demo below. In addition, there is also a slightly improved HTML+CSS version.

Parallel processing in PowerShell

Running arbitrary number of tasks in parallel with PowerShell, while showing overall progress.

The main disadvantage of the code I provided in previous post is that it is performed sequentially. We can speed it up by means of parallel processing, since main limiting factor is not an I/O but minifying algorithms performance.

There are a lot of ways to use parallelism in PowerShell and it wasn’t clear for me which one suits well for my task. I.e. to convert my script, which is processing a lot of small files on a local machine.

It also should:

  • provide updates in real time;
  • keep output table formatting as close to original as possible.

Ellipsis function for PowerShell

One more unintended thing arose from another post.

I was looking for a way to fit a lot of lengthy paths into console screen by removing less important parts. “Ellipsis” is a standard name for such a thing. You’re dealing with it every time you’re looking at “…” in place of something too long to fit into borders.

Here is my implementation for PowerShell.

Blog minification in a fancy way with PowerShell

There is no built-in support for minification in Hugo engine, which isn’t a bad thing on its own. But I had to figure out a way to minify my files while keeping building and maintenance extremely simple.

At first point I added minify for text files. It’s a single binary (written in Go), and with a single call it can run recursively over Hugo’s public folder, minifying output files in-place, just as I needed.

But minifying images is a more tricky task. I decided to use jpegtran and optipng, but they can’t be run recursively. Some scripting is required to use them. While the task of finding all the images in a folder and applying minifiers on them is trivial and can be solved with PowerShell one-liner, it was not satisfying enough, so I end up with the thing described below in this post.

Additional motivation is to have a tool that can be adopted easily to any other processing task and will give me a fancy progress report.