Archive for the ‘Webtechnology’ Category

2 Comments

Macro Photography with the Raspberry Pi HQ camera and reversing the lens II

Thursday, June 4th, 2020

In a first post about Macro photography with the Raspberry Pi HQ camera I showed some pictures made with the reverse mounted lens technique and the new Raspberry Pi HQ camera.

But you might wonder what the exact setup was. So I show and describe it here. Yes, the 16mm lens is used upside down, or the wrong way. 😉

As I explained earlier. Normally you catch a big world in a small photo, and by reversing the lens you’ll get the opposite. You can make a small world big.

Exactly what you want for macro-photography.

 

Macro photography setup with the Raspberry Pi HQ camera and a reversed 16mm lens

(more…)

No Comments

Firefox Bug with clip-path

Thursday, June 4th, 2020

Firefox has a rather silly bug with overlapping clip-path. Instead of hiding content it start showing content with overlapping clip-path.

In short:

.clip {
clip-path: inset(400px);
}

on a 600px image should not show any content. In Firefox it does.

You can see the problem here.

No Comments

Firefox Preview on Android (Preview)

Friday, April 24th, 2020

Trying out Firefox Preview on Android.

What I miss now at the moment, two major (deal-breaking) things:

No support for extensions (yet)

No support for extensions, except uBlock Origin, which is a great extension. But I don’t need uBlock anymore, because I have my own (IMHO superior) extension. But I can’t install it, so can’t really use Firefox Preview. I need my extensions!!

No keyword search

A hidden gem in Firefox, just type your keyword of choice and  a search-term and search anything you want. Really really productive!!!!

An example, use g chair for searching in your favorite search engine to search for a chair. If you switch from google to bing or duckduckgo there is not change in habit, except changing your bookmark from:

https://www.google.com/search?q=%s

to

https://www.bing.com/search?q=%s

That is a usability gem in Firefox Desktop, but also on Firefox Android.

If you like searching only in a domain, you can setup that as well. Absolutely superior to adding search engines as an extension. Well for the user, probably not for Mozilla/Firefox. Yes, you can monitor and monetize search engine extensions, but they are INFERIOR!!!!! to keyword search in most cases.

Keyword search is easier, than adding search engines by right-clicking on search field in most cases, and add search engine, which doesn’t work on sites that have only Javascript driven search fields (again don’t break the internet!!), and on sites that use url based searches like: example.com/search/keyword

Use-cases:

  • site search, search easily in a domain
    https://www.bing.com/search?q=%s%20site:www.nrc.nl
  • search for certain file-types in domain
    https://www.google.com/search?client=ubuntu&q=%s+site:nl.hardware.info&as_filetype=pdf
  • search with an easy to remember letter/keyword, easier than scrolling a long list with confusing icons
  • search in sites that don’t have a proper search field, or a Javacript driven search field:
    https://caniuse.com/%s
    https://caniuse.com/#search=%s

 

Mozilla probably doesn’t like keyword search bookmarks, because they can’t sell it. Officially they don’t like it because maintaining the code is to complex, and they claim it is not much used.

Well I use it everyday 1000+. I guess Mozilla doesn’t know about, because, how do they know how I organize my bookmarks? Privacy first, so no tele-metrics send to Mozilla by default, that’s the first thing I do in every browser. Disable telemetrics/analytics. Should be off by default by law nowadays (GDPR), but isn’t always.

Normally on my Linux box searching with Google I see something like:

https://www.google.com/search?client=ubuntu
https://www.bing.com/search?form=MOZLBR&pc=MOZI&q=chair

You see the client or `pc` parameters, that is added by default install. Probably that is a way money can be made, like pushing Facebook bookmarks on a default install. I don’t mind that much I remove them instantly.

I stopped using Opera, when they started to push default commercial bookmarks with every update, and started to push Alibaba/Aliexpress and Amazon extensions. And when they blocked extensions to work on third party commercial urls (Google/Bing).  Opera was sold to Chinese investors a couple of years ago.

I really do not hope that Firefox is heading that way, because keyword search is really nice to have, as extensions on Desktop/Android.

And I use Android AOSP, so the open source operating system WITHOUT Google services, like Google Play. I’m limited to writing my own apps, or using F-Droid/Github builds. No Google Play.

Made Firefox my favorite app on Android. And I need support for keyword search and self-made extensions, not only a Recommended Extensions  selection made by Mozilla. Keyword search and self-made extensions are by far the most productive features of Firefox nowadays for me.

 

 

No Comments

Fixing Firefox: Failed to register/update a ServiceWorker for scope

Saturday, February 1st, 2020

For users that take privacy serious, Progressive Web Apps and the Push API and Notifications API are a real headache. They offer good performance and service, but privacy wise they are not that nice. Something like a supercookie. You like them but somewhere you know, you don’t really want them.

So in Firefox, Service Worker APIs are hidden and cannot be used when the user is in private browsing mode.

But also when users have Delete cookies and site data when Firefox is closed checked, sites can not register a Service Worker.

An error in the Javascript console will show up:

Failed to register/update a ServiceWorker for scope ‘https://domain/path’: Storage access is restricted in this context due to user settings or private browsing mode.

SecurityError: The operation is insecure.

Most solutions  suggest that the user should change or uncheck that setting, but that is not necessarily needed. A better solution is to create an exception for a that particular site. Like there own. Or they want a limited set of sites they trust to enable service workers.

Press the Manage Permissions button and add an exception for your domain.

That way you can use Progressive Web Apps or service workers on a selected collection  of trusted sites, and still keep your privacy settings on a high level.

 

3 Comments

Trying out DeepSpeech on a Raspberry Pi 4

Friday, January 3rd, 2020

Deep Speech is an open speech-to-text engine by Mozilla. Speech synthesis and Speech to text are fun to try out, and I read that it could run on a Raspberry Pi4 with ease on one core, so I decided to give it a try.

The Raspberry Pi version is using Google’s TensorFlow Lite for an implementation of Baidu’s DeepSpeech architecture.

Installing it on a Raspberry 4 Buster distribution was not straightforward. First I read instructions on the Github page and tried to download and install the git version and, but I ran into problems. It was taking ages and I ran into the famous `wheels` problem.

Failed building wheel for scipy

After tweaking and trying a few times, i gave up on the Github version and tried the instructions here, but also that was a bumpy road. But success waits in the end.

Let’s go, how to install DeepSpeech on the RPI4

Create a dev directory:

mkdir dev
cd dev

Create a Python Virtual environment.

python3 -m venv deepspeech-train-venv

Activate the virtual environment

source dev/deepspeech-train-venv/bin/activate

Create the deepspeech directory

mkdir deepspeech
cd deepspeech

Install deepspeech

pip install deepspeech

Download pre-trained English model

curl -LO https://github.com/mozilla/DeepSpeech/releases/download/v0.6.0/deepspeech-0.6.0-models.tar.gz
tar xvf deepspeech-0.6.0-models.tar.gz

Download example audio files

curl -LO https://github.com/mozilla/DeepSpeech/releases/download/v0.6.0/audio-0.6.0.tar.gz
tar xvf audio-0.6.0.tar.gz

Done, run, well , eh, I tried to run the example on the instruction page

deepspeech --model deepspeech-0.6.0-models/output_graph.pbmm --lm deepspeech-0.6.0-models/lm.binary --trie deepspeech-0.6.0-models/trie --audio audio/2830-3980-0043.wav

Errors!?!  I installed a missing dependency:

sudo apt install libatlas3-base

Still errors

ModuleNotFoundError: No module named 'numpy.core._multiarray_umath'

So I check if I had numpy installed

pip install numpy
Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple
Requirement already satisfied: numpy in /home/pi/dev/deepspeech-train-venv/lib/python3.7/site-packages (1.15.4)

I decided to update numpy:

pip install --upgrade numpy
Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple
Collecting numpy
Using cached https://www.piwheels.org/simple/numpy/numpy-1.18.0-cp37-cp37m-linux_armv7l.whl
tensorboard 2.0.2 has requirement setuptools>=41.0.0, but you'll have setuptools 40.8.0 which is incompatible.
Installing collected packages: numpy
Found existing installation: numpy 1.15.4
Uninstalling numpy-1.15.4:
Successfully uninstalled numpy-1.15.4
Successfully installed numpy-1.18.0

So i decided to update setuptools too:

pip install --upgrade setuptools
Looking in indexes: https://pypi.org/simple, https://www.piwheels.org/simple
Collecting setuptools
Using cached https://files.pythonhosted.org/packages/f9/d3/955738b20d3832dfa3cd3d9b07e29a8162edb480bf988332f5e6e48ca444/setuptools-44.0.0-py2.py3-none-any.whl
Installing collected packages: setuptools
Found existing installation: setuptools 40.8.0
Uninstalling setuptools-40.8.0:
Successfully uninstalled setuptools-40.8.0
Successfully installed setuptools-44.0.0

I tried to run the example on the instruction page again
# Transcribe an audio file

deepspeech --model deepspeech-0.6.0-models/output_graph.pbmm --lm deepspeech-0.6.0-models/lm.binary --trie deepspeech-0.6.0-models/trie --audio audio/2830-3980-0043.wav

Another error

Loading model from file deepspeech-0.6.0-models/output_graph.pbmm
TensorFlow: v1.14.0-21-ge77504a
DeepSpeech: v0.6.0-0-g6d43e21
ERROR: Model provided has model identifier '='+;', should be 'TFL3'

Didn’t work. I needed to change the model to `tflite`

deepspeech --model deepspeech-0.6.0-models/output_graph.tflite --lm deepspeech-0.6.0-models/lm.binary --trie deepspeech-0.6.0-models/trie --audio audio/2830-3980-0043.wav

Success in the end!

Loading model from file deepspeech-0.6.0-models/output_graph.tflite
TensorFlow: v1.14.0-21-ge77504a
DeepSpeech: v0.6.0-0-g6d43e21
INFO: Initialized TensorFlow Lite runtime.
Loaded model in 0.0019s.
Running inference.
why should one hault on the way
Inference took 4.091s for 2.735s audio file.

Then I played the audio-file:

aplay audio/4507-16021-0012.wav

Must say DeepSpeech is much smarter then me, I couldn’t understand it:
why should one hault on the way

BTW good question. No I need another engine to answer that!

Way to go, folks.

13 Comments

Fixing the iPhone CSS hover problem on iOS

Wednesday, November 6th, 2019

Mobile phones don’t have a mouse, your greasy fat touchy fingers have to do the job, they kinda act like a giant mouse.

There is major difference: a mouse can click, drag and  hover above the screen, while your fingers can click and swipe, but not hover. Well they can, but nothing is happening then. 🙂

The official terms here are: mouse-events, touch events, and pointer events, for both mouse and touch events. So touch events don’t know about hover, cause that is a mouse event.

So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover.

Hover events work on mobile Android or Firefox browsers, as those browser vendors looked for compatibility, and made a click with your fingers act like hover on elements that are not a link. That is smart thinking, and good care for compatibility. Keep old sites working. Keep sites accessible without forcing Javascript.

But they don’t work on iPhone or mobile Safari, so we need a solution for that.

Plain HTML is and has always been responsive. It’s the CSS that destroyed it, by setting explicit width.  Well there was no max-width, so designers had not much choice. But remove all CSS and magically your HTML will be responsive, except for tables and large images, but at least you can scroll them into sight so everything is still accessible.

Pity the Apple people. An iPhone with mobile Safari doesn’t do :hover, breaking compatibility for old sites, and forcing webdevelopers to use `Javascript`  for these trivial things. Annoying.

There are examples on the internet how to fix that, like adding an onclick attribute to every element you want the :hover rule for, but that’s adding a lot of code, and the elements the don’t hide again when you click somewhere else.

We need better solutions!

How to make :hover  work on Safari iOS on iPhones and iPads.

Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days. Tested on the latest iOS 13.
(more…)