Self-publishing
Self-publishing and other vainglorious activities.
Sidebar featured images only on single post pages
After updating to WordPress 6.x and updating my theme (Clean Black based) and then merging the customizations back in with meld (yes, I really should do a child theme but this is a pretty simple theme so meld is fine), I didn’t really like the way the post thumbnails are shown, prefering to keep it to the right. I mean clean black was last updated in 2014 and while it still works fine, but that was a while ago. Plus I had hand-coded a theme sometime in the naughties and wanted to more or less keep it while taking advantage of some of the responsive features introduced about then.
Pretty much any question one might have, someone has asked it before, and I found some reasonable solutions, some more complex than others. There’s a reasonable 3 modification solution that works by creating another sidebar.php file (different name, same function) that gets called by single.php (and not the main page) that has the modification you want, but that seemed unnecessarily complicated. I settled on a conditional test is_singular
which works to limit the get_the_post_thumbnail
call to where I wanted and not to invoke it elsewhere. A few of the other options on the same stackexchange thread didn’t work for me, your install may be different. What I settled on (including a map call for geo-tagged posts) is:
<div id="sidebar"> <?php if (is_singular('post') ) { echo get_the_post_thumbnail( $post->ID, 'thumbnail'); echo GeoMashup::map('height=150&width=300&zoom=5&add_overview_control=false&add_map_type_control=false&add_map_control=false'); } ?> <div class="widgetarea"> <ul id="sidebarwidgeted"> <?php if (!dynamic_sidebar('Sidebar Top') ) : ?> <?php endif; ?> </ul> </div> </div>
And I get what i was looking for, a graphical anchor at the top of the single post (but not pages) for the less purely lexically inclined that didn’t clutter the home page or other renderings with a wee bit o php.
Favicon generation script
Favicons are a useful (and fun) part of the browsing experience. They once were simple – just an .ico file of the right size in the root directory. Then things got weird and computing stopped assuming an approximate standard ppi for displays, starting with mobile and “retina” displays. The obvious answer would be .svg favicons, but, wouldn’t’ya know, Apple doesn’t support them (neither does Firefox mobile) so for a few more iterations, it still makes sense to generate an array of sizes with code to select the right one. This little tool pretty much automates that from a starting .svg file.
There are plenty of good favicon scripts and tools on the interwebs. I was playing around with .svg sources for favicons and found it a bit tedious to generate the sizes considered important for current (2020-ish) browsing happiness. I found a good start at stackexchnage by @gary, though the sizes weren’t current recommended (per this github project). Your needs may vary, but it is easy enough to edit.
The script relies on the following wonderful FOSS tools:
- Inkscape to handle svg to png conversion
- Pngquant for png file optimization
- Imagemagick for conversion to .ico
These are available in most distros (software manager had them in Mint 19).
Note that my version leaves the format as .png – the optimized png will be many times smaller than the .ico format and png works for everything except IE<11, which nobody should be using anyway. The favicon.ico
generated is 16, 32, and 48 pixels in 3 different layers from the 512×512 pixel version.
The command line options for inkscape changed a bit, the bash script below has been updated to reflect current.
Note: @Chewie9999 commented on https://github.com/mastodon/mastodon/issues/7396 that for Mastodon, the sizes needed would be generated with the following:
size=(16 32 36 48 57 60 72 76 96 114 120 144 152 167 180 192 256 310 384 512 1024)
The code below can be saved as a bash file, set execution bit, and call as ./favicon file.svg and off you go:
#!/bin/bash # this makes the output verbose set -ex # collect the file name you entered on the command line (file.svg) svg=$1 # set the sizes to be generated (plus 310x150 for msft) size=(16 32 48 70 76 120 128 150 152 167 180 192 310 512) # set the write director as a favicon directory below current out="$(pwd)" out+="/favicon" mkdir -p $out echo Making bitmaps from your svg... for i in ${size[@]}; do inkscape -o "$out/favicon-$i.png" -w $i -h $i $svg done # Microsoft wide icon (annoying, probably going away) inkscape -o "$out/favicon-310x150.png" -w 310 -h 150 $svg echo Compressing... for f in $out/*.png; do pngquant -f --ext .png "$f" --posterize 4 --speed 1 ; done; echo Creating favicon convert $out/favicon-512.png -define icon:auto-resize=48,32,16 $out/favicon.ico echo Done
Copy the .png files and .ico file generated above as well as the original .svg file into your root directory (or, if in a sub-directory, add the path below), editing the “color” of the Safari pinned tab mask icon. You might also want to make a monochrome version of the .svg file and reference that as the “mask-icon” instead, it will probably look better, but that’s more work.
The following goes inside the head directives in your index.html to load the correct sizes as needed (delete the lines for Microsoft’s browserconfig.xml
file and/or Android’s manifest
file if not needed.)
<!-- basic svg --> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <!-- generics --> <link rel="icon" href="favicon-16.png" sizes="16x16"> <link rel="icon" href="favicon-32.png" sizes="32x32"> <link rel="icon" href="favicon-48.png" sizes="48x48"> <link rel="icon" href="favicon-128.png" sizes="128x128"> <link rel="icon" href="favicon-192.png" sizes="192x192"> <!-- .ico files --> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <!-- Android --> <link rel="shortcut icon" href="favicon-192.png" sizes="192x192"> <link rel="manifest" href="manifest.json" /> <!-- iOS --> <link rel="apple-touch-icon" href="favicon-76.png" sizes="76x76"> <link rel="apple-touch-icon" href="favicon-120.png" sizes="120x120"> <link rel="apple-touch-icon" href="favicon-152.png" sizes="152x152"> <link rel="apple-touch-icon" href="favicon-167.png" sizes="167x167"> <link rel="apple-touch-icon" href="favicon-180.png" sizes="180x180"> <link rel="mask-icon" href="/favicon.svg" color="brown"> <!-- Windows --> <meta name="msapplication-config" content="/browserconfig.xml" />
For WordPress integration, you don’t have access to a standard index.html file, and there are crazy redirects happening, so you need to append to your theme’s functions.php
file with the below code snippet wrapped around the above icon declaration block (optimally your child theme unless you’re a theme developer since it’ll get overwritten on update otherwise):
/* Allows browsers to find favicons */ add_action('wp_head', 'add_favicon'); function add_favicon(){ ?> REPLACE THIS LINE WITH THE BLOCK ABOVE <?php };
Then, just for Windows 8 & 10, there’s an xml file to add to your directory (root by default in this example) Also note you need to select a color for your site, which has to be named “browserconfig.xml
”
<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/favicon-70.png"/> <square150x150logo src="/favicon-150.png"/> <wide310x150logo src="/favicon-310x150.png"/> <square310x310logo src="/favicon-310.png"/> <TileColor>#ff8d22</TileColor> </tile> </msapplication> </browserconfig>
There’s one more file that’s helpful for mobile compatibility, the android save to desktop file, “manifest.json
“. This requires editing and can’t be pure copy pasta. Fill in the blanks and select your colors
{ "name": "", "short_name": "", "description": "", "start_url": "/?homescreen=1", "icons": [ { "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffffff", "background_color": "#ff8d22", "display": "standalone" }
Check the icons with this favicon tester (or any other).
Manifest validation: https://manifest-validator.appspot.com/
WebP and SVG
Using WebP coded images inside SVG containers works. I haven’t found any automatic way to do it, but it is easy enough manually and results in very efficiently coded images that work well on the internets. The manual process is to Base64 encode the WebP image and then open the .svg file in a text editor and replace the
xlink:href="data:image/png;base64, ..."
with
xlink:href="data:image/webp;base64,..."
(“…” means the appropriate data, obviously).
Back in about 2010 Google released the spec for WebP, an image compression format that provides a roughly 2-4x coding efficiency over the venerable JPEG (vintage 1974), derived from the VP8 CODEC they bought from ON2. VP8 is a contemporary of and technical equivalent to H.264 and was developed during a rush of innovation to replace the aging MPEG-II standard that included Theora and Dirac. Both VP8 and H.264 CODECs are encumbered by patents, but Google granted an irrevocable license to all patents, making it “open,” while H.264s patents compel licensing from MPEG-LA. One would think this would tend to make VP8 (and the WEBM container) a global standard, but Apple refused to give Google the win and there’s still no native support in Apple products.
A small aside on video and still coding techniques.
All modern “lossy” (throwing some data away like .mp3, as opposed to “lossless” meaning the original can be reconstructed exactly, as in .flac) CODECs are founded on either Discrete Cosine Transform (DCT) or Wavelet (DWT) encoding of “blocks” of image data. There are far more detailed write ups online that explain the process in detail, but the basic concept is to divide an image into small tiles of data then apply a mathematical function that converts that data into a form which sorts the information from least human-perceptible to most human-perceptible and sets some threshold for throwing away the least important data while leaving the bits that are most important to human perception.
Wavelets are promising, but never really took off, as in JPEG2000 and Dirac (which was developed by the BBC). It is a fairly safe bet that any video or still image you see is DCT coded thanks to Nasir Ahmed, T. Natarajan and K. R. Rao. The differences between 1993’s MPEG-1 and 2013’s H.265 are largely around how the data that is perceptually important is encoded in each still (intra-frame coding) and some very important innovations in inter-frame coding that aren’t relevant to still images.
It is the application of these clever intra-frame perceptual data compression techniques that is most relevant to the coding efficiency difference between JPEG and WebP.
Back to the good stuff…
Way back in 2010 Google experimented with the VP8 intra-coding techniques to develop WebP, a still image CODEC that had to have two core features:
- better coding efficiency than JPEG,
- ability to handle transparency like .png or .tiff.
This could be the one standard image coding technique to rule them all – from icons to gigapixel images, all the necessary features and many times better coding efficiency than the rest. Who wouldn’t love that?
Apple.
Of course it was Apple. Can’t let Google have the win. But, finally, with Safari 14 (June 22, 2020 – a decade late!) iOS users can finally see WebP images and websites don’t need crazy auto-detect 1974 tech substitution tricks. Good job Apple!
It may not be a coincidence that Apple has just released their own still image format based on the intra-frame coding magic of H.265, .heif and maybe they thought it might be a good idea to suddenly pretend to be an open player rather than a walled-garden-screw-you lest iOS insta-users wall themselves off from the 90% of the world that isn’t willing to pay double to pose with a fashionable icon in their hands. Not surprisingly, .heic, based on H.265 developments is meaningfully more efficient than WebP based on VP8/H.264 era techniques, but as it took WebP 10 years to become a usable web standard, I wouldn’t count on .heic having universal support soon.
Oh well. In the mean time, VP8 gave way to VP9 then to VP10, which has now AV1, arguably a generation ahead of HEVC/H.265. There’s no hardware decode (yet, as of end of 2020) but all the big players are behind it, so I expect 2021 devices will and GPU decode will come in 2021. By then, expect VVC (H.266) to be replacing HEVC (H.265) with a ~35% coding efficiency improvement.
Along with AV1’s intra/inter-frame coding advance, the intra-frame techniques are useful for a still format called AVIF, basically AVIF is to AV1 (“VP11”) what WEBP is to VP8 and HEIF is to HEVC. So far (Dec 2020) only Chrome and Opera support AVIF images.
Then, of course, there’s JPEG XL on the way. For now, the most broadly supported post-JPEG image codec is WEBP.
SVG support in browsers is a much older thing – Apple embraced it early (SVG was not developed by Google so….) and basically everything but IE has full support (IE… the tool you use to download a real browser). So if we have SVG and WebP, why not both together?
Oddly I can’t find support for this in any of the tools I use, but as noted at the open, it is pretty easy. The workflow I use is to:
- generate a graphic in GIMP or Photoshop or whatever and save as .png or .jpg as appropriate to the image content with little compression (high image quality)
- Combine that with graphics in Inkscape.
- If the graphics include type, convert the type to SVG paths to avoid font availability problems or having to download a font file before rendering the text or having it render randomly.
- Save the file (as .svg, the native format of Inkscape)
- Convert the image file to WebP with a reasonable tool like Nomacs or Ifranview.
- Base64 encode the image file, either with base64
# base64 infile.webp > outfile.webp.b64
or with this convenient site - If you use the command line option the prefix to the data is “
data:image/webp;base64,
“ - Replace the … on the appropriate
xlink:href="...."
with the new data using a text editor like Atom (RIP). - Drop the file on a browser page to see if it works.
WordPress blocks .svg uploads without a plugin, so you need one
The picture is 101.9kB and tolerates zoom quite well. (give it a try, click and zoom on the image).
Open letter to the FCC 5 regarding net neutrality
I’m in favor of net neutrality for a lot of reasons; a personal reason is that I rely on fair and open transport of my bits to work overseas. If you happen to find this little screed, you can also thank net neutrality for doing so as any argument for neutrality will likely be made unavailable by the ISPs that should charge exorbitant rents for their natural monopolies and would be remiss in their fiduciary responsibility should they fail to take every possible step to maximize shareholder value, for example by permitting their customers access to arguments contrary to their financial or political interests.
I sent the following to the FCC 5. I am not, I’m sorry to say, optimistic.
Please protect Net Neutrality. It is essential to my ability to operate in Iraq, where I run a technical security business that relies on access to servers and services in the United States. If access to those services becomes subject to a maze of tiered access limitations and tariffs, rather than being treated universally as flat rate data, my business may become untenable unless I move my base of operations to a net neutrality-respecting jurisdiction. The FCC is, at the moment, the only bulwark against a balkanization of data and the collapse of the value premise of the Internet.
While I understand and am sympathetic to both a premise that less government regulation is better in principal and that less regulated markets can be more efficient; this “invisible hand” only works to the benefit in a “well regulated market.” There are significant cases where market forces cannot be beneficial, for example, where the fiduciary responsibility of a company to maximize share-holder value compels exploitation of monopoly rents to the fullest extent permitted by law and, where natural monopolies exist, only regulation prevents those rents from becoming abusive. Delivery of data services is a clear example of one such case, both due to the intrinsic monopoly of physical deployment of services through public resources and due to inherent opportunities to exert market distorting biases into those services to promote self-beneficial products and inhibit competition. That this might happen is not idle speculation: network services companies have routinely attempted to unfairly exploit their positions to their benefit and to the harm of fair and open competition and in many cases were restrained only by existing net neutrality laws that the FCC is currently considering rescinding. The consequences of rescinding net neutrality will be anti-competitive, anti-productive, and will stifle innovation and economic growth.
While it is obvious and inevitable that network companies will abuse their natural monopolies to stifle competition, as they have attempted many times restrained only by previous FCC enforcement of the principal of net neutrality, rescinding net neutrality also poses a direct risk to the validity of democracy. While one can argue that Facebook has already compromised democracy by becoming the world’s largest provider of news through an extraordinarily easily manipulated content delivery mechanism, there’s no evidence that they have yet exploited this to achieve any particular political end nor actively censored criticism of their practices. However, without net neutrality there is no legal protection to inhibit carriers from exploiting their control over content delivery to promote their corporate or political interests while censoring embarrassing or opposing information. As the vast majority of Americans now get their news from on-line resources, control over the delivery of those resources becomes an extraordinarily powerful political weapon; without net neutrality it is perfectly legal for corporations to get “their hands on those weapons” and deploy them against their economic and political adversaries.
Under an implicit doctrine of net neutrality from a naive, but then technically accurate, concept of the internet as a packet network that would survive a nuclear war and that would treat censorship as “damage” and “route around it automatically,” to 2005’s Madison River ruling, to the 2008 Comcast ruling, to 2010’s Open Internet Order the internet has flourished as an open network delivering innovative services and resources that all businesses have come to rely on fairly and equally. Overturning that historical doctrine will result in a digital communications landscape in the US that resembles AT&Ts pre-breakup telephone service: you will be permitted to buy only the services that your ISP deems most profitable to themselves. In the long run, if net neutrality is not protected, one can expect the innovation that has centered in the US since the birth of the internet, which some of us remember as the government sponsored innovation ARPAnet, to migrate to less corporatist climates, such as Europe, where net neutrality is enshrined in law.
The American people are counting on you to protect us from such a catastrophic outcome.
Do not reverse the 2015 Open Internet Order.
Sincerely,
David Gessel
cc:
Mignon.Clyburn@fcc.gov
Brendan.Carr@fcc.gov
Mike.O’Reilly@fcc.gov
Ajit.Pai@fcc.gov
Jessica.Rosenworcel@fcc.gov
Kitty Poop (1995)
Many years ago (21 years, 9 months as of this post), I used some as-of-then only slightly out of date equipment to record a one week time lapse of the cats’ litter box.
I found the video on a CD-ROM (remember those?) and thought I’d see if it was still usable. It wasn’t – Quicktime had abandoned support for most of the 1990’s era codecs, and as it was pre-internet, there just wasn’t any support any more. I had to fire up my old Mac 9500, which booted just fine after years of sitting, even if most of the rubber feet on the peripherals had long since turned to goo. The OS9 version of QT let me resave as uncompressed, which of course was way too big for the massive dual 9GB drives in that machine. Youtube would eat the uncompressed format and this critical archival record is preserved for a little longer.
Time lapse of the litter box. Shot in Sept, 1995 in San Francisco, CA. Captured with a RasterOps ColorBoard 364 Nubus card from a Sony XC-999 on a Mac IIfx.
Yahoo account PSA
It seems that if you have a yahoo mail account it either already has or will soon be hacked. There’s some news out there about this…..
Yes, how could you not be sure that when somebody offers to host your personal data for free on their servers that nothing could possib-lie go wrong. Uh, PossibLY go wrong.