index.html (12038B)
1 <!DOCTYPE html> 2 3 <html lang="fr"> 4 5 <head> 6 <meta charset="utf-8"> 7 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 8 9 <link rel="start" href="https://vincent.demeester.fr" /> 10 11 <title>Vincent Demeester</title> 12 <link rel="canonical" href="https://vincent.demeester.fr/posts/2016-09-18-firefox-places-and-bookmarks/"> 13 <link href="https://vincent.demeester.fr/index.xml" rel="alternate" type="application/rss+xml" title="Vincent Demeester" /> 14 15 <link rel="openid.server" href="https://indieauth.com/openid" /> 16 <link rel="openid.delegate" href="http://vincent.demeester.fr/" /> 17 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 18 19 <link rel="stylesheet" href="/css/screen.css" type="text/css" /> 20 <link rel="stylesheet" href="/css/sbrain.css" type="text/css" /> 21 <link rel="stylesheet" href="/css/syntax.css" type="text/css" /> 22 23 </head> 24 25 <body lang="fr"/> 26 27 28 29 30 31 32 <div id="main-container"> 33 <div id="page"> 34 <article class="post"> 35 <header> 36 <h1 class="emphnext">Firefox hidden feature — places in bookmarks</h1><a href='https://vincent.demeester.fr/posts/2016-09-18-firefox-places-and-bookmarks/'></a> 37 <address class="signature"> 38 <span class="date">Mon, 19 September, 2016</span> 39 <span class="words">(1100 Words)</span> 40 </address> 41 <ul class="tag_box inline"> 42 43 <li class="category"><a href="/categories/#configurations">configurations</a></li> 44 45 46 47 48 49 <li class="tag tag-firefox"><a href="/tags/#firefox">firefox<span>1</span></a></li> 50 51 52 <li class="tag tag-place"><a href="/tags/#place">place<span>1</span></a></li> 53 54 55 <li class="tag tag-bookmark"><a href="/tags/#bookmark">bookmark<span>1</span></a></li> 56 57 58 <li class="tag tag-hidden"><a href="/tags/#hidden">hidden<span>1</span></a></li> 59 60 61 <li class="tag tag-tips"><a href="/tags/#tips">tips<span>2</span></a></li> 62 63 <br/> 64 65 </ul> 66 </header> 67 68 69 70 <p> 71 Je réalise que j'utilise Firefox depuis bien plus de 10 ans maintenant 72 (on doit être à minimum 15 ans en fait…). Et je me souviens d'un temps 73 où je souhaitais rendre mes <i>bookmarks</i> (marque-pages 👼) 74 dynamique. Après tout ils existent de base dans Firefox (e.g. <code>Most 75 visited</code>), il doit donc être possible d'en faire soit même. 76 </p> 77 78 <p> 79 Il fut un temps où c'était facile à mettre en place — ouvrir la 80 gestion des marques pages, chercher quelque chose et <i>cliquer</i> sur le 81 bouton <code>save</code> pour sauvegarder cette recherche en tant de bookmark 82 dynamique. 83 </p> 84 85 <p> 86 <span class="underline">Note</span>: comme j'avais grave lutté à l'époque, et que j'ai encore lutté 87 cette fois ci, cet article va me servir de pense-bête pour le futur. 88 </p> 89 90 <div id="outline-container-sec-1" class="outline-2"> 91 <h2 id="sec-1">Places</h2> 92 <div class="outline-text-2" id="text-1"> 93 <p> 94 C'est le petit nom que possède cette fonctionnalité dans le cœur de 95 Firefox. C'est un nom relativement commun, du coup ça n'aide pas trop 96 la recherche d'information… Le meilleur endroit pour se documenter 97 reste alors le <a href="https://developer.mozilla.org">Mozilla Developer Network</a>… 98 </p> 99 100 <p> 101 Et ce qu'on peut lire sur cette <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/Places">page</a> c'est : 102 </p> 103 104 <blockquote> 105 <p> 106 Places is the bookmarks and history management system introduced in 107 Firefox 3. It offers increased flexibility and complex querying to 108 make handling the places the user goes easier and more 109 convenient. It also includes new features including favicon storage 110 and the ability to annotate pages with arbitrary information. 111 </p> 112 </blockquote> 113 114 <p> 115 C'est donc un mécanisme interne qui permet d'annoter des pages 116 (bookmarks, history, …) et surtout un <i>requêtage</i> plus complexe et 117 flexible que le système précédent. On peut noter également que c'est 118 arrivé en version 3, et qu'à la date du jour, la version courante de 119 Firefox est la 48. En espérant donc que ce soit toujours le système en 120 place (<i>spoiler alert: ça a l'air d'être le cas</i>). 121 </p> 122 123 124 <div class="figure"> 125 <p><img src="/images/2016/firefox-place-awesomebar-example.png" alt="firefox-place-awesomebar-example.png" /> 126 </p> 127 <p><span class="figure-number">Figure 1:</span> An example of places usage in the awesome bar</p> 128 </div> 129 130 <p> 131 Les petits <i>encarts</i> en noir ci-dessus sont un exemple de ces 132 <i>places</i>. Ici il s'agit des <b>tags</b> qui ont étés apposer sur les 133 bookmarks ; on voit d'ailleurs que ce sont des bookmarks puisqu'ils 134 ont une petite étoile à côté du joli petit <code>favicon</code>. Firefox a pris 135 les termes que j'ai écrit dans la barre d'url et à faire une recherche 136 dans les <i>places</i> suivant différents critères (l'url, les tags pour 137 les bookmarks, …). 138 </p> 139 </div> 140 </div> 141 142 <div id="outline-container-sec-2" class="outline-2"> 143 <h2 id="sec-2">Places dans les bookmarks</h2> 144 <div class="outline-text-2" id="text-2"> 145 <p> 146 L'idée est d'utiliser cette fonctionnalité pour faire des bookmarks 147 dynamique. Pour poser un peu de contexte, j'utilise surtout la 148 bookmark toolbar pour accéder à des pages dont j'ai besoin (au hasard, 149 le webmail du boulot, une page précise d'issues sur github, des pages 150 de guide/référence/manuel sur des outils que j'utilise…) et également 151 en mode <i>read that later</i>. 152 </p> 153 154 155 <div class="figure"> 156 <p><img src="/images/2016/firefox-place-bookmark-toolbar.png" alt="firefox-place-bookmark-toolbar.png" /> 157 </p> 158 <p><span class="figure-number">Figure 2:</span> Ma <i>bookmark</i> toolbar</p> 159 </div> 160 161 <p> 162 Par exemple, dans mon dossier <code>inbox</code>, il y a plusieurs sous-dossiers 163 (en fait des dossiers dynamique, mais j'y reviendrais plus tard), 164 genre <code>docker</code>, <code>nix</code>, <code>golang</code>, <code>java</code>, etc. Tout ce qui <i>traîne</i> 165 dans <code>inbox</code> est à lire ou à trier (<code>inbox</code> se réfère un peu à ce que 166 l'on peut voir avec GTD). Chaque sous dossier était une sorte de 167 <i>filtre</i> par projet, langage ou /whatever/… 168 </p> 169 170 <p> 171 Nous allons donc ruser un peu et utiliser les <i>places</i> dans nos 172 bookmarks pour en faire des dossiers dynamique, à l'instar de <code>Most 173 Visited</code>. Pour se faire, il faut déjà trouver un peu de documentation 174 sur l'utilisation de ces fameuses <i>places</i> au sein de bookmarks — et 175 ça pèche un peu… Toujours sur le <a href="https://developer.mozilla.org">Mozilla Developer Network</a>, une page 176 <i>un peu caché</i> nous révèle quelques informations : <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/Places/Places_query_URIs">Places query URIs</a>. 177 </p> 178 179 <blockquote> 180 <p> 181 You can use a <code>place</code> URI as a bookmark. For example, if you right-click 182 on the toolbar and choose "New Bookmark," you can enter a place URI 183 there to create a new query on your toolbar that, when clicked, will 184 reveal a popup containing the results of the query. 185 </p> 186 </blockquote> 187 188 <p> 189 Victoire <code>\o/</code>, il <i>suffit</i> de créer un bookmark avec comme <code>URI</code> 190 une <code>place:…</code> URI et c'est gagné. Ainsi, un bookmark avec comme <code>URI</code> 191 <code>place:terms=nixos</code> me retournera un dossier dynamique qui contiens 192 tous les liens (<i>history</i>, <i>bookmarks</i>, …) qui contiennent le mot 193 <code>nixos</code> — en gros l'équivalent de ce que nous aurions si nous tapions 194 <code>nixos</code> dans la <i>awesomebar</i>. 195 </p> 196 197 <p> 198 Si l'on regarde d'un peu plus près <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/Places/Places_query_URIs">Places query URIs</a>, il y a une 199 longue liste de paramètres possible. Il y en a pour presque tous les 200 goûts : le temps (utile pour afficher l'historique, mais pas trop), 201 les visites, le type de <i>place</i> (<i>bookmark</i>, <i>history</i>, …), le 202 domaine de l'élément, le dossier dans lequel il se trouve, l'<code>URI</code>, 203 les tags… j'en passe et des meilleurs. 204 </p> 205 206 <p> 207 Si par exemple, je souhaite n'afficher que les pages visités 208 aujourd'hui, triés par nombre de visites et limités à 10 résultats, je 209 peux mettre comme <code>URI</code> : 210 </p> 211 212 <div class="org-src-container"> 213 214 <pre class="src src-http">place:queryType=0&sort=8&maxResults=10&beginTimeRef=1&beginTime=0 215 </pre> 216 </div> 217 218 <p> 219 Et on obtiens ça : 220 </p> 221 222 223 <div class="figure"> 224 <p><img src="/images/2016/firefox-place-most-visited-today.png" alt="firefox-place-most-visited-today.png" /> 225 </p> 226 </div> 227 228 <p> 229 Mais revenons à nos moutons, moi ce que je souhaite, c'est faire des 230 dossiers dynamique par <code>tag</code>, i.e. les tags que l'on peut setter 231 lorsqu'on ajoute un bookmark. Et ça tombe bien, un des paramètres 232 s'appelle <code>tag</code> et fait exactement ça. Je souhaite également pouvoir 233 faire des <code>ET</code> sur mes tags — par exemple, dans mon dossier 234 <code>inbox/nixos</code> je veux tous les bookmarks qui sont taggués <code>inbox</code> <b>et</b> 235 <code>nixos</code>. Et c'est simple, il suffit de lui donner les deux. 236 </p> 237 238 <div class="org-src-container"> 239 240 <pre class="src src-http">place:tag=inbox&tag=nixos 241 </pre> 242 </div> 243 </div> 244 </div> 245 246 <div id="outline-container-sec-3" class="outline-2"> 247 <h2 id="sec-3">Rétrospective</h2> 248 <div class="outline-text-2" id="text-3"> 249 <p> 250 Voilà, vous avez maintenant tout ce qu'il faut pour faire des dossiers 251 dynamiques dans vos bookmarks Firefox et vous organiser au mieux ( 252 <i>ou pas</i>). Quelques points à noter : 253 </p> 254 255 <ul class="org-ul"> 256 <li>L'icône du dossier dynamique — ou même la fonctionnalité à 257 proprement parler= n'apparaît pas de suite. Il faut parfois 258 redémarrez Firefox pour profiter du nouveau dossier dynamique. 259 </li> 260 <li>Une fois que le bookmark est vu comme un dossier dynamique, il n'est 261 plus possible d'éditer l'<code>URI</code>. Si vous voulez en changer un, il 262 faut tout bonnement le recréer. 263 </li> 264 <li>Bien que ce soit une fonctionnalité que je trouve géniale, il y a 265 peu de <i>presse</i> sur le sujet et à mon grand étonnement, aucun plugin 266 pour gérer ça plus proprement. Est-ce le signe qu'un jour ce ne sera 267 plus supporter, je n'en ai aucune idée. 268 </li> 269 <li>Un point très positif si vous utilisez Firefox Sync : ça marche bien 270 (pas vraiment étonnant en fait), ces dossiers se synchronise comme 271 le reste et seront donc à disponible quelque soit l'appareil sur lequel 272 vous utilisez firefox <code>\o/</code>. 273 </li> 274 </ul> 275 </div> 276 </div> 277 278 279 </article> 280 <hr /> 281 <div class="prev-next"> 282 283 <a class="paging-link prev" href="/posts/2017-01-01-go-testing-functionnal-builders/" title="Golang testing — functional arguments for wonderful builders">← Previous post</a> 284 285 286 287 <a class="paging-link next" href="/posts/2015-07-31-config-managment-intro/" title="Gestion de configuration : introduction">Next post →</a> 288 289 </div> 290 291 </div> 292 </div> 293 294 <footer> 295 <nav> 296 297 <a href="/">home</a> 298 <span class="text-muted"> | </span> 299 300 <a href="/about">about</a> 301 <span class="text-muted"> | </span> 302 303 <a href="/archive">archive</a> 304 <span class="text-muted"> | </span> 305 306 <a href="/categories">categories</a> 307 <span class="text-muted"> | </span> 308 309 <a href="/tags">tags</a> 310 <span class="text-muted"> | </span> 311 312 <a href="https://twitter.com/vdemeest">twitter</a> 313 <span class="text-muted"> | </span> 314 315 <a href="https://github.com/vdemeester">github</a> 316 <span class="text-muted"> | </span> 317 318 <a href="https://vincent.demeester.fr/index.xml">rss</a> 319 </nav> 320 <br/> 321 <address> 322 <span class="copyright"> 323 Content and design by Vincent Demeester 324 (<a rel="licence" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Some rights reserved</a>) 325 </span><br /> 326 <span class="engine"> 327 Powered by <a href="https://gohugo.io/">Hugo</a> and <a href="https://github.com/kaushalmodi/ox-hugo/">ox-hugo</a> 328 </span> 329 </address> 330 </footer> 331 </body> 332