The One with the Thoughts of Frans

Archive for Internet

The password has to be at most 10 characters long

At least they were nice enough to abide by my rules. 🙂

CommentsTags:

Password Shaming Battle.net

I’d swear I had a Battle.net account associated with Diablo II and Starcraft in the early 2000s, but either it was deleted due to nearly two decades of inactivity or I used some e-mail address I don’t remember anymore.

But anyway, a 16 character maximum? How am I supposed to work with that? Grmbl.

And then we get these “secret” questions.

So now I theoretically also have to save fake answers in my password manager?

But look, it’s all okay, because there’s SMS Protect!

Sigh.

To sum up, 16 characters is probably sufficiently secure, but why would you ever make that a maximum?

CommentsTags:

Yo, I’m Closing Your Site Now, Yo

Yo, seriously, Dailymotion?

CommentsTags:

I’m not sure what to think of the Vivaldi crash icon

The poor thing.

CommentsTags: ,

Fix “sign_and_send_pubkey: signing failed: agent refused operation”

Thanks to gnome-keyring you won’t get a useful error message. If you uninstall it, you’ll get the real culprit right where it matters, but in retrospect ssh-add gives you the same error message:

$ git pull upstream master 
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/home/frans/.ssh/id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "/home/frans/.ssh/id_rsa": bad permissions
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

That means something like this, or maybe just read:

So much for the GitHub help. 🙂

Comments

Twitter and Facebook Don’t Support SVG Yet

Ten years ago I complained that SVG facicons weren’t supported yet. We still suffer from this issue, but a comparatively new corollary problem has joined it.

Facebook’s OpenGraph and Twitter Cards are mostly an annoying duplication of standardized metadata (more details here). Moreover, you can just leave out the nonsense because it will fall back on regular meta description. Always good to know.

Anyway, the main and perhaps only redeeming feature here is that they allow you to specify images to display. That’s cool. It makes your posts stand out better. Here’s how that looks for my snarky post about WordPress trying to sell me some nonsense about Firefox 52:


But then I innocently tried to use an SVG image for a post.


Well, that’s a bit more boring. The Twitter card validator only reports successes in spite of the glaring failure. Facebook’s debugger has something slightly more useful to say about it:

Provided og:image URL, https://fransdejonge.com/wp-content/uploads/2018/02/android-planet-logo-openclipart-web.svg does not have a supported extension.

It’s 2018 and this is a thing. You’ll either have to manually add a PNG or JEPG or do it programmatically. Grmbl.

CommentsTags: , , ,

Disable Firefox Fullscreen Animation

Go to about:config, as ever. Then disable browser.fullscreen.animate.

CommentsTags:

Remove dns-prefetch from WordPress 4.9

Most people seem to have switched to statically generated blogs like Hugo by now, but I’ve been using WordPress for some 13 years and combined with WP-Super-Cache it’s been static for pretty much that entire time. There’s little point to putting in extra time and effort just for some extra nerd cred.

On the downside, every new 4.0+ release seems to add more cruft to the header. My functions.php consists of an ever-growing list of remove_action incantations. Here’s the latest addition, necessitated by WordPress 4.9.

// remove WP 4.9+ dns-prefetch nonsense
remove_action( 'wp_head', 'wp_resource_hints', 2 );

For those interested, here’s my full messy collection, including a few hints I commented out.

add_post_type_support( 'page', 'excerpt' );// See http://wordpress.mfields.org/2010/excerpts-for-pages-in-wordpress-3-0/
remove_action('wp_head', 'rsd_link');// Windows Live Writer? Ew!
remove_action('wp_head', 'wlwmanifest_link');// Windows Live Writer? Ew!
remove_action('wp_head', 'wp_generator');// No need to know my WP version quite that easily

// remove WP 4.2+ emoji nonsense
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

// remove WP 4.9+ dns-prefetch nonsense
remove_action( 'wp_head', 'wp_resource_hints', 2 );

// disable embeds nonsense; not even sure what it does
// Remove the REST API endpoint.
remove_action('rest_api_init', 'wp_oembed_register_route');
// Turn off oEmbed auto discovery.
// Don't filter oEmbed results.
remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);
// Remove oEmbed discovery links.
remove_action('wp_head', 'wp_oembed_add_discovery_links');
// Remove oEmbed-specific JavaScript from the front-end and back-end.
remove_action('wp_head', 'wp_oembed_add_host_js');

// Jetpack
//remove_action('wp_head', 'shortlink_wp_head'); // Don't need wp.me shortlinks
// No jQuery! (als Jetpack
//if( !is_admin()){
	//wp_deregister_script('jquery');
	//wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	//wp_enqueue_script('jquery');
//}

// remove OneAll Social script from regular page
remove_action ('wp_head', 'oa_social_login_add_javascripts');

Comments

Is My Firefox Out of Date?

When I logged in, WordPress tried to inform me that the particular browser I was using was out of date.

WordPress’ “Your browser is out of date” greeting.

So, is it?

Well, we can take a look at the Firefox ESR download page to find out.

The current version of Firefox ESR is 52.4.1, releasenotes here.

Nope. Still Firefox 52, which will remain supported until Firefox 60.

The Firefox support window. Source: https://www.mozilla.org/en-US/firefox/organizations/faq/

Always fun, these automated checks. 🙂

Comments

Image Optimization Guide

On the forum I administer, I am forced to run a tight attachment policy. Disk space doesn’t grow on trees. Occasionally this leads to questions about the small attachment size limit of 50 KiB. This guide is intended to clarify that this is not nearly as tiny as you might think. Note that although I’ll mention commands without much explanation for the sake of brevity, you’re always recommended to further explore the possibilities offered by those commands with the --help flag as well as by running man the-command-here.

First you need to ask yourself what kind of file type is appropriate, if you have the choice. On screenshots, the main purpose of attachments on my forum, you’ll often encounter large areas of uniform background colors. PNG is therefore almost invariably the right choice. Crop out everything but what’s relevant. JPEG is appropriate for more dynamic pictures such as photographs. If you want to do a lot with photographs, you might want to consider an external hosting service. My wife likes SmugMug. Still, for thumbnails you might be able to do a fair bit more within a few hundred KiB than you might think. Finally, the vector graphics in SVG result in pictures that always look sharp. You’ll typically have drawn these in a program like Inkscape or Adobe Illustrator.

Table of Contents

  1. 1. Optimizing JPEG
  2. 2. Optimizing PNG
  3. 3. Optimizing SVG
  4. Addendum A: Scanned Documents
  5. Addendum B: Video

1. Optimizing JPEG

Often you’ll want to crop your file. Do not edit your JPEG followed by resaving it because this will result in reduced quality! You can crop losslessly with cropgui. On Windows you can use IrfanView.

If you don’t want to crop, and also potentially for some post-cropgui optimization, use jpegtran -copy none -progressive -optimize file.jpg > file-opt.jpg. Note that this will get rid of all metadata, which may be undesirable. If so, use jpegtran -copy all -progressive -optimize file.jpg > file-opt.jpg.

Of course if you want to scale down your JPEG there’s no point in mucking about with lossless cropping first. After scaling down, check how low your quality can go (also see a little helper script I wrote). In any case, you should avoid introducing any unnecessary compression steps with associated quality loss. Here are some results:

  • The original 11.jpg at 2.19 MB.
  • Losslessly cropped 11-crop.jpg at 1.11 MB.
  • Optimized with -copy all -progressive -optimize 11-crop-opt.jpg at 1.04 MB. -copy none would’ve saved an extra whopping 40-some KiB, which on this kind of filesize has little benefit, and besides, I quite like the metadata. For thumbnail-sized files the balance is likely to be different. For example, the 52.2 KiB SmugMug auto-generated thumbnail below can be insignificantly reduced to 51.1 KiB with --copy all, but to 48.2 KiB with --copy none. I think an 8% reduction is not too shabby, plus it brings the file size down to under the arbitrary 50 KiB limit on my forum.

2. Optimizing PNG

As I wrote in the introduction, for screenshots PNG is typically the right choice. If you want to use lossless PNG, use optipng -o7. In my experience it’s ever so slightly smaller than other solutions like pngcrush. But as long as you use a PNG optimizer it shouldn’t much matter which one you fancy. Also see this comparison.

If you don’t care about potentially losing some color accuracy, use pngquant instead. To top it off, if you really want to squeeze out your PNG, you can pass quality settings with --quality min-max, meaning you can pass --quality 30-50 or just --quality 10. Here are some quick results for the screenshot in the SVG section below, but be sure to check out the pngquant website for some impressive examples.


$ du -h --apparent-size inkscape-plain-svg.png
27K	inkscape-plain-svg.png

$ du -h --apparent-size inkscape-plain-svg-fs8\ default.png 
7.6K	inkscape-plain-svg-fs8 default.png

$ du -h --apparent-size inkscape-plain-svg-fs8\ quality\ 10.png 
4.3K	inkscape-plain-svg-fs8 quality 10.png

In this case there is no visual distinction between the original PNG and the default pngquant settings. The quality 10 result is almost imperceptibly worse unless you look closely, so I didn’t bother to include a sample.

3. Optimizing SVG

For using SVG on the web, I imagine I don’t have to tell you that in Inkscape, you should save your file as Plain SVG.

Save as Plain SVG in Inkscape.

What you may not know is that just like there are lossy PNGs, you can also create what amounts to lossy SVGs. There are some command-line tools to optimize SVGs, including (partially thanks to this SO answer):

  • Scour is probably the best command line tool for some quick optimization. You can just use the defaults like scour < in.svg > out.svg or scour -i in.svg -o out.svg. But I recommend you go further.
  • SVGO (SVG Optimizer)
  • SVG-optimiser (by Peter Collingridge)
  • SVG-editor (by Peter Collingridge)

My personal preference for squeezing out every last byte goes toward the web-based version of the SVG-editor by Peter Collingridge. By running it in a browser with inferior SVG support such as Firefox, you’ll be sure that your optimized SVG still works properly afterward. The command line tools can only safely be used for basic optimizations, whereas the effects of going lossy (such as lowering precision) can only be fully appreciated graphically.

Addendum A: Scanned Documents

Scanned documents are a different item altogether. The best format for private use is DjVu, but for public sharing PDF is probably preferable. To achieve the best results, you should scan your documents in TIFF or PNG, followed by processing with unpaper or ScanTailor. If you’ve already got a PDF you’d like to improve, you can use pdfsandwich or my own readablepdf.

Addendum B: Video

I’m not aware of any lossless optimization for video compression such as offered by jpegtran, but you can often losslessly cut video. In the general purpose editor Avidemux, simply make sure both video and audio are set to copy. There is also a dedicated cross-platform app for lossless trimming of videos called, unsurprisingly, LosslessCut. If you do want to introduce loss for a smaller file size you can use the very same Avidemux with a different setting, ffmpeg, mpv, VLC, and so forth. You can get reasonable quality that’ll play many places with something like:

ffmpeg -i input-file.ext -c:v libx264 -crf 19 -preset slow -c:a libfaac -b:a 192k -ac 2 output-file.mp4

For the open WebM format, you can use something along these lines:

ffmpeg -i input.mp4 -c:v libvpx -b:v 1M -c:a libvorbis output.webm

More examples on the ffmpeg wiki. Note that in many cases you should just copy the audio using -acodec copy, but of course that’s not always an option. Extra compression artifacts in audio detract significantly more from the experience than low-quality video.

Comments (2)Tags:

Older Entries »