Download YouTube videos

These days I was transferring one of by band’s channel, and I needed to download a 1h34min long video. No web downloader worked properly.

While searching for an actual software, I found this Reddit post referring to a Python command line tool named yt-dlp. Basic usage is pretty straightforward:

yt-dlp.exe URL

My first try downloaded two files: MP4 and WEBM. The MP4 had no sound, and the WEBM was unplayable. My recently downloaded Vegas 22 didn’t seem to recognize this files. A warning message appeared, though:

WARNING: You have requested merging of multiple formats but ffmpeg is not installed.
The formats won't be merged

The repository README had an specific section labelled FFmpeg Static Auto-Builds, with a download link to Windows x64 binaries. The zip contains, among others, a bin directory with three executables. I extracted them in the same folder of the original executable – yt-dlp.exe –, and this time the download completed smoothly, with a single file with video and audio properly merged.

Excellent tool.

Using active/inactive system colors in Firefox

After the horrible Proton UI in Firefox v89, there was no difference between active/inactive window colors. The theme would simply remain static while you switched to other windows, which from the usability point of view, is absurd.

After digging a bit, I found an userChrome.css hack to use the system colors on Firefox window. As of Firefox 98, it appears to work well:

/* Show active colors on main menu bar */
/* https://superuser.com/a/1675508 */
#TabsToolbar,
#navigator-toolbox {
	background: -moz-accent-color !important;
	color: white;
}
#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive {
	background: unset !important;
	color: unset;
}

Just for the record: this is how you activate userChrome.css stuff.

Enhancing Chrome 94 privacy

Unfortunately Firefox is getting worse every day, specially after the introduction of the horrible v89 interface. Having to resort to Chrome again demands some precautions.

Latest Chrome 94 introduced an idle detection feature, which is a privacy nightmare. Fortunately, we still can disable it here:

chrome://settings/content/idleDetection

And don’t forget to also disable the privacy sandbox and FLoC features:

chrome://settings/privacySandbox

I really wish I could go back to ol’ good Firefox.

Fixing the horrible Firefox 89 interface

In searching for a fix to the Firefox 89 Proton layout catastrophe, I found a very neat site which tries to summarize all the fixes that can be made in “userChrome.css” file, which can be found in about:profiles internal URL, and enabled with toolkit.legacyUserProfileCustomizations.stylesheets in about:config.

Unfortunately, it’s not possible to restore the menu icons, as of yet, but it’s still a relief from that disaster.

This is my hack for Linux:

/*** Tighten up drop-down/context/popup menu spacing ***/

menupopup > menuitem, menupopup > menu {
	padding-block: 4px !important;
}
:root {
	--arrowpanel-menuitem-padding: 4px 8px !important;
}

/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
	--user-tab-rounding: 0px;
}
@media (-moz-proton) {
	.tab-background {
		border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
		margin-block: 1px 0 !important;
	}
	#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
		border-top-width: 1px !important;
		border-bottom-width: 0 !important;
	}
	/* Container color bar visibility */
	.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
		margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
	}
}

/* Inactive tabs: Separator line style */

@media (-moz-proton) {
	.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
		border-right: 1px solid rgba(0, 0, 0, .20) !important;
	}
	/* For dark backgrounds */
	[brighttext="true"] .tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
		border-right: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) !important;
	}
	.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background {
		border-radius: 0 !important;
	}
	/* Remove padding between tabs */
	.tabbrowser-tab {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

Install PKCS#11 token on Ubuntu 18.04

Firefox offers an graphical interface to add the PKCS#11 library to the browser, so you can use PKCS#11 token to authenticate in websites. Chrome doesn’t offer a GUI, so it must be done purely using command line in Ubuntu Linux.

After a few failed attempts, I finally found a recipe on how to properly do it. Although it’s aimed at Ubuntu 16, it works perfectly for Ubuntu 18.04:

• MoebiusSolutions/cac-agent

An actual GUI on Chrome, just like Firefox has, would be great though.

Firefox: can’t see menu separators in Linux

In Linux, I was having a problem when using Firefox. After some version update, the menu separator lines simply disappear. After searching around after a solution to this very annoying problem, I found another userChrome.css customization:

/* Make separators in menus easier to see */
menuseparator {
  -moz-appearance: none !important; /* nothing changes without this */
  background: #d4d2d1 !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 3px 5px !important;
}

Make sure it’s loading is enabled. After restarting Firefox, the menu separators were back in all their glory.

Restore loading blue circle throbber in Firefox

Since Firefox 57 the loading icon has changed. Previously you’d see a blue circle spinning, now you see a dot moving horizontally. Personally, I prefer the old one.

So there’s this tip I found a while in the fantastic /r/FirefoxCSS Reddit, which restores the old throbber. Fortunately, Firefox developers kept the old animation file within the package, so we can still use them.

The following CSS must be added to “userChrome.css” file:

/* Revert tab throbber - for Nightly 57 as of 9/20/2017 */
.tab-throbber[busy]::before {
  background-image: url('chrome://global/skin/icons/loading.png') !important;
  animation: unset !important;
}
.tab-throbber[busy]:not([progress])::before {
  /* Grays the blue during "Connecting" state */
  filter: grayscale(100%);
}
@media (min-resolution: 2dppx) {
  .tab-throbber[busy]::before {
    background-image: url('chrome://global/skin/icons/loading@2x.png') !important;
  }
}

The “userChrome.css” is located in your Firefox profile folder. If it doesn’t exist, you can create it. Also, make sure it’s loading is enabled.

Override Chrome policy in Linux

If you happen to have Google Chrome settings managed by your network administration, on Linux, the fixed settings are stored into JSON files in the folder:

/etc/opt/chrome/policies/

If you have write permissions, you can change the settings you want. You don’t even need to restart Chrome to the changes start working. This has been tested in Chrome 77.

Let Go website generate your documentation

When trying to figure out how go doc command works, I just found out that I don’t need to use it.

There’s an incredible feature of Go documentation website: it can generate and display the documentation of all your project, straight from GitHub – and other websites too. The generated HTML is very polished.

To use it, append your GitHub user name and repo to their URL, such as:

https://godoc.org/github.com/username/reponame

Even more interesting: all types and Go built-in types are automatically linked. And it also provides direct links to GitHub source files. On top of all that, it’s very fast. Written in Go, I suppose.

Being a C language admirer, the more I work with Go, the more I like its simplicity.

Personal key YouTube page links

Once logged in, these links will take you to key YouTube pages:

/comment_history	Comments you wrote.
/my_liked_videos	Videos you liked.
/my_videos	Videos you uploaded.
/subscribers	People who subscribed to your channel.
/subscription_manager	Manage the channels you have subscribed to.
/view_all_playlists	Playlists you created.

Chrome 72 annoying F6 key behavior

On all browsers, since immemorial times, I’ve been using the F6 key to go to the URL bar and select the whole URL. My current browser is Google Chrome, which in its version 72 changed the behavior of this F6 key, which now puts the focus on the tabs or somewhere else. You have to hit the F6 key twice in order to focus the URL bar.

And I’m not the only one who noticed this:

• Super User
• Reddit
• Chrome Help Forum

Fortunately, there’s a bug to the issue:

• https://bugs.chromium.org/p/chromium/issues/detail?id=927004

I wonder who in the hell decides changes like this. I’m seriously pissed about this change, and already considering go to Firefox, which I already use at work. I really hope they revert this stupid nonsensical change. Stop fixing what isn’t broken.

Follow up: I just installed Chrome 74.0.3729.108, and the F6 key is working properly again. Such a relief.

Wikipedia Templates, using React and TypeScript

I’ve been testing out React recently with great joy. The ability to grow a web application with components is really good, so much I was able to refactor an old application, a Wikipedia template generator, making it easier to mantain while increasing its complexity, becoming multi-language.

First I started writing ES6 JavaScript, but soon TypeScript caught my eye. My previous experience with TypeScript was a bit traumatic, since it involved the awful Angular 2, but after an initial struggling to make everything work, I can say that I can’t imagine a large scale project written without the aid of TypeScript.

I struggled with some things like HTML5 routing, which seems to be a pain to deploy, so I just used HashRouter. Also, the deployment to gh-pages branch is neatly made with gh-pages utility. Also, I used Redux in a very simple way; I’ve seen overengineered examples that put me off at first, but Redux itself is very simple, and I ended up choosing it instead of MobX. I used hooks from the upcoming React 16.7, and I believe it will completely change the way React components are written, it’s really different.

The Wikipedia Templates project is open source and it’s hosted on GitHub. The project isn’t ready yet, but the basics are done, and I plan to grow it as I have time.

One grid to rule them all

I’ve just learned CSS Grid. It feels like an improvement over Flexbox, and although it’s more powerful, it’s actually a little simpler to wrap your head around. I liked Flexbox a lot, and I did many great things with it. I’m hoping to make even more stuff with Grid now. Newer browsers have been supporting it since last year, so if older browser compatibility is not an issue, it’s good to go.

I learned Grid in a couple minutes by watching this video, which is pretty good in teaching the concepts:

I hate the invasive Dropbox client

Very hard to completely disable the Dropbox client, which sneaks its updater into every corner of my new Windows 10 system. Here’s what I had to do to finally get rid of it:

• On Dropbox client, Settings, uncheck start automatically;
• Disable “DbxSvc” and two “Dropbox Update Service” in services.msc;
• Disable startups at Task Manager > Startup tab;
• Disable services in Control Panel > Task Scheduler > Task Scheduler Library.

I want Dropbox client to update only when I run Dropbox. This invasive behavior is completely unnecessary.

Google Chrome 61 slow, how to fix

After updating to Chrome 61, I instantly noticed that YouTube became slow, and Google Maps – particularly Street View – became so slow it’s unusable. I went back to Firefox Developer 57, but then I missed Chrome’s search capabilities.

I found out that the problem is the HTML5 canvas, and the fix is rather easy: just disable this flag in Chrome flag page:

chrome://flags/#enable-color-correct-rendering

Instantly all the sites became responsive again.

Holy Grail CSS layout with overflow

This morning – yep, a Sunday morning – I needed to implement an HTML page with the Holy Grail layout. A quick search gave me dozens of implementations, but all of them broke apart when you trew a lot of content into the sections. Being fond of the Flexbox model, I quickly came with an implementation that had all the needed overflow control:

This implementation is also modular: if you don’t need any of the panels, just remove them – the layout will stay working. Also, the satellite panels can have fixed dimensions, see the commented values for width and height.

The funny part is that min-height: 0. It’s there for Firefox; without it, the overflow goes wild. Other interesting thing is the absence of the height: 100% to html and body elements, it’s not needed.

Fixing bad font rendering on Chrome 54

I’ve been using Google Chrome browser on Windows 7 x64 these days, and it annoyed me how bad the fonts were being rendered. Too light and somewhat pixelated. After a quick search I found some tips, with most fixes revolving around the LCD antialiasing setting, which didn’t work for me. What did the magic was actually installing and configuring an extension named Font Rendering Enhancer.

This extension has only one setting: “font width”. After adjusting it to “50”, voilà, the fonts started looking good. And, of course, allowing it to work in incognito mode.

The new Google Maps sucks

A couple months ago, Google began introducing a beta version of the new Maps, which at the time, I promptly refused to use, given the sluggishness and missing features it had. The feature I missed most was the screen split between Street View at the bottom half and the map itself at the top half, where I could drag the Pegman on the map, while the Street View is automatically updated. Oh and the old version is faster. So much faster.

Some time after, this horrible interface became the default, but we still could choose to use the old one. But now Google – possibly because the avalanche of bad feedbacks – rolled out a Lite version of the new Maps, which is basically the same terrible interface, but with even less features. Great solution, eh?

Fortunately, it’s still possible to go back to the old version of Maps via maps.google.com/lochp, at least until Google disables it too. Seriously, what would they swap such a great solution with a crappy one?

Firefox 23 is slower than Firefox 22

In last June, I’ve been amazed with the Firefox 22 launching. It featured a new JavaScript engine called OdinMonkey, and particularly on Linux, the browser became really fast and smooth. The upgrade was instantly noticeable with Firebug, which became a lot more responsive.

Yesterday, however, Mozilla rolled out Firefox 23 – with a horrible new logo, without contrast and which looks blurry at small size. But mainly, to my dismay, right after upgrade, everything became slower. It felt like last year’s versions, with a sluggish performance, and essentially a pain to use. On Firebug, this is felt very strongly.

I forgot to backup my profile, but luckily the profile structure was not modified, and I was able to downgrade, download Firefox 22 again and removing this horrible Firefox 23, in the hope that they can fix it on the next version.

Update, Sep. 19:
I’ve just tested Firefox 24, and it seems to be even slower than 23. So, I’m still keeping Firefox 22.

Update, Nov. 7:
Apparently the slowness is fixed on Firefox 25, which I’m testing right now. Finally.

Like Firefox? Try Pale Moon

When it comes to internet browsers, overall, I prefer Firefox behavior over Chrome’s. But when using Firefox 18.0.2 on Windows 7 x64, I started to become increasingly angry with its memory usage. Even with only 4 tabs opened, Firefox peaked 800 MB of RAM easily, like not releasing memory at all. This was making Firefox really slow, a pain to use.

Searching around, I found Pale Moon. Basically it’s Firefox compiled specifically for Windows, letting out compatibility with older processors, all compiler optimization switches on, and also some minor changes done by the Pale Moon mantainer, which follows Firefox with some gap, waiting for the bugs to be fixed. Pale Moon seems to release memory faster, and on my tests, the RAM usage floats around 300 MB, compared to 800 MB on Firefox. On the use, it’s noticeably faster, a joy.

I’m testing a portable version of Pale Moon 15.4.1, and so far I’m very pleased. All my add-ons worked fine. I totally recommend it as an alternative to Firefox itself.