Harmony Keymod – Update

— Posted inDesign, Web development — 3 min read

I got a bit spare time and once again added a small bit of functionality to the script: Flood fill – or maybe better known as “bucket” tool to most people. The basic function is in, it fills enclosed areas with the selected foreground color and and it can even fill semi-transparent, depending on the opacity setting in the menu. Sadly I still miss the tolerance settings for it, the code is in, but the UI is my old and well known problem. I need a design.

The same goes for Dynadraw, which can can have 4 settings – something like elasticity, weight, velocity and if the angle is fixed or not. The code is ready for that, but I have absolutely no clue how to integrate it into the UI without making it too complex to handle.

Still to be done:
Combining stringy, curvy and web to one brush. I did not yet check how compatible they are to each other, but I believe it should work in some way.

… and finally I could need some help:
I would really appreciate if someone who knows UI graphics stuff – meaning design – can help me with some mock-ups and ideas for a design rebuild. I am running out of space with the new settings I am planning.

A native English speaker who can help me to find better fitting words for the settings would be welcome too.

You can try out the little program on my web-page quhno.internetstrahlen.de or visit the previous Harmony Keymod blog entry here.

PS: The image above was “drawn” with this application while testing things. but I am still proud of it because it is up until today the most realistic cloud I ever managed to draw – and It took less than 5 minutes 😀

( I know it sucks, but as I wrote before, I am no artist at all 😛 )

PS: There is a chromium bug which causes a massive RAM explosion with one of the Javascript commands I used for undo and redo on some hardware – see https://bugs.chromium.org/p/chromium/issues/detail?id=242215 – which hits Vivaldi too in combination with some hardware. If you did overwrite chrome://flags/#ignore-gpu-blacklist please consider to disable the overwrite. If you didn’t overwrite it and are still hit by it, you sadly have to wait until the chromium authors have fixed the bug.

Rest in Peace, KartOO

— Posted inTechnology, Web development — 4 min read

Back then …

Whenever I knew what information I needed but didn’t know which search terms would lead me to this information, you were there and helped me reliably.

I only needed to enter a search term and you showed me a cloud of pictures with lines in between, showing the interlinks with added keywords connecting these pictures. You allowed to hover over one of the pictures to get a short summary of the content of the page.

I could click on one of the terms on the connecting lines and you provided me with a new, refined cloud until there were only 10 or 20 pages left, all of which were filled with very good results.

If I clicked on one of the preview pictures, you opened the page in a new tab in the browser and flagged that I have visited the page in your search window.

Also, it was possible to set which additional information I wanted to have and you even showed me groups of possible search results…

Unfortunately, you are no longer.

Why?

I have no idea.

Maybe you were just too innovative for the “I don’t have time” searchers who just want quick information tidbits, 1,000,000 hits in 0.23s, who are not interested in the quality of the results.

But maybe you were just too unknown and therefore didn’t get any advertising revenue – although I did a lot of advertising for you…

… but what’s a single voice against the overwhelming advertising power of the data kraken?

The above eulogy was originally posted February 12, 2010 on my.opera, it is still available in the Web Archive.

The first part of this article is a translated and slightly rewritten version – I am still moaning about its too early demise. I wonder if we will ever see a public search engine like this again.

… and today

Advertising money is what makes the web spin. Cases like the above, where new ideas and technologies were starved to death, maybe without noticing or maybe even deliberately, are still a thing, maybe even more than ever, as we can see with e.g. www.foundem.co.uk which is a vertical search engine. The technology and mathematics behind vertical search engines like those is really amazing, and they can solve problems the usual horizontal search engine suspects like Google, bing etc.pp. can’t, but have you ever heard about it? No? I guessed so …

The story behind it?

Read it in this New York Times Magazine article: The case against Google.

Also available in the waybackmachine. Make sure to press the stop button as soon as you see the article content to avoid the paywall redirection on the archived page.

Almost the same happened some years earlier to Cuil – which ironically was founded by some former Google employees.

Side note: Ignore the “criticism” part in the Wikipedia article – Cuil was still new and all new search engines I have ever seen had the same problems and much worse in their early days – yes, Google back then in 1997 too. Been there, seen that.

Not only did they have their own crawler that maintained a gigantic database of web pages, which at that time was about the same size as the ones of Google, Microsoft Search (now bing) and Altavista (while it was still a thing) combined, but beside the usual search result page they had a really interesting and working approach to make results actually digestible:

It was called “cpedia” but in opposition to the well known Wikipedia, it was based purely on their data mining agents which collected information all over the web and – now the really interesting part – wrote executive summaries (backed up with a links so that you could check the sources) in a length of about 1000 words, which were astonishingly well “written”, often almost indistinguishable to the work of a human author. If possible they backed up the results with meta data, such as statistics or analytic tools, linked to related videos or images too. This was a great way to get a cursory overview over almost everything you could imagine and sometimes even showed astonishing insights that were really hard to come by otherwise.

What happened to them?

Dead after a few rounds of fund raising and sold to Google (If you can’t squash them, buy them?) and because the advertising marked at that time was already taken over by Google, so this kind of business model was no longer viable.

The odyssey of finding a certain video

— Posted inTechnology, Web development — 2 min read

This is only a short rant about the stupidity of a bunch of search engines that basically all use the same search database.

I knew that I had once seen a video of Brendan Eich (more than a year ago) that dealt with classes in JavaScript, especially ES6 and I wanted to watch it again because I had some hunch that in that video he addressed a problem I have right now.

(Sometimes my brain works in weird ways – I usually don’t remember the things I have watched a long time ago, only that I have and roughly about where I have seen them)

I don’t keep a ginormous history in Vivaldi because I have noticed that too many history results might lead to a slow down of the browser under certain circumstances and especially because all kinds of C**P are stored in the history (e.g. search engine result pages from yesterday – which will definitely not give the same results today), so I had to find that video again. I still knew that I didn’t watch it on YouTube, but somewhere else, so I started a search at the usual non-Google-ish search engines first.

A standard search “classes in javascript ES6” gave almost exclusively YT results (yes, I forgot to add “Brendan Eich” – didn’t remember who gave the talk, could have been Douglas Crockford too, so what?) so I looked up the parameters of my favorite search engines and tried to exclude YT from the results pages by adding some.
(Yes I know that it was still a very unrefined search – but hey – I’ve got results 😉 )

All links to the result pages open in a new tab.

DuckDuckGo:

startpage:

Ecosia:

bing:

And finally I added Google as a “control group”:

I leave the results open to interpretation by you, maybe you get different results, or maybe you can tell me what was wrong with my searches – but I found some search engines lacking.

How To add Search Engines that use POST to Vivaldi

— Posted inTechnology, Web development — 3 min read

There is a long standing problem with Vivaldi not adding every kind of search engines, e.g. the current implementation still does not add search engines like SearX

This happens because those engines use POST instead of GET in their search forms and Vivaldi does not (yet) check for that.

To mitigate the problem …

… you can use the following bookmarklet:

javascript:(function()%7Bvar%20x,i%3Bx%3Ddocument.forms%3Bfor(i%3D0%3Bi%3Cx.length%3B++i)x%5Bi%5D.method%3D%22get%22%3Balert(%22Changed%20%22%20+%20x.length%20+%20%22%20forms%20to%20use%20the%20GET%20method.%5Cn%5CnDON'T%20USE%20THE%20ALTERED%20PAGE%20NOW!%5Cn%5Cn%20-%20Right-click%20in%20the%20search%20field%5Cn%20-%20select%20%5C%22Add%20as%20search%20engine%5C%22%5Cn%20-%20Open%20%5C%22Settings%5C%22%20%3E%20%5C%22Search%5C%22%5Cn%20-%20Click%20the%20edit%20button%20for%20the%20new%20search%5Cn%20-%20Check%20%5C%22Use%20Post%5C%22%5Cn%5CnEnjoy!%22)%3B%7D)()%3B
  • Create a new bookmark in the panel and copy/paste the line above in the URL field of the Bookmarks panel.
  • Give it a name like e.g. “GET the POST search”.
  • Optional add a shortcut like “getit” too.

Now you can go to one of the search engine result pages 1), e.g. the one linked above and either click on the bookmarklet or type the shortcut in the URL bar and hit enter.

An alert-box with additional instructions will pop up. Follow the instructions.

Warning: The site will be altered by the bookmarklet. Don’t use it for a search before you have reloaded the page or else it might break!

1) It might not work if you try it on the start page of the search engine. In this case search for “test” and try applying the bookmarklet on the result page. Some search engine still might not work that way because they use other means and time based searches, but the majority should work just fine.

How it works

The bookmarklet changes all FORM elements on the page to use GET instead of POST. This allows right click > “Add as Search Engine” to detect it and enter the corresponding values it needs. Don’t forget to set the “Use POST Method” checkbox for the newly created search in “Vivaldi > Settings > Search”.

Here the decoded and unminified “source code”:


javascript: (function () {
var x, i;
x = document.forms;
for (i = 0; i < x.length; ++i) {
x[i].method = "get";
}
alert("Changed " + x.length + " forms to use the GET method.\n\nDON'T USE THE ALTERED PAGE NOW!\n\n - Right-click in the search field\n - select \"Add as search engine\"\n - Open \"Settings\" > \"Search\"\n - Click the edit button for the new search\n - Check \"Use Post Method\"\n\nEnjoy!");
})();

If the search engine does not use POST …

…but “Add as Search Engine …” entry still does not want to show up, see Adding Search Engines to the Vivaldi Browser (followup)

Doodling with Harmony Keymod

— Posted inDesign, Fun — 3 min read

blue flowery stuff
blue flowery stuff

I am definitely no artist but some people liked this image – I wonder why, no joke.

The Original is about 4000*3000px and was created with “Harmony Keymod”, a heavy modified version of Mr.Doop’s Harmony, a procedural drawing tool, in less than 15 minutes.

I’ve put the tool online on my personal webspace, if you want to give it a spin – here you are:quhno.internetstrahlen.de archive.org
Site down, I’ve changed the link to point to the last online version on archive.org. You can download it and remove the stuff added by archive org from the source code.
you can open the resulting self contained HTML file completely local on your file system. It does not need nor dues it open any connections to the internet.

Try one of the “easy” brushes like “shaded” with the settings “offset-scale” 80, “brush-size” 30 first. (more…)

In the Name of Accessibility: Check Your Alt Attributes!

— Posted inAccessibility, Technology — 3 min read

Occasionally I am browsing the net with images switched off because I am only interested in the text and don’t want to download gigantic amounts of decorative images – especially since several pages started to use HDPI images which are 4 times the size needed and thus HUGE downloads – and I noticed that seemingly some authors are not aware that they are missing an important accessibility feature, that exists since about the web was invented:

The alt attribute on images.

While people who don’t switch off image loading or can see well and don’t need to use assistive technologies like e.g. screen readers to get hold of the content, users who don’t or can’t display images for various reasons are at loss in such a situation, so please, dear web developers, check if all of your non-decorative images have those alt attributes.

An easy way is to temporarily overwrite the page styles with the following stylesheet:

html::before {
    content: "All visible images are either missing alt attributes or the alt attributes don't follow the specification!" !important;
    font-family: sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #F8F8F8 !important;
    background-color: #EE3333 !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    border: none !important;
    width: 100% !important;
    float: none !important;
    position: static !important;
    display: inline-block !important;
}
html {
    color: #202020 !important;
    background-color: #F8F8F8 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}
html * {
    visibility: hidden !important;
}
html area,
html img {
    visibility: visible !important;
}
html area[alt],
html img[alt] {
    visibility: hidden !important;
}
html area[alt="*"],
html area[alt=""],
html img[alt="*"],
html img[alt=""],
html img[alt^=" "] {
    outline: 4px solid rgb(51, 102, 204) !important;
    visibility: visible !important;
}

You might need to adapt it if you use a Styling Extension, this is written for direct use in Vivaldi.

In Vivaldi you can add this as page action. Just save it as Image_Alt_Debugger.css to [path to]\Application\#.#.###.##\resources\vivaldi\user_files and after the next browser restart you will see the Entry “Image Alt Debugger” in the list of page actions. (Hint: Underscores in the name get replaced by Spaces for display)

HTH 🙂

PS: Sadly you have to do that for each and every update of Vivaldi because or some unknown reason they put this stuff into the Application directory instead of the User Data directory.

Why Vivaldi’s Reader, and others too, sometimes don’t do what you expect

— Posted inAccessibility, Technology, Vivaldi — 5 min read

TL;DR

Vivaldi Read Mode was was never meant for pages like Twitter, Youtube comments, or Facebook chats but for articles. 

As general rule of thumb you can assume that everything that has a continuous or adjacent text chunk of more than 300 characters counts as content. It may be split in multiple adjacent paragraphs, but must look content-y enough (i.e. consist of sentences) and may not contain too many links, videos or images inside of the content area (outside is fine) and does not belong to one of the “stop” classes and IDs like e.g. “comment”, “footer”, “ad”-vertisement and many others.

/TL;DR

Still there?

History

The Vivaldi Read View is – like the read view in Mozilla Firefox and the Apple Safari – based on the Readability(TM) code that was released as a labs experiment by arc90 in about 2009 under an open source license (some versions under MIT, some under Apache license). Later arc90 changed it to a server supported version that was available at readability.com

The Intention Behind It

Readability was never meant to be an ad-blocker, but always as a on-demand reader view to switch on for *articles*, meaning: Longer passages of text (important!)

It was never intended to be used on pages like Facebook, with its gazillions of short text snippets, Youtube video comments, Twitter feeds and generally not on any page that does not contain a sizable longer chunk of text in one article.

It was meant to make reading of longer texts distraction free by removing e.g. advertisements, page navigation, comments and videos or images that don’t belong to the main article content, and to re-style it with readable fonts and colors to make reading more pleasurable. 

How?!

Of course the code is not really “intelligent” (it has to be fast and may not use up too many resources), so it has to trust on some kind of heuristics to detect where the main content might be. While generally it works quite well, it may fail on some pages, especially “if the HTML is totally hosed” (not my words, that was a comment of one of the original arc90 developers)

A (simplified and not complete) Explanation:

First steps:

  • Remove all scripts.
  • Remove all styles.
  • Ignore HTML block level elements like paragraphs and divisions with less than 25 characters completely.
  • Remove HTML block level elements that have “stop” classes or IDs or tags that indicate that they are definitely not content but something else like e.g navigation, footers, comments or advertisements etc.pp.

After that the reader loops through all paragraphs, and

  • calculates the over-all score for text length by the following formula: 
    rounded-down((pure-Text character count of a page element)/100)
    and adds it to the parent element (you might see it as a container). This means: A paragraph with less than 100 characters of text does not get any bonus at all.
  • adds a base score of 1 for each remaining paragraph to the parent element 
  • assigns a score to them based on how content-y they look. This score gets added to their parent node.
  • adds additional scores that are is determined by things like number of commas (+), class names and IDs (+/-), image and link density (More than 25% of the text is links? Too many images per paragraph? Punish it!) etc.
  • punishes List, Headline, Forms and Address and some other Elements with negative scores because they are normally not part of articles, and if they are, they are usually in the same parent container as the paragraphs in a real article, so the combined score of the parent element is still high enough to count.
  • adds half of the resulting score to the grandparent elements.

When that all is done and the parent or grandparent has a high enough score, it is seen as content and gets displayed, everything else gets removed.

Probably you can imagine now, how many pitfalls are there in which content detection may fall, so please take a break if you see it fail and think about what might have caused it this time.

Personal side note (strong language warning)

All in all content detection is a bіtch and can definitely fail on some pages, especially if the “Webmasters” (I call them Crapmasters) don’t know what a HTML validator is and have never heard about structured pages and accessibility. I am speaking out of experience: Back in 2009 I started with a userscript and later made an made an extension (cleanPages, see the old my.opera page on archive org) based the full original arc90 code and fine tuned it for Opera Presto (and ported it later for the new Opera thing). It had over 250k installs and while it was fun to tweak for better results, it was a hell of a lot of work. I wrote more than 200 versions with generic fixes for “just another couple of new pages that fail” but in the end I gave in and called it a day  – there are too many broken pages out there where the webmasters seemingly do not want people to read the content. Their wish is my command 😉

So please be gentle with the Vivaldi developers – yes, there is still some fine-tuning to be done, but that is really time consuming. It will probably have to wait because there are some other, more difficult and bigger things in the pipe (hint, hint 😀 )

Thank You!

Disclaimer: While I am a “Soprano” (aka external tester for internal builds), all the views in this text are my private views and do not necessarily reflect the views or opinions of Vivaldi (the company) or any of it’s owners or employees.

Always ask for the download location (hack)

— Posted inUncategorized, Vivaldi — 1 min read

Deprecated – is now built in.

Several users, one of them me, prefer Vivaldi to ask for the download location for every download. Sadly unchecking the option Settings > Downloads: “always save to default download location” does not work for some types of downloads, especially downloads with generated files or downloads initiated with Javascript.

It is possible to do that with a little hack, but it comes with a caveat:

It breaks the “open” button behavior of the download dialog – so you have to open it manually after download.

 

Having said that, here it is:

  • look for the user profile directory of your Vivaldi in vivaldi://about  (V-Button > Help > About) and open that in your file manager.
  • close Vivaldi
  • open the file named preferences with a decent editor (You should backup that file before, just in case, you know …)
  • search for:
    "download":{
    (including the quotation marks etc.)
  • look for the } that follows immediately after that
  • before the } add the following:
    ,"prompt_for_download":true
    (including the comma and the quotation marks etc.)
  • Save the file.

 

Done. From now on Vivaldi should ask before every download – but be aware of the caveat!

 

 

 

How to get the data of the SmartRSS Extension from Opera 15++ to Vivaldi

— Posted inUncategorized — 2 min read

Open Vivaldi and Opera 15+

 

In Vivaldi:

  • go to https://addons.opera.com/en/extensions/details/smart-rss/?display=en 
  • click “Add to Opera” 
  • on the popup thingy click on “get it anyway”
  • save to a place where you can find it again. 
  • open vivaldi://plugins
  • drag and drop the extension file from your file manager to the vivaldi://plugins tab

 

In Opera 15+:

  • right click on the extension’s button
  • on the popup click “Options”
  • in the options tab click on one of the “Export” buttons. I personally prefer “smart” because I want the contents of the feeds too, otherwise OPML, which works for some other readers too  
  • click on the new link that shows after you pressed the export button
  • save it in a location where you can find it again

You can close Opera now.

 

In Vivaldi:

  • open the smart RSS tab by clicking on the extension’s icon
  • click on the wrench icon
  • in the popup click on “Options”
  • in the options tab click on appropriate the import button (depending to which format you exported)
  • select previously exported file
  • wait until the import is finished successfully (there is some status information showing next to the button)

 

After those steps all feeds should be imported to Vivaldi.

 

HTH 🙂

Followup on styling Vivaldi with CSS

— Posted inTechnology, Uncategorized — 1 min read

Outdated. No longer needed! We have Themes now 🙂

Following up the post https://quhno.vivaldi.net/2015/07/02/some-quick-vivaldi-panels-css-hacks-for-better-readability-or-accessibility/

I’ve made some smallish changes that take care of some minor things I don’t like with the UI. They can be applied the same way as in the previous blog post.

This time I move the notes editor scrollbar to the right, make the speed dial navigation a little bit less high so that it aligns with the header of the web-panels, moved the speed dial items a bit upwards and colored the panel scrollbars for the dark UI.