Friday, May 1, 2020

Script to Download Facebook Videos

How to download a video from sites is a recurrent question of every users. In this article it is described a simple method which allows download either private and public videos from Facebook just by adding a bookmark with some javascript to your browser.

A 'bookmarklet' is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. The way to add a bookmarklet is as simple as write a JavaScript function, and call it with the `javascript:` URL protocol
javascript:(function(){alert('a')})()

But first we need to encode the function
javascript:(function()%7Balert('a')%7D)()

In our case, to download a Facebook video the function needed is:
(function(){
  fetch(location.pathname, {method: 'GET'})
    .then((r) => r.text())
    .then(html => new DOMParser().parseFromString(html, 'text/html'))
    .then(d => window.open(d.head.querySelectorAll('meta[property="og:video"]')[0].content, '_blank'))
})();

Thus, the fragment that should be copied and pasted the the bookmark is:
javascript:%28function%28%29%7Bfetch%28location.pathname%2C%20%7Bmethod%3A%20%27GET%27%7D%29.then%28%28r%29%20%3D>%20r.text%28%29%29.then%28html%20%3D>%20new%20DOMParser%28%29.parseFromString%28html%2C%20%27text%2Fhtml%27%29%29.then%28d%20%3D>%20window.open%28d.head.querySelectorAll%28%27meta%5Bproperty%3D"og%3Avideo"%5D%27%29%5B0%5D.content%2C%20%27_blank%27%29%29%3B%7D%29%28%29%3B%0A

The following video shows how to add the bookmarklet to Chrome, and how to use it.


Friday, August 22, 2014

GWT i18n updated to CLDR-25

GWT has an amazing mechanism to localise Applications. It uses CLDR and ICU4J as source data to generate it's own java stuff so as it can be used in both: client and server sides.  Server side is a work on progress, and is partially functional, probably the entire implementation will be released with GWT-3.0.0 in during 2015-Q1.

The thing is that GWT internationalisation stuff has not been updated for more than 2 years since its main maintainer left Google,  remaining with the CLDR release-21 while latest is v25.

I became a GWT maintainer after I joined Vaadin some months ago, and one of the parts I maintain is internationalisation.
The good news is, that some time ago, we have been working on updating this stuff, adapting migration scripts and fixing issues.

Finally and thanks to the hard work of gwt maintainers and googlers, we have updated GWT with CLDR-v25, you can take a look to the big patch at the gwt git repository. I hope we can maintain GWT updated to last CLDR changes from now.

You can use the new stuff using latest 2.7.0-SNAPSHOT, until a new version of GWT is released at the end of September.


Tuesday, June 10, 2014

Vaadin: a way to being Productive with GWT.

I have been an active contributor to GWT for the past years, along with other open source projects such as Apache James, and Jenkins. During this time I have come to love GWT as an abstraction layer to JavaScript and a productivity booster.


When I first saw Vaadin I was a bit sceptical: Could the server-side model have even something more to offer? To find this out I decided to re-write one of my peeves, the UI of Hupa in Vaadin and see how it compares to the GWT only version.


Hupa is the webmail of Apache James. It was developed entirely in java, and for the UI we use pure GWT stuff: MVP (Model-View-Presenter pattern), Activities and RF (Request Factory).



So my idea to learn Vaadin, was to re-use the hupa-server backend and create an entire UI implementation using the Vaadin framework.


This was part hobby and part my introduction to Vaadin as a new employee at the company (I now work as a GWT expert at Vaadin).

Friday, July 6, 2012

The new GWT 2.5 closure compiler

Although GWT 2.5.0 has not been officially released yet, the release candidate has been uploaded to central maven repositories.

GWT 2.5.0 comes with many useful features, and one of them is that the compiler produces  much less code than in the previous version.

I've re-compiled two Talkwheel applications (desktop and mobile) with the new version, and without changing a single line of code, I've got a 20% of reduction ! .

But one of the hidden features in the new GWT is that gwt guys have added a new experimental compiler which reduces a bit more the size of javascript. The compiler is the well known google closure compiler which compiles from javascript to javascript producing a better code,  not only compressing the code but checking the syntax and variable references, removing death code, etc.

I've been experimenting with it and I've got a reduction of a 25% on the projects I mentioned, which  improves the normal GWT compiler in a 5%.

What I've done as well, is to compare the size of the compressed js in both cases, and surprisingly the code produced by the closure code compressed is bigger than the gwt one.
This is not a big issue since the difference is just an 1%, but it demonstrates how the gwt compiler prepares the output so as it is optimized for compression, this was a nice feature introduced in 2.0.

I've been playing with these applications compiled with the default and the closure compilers, and I've not realised any noticeable difference in performance.

Finally, If you are using maven and you want to enable the closure compiler you can either: wait until gwt-maven-plugin 2.5.0 is released, or use this workaround in your pom.xml file:

<plugin>
 <groupid>org.codehaus.mojo</groupid>
 <artifactid>gwt-maven-plugin</artifactid>
 <version>2.4.0</version>
 <configuration>
  <style>OBF' -XenableClosureCompiler '-XenableClosureCompiler</style>
  ...
 </configuration>
 ...
</plugin>
Note the single quote, it works in linux and mac, but in windows maybe you have to replace them with double quotes.

Tuesday, June 21, 2011

Enabling Desktop Notifications in IE with chromeframe

Chrome comes with interesting features to improve the user experience. One of them is the 'Desktop Notifications', which allows you to display nice notifications in your desktop using javascript.

Gmail was one of the first applications making use of it, but there are many other applications like Talkwheel using it.  These applications are able to detect when the user is running chrome and they offer a link to the user to enable the feature.




Unfortunately there are many companies which only permit the usage of IE in their desktops, if this is your case, don't worry, there is a nice project called chromeframe which embeds the chrome engine in IE as an extension, making IE render faster, perform better when executing javascript, and adding many html5 features like canvas, svg, etc.

A last problem, is that chromeframe has a bug which prevents to show the info bar to authorise websites to use notifications, so you have to follow these steps to enable  notifications in IE:
  • Open IE and Install chromeframe from this URL, if you did not it before.
  • Add the entry below to your windows registry. You can do either, import the key by clicking over this link, or run 'regedit' and add the entry by hand as is shown in the screenshot below.   
HKCU\Software\Google\ChromeFrame\AllowUnsafeURLs=dword:1

  • Now you can open the chrome settings page just typing: gcf:chrome://settings/content in the url box.

  • Finally you have to enable notifications.


It seems that FireFox will support 'Desktop notifications' soon, since it is part of the html5 specification, in the meanwhile you can install the ff-html5notification plugin by clicking on this link.