davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/c55f3b229f95e1195003697beba.../index.html

index.html 37KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>The interesting ideas in Datasette (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://simonwillison.net/2018/Oct/4/datasette-ideas/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   The interesting ideas in Datasette (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://simonwillison.net/2018/Oct/4/datasette-ideas/">Source originale du contenu</a></h3>

  463.     <p><a href="https://github.com/simonw/datasette">Datasette</a> (<a href="https://simonwillison.net/tags/datasette/">previously</a>) is my open source tool for exploring and publishing structured data. There are a lot of ideas embedded in Datasette. I realized that I haven’t put many of them into writing.</p>

  464. 

  465. <p>

  466. <a href="#Publishing_readonly_data">Publishing read-only data</a><br/>

  467. <a href="#Bundling_the_data_with_the_code">Bundling the data with the code</a><br/>

  468. <a href="#SQLite_as_the_underlying_data_engine">SQLite as the underlying data engine</a><br/>

  469. <a href="#Farfuture_cache_expiration">Far-future cache expiration</a><br/>

  470. <a href="#Publishing_as_a_core_feature">Publishing as a core feature</a><br/>

  471. <a href="#License_and_source_metadata">License and source metadata</a><br/>

  472. <a href="#Facet_everything">Facet everything</a><br/>

  473. <a href="#Respect_for_CSV">Respect for CSV</a><br/>

  474. <a href="#SQL_as_an_API_language">SQL as an API language</a><br/>

  475. <a href="#Optimistic_query_execution_with_time_limits">Optimistic query execution with time limits</a><br/>

  476. <a href="#Keyset_pagination">Keyset pagination</a><br/>

  477. <a href="#Interactive_demos_based_on_the_unit_tests">Interactive demos based on the unit tests</a><br/>

  478. <a href="#Documentation_unit_tests">Documentation unit tests</a></p>

  479. 

  480. <p>Datasette provides a read-only API to your data. It makes no attempt to deal with writes. Avoiding writes entirely is fundamental to a plethora of interesting properties, many of which are expanded on further below. In brief:</p>

  481. 

  482. <ul>

  483. <li>Hosting web applications with no read/write persistence requirements is incredibly cheap in 2018—often free (both <a href="https://zeit.co/now">ZEIT Now</a> and a <a href="https://www.heroku.com/">Heroku</a> have generous free tiers). This is a big deal: even having to pay a few dollars a month is enough to dicentivise sharing data, since now you have to figure out who will pay and ensure the payments don’t expire in the future.</li>

  484. <li>Being read-only makes it trivial to scale: just add more instances, each with their own copy of the data. All of the hard problems in scaling web applications that relate to writable data stores can be skipped entirely.</li>

  485. <li>Since the database file is opened using SQLite’s <a href="https://www.sqlite.org/uri.html#uriimmutable">immutable mode</a>, we can accept arbitrary SQL queries with no risk of them corrupting the data.</li>

  486. </ul>

  487. 

  488. <p>Any time your data changes, you need to publish a brand new copy of the whole database. With the right hosting this is easy: deploy a brand new copy of your data and application in parallel to your existing live deployment, then switch over incoming HTTP traffic to your API at the load balancer level. Heroku and Zeit Now both support this strategy out of the box.</p>

  489. 

  490. <p>Since the data is read-only and is encapsulated in a single binary SQLite database file, we can bundle the data as part of the app. This means we can trivially create and publish Docker images that provide both the data and the API and UI for accessing it. We can also publish to any hosting provider that will allow us to run a Python application, without also needing to provision a mutable database.</p>

  491. 

  492. <p>The <a href="https://datasette.readthedocs.io/en/stable/publish.html#datasette-package">datasette package</a> command takes one or more SQLite databases and bundles them together with the Datasette application in a single Docker image, ready to be deployed anywhere that can run Docker containers.</p>

  493. 

  494. <p>Datasette encourages people to use <a href="https://www.sqlite.org/">SQLite</a> as a standard format for publishing data.</p>

  495. 

  496. <p>Relational database are great: once you know how to use them, you can represent any data you can imagine using a carefully designed schema.</p>

  497. 

  498. <p>What about data that’s too unstructured to fit a relational schema? SQLite includes excellent <a href="https://www.sqlite.org/json1.html">support for JSON data</a>—so if you can’t shape your data to fit a table schema you can instead store it as text blobs of JSON—and use SQLite’s JSON functions to filter by or extract specific fields.</p>

  499. 

  500. <p>What about binary data? Even that’s covered: SQLite will happily store binary blobs. My <a href="https://github.com/simonw/datasette-render-images">datasette-render-images plugin</a> (<a href="https://datasette-render-images-demo.datasette.io/favicons-6a27915/favicons">live demo here</a>) is one example of a tool that works with binary image data stored in SQLite blobs.</p>

  501. 

  502. <p>What if my data is too big? Datasette is not a “big data” tool, but if your definition of big data is something that won’t fit in RAM  that threshold is growing all the time (2TB of RAM on a single AWS instance <a href="https://aws.amazon.com/about-aws/whats-new/2016/05/now-available-x1-instances-the-largest-amazon-ec2-memory-optimized-instance-with-2-tb-of-memory/">now costs less than $4/hour</a>).</p>

  503. 

  504. <p>I’ve personally had great results from multiple GB SQLite databases and Datasette. The theoretical maximum size of a single SQLite database is <a href="https://www.sqlite.org/limits.html">around 140TB</a>.</p>

  505. 

  506. <p>SQLite also has built-in support for <a href="https://www.sqlite.org/fts5.html">surprisingly good full-text search</a>, and thanks to being extensible via modules has excellent geospatial functionality in the form of the <a href="https://www.gaia-gis.it/fossil/libspatialite/index">SpatiaLite extension</a>. Datasette benefits enormously from this wider ecosystem.</p>

  507. 

  508. <p>The reason most developers avoid SQLite for production web applications is that it doesn’t deal brilliantly with large volumes of concurrent writes. Since Datasette is read-only we can entirely ignore this limitation.</p>

  509. 

  510. <p>Since the data in a Datasette instance never changes, why not cache calls to it forever?</p>

  511. 

  512. <p>Datasette sends a far future HTTP cache expiry header with every API response. This means that browsers will only ever fetch data the first time a specific URL is accessed, and if you host Datasette behind a CDN such as <a href="https://www.fastly.com/">Fastly</a> or <a href="https://www.cloudflare.com/">Cloudflare</a> each unique API call will hit Datasette just once and then be cached essentially forever by the CDN.</p>

  513. 

  514. <p>This means it’s safe to deploy a JavaScript app using an inexpensively hosted Datasette-backed API to the front page of even a high traffic site—the CDN will easily take the load.</p>

  515. 

  516. <p>Zeit added Cloudflare to every deployment (even their free tier) <a href="https://zeit.co/blog/now-cdn">back in July</a>, so if you are hosted there you get this CDN benefit for free.</p>

  517. 

  518. <p>What if you re-publish an updated copy of your data? Datasette has that covered too. You may have noticed that every Datasette database gets a hashed suffix automatically when it is deployed:</p>

  519. 

  520. <p><a href="https://fivethirtyeight.datasettes.com/fivethirtyeight-c9e67c4">https://fivethirtyeight.datasettes.com/fivethirtyeight-c9e67c4</a></p>

  521. 

  522. <p>This suffix is based on the SHA256 hash of the entire database file contents—so any change to the data will result in new URLs. If you query a previous suffix Datasette will notice and redirect you to the new one.</p>

  523. 

  524. <p>If you know you’ll be changing your data, you can build your application against the non-suffixed URL. This will not be cached and will always 302 redirect to the correct version (and these redirects are extremely fast).</p>

  525. 

  526. <p><a href="https://fivethirtyeight.datasettes.com/fivethirtyeight/alcohol-consumption%2Fdrinks.json">https://fivethirtyeight.datasettes.com/fivethirtyeight/alcohol-consumption%2Fdrinks.json</a></p>

  527. 

  528. <p>The redirect sends an HTTP/2 push header such that if you are running behind a CDN that understands push (<a href="https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/">such as Cloudflare</a>) your browser won’t have to make two requests to follow the redirect. You can use the Chrome DevTools to see this in action:</p>

  529. 

  530. <p><img alt="Chrome DevTools showing a redirect initiated by an HTTP/2 push" src="https://static.simonwillison.net/static/2018/http2-push.png"/></p>

  531. 

  532. <p>And finally, if you need to opt out of HTTP caching for some reason you can disable it on a per-request basis by including <code>?_ttl=0</code> <a href="https://datasette.readthedocs.io/en/stable/json_api.html#special-json-arguments">in the URL query string</a>. —for example, if you want to return a random member of the Avengers it doesn’t make sense to cache the response:</p>

  533. 

  534. <p><a href="https://fivethirtyeight.datasettes.com/fivethirtyeight?sql=select+*+from+%5Bavengers%2Favengers%5D+order+by+random()+limit+1&amp;_ttl=0">https://fivethirtyeight.datasettes.com/fivethirtyeight?sql=select+*+from+[avengers%2Favengers]+order+by+random()+limit+1&amp;_ttl=0</a></p>

  535. 

  536. <p>Datasette aims to reduce the friction for publishing interesting data online as much as possible.</p>

  537. 

  538. <p>To this end, Datasette includes <a href="https://datasette.readthedocs.io/en/stable/publish.html">a “publish” subcommand</a>:</p>

  539. 

  540. <pre><code># deploy to Heroku

  541. datasette publish heroku mydatabase.db

  542. # Or deploy to Zeit Now

  543. datasette publish now mydatabase.db

  544. </code></pre>

  545. 

  546. <p>These commands take one or more SQLite databases, upload them to a hosting provider, configure a Datasette instance to serve them and return the public URL of the newly deployed application.</p>

  547. 

  548. <p>Out of the box, Datasette can publish to either Heroku or to Zeit Now. The <a href="https://datasette.readthedocs.io/en/stable/plugins.html#publish-subcommand-publish">publish_subcommand plugin hook</a> means other providers can be supported by writing plugins.</p>

  549. 

  550. <p>Datasette believes that data should be accompanied by source information and a license, whenever possible. The <a href="https://datasette.readthedocs.io/en/stable/metadata.html">metadata.json file</a> that can be bundled with your data supports these. You can also provide source and license information when you run <code>datasette publish</code>:</p>

  551. 

  552. <pre><code>datasette publish fivethirtyeight.db \

  553.     --source="FiveThirtyEight" \

  554.     --source_url="https://github.com/fivethirtyeight/data" \

  555.     --license="CC BY 4.0" \

  556.     --license_url="https://creativecommons.org/licenses/by/4.0/"

  557. </code></pre>

  558. 

  559. <p>When you use these options Datasette will create the corresponding <code>metadata.json</code> file for you as part of the deployment.</p>

  560. 

  561. <p>I really love faceted search: it’s the first tool I turn to whenever I want to start understanding a collection of data. I’ve built faceted search engines on top of Solr, Elasticsearch and PostgreSQL and many of my favourite tools (like Splunk and Datadog) have it as a core feature.</p>

  562. 

  563. <p>Datasette automatically attempts to calculate facets against every table. You can read <a href="https://simonwillison.net/2018/May/20/datasette-facets/">more about the Datasette Facets feature here</a>—as a huge faceted search fan it’s one of my all-time favourite features of the project. Now I can add SQLite to the list of technologies I’ve used to build faceted search!</p>

  564. 

  565. <p>CSV is by far the most common format for sharing and publishing data online. Almost every useful data tool has the ability to export to it, and it remains the lingua franca of spreadsheet import and export.</p>

  566. 

  567. <p>It has many flaws: it can’t easily represent nested data structures, escaping rules for values containing commas are inconsistently implemented and it doesn’t have a standard way of representing character encoding.</p>

  568. 

  569. <p>Datasette aims to promote SQLite as a much better default format for publishing data. I would much rather download a .db file full of pre-structured data than download a .csv and then have to re-structure it as a separate piece of work.</p>

  570. 

  571. <p>But interacting well with the enormous CSV ecosystem is essential. Datasette has <a href="https://datasette.readthedocs.io/en/stable/csv_export.html">deep CSV export functionality</a>: any data you can see, you can export—including the results of arbitrary SQL queries. If your query can be paginated Datasette can stream down every page in a single CSV file for you.</p>

  572. 

  573. <p>Datasette’s sister-tool <a href="https://github.com/simonw/csvs-to-sqlite">csvs-to-sqlite</a> handles the other side of the equation: importing data from CSV into SQLite tables. And the <a href="https://simonwillison.net/2018/Jan/17/datasette-publish/">Datasette Publish web application</a> allows users to upload their CSVs and have them deployed directly to their own fresh Datasette instance—no command line required.</p>

  574. 

  575. <p>A lot of people these days are excited about <a href="https://graphql.org/">GraphQL</a>, because it allows API clients to request exactly the data they need, including traversing into related objects in a single query.</p>

  576. 

  577. <p>Guess what? SQL has been able to do that since the 1970s!</p>

  578. 

  579. <p>There are a number of reasons most APIs don’t allow people to pass them arbitrary SQL queries:</p>

  580. 

  581. <ul>

  582. <li>Security: we don’t want people messing up our data</li>

  583. <li>Performance: what if someone sends an accidental (or deliberate) expensive query that exhausts our resources?</li>

  584. <li>Hiding implementation details: if people write SQL against our API we can never change the structure of our database tables</li>

  585. </ul>

  586. 

  587. <p>Datasette has answers to all three.</p>

  588. 

  589. <p>On security: the data is read-only, using SQLite’s immutable mode. You can’t damage it with a query—INSERT and UPDATEs will simply throw harmless errors.</p>

  590. 

  591. <p>On performance: SQLite has a mechanism for canceling queries that take longer than a certain threshold. Datasette sets this to one second by default, though you can <a href="https://datasette.readthedocs.io/en/stable/config.html#sql-time-limit-ms">alter that configuration</a> if you need to (I often bump it up to ten seconds when exploring multi-GB data on my laptop).</p>

  592. 

  593. <p>On hidden implementation details: since we are publishing static data rather than maintaining an evolving API, we can mostly ignore this issue. If you are really worried about it you can take advantage of <a href="https://datasette.readthedocs.io/en/stable/sql_queries.html#canned-queries">canned queries</a> and <a href="https://datasette.readthedocs.io/en/stable/sql_queries.html#views">SQL view definitions</a> to expose a carefully selected forward-compatible view into your data.</p>

  594. 

  595. <p>I mentioned Datasette’s SQL time limits above. These aren’t just there to avoid malicious queries: the idea of “optimistic SQL evaluation” is baked into some of Datasette’s core features.</p>

  596. 

  597. <p>Consider <a href="https://datasette.readthedocs.io/en/stable/facets.html#suggested-facets">suggested facets</a>—where Datasette inspects any table you view and tries to suggest columns that are worth faceting against.</p>

  598. 

  599. <p>The way this works is Datasette loops over <em>every</em> column in the table and runs a query to see if there are less than 20 unique values for that column. On a large table this could take a prohibitive amount of time, so Datasette sets an aggressive timeout on those queries: <a href="https://datasette.readthedocs.io/en/stable/config.html#facet-suggest-time-limit-ms">just 50ms</a>. If the query fails to run in that time it is silently dropped and the column is not listed as a suggested facet.</p>

  600. 

  601. <p>Datasette’s JSON API provides a mechanism for JavaScript applications to use that same pattern. If you add <code>?_timelimit=20</code> to any Datasette API call, the underlying query will only get 20ms to run. If it goes over you’ll get a very fast error response from the API. This means you can design your own features that attempt to optimistically run expensive queries without damaging the  performance of your app.</p>

  602. 

  603. <h3/>

  604. <p>SQL pagination using OFFSET/LIMIT has a fatal flaw: if you request page number 300 at 20 per page the underlying SQL engine needs to calculate and sort all 6,000 preceding rows before it can return the 20 you have requested.</p>

  605. <p>This does not scale at all well.</p>

  606. <p><a href="https://use-the-index-luke.com/sql/partial-results/fetch-next-page">Keyset pagination</a> (often known by other names, including cursor-based pagination) is a far more efficient way to paginate through data. It works against ordered data. Each page is returned with a token representing the last record you saw, then when you request the next page the engine merely has to filter for records that are greater than that tokenized value and scan through the next 20 of them.</p>

  607. <p>(Actually, it scans through 21. By requesting one more record than you intend to display you can detect if another page of results exists—if you ask for 21 but get back 20 or less you know you are on the last page.)</p>

  608. <p>Datasette’s table view includes a sophisticated implementation of keyset pagination.</p>

  609. <p>Datasette defaults to sorting by primary key (or SQLite rowid). This is perfect for efficient pagination: running a select against the primary key column for values greater than X is one of the fastest range scan queries any database can support. This allows users to paginate as deep as they like without paying the offset/limit performance penalty.</p>

  610. <p>This is also how the “export all rows as CSV” option works: when you select that option, Datasette opens a stream to your browser and internally starts keyset-pagination over the entire table. This keeps resource usage in check even while streaming back millions of rows.</p>

  611. <p>Here’s where Datasette gets fancy: it handles keyset pagination for any other sort order as well. If you sort by any column and click “next” you’ll be requesting the next set of rows after the last value you saw. And this even works for columns containing duplicate values: If you sort by such a column, Datasette actually sorts by that column combined with the primary key. The “next” pagination token it generates encodes both the sorted value and the primary key, allowing it to correctly serve you the next page when you click the link.</p>

  612. <p>Try clicking “next” <a href="https://latest.datasette.io/fixtures-dd88475/sortable?_sort_desc=sortable">on this page</a> to see keyset pagination against a sorted column in action.</p>

  613. 

  614. <p>I love interactive demos. I decided it would be useful if every single release of Datasette had a permanent interactive demo illustrating its features.</p>

  615. <p>Thanks to Zeit Now, this was pretty easy to set up. I’ve actually taken it a step further: every successful push to master on GitHub is also deployed to a permanent URL.</p>

  616. <p>Some examples:</p>

  617. 

  618. <p>The database that is used for this demo is the exact same database that is created by Datasette’s <a href="https://github.com/simonw/datasette/blob/master/tests/fixtures.py">unit test fixtures</a>. The unit tests are already designed to exercise every feature, so reusing them for a live demo makes a lot of sense.</p>

  619. <p>You can view this test database on your own machine by checking out the full Datasette repository from GitHub and running the following:</p>

  620. <pre><code>python tests/fixtures.py fixtures.db metadata.json

  621. datasette fixtures.db -m metadata.json

  622. </code></pre>

  623. <p>Here’s <a href="https://github.com/simonw/datasette/blob/96af802352e49e35751e295e9846aa39c5e22311/.travis.yml#L23-L42">the code in the Datasette Travis CI configuration</a> that deploys a live demo for every commit and every released tag.</p>

  624. 

  625. <p>I wrote about the <a href="https://simonwillison.net/2018/Jul/28/documentation-unit-tests/">Documentation unit tests</a> pattern back in July.</p>

  626. <p>Datasette’s unit tests <a href="https://github.com/simonw/datasette/blob/master/tests/test_docs.py">include some assertions</a> that ensure that every plugin hook, configuration setting and underlying view class is mentioned in the documentation. A commit or pull request that adds or modifies these without also updating the documentation (or at least ensuring there is a corresponding heading in the docs) will fail its tests.</p>

  627. 

  628. <p>Datasette’s <a href="http://datasette.readthedocs.io/">documentation</a> is in pretty good shape now, and <a href="https://datasette.readthedocs.io/en/stable/changelog.html">the changelog</a> provides a detailed overview of new features that I’ve added to the project. I presented Datasette at the PyBay conference in August and I’ve published <a href="https://static.simonwillison.net/static/2018/pybay-datasette/">my annotated slides</a> from that talk. I was <a href="https://changelog.com/podcast/296#t=00:54:45">interviewed about Datasette</a> for the Changelog podcast in May and <a href="https://simonwillison.net/2018/May/9/changelog/">my notes from that conversation</a> include some of my favourite demos.</p>

  629. <p>Datasette now has an official Twitter account—you can follow <a href="https://twitter.com/datasetteproj">@datasetteproj</a> there for updates about the project.</p>

  630.   </article>

  631. </section>

  632. 

  633. 

  634. <nav id="jumpto">

  635.   <p>

  636.     <a href="/david/blog/">Accueil du blog</a> |

  637.     <a href="https://simonwillison.net/2018/Oct/4/datasette-ideas/">Source originale</a> |

  638.     <a href="/david/stream/2019/">Accueil du flux</a>

  639.   </p>

  640. </nav>

  641. 

  642. <footer>

  643.   <div>

  644.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  645.     <p>

  646.       Bonjour/Hi!

  647.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  648.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  649.     </p>

  650.     <p>

  651.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  652.     </p>

  653.     

  654.     <p>

  655.       Voici quelques articles choisis :

  656.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  657.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  658.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  659.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  660.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  661.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  662.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  663.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  664.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  665.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  666.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  667.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  668.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  669.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  670.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  671.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  672.     </p>

  673.     <p>

  674.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  675.     </p>

  676.     <p>

  677.       Je ne traque pas ta navigation mais mon

  678.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  679.       conserve des logs d’accès.

  680.     </p>

  681.   </div>

  682. </footer>

  683. <script type="text/javascript">

  684.   ;(_ => {

  685.     const jumper = document.getElementById('jumper')

  686.     jumper.addEventListener('click', e => {

  687.       e.preventDefault()

  688.       const anchor = e.target.getAttribute('href')

  689.       const targetEl = document.getElementById(anchor.substring(1))

  690.       targetEl.scrollIntoView({behavior: 'smooth'})

  691.     })

  692.   })()

  693. </script>