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.

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.

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.

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.

I decided to move this note out from another post.

It’s a kind of summary on a question “Why [PSCustomObject]@{} syntax is the preferred way to create objects in PS”. After looking into StackOverflow (one, two) and some other resources (three), I decided to test and write it down for myself.

Nothing really new here. I only hope it will work as a good summary.

Update: Select-Object examples. Additional links.

Ok, back to business. No electronics at least for a few posts though.

It will be clear later why I became interested in this topic. But it is, on its’ own, worth for a post, so here it is.

Measure-Command

The canonical way to measure how long something runs in PowerShell is to use Measure-Command cmdlet.

> Measure-Command { "do stuff" }


Days              : 0
Hours             : 0
Minutes           : 0
Seconds           : 0
Milliseconds      : 0
Ticks             : 7436
TotalDays         : 8,60648148148148E-09
TotalHours        : 2,06555555555556E-07
TotalMinutes      : 1,23933333333333E-05
TotalSeconds      : 0,0007436
TotalMilliseconds : 0,7436

One notable downside of this is that you see no output from a command. Time span is returned instead.

What else can we do?