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.

Ubuntu on Metabox (Clevo) L140MU

The Clevo L140MU uses the Intel 11th Gen i5 or i7 processor, which is an integrated SoC with wifi and Iris Xe graphics. The model I tested on has an extra 8GB of RAM, making 16GB in total, and a 512GB SSD. I chose the i5 model as the i7 is only 20% faster for a lot more money, and probably runs hotter. Both processors have 4 cores with hyperthreading. It comes with no operating system, so you don't have to pay the "Microsoft tax" -- a positive point for a Linux enthusiast. However, you can't buy direct from Clevo. You have to go to a reseller like Metabox, Sager or System76. (Their Lemur Pro seems to be this model.)

Physical characteristics

The laptop is extraordinarily light. The body is reportedly a magnesium alloy anodysed black. It's thicker than I was led to believe. It measures 15mm x 220mm x 323mm, excluding the rubber feet, which protrude a further 2mm. The base is not tapered and hence is fairly chunky for such a light laptop. This is to accomodate the 73 Wh battery. The build quality is good. The lid is mounted via a spindle-type hinge as on a Macbook, and looks really solid. It is very smooth, doesn't creak and goes back evenly with the same force all the way to 180 degrees as advertised. The lid is rigid, the screen is matte. The power cable goes in on the left hand side. The power brick is a fairly hefty 65 watt one. Ports on the left are thunderbolt, USB, HDMI and on the right, lock, USB, stereo audio jack, SD mini and power button. Ventilation is between the screen and the body. The fan is off or inaudible most of the time in normal use. When it does come on it is quiet and discreet.

The base has 12 screws deeply inset, and four rubber feet which seem firmly attached (so far) and are rather sharp. This is always a weak point with laptops and I remain sceptical that this new design will fare any better than usual. But let's hope I'm wrong.

The laptop comes with numerous ugly stickers, which have to be removed carefully without scratching the anodysed magnesium. I used a plastic spudger to lever up a corner and then pulled them off easily. You really don't want to use any kind of metal tool. And do it soon, before the glue sets hard.

Screen

The screen has a good range of brightness and although I can't measure it, it looks decently bright at full blast. It is of good quality and can be viewed at a sharp angle without dimming. Though they don't say it is IPS it looks like it is. It measures oddly 310mm x 175mm. This is a lot wider than your average 14 inch. However, a quick calculation reveals that this ratio: 1.77:1 is precisely that of FHD (1920x1080), so the proportions of all images displayed on it are true to life.

Keyboard and trackpad

The keyboard is a chiclet style with more than average travel. It is comfortable to use, though I wonder if too much of a gap has been left between keys and the surrounds for crumbs, fingernails and general rubbish to creep in. It has several intensities of backlighting reached by repeatedly hitting the keyboard backlight (fn-F4) key.

PgUp and PgDn are stupidly squeezed in above the left-arrow and right-arrow keys. This means that navigating via left or right arrow in a document frequently results in hitting PgUp or PgDn by mistake. The only way to make the left and right arrow keys usable is to disable PgUp and PgDn via xmodmap:

xmodmap -e 'keycode 117='
xmodmap -e 'keycode 112='

Making this permanent though may take a little more thought.

The trackpad is Elantec and as in my previous Clevo works well under Ubuntu. Two-fingered scroll works only in the "natural" way regardless of the setting in the Mouse and Touchpad control panel. To turn it off you need to type in the terminal:

gsettings set org.gnome.desktop.peripherals.touchpad natural-scroll false

The tapping areas need configuring as the default setting recognises the middle of the trackpad as the middle button of a mouse. This is easily fixed though:

sudo apt-get install xinput
xinput --list
xinput get-button-map 12
xinput set-button-map 12 1 1 3 4 5 6 7

The list command tells you the ID of the trackpad, which in my case is 12. The last command modifies the buttton-map for id 12 so that buttons 1 and 2 both do the job of button 1. I haven't yet managed to get this to persist between reboots, however.

Speakers

Another drawback with this model is the poor sound quality of its speakers. Maybe I am spoiled from having higher quality speakers found in mainstream laptops, but there is a definite reverberation between the speakers and the keyboard. You really need to use headphones to get decent sound.

Battery

After 12 hours of normal use including rest periods it went from 100% to 40%. It lost about 12% overnight while in suspend (I think).

Installing Ubuntu

For this model you need Ubuntu 20.10 with the 5.8 kernel. With 20.04 (kernel 5.4) the brightness controls didn't work. Installation was easy once you find out that the F7 key lets you choose the startup disk. The wifi works fine. The backlit keyboard button (fn-F4) works, as do volume controls (fn-F5 and F6), brightness (fn-F8 and F9). fn-F1 does nothing. fn-F2 and F3 work as expected. fn-F10 does nothing. fn-F11 enters airplane mode. fn-F12 puts the screen to sleep.

After a while I realised that having to hold down the fn-key when accessing things like screen brightness is really annoying. So I reprogrammed the F3, F5, F6, F8 and F9 keys to control sound and brightness directly. For this you need to install xdotool and program the keys via Settings->Keyboard shortcuts. For example I defined a custom shortcut called "mute" with the definition xdotool key XF86AudioMute.

One issue that only emerged after using it for a while was that auto-suspend, which kicked in every 5 minutes of idleness, tended to crash the machine. I upgraded the software using Software Update and also disabled auto-suspend and now all seems fine.

Conclusion

This is a good laptop for Linux, especially as it does not come preinstalled with Windows. The build quality and the battery are both positive points. In spite of a number of glitches, which can all be got around. I would recommend this laptop for Linux. Remember there are no perfect Linux machines out there.

Postscript

After using this machine now for just over 6 months a few minor problems have emerged. Early on in its life it crashed and could not be rebooted using the restart button. After talking with Metabox support the answer was simple: you need to take off the case bottom and pull out the battery cable and reinsert it. I'm confident that this problem, which hasn't recurred for some months is due to the Linux kernel not fully supporting this machine, because it seems OK now after updates were applied.

Also one of the rubber feet is a little bit loose, but they are still all on. A good cure if they do come off is to superglue them back on. The anodysing also can chip, so it is best to keep it in a sleeve.

Other than that I'm still very happy with the machine. The keyboard, trackpad, battery, hinges and screen are all really good. If you get those right you generally have a great laptop.