Miscenalleous and motley eructations

Mounting a headlight on a MATE electric bicycle

An electric folding MATE bicycle

A lit­tle bit on the spur of the mo­men­t, I took part in a crowd ­fund­ing for an elec­tric fold­ing bike MATE. The fund­ing was a suc­cess as they raised over $6 mil­lion, more than 40 times the min­i­mum amoun­t re­quired to launch the projec­t.

I fi­nal­ly got this bike last month. My im­pres­sions are mixed and I’ll tell you a bit about it af­ter­ward­s, but in the mean­time, want­ing to use it to take the bus in the morn­ing when it’s still dark, I had to find a light­ing so­lu­tion.

Read more…

Use Nikola/GAE on android device

Some time ago I dis­cov­ered Ter­mux this cool An­droid app that al­lows you to find a good part of your lin­ux en­vi­ron­men­t on your phone or tablet.

It has helped me more than once to make a quick change on the move, save it un­der git or mer­cu­ri­al be­fore push­ing it to­wards con­tin­u­ous in­te­gra­tion. Since I’ve mi­grat­ed this blog un­der Niko­la I was think­ing it would be con­ve­nient to be able to work on blog posts on the move, to pre­view them in a brows­er and to de­ploy the whole blog on GAE, ev­ery­thing from a phone.

It ac­tu­al­ly works pret­ty well.

editing this blog under termux

Screen­shot of edit­ing this blog on an­droid with ter­mux.

Here are the steps to fol­low:

Read more…

One of my side project: bback.me

image du logo de rendre.fr

It’s been a few months since one of my per­son­al projects get on­line. ­Name­ly, http­s://ren­dre.fr, a ser­vice to help you find your lost items with the help of peo­ple!

This ser­vice is based on the ob­ser­va­tion that most peo­ple are will­ing to re­turn a found ob­ject to its own­er, if on­ly they would be able to con­tac­t him. Thus, the num­ber of posts on so­cial net­works about peo­ple hav­ing found lost items and seek­ing for their own­er.

Read more…

Migrating blog to nikola + GAE

This blog has been in deep lethar­gy for sev­er­al years. I’m not sure I can ­make it come back to life, but I’ll try, first of all by ex­plain­ing how I ­man­aged to mi­grate it from blog­ger to stat­ic site host­ing gen­er­at­ed by niko­la and host­ed on GAE (Google app en­gine).

Read more…

Photos de rue — Carnaval de La-Tour-d’Aigues

I fi­nal­ly de­cid­ed to pub­lish some of my pho­to­s.

As I need to sort a lot of them, I start­ed with those al­ready on­line and which, be­ing tak­en while a pub­lic even­t, are pub­lish­able with­out ask­ing too many ques­tions …

Album du carnaval 2011 de la Tour-d'Aigues

These pho­tos are pub­lished un­der the cc-by-sa li­cense, which al­lows them to be reused pro­vid­ed they are at­trib­uted to my­self and that any re­dis­tri­bu­tion be­ing done un­der the same li­cence. I em­p­hazise this be­cause I had the great plea­sure to find the­se pho­tos in the mu­nic­i­pal­i­ty news­pa­per, un­for­tu­nate­ly with­out any ref­er­ence to the source of the pho­to­s…

Easy footnotes on blogger


Have you ever wanted to simplify the use of footnotes on blogger ? With the help of BrandSpankingNew blog I managed to set up a not so complicated solution. Of course you still have to do some sort of HTML, but is limited to putting a <s­pan class=”­foot­note”>  </s­panaround each foot­note text in the HTML ed­i­tor.

Here after you’ll see how to set up your blog, and the minimal template needed for each new blog post.

Installation

Change your blog layout so as to add an HTML/Javascript gadget at the beginning of your page. You will call it footnote and past the following code in it:
<style>
/*
================================================
styling for foot­notes be­­gins here
================================================
*/
/* foot­notes as they orig­i­­nal ap­­pear in­­­line, be­­fore re­­for­­mat­t­ing */
#con­­tent span.­­foot­note {
col­or: #f30;
}
/* foot­note links in text */
#con­­tent a.ftnlink {
ver­ti­­cal-align: su­per;
font-­­size: 0.8em;
}
/* div to hold all re­­for­­mat­t­ed foot­notes */
.foot­note­hold­er {
bor­der-left: 1px sol­id #c­c­c;
margin: 20px 0 50px 0;
padding: 20px 10px;
font-­­size: 0.8em;
line-height: 1.2em;
}
/* div to hold sin­­gle re­­for­­mat­t­ed foot­note */
.foot­note­hold­er di­v.­­foot­note {
margin: 0 0 10px 0;
}
</style>


<script type­­=’­­tex­t/­­javascrip­t’>
//<![C­­DATA[


// ======================================================================
//
//
// for­­mat­­Foot­notes
//
//
// pro­­jec­t: css / javascript foot­notes
//
// au­thor: Tim­o­thy Groves desk [at] brandspank­ingnew.net
// ver­­sion: 1.0
//
// lan­guage: javascript
// re­quires: noth­ing
//
// test­ed on: Sa­­fari 2.0 Mac / FF 1.5 Mac / Opera 9 Mac
//
// his­­to­ry: 26.01.2006 - cre­at­ed
//
// ======================================================================
var ar­ti­cles = 0;


func­­tion for­­mat­­Foot­notes(­­con­tID,noteI­D)
{
// check for DOM ca­­pa­­bil­i­ties
if (!­­doc­u­­men­t.getEle­­men­t­ById)
re­­turn false;


var cont = doc­u­­men­t.getEle­­men­t­ById(­­con­tID);
var note­hold­er = doc­u­­men­t.getEle­­men­t­ById(noteI­D);
var spans = con­t.getEle­­ments­By­­Tag­­Name(“s­­pan”);


var notes = 0;
ar­ti­­cles++;


for (i=0;i<s­­pan­s.length­­;i++)
{
if (s­­pan­s[i].­­class­­Name == “foot­note”)
{
notes++;


// get con­­tent of span
var noteN­ode = span­s[i].­­clo­­neN­ode( true );


// re­­move css styling
noteN­ode.­­class­­Name = “”;


// cre­ate a new div to hold the foot­note
var newEle = doc­u­­men­t.cre­a­teEle­­men­t( “di­v” );


newEle.ap­pend­Child( doc­u­­men­t.cre­ate­­TextN­ode( notes + “. ” ) );
newEle.ap­pend­Child( noteN­ode );


// add back­­link
blink = doc­u­­men­t.cre­a­teEle­­men­t(“a”);
blink.href = “#ftnlink”+ar­ti­­cles+”_”+notes;
blink.ap­pend­Child( doc­u­­men­t.cre­ate­­TextN­ode( ” [back­­]” ) );
newEle.ap­pend­Child( blink );


note­hold­er.ap­pend­Child( newEle );


// add id & style
note­hold­er.lastChild.id = “ft­n”+ar­ti­­cles+”_”+notes;
note­hold­er.lastChild.­­class­­Name = “foot­note”;


// in­­sert link in­­­to span
var newEle = doc­u­­men­t.cre­a­teEle­­men­t( “a” );
newEle.href = “#”+noteI­D;
newEle.ti­­tle = “show foot­note”;
newEle.id = “ftnlink”+ar­ti­­cles+”_”+notes;
newEle.­­class­­Name = “ftnlink”;


newEle.ap­pend­Child( doc­u­men­t.cre­ate­TextN­ode( notes ) );


// em­p­­ty span
while (s­­pan­s[i].childNodes.length)
span­s[i].re­­moveChild( span­s[i].­­firstChild );
var su­per = doc­u­­men­t.cre­a­teEle­­men­t( “sup” );
su­per.ap­pend­Child(newEle)
span­s[i].ap­pend­Child( su­per );
}
}
}
//]]>
</scrip­t>

Usage

Create a new blog post, with the following content:
<div id=”ar­ti­­cle­­foot­note”>
Some texte <s­­pan class=”­­foot­note”>with a foot­note</s­­pan> and some oth­­er text (ar­ti­­cle should be in the di­v).
</­di­v>


<div class=”­­foot­note­hold­er” id=”ar­ti­­clenotes”></­di­v>
<script type­­=”­­tex­t/­­javascrip­t”>
//<![C­­DATA[
for­­mat­­Foot­notes(‘ar­ti­­cle­­foot­note’,’ar­ti­­clenotes’);
//]]>
</scrip­t>

It will be displayed as follow :
Some texte with a foot­note and some oth­er text (ar­ti­cle should be in the di­v).