Puppeteer page waitForSelector and visible:true option won't process click

I had a problem in Puppeteer where an initially hidden menu has to be invoked by clicking on the menu icon. I used await page.waitForSelector(selector) and then called page.click(selector), where 'selector' is a css selector and page is my page object in Puppeteer. Nothing happened. I figured that as the page had just loaded the menu icon might have been in the DOM but not yet visible. So I tried adding the visible:true option: page.waitForSelector(selector,{visible:true}). Again nothing happened. Then I added a short delay before page.click(selector) via page.waitForTimeout(2000) and it worked. But that's like a hack. I mean how long do you wait? So I figured that the menu icon is visible but the click-handler for it is not yet loaded, and waiting ensures that it usually is. But how to do it correctly? Then I tried this:

await page.waitForSelector(selector);
await page.$eval(selector, elem => elem.click());

And it worked.

Cure for crashing iPhone

My iPhone kept crashing. If I left it on overnight it would invariably crash by morning and drain the battery in the process. I tried all the cures suggested on the Internet, including wiping the phone and reinstalling everything from scratch. That worked for a while then it started crashing again. I tried shutting it down overnight, but it still crashed the same. So then I tried shutting it down AND wrapping it in aluminium foil. And hey presto -- it woke up the next morning and the battery was fine. So this tells me that there is some communication going on between even a 'shut down' iPhone and the service provider, since radio waves can't penetrate alfoil. Also that there is some kind of broken connection that it tries to re-establish overnight that fails repeatedly until it runs out of power. Miraculously, the foil also stopped it crashing -- for a while. So those broken connections appear to be marked as 'stale' and it doesn't try to remake them, though eventually new ones appear. So if you have the same problem it can't hurt to try the same remedy that worked for me -- shutting it down overnight and wrapping it in alfoil. It's a lot easier than reinstalling the software.

Installing 'tkinter' on Linux for Python3

I find it confusing that the python module 'tkinter', the interface module for the tk scripting language, is only installable via the Linux platform package manager. On Ubuntu I used:

sudo apt-get install python3-tk

and then in python3 I can import tkinter:

Python 3.9.5 (default, May 11 2021, 08:20:37) 
[GCC 10.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import tkinter
>>> quit()

Using pip3 directly to install tkinter doesn't work, nor does pip3 install tk, which installs an unrelated module.

For python2 remove the '3' from the above commands.

Installing VLC on Ubuntu 21.04

There are plenty of guides on how to install VLC on Ubuntu, but rather few on how to do it on Ubuntu 21.04. If you believe what they say then you only need to install the vlc and ubuntu-restricted-extras packages. The first package is the VLC application itself and the ubuntu-restricted-extras is supposed to contain all the needed codecs to play encrypted dvds. Except it doesn't work. You also need libdvd-pkg. Install that and all will be fine.

Disabling middle trackpad click on Ubuntu 21.04

Since Ubuntu 21.04 my fix to reassign the middle trackpad click using xinput to "left click" no longer works. Now whenever my hand drifts to the middle of the trackpad, and I click on an application icon, I open up a copy of the current application. Or if I am in a program I end up pasting something I didn't want to. So I tried instead gnome-tweaks, which you can easily install using apt-get in terminal:

sudo apt-get install gnome-tweaks

Now lauch gnome-tweaks (e.g. by typing gnome-tweaks in Terminal) and select "Keyboard and Mouse". There is a section there called "Mouse click emulation". There are three settings:

1. Fingers: all single trackpad clicks are left-clicks but you can simulate a right click by tapping with two fingers. I find this the most comfortable setting.
2. Area: this is the default. the trackpad is divided into three areas. The bottom middle of the trackpad is middle click, leaving very little space for left-click which is dominant.
3. Disabled: all clicks on the trackpad are left-clicks. I find this useless as you must have right click in many cases.

There is also a setting to disable middle click paste. I turned that off as I do not want middle click at all. Middle click makes sense with a mouse where you have tactile feedback as to what you are pressing but on a featureless trackpad you can only middle-click reliably if you stare at it the whole time. For terminal copy and paste I use shift-control-c and shift-control-v. With option 1 above you can still have middle click paste with a three-finger tap.

A dropdown menu for toolbars using standard HTML elements

I wanted a dropdown menu in HTML but without the tons of javascript and complex stylesheets usually associated with such designs. My dropdown menu is built from two standard HTML elements: an input of type button, and a select. It needs a little vanilla javascript and css to make it work, but it is not excessive. It works on all major browsers.

Why not just use an ordinary select element on its own? Because then the currently selected item would occupy a variable amount of horizontal space. This menu is intended for use in a toolbar where space is at a premium. This way the button driving the menu is always only 1-character or 1 icon wide. With a variable width select if you choose a long item then the other buttons may wrap around onto the next line. Of course in select you can set its width to be a fixed value but then the current value is often unreadable.

Here's the code:

<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <style> #dropdown {display:none;position:absolute;} #formats,#dropdown {border-radius:0;} #selected {padding-left:0.5em;} </style> <script> function display_menu(){ let menu = document.getElementById("dropdown"); menu.setAttribute("style","display:inline-block"); } function change_menu(){ let menu = document.getElementById("dropdown"); let s = document.getElementById("selected"); s.textContent = menu.options[menu.selectedIndex].value; } function select_menu(event){ if ( event.target.tagName == 'OPTION' ){ let parent = event.target.parentNode; if ( parent.tagName=="OPTGROUP" ) parent = parent.parentNode; parent.setAttribute("style","display:none"); } } window.onload = function(){ let menu = document.getElementById("dropdown"); let s = document.getElementById("selected"); s.textContent=menu.value; } </script> </head> <body> <div id="para"><input type="button" id="formats" value="f" onclick="display_menu()"></input><label id="selected"></label><br><select size="6" onmouseup="select_menu(event)" onchange="change_menu()" id="dropdown"><optgroup label="fruit"><option selected> pear</option><option>apple</option><option>banana</option></optgroup><optgroup label="vegetables"><option>potato</option><option>carrot</option><option>brocolli</option></optgroup></select></div> <p>And some more text here</p> </body> </html>

The basic idea is to have a button on one line and a select on the next, separated by a <br>. The select menu is initially invisible. Clicking on the button makes it visible. Then it works like a normal select element, except that if you change the selected option or select the same one it makes the menu disappear. Enclosing the menu and its button in a div that is absolutely positioned makes the menu float over subsequent text, rather than pushing it down.

Here's the thing in action. (The label for the current value is for demo purposes, and in practice should be omitted or placed elsewhere on the page.)

pear
pearapplebananapotatocarrotbrocolli

And some more text here.