#dotjs

ASYNC + AWAIT

Extraits de mon reportage graphique pour dotJS 2017. L’intégralité est visible ici !

Avec un aperçu de la fresque réalisée sur le stand d’Algolia.

disabling music on /b using dotjs

in ~/.js/boards.4chan.org.js:

$("embed").remove()

Some Twitter clients, like Echofon and many others, can show the images inside the tweet. Something that we can call as inlined images. This is awesome to some people and noisy for others. I like that feature, although I think it is more important “to be fast” using Twitter. After some time playing with a lot of clients (in desktop and mobile devices) I ended up using Twicca for my Android devices and the web version for desktop, with Firefox.

Twicca has no “inlined images”, and its interface is not as glamorous as others clients, but this thing is really powerful once you have been using it during some days. The web version is functional enough the most of the time, but it would be better with a few features, like showing the images.

A few weeks ago I discovered the dotjs Add-on for Firefox, which is a port of the original dotjs (only available for Google Chrome). dotjs is something like a “GreaseMonkey for fast and little hacks”. Fast because you only need to create a ~/.js/domain.tld.js file (without using the browser interface, just your code editor) and put there the JavaScript code that would be run every time you open a page in domain.tld or www.domain.tld. And little because you are limited to the things you normally do in the page itself (I have needed the GM_xmlhttpRequest for cross-domain requests) and you don't have something like a domain manager, so you can not use patterns like “*.foo.bar” or have several files for the same domain (like hack1.google.com.js and hack2.google.com.js). Anyway, it is perfect for many cases.

I wrote an S³E (simple, silly and stupid extension) using dotjs to open YouTube videos in its own window. That was funny and very easy.

Yesterday I read an interesting post from Esteban Manchado. When I took a look to his Opera extension I thought that it would be nice to implement the inline images feature in the web version. After all, Twitter already shows images when you click on the tweet and open the side bar, so it should be easy.

The first step was to find out how Twitter gets the image preview. I open Firebug and click in any tweet with a link to an external image in a supported provider (like twitpic, yfrog or whatever). When you open it you can see several requests to the API. Open the URLs and you will see a lot of data. None of that data is useful to detect the image preview location. So, I guessed that the answer would be found in the JavaScript code. There are a couple of files, but one of them (named phoenix.bundle.js) has the text “yfrog” and “twitpic” inside. Since the code is obfuscated I pasted it in jsbeautifier.org. After some minutes digging into the de-obfuscated code I found a way to reuse that logic. Basically, it is:

twttr.media.resolveImageUrl(url, 300, { success: function(image_preview_url) { }, error: function(reason) { } });

The twttr.media object is not accessible directly in a dotjs file. Like in GreaseMonkey I had to use unsafeWindow.

The result is in https://gist.github.com/1073923: