XD blog

javascript

2017-10-14 Python and javascript

I was doing some research on some other topic but I found this javascript library filbert which parses and converts a Python script into a javascript script. The output is quite verbose but follows the syntactic tree produced by the parser. Transcrypt is less verbose. I then became curious about pyjs which I saw in a conference. It did not get any update in two years so it seems to be discontinued but Brython is still alive and seems a better tool to run python from a javascript page. I also discovered pyduketape which wraps in Python a javascript engine. It is a different approach from the one followed by ghost.py which is relying on PySide.

2015-05-05 c3.js

c3.js is a framework based on d3.js. Simple graphs can be obtained with shorter scripts compared to d3.js. If you are curious, you can look for b3.js, a3.js (for 3D graphs). Then you an go on with d4.js...

2015-04-24 Use javascript tools in your notebook

This is a reason why I do like notebooks. It is more than a static page. Many tools in javascript can be added to the page. The first example is about visualizing the differences between two files. I looks like that:

It is available with pyensae, more details here at A magic command to visualize differences between two files in a notebook.

The second example is about using Scratch from a notebook with Snap!. The code may be slow but the result is quite nice: Scratch dans un notebook.

2015-04-11 PyPy.js, Python command line inside a WebPage

The conderence PyCon 2015 is just happening. You can find Ryan Kelly who implemented PyPy.js which is an implementation of the Python interpretor in javascript. That way, it is possible to add a python command line windows in a webpage, access the page elements by using python syntax... The following video gives some insights Ryan Kelly: PyPy.js: What? How? Why? about what it can do. And if you prefer something written: PyPy.js: Now faster than CPython .

2015-04-08 Easy website with Javascript

Many websites are based on a similar template today: one long page with many sections to scroll down. You will find example in this article: 42 top examples of JavaScript. It seems a long way to get something similar on your own. But with some web searches, it seems reasonable to find some javascript tools which can speed up the creating of the webiste. See The top 5 JavaScript templating engines for a blog, 10 Moteurs de templates pour Javascript et Nodejs, 25 free, scrolling plugins for awesome experiences. The code for the basic example seems quite short.

2015-03-26 Drawing in a notebook

My plan was quite simple : create a kind of small window in a notebook where I can click and mark some points. Once it is done, I retrieve the points and I run a simple algorithm to solve the Travelling Salesman Problem.

The notebook is there Voyageur de commerce and the javascript code is generated by the following function: display_canvas_point.

2014-12-20 Fréquentation d'un site internet...

Google Analytics est un service qui permet d'avoir rapidement des chiffres sur la fréquentation d'un site internet. On détecte sa présence par un petit code javascript inséré à la fin du code source d'une page. J'avoue que je l'ajoute à la plupart des pages. Ca me permet de dire que l'article le plus lu de ce blog est celui qui permet de compter les couleurs d'une cellule Excel. Lu n'est probablement pas le bon terme puisque beaucoup de gens atterrissent sur cette page et repartent. Combien... difficile à dire. Et puis, le site est aspiré par des robots... Que fait Google de ces données ? Difficile à dire. Même le site de l'Elysee l'utilise.

2014-10-29 p5.js

It is a javascript framework to build presentation or interactive lectures: p5.js. Quite promising.

2014-08-01 Un livre sur Javascript

Je suis tombé là-dessus aujourd'hui : Eloquent JavaScript. Pas mal du tout.

2014-01-28 Comment extraire les paramètres d'un url en javascript

Plutôt que de créer des interfaces graphiques, j'utilise de préférence une page HTML avec du javascript que j'exécute avec un navigateur. Ca prend moins de temps et on trouve facilement sur internet une solution à son problème, voire trop de solutions pour extraire les paramètres d'un url en javascript : http://....?par1=value1&par2=value2. Voici un code qui fonctionne :

more...

2014-01-27 Créer une page de raccourcis en HTML/javascript

Quand Google Reader a disparu, je me suis demandé s'il était compliqué d'implémenter rapidement une sorte de page HTML en local depuis laquelle je pourrais consulter les blogs. Même si j'ai finalement implémenté quelque chose d'un peu plus complexe (pymmails), il est resté quelques essais et bouts de codes. Le code suivant permet de diviser la page en deux, d'avoir d'un côté une liste d'urls, de l'autre, une fenêtre dans laquelle s'affiche le site cliqué. Je m'en sers parfois pour faire des listes de raccourcis sur des outils internes plus facile à transférer d'un ordinateur à un autre que les raccourcis d'un navigateur. Un exemple de ce que cela donne est plus bas.

more...

2014-01-18 Framework for Mobile Application

What framework to choose if you want to build a mobile application which will save you some time while deploying on multiple phones? (Android, Black Berry, iPhone, Windows Phone). I'm not sure there is a perfect answer and it will probably change in a couple of months. However, this what I found. I was looking for answers. Which phones does it support today? Where can you develop your application? Which language? How to build? How to deploy? Cost? I limited my study to the following frameworks (according to a friend, the others are not as mature):

Apache Cordova (or PhoneGaps): This framework provides a common API in javascript/HTML to access the API of each phone. The goal is to build application for many phone based on the same code. It produces a web application.
Sencha Touch: It contains more template javascript/HTML templates than Cordova. The free framework does not seem to do more than building a web application with javascript and HTML. However, you can use both Cordova and Sencha Touch (see below).
Titanium Mobile: It is also a framework using javascript/HTML. The framework can access the native API of each phone (as opposed to Cordova). You might end up with a different version on each phone. The framework should give more freedom than the first one.
Xamarin (+ MvvmCross): It proposes a way to build phone application written in C# on every phone (using Mono for iOS and Android). It gives an access the native API. The framework also includes the possibility to design hosted on a remote machine which can communicate with the phone application.
kivy A framework in Python (2.7, migration to Python 3 should happen some day). It was not meant to develop phone application but it now proposes a way to make it work on Android, with pyjnius, and iOS, with pyobjus and kivy-ios. This two libraries connect Python to java which accesses the phone functionalities. There is no support for Windows Phone. A last module plyer gives access to some extra functionalities (GPS, text to speech).

more...

2013-10-02 Ways to show code in a blog post

I found another way to show code in a blog. It looks nicer than prettify. The only change is to indicate the langage you want to use to highlight you piece of code. It is called SyntaxHighlighter.

You need to insert the following lines in the header:

<link href="/js/shCore.css" rel="stylesheet" type="text/css" />
<link href="/js/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="/js/shCore.js" type="text/javascript"></script>
<script src="/js/shAutoloader.js" type="text/javascript"></script>

And those one at the end of the body:

<script type="text/javascript">
SyntaxHighlighter.autoloader(
  'js jscript javascript /js/shBrushJScript.js',
  'applescript /js/shBrushAppleScript.js'
);
 
SyntaxHighlighter.all();
</script>

Then to highlight a piece of code:

<pre class="brush: js">
var your_code_here='simple try';
</pre>

I also tweaked the css style to reduce the size in shCore.css:

.syntaxhighlighter textarea {
  ...
  font-size: 0.98em !important;
  ...
}

And to remove the green question mark, in shThemeDefault.css:

.syntaxhighlighter .toolbar {
  /*color: white !important;
  background: #6ce26c !important;
  border: none !important;*/
  display: none;
}

2013-09-29 Zoomer sur graphe XY avec d3.js

d3.js est un framework écrit en javascript qui permet de visualiser des données. Il est conçu pour des sites web et permet de créer des graphes animés. Le résultat est assez esthétique à en juger par les différentes galleries :

Tout d'abord, je dois dire que ça prend du temps de concevoir un graphe. Mon objectif était de créer un graphe XY et de pouvoir zoomer horizontalemen sur une partie. Quand on découvre l'outil et les spécifités de javascript, il est préférable de partir d'une exemple qui fonctionne déjà sans trop chercher à aggréger des bouts de codes venant de plusieurs graphes. L'exemple que j'ai trouvé pour le zoom vient d'ici : js fiddle. Appliqué à mes données, cela donne :

Les premiers pas sont tout de même assez longs, les erreurs ne sont pas faciles à comprendre, surtout quand on est novice. On espère que ce graphe qu'on est en train de constuire pourra resservir. Cela dit voici, quelques astuces.

more...

2013-07-28 my RSS Reader

When Google Reader died, I was reluctant to move to something different. Not because others solutions are worse or anything like that, but more because I needed to create a new account, a new password, eventually to pay if the number of blogs I wanted to follow was above a given threshold. With Google, I did not have to do anything like that. I would argue that giving everything to a single company which can monitor every single move you do on the net is not a good idea.

But if I push this reasoning to its extreme, why not having a tool on my laptop which allows me to read blog posts? That way, I would download myself the blog content, I would keep any statistics about my own uage for myself. And if the design is not good enough, I just have to change it. Well, the only argument against that is the time I will need to build that tool (and to maintain it).

Well, to be honest, I also did it because I wanted to learn about some python and javascript figures of programming which I talk about in previous blogs. The tools looks that way:

more...

-->

Xavier Dupré