Base de données de librairies Javascript. Comment choisir, maintenant ?
:)
Super mix de librairies javascript qui roxent !
Leaflet pour l'affichage de cartes
D3 pour manger des données
Crossfilter pour filtrer ces données
Pas fan de la musique, mais la vidéo est impressionnante. Combien de "fails" pour un "win" ?
Personnaliser le Twitter Bootstrap
Un poil de coloration syntaxique pour MarkDown dans Notepad++.
(Faudrait que j'arrête de stocker des fichiers en texte dans ce Sharlii :) )
<NotepadPlus>
<UserLang name="Markdown Pandoc" ext="md" udlVersion="2.0">
<Settings>
<Global caseIgnored="yes" allowFoldOfComments="no" forceLineCommentsAtBOL="no" foldCompact="no" />
<Prefix Keywords1="no" Keywords2="no" Keywords3="no" Keywords4="no" Keywords5="no" Keywords6="no" Keywords7="no" Keywords8="no" />
</Settings>
<KeywordLists>
<Keywords name="Comments" id="0">03<!-- 03 04 04--> 04 00# 00## 00### 00#### 00##### 01 02</Keywords>
<Keywords name="Numbers, additional" id="1"></Keywords>
<Keywords name="Numbers, prefixes" id="2"></Keywords>
<Keywords name="Numbers, extras with prefixes" id="3"></Keywords>
<Keywords name="Numbers, suffixes" id="4"></Keywords>
<Keywords name="Operators1" id="5">- * +</Keywords>
<Keywords name="Operators2" id="6"></Keywords>
<Keywords name="Folders in code1, open" id="7"></Keywords>
<Keywords name="Folders in code1, middle" id="8"></Keywords>
<Keywords name="Folders in code1, close" id="9"></Keywords>
<Keywords name="Folders in code2, open" id="10"></Keywords>
<Keywords name="Folders in code2, middle" id="11"></Keywords>
<Keywords name="Folders in code2, close" id="12"></Keywords>
<Keywords name="Folders in comment, open" id="13"></Keywords>
<Keywords name="Folders in comment, middle" id="14"></Keywords>
<Keywords name="Folders in comment, close" id="15"></Keywords>
<Keywords name="Keywords1" id="16"></Keywords>
<Keywords name="Keywords2" id="17">* -</Keywords>
<Keywords name="Keywords3" id="18">== --</Keywords>
<Keywords name="Keywords4" id="19">></Keywords>
<Keywords name="Keywords5" id="20"></Keywords>
<Keywords name="Keywords6" id="21"></Keywords>
<Keywords name="Keywords7" id="22"></Keywords>
<Keywords name="Keywords8" id="23"></Keywords>
<Keywords name="Delimiters" id="24">00[ 01 02] 0304 05 06](http:// 07 08) 09 10 11 12 13 14 15 16 17\n 18 19 20 21 22 23</Keywords>
</KeywordLists>
<Styles>
<WordsStyle name="DEFAULT" styleID="0" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="COMMENTS" styleID="1" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="LINE COMMENTS" styleID="2" fgColor="800000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="NUMBERS" styleID="3" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS1" styleID="4" fgColor="0000FF" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS2" styleID="5" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="KEYWORDS3" styleID="6" fgColor="800000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="KEYWORDS4" styleID="7" fgColor="808040" bgColor="D5FFD5" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS5" styleID="8" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS6" styleID="9" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS7" styleID="10" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="KEYWORDS8" styleID="11" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="OPERATORS" styleID="12" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="FOLDER IN CODE1" styleID="13" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="FOLDER IN CODE2" styleID="14" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="FOLDER IN COMMENT" styleID="15" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS1" styleID="16" fgColor="0000FF" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS2" styleID="17" fgColor="FF0000" bgColor="FFFFFF" fontName="" fontStyle="1" nesting="0" />
<WordsStyle name="DELIMITERS3" styleID="18" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS4" styleID="19" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS5" styleID="20" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS6" styleID="21" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS7" styleID="22" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
<WordsStyle name="DELIMITERS8" styleID="23" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
</Styles>
</UserLang>
</NotepadPlus>
En lien avec les deux entrées précédentes, voici de quoi mettre une table des matières dans l'export HTML.
J'ai modifié un peu la sortie de manière a avoir une numérotation fonctionnelle:
$if(toc)$
<h1 id="$idprefix$toctitle" class="TOC-header">Table of contents</h1>
<div id="$idprefix$TOC">
$toc$
</div>
$endif$
Voici une feuille de style faite pour rendre les exports Markdown > CSS plus jolis.
En rapport avec cet autre post : http://gregoire.surrel.org/links/?l3ILYw
<style>
/* #####################
CSS rules for all
##################### */
/ Text style /
html{
font-family: 'Georgia', serif;
}
h1,h2,h3,h4,h5,h6{
font-weight: normal;
color: #111;
line-height: 1em;
margin-bottom: 0.5em;
}
h4,h5,h6{ font-weight: bold; }
h2{ font-size:1.8em; margin-left: 7mm; }
h3{ font-size:1.5em; margin-left: 12mm; }
h4{ font-size:1.2em; margin-left: 16mm; }
h5{ font-size:1.0em; margin-left: 18mm; }
h6{ font-size:0.9em; margin-left: 20mm; }
p{
text-align: justify;
}
/ Tables, figures /
figure{
text-align:
center; margin: 0;
}
img{
max-width:100%;
padding: 8px;
display: block;
margin: auto;
}
figure > img {
border: 1px #DDD solid;
}
figcaption, caption{
font-style: italic;
margin: auto;
padding: 0;
border: 1px #AAA solid;
}
figcaption{
display: inline-block;
padding: 3px;
margin-top: -1px;
border-top: 1px #DDD solid;
background: white;
}
caption{
border-bottom-width: 0;
}
tbody{
border-top: 4px #AAA solid;
}
table{
border-collapse: collapse;
border-spacing: 0;
border: 1px #AAA solid;
margin: auto;
}
td, th{
vertical-align: top;
padding: 0 3pt;
}
tr ~ tr{
border-top: thin rgba(0, 0, 0, 0.05) solid;
}
/ Text blocks /
blockquote, pre{
margin: 0;
padding:0.1cm 1cm;
padding-left: 1em;
display: inline-block;
}
blockquote{
border-left: 0.5em #DDD solid;
border-radius: 12pt 4pt 4pt 12pt;
}
pre,code,kbd,samp{
font-family: monospace;
max-width: 85%;
white-space: pre-wrap;
word-wrap: break-word;
}
dl{
margin-left: 0.8cm;
}
dt{
font-style: italic;
}
/ Spacing glitches /
pre + figure, h1 + blockquote, figure + figure{
margin-top: 1cm;
}
li > p{
margin: 0.2em;
}
/ Title counters /
body{ counter-reset: ch1; }
h1{
counter-increment: ch1;
counter-reset: ch2;
}
h1:before { content: counter(ch1) " - "; }
h2{
counter-increment: ch2;
counter-reset: ch3;
}
h2:before { content: counter(ch1) "." counter(ch2) " - "; }
h3{
counter-increment: ch3;
}
h3:before { content: counter(ch1) "." counter(ch2) "." counter(ch3) " - "; }
#TOC{
counter-reset: ch1;
}
.title:before, .author:before , .date:before, .TOC-header:before{
content: "";
}
/* ########################
CSS rules for screen
######################## */
@media screen{
/ Media style /
html{
padding: 1cm;
background: #eee;
}
body{
background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAA9CAYAAAAXgFT/AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAFtSURBVHic7dxBSsNAAEDRRLyAK6nrev8DuRfc1CPoVhBkCpkkH99blyaZpJ8JyXS9Xa5fC0DAw9E7ADBKsIAMwQIyBAvIECwgQ7CADMECMgQLyBAsIONx9INP72/rjB34fHk97Zv2ex3zrO3sua29zuPMseJvP8/x1udh9PoxwwIyBAvIECwgQ7CADMECMgQLyBAsIEOwgAzBAjIEC8gYXpozi6UWwCgzLCBDsIAMwQIyBAvIECwgQ7CADMECMg5/Dwvucca/1J7xLuEZj/MMzLCADMECMtwSsonKEiu3Wm1mWECGYAEZggVkCBaQIVhAhmABGYe/1nDmx8yVR/XwX5hhARmCBWQIFpAhWECGYAEZggVkCBaQIVhAhmABGYIFZAgWkLHeLtfRtXwfk/bhedL3lswa22X5Pb4zt1Uw43qbMaZn/11sfcxDx3tPsAAO5ZYQyBAsIEOwgAzBAjIEC8gQLCBDsIAMwQIyvgF8RjQAaIW6pAAAAABJRU5ErkJggg==) no-repeat;
background-size: 256px;
background-position: 16px 16px;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
font-size: 16px;
line-height: 1.5em;
padding: 3cm 1cm;
margin: auto;
max-width: 62em;
min-width: 42em;
border: 1px black solid;
}
:target{ background: rgb(181, 230, 29); padding-left: 3mm; padding-right: 3mm; }
/ Document title /
header{
text-align: center;
}
.title{
border-bottom: 1px black solid;
}
.author{
margin: -1px 0 1cm;
margin-bottom: 1cm;
background: #eee;
display: inline-block;
padding: 10pt 15pt;
border: 1px black solid;
border-radius: 0 0 5pt 5pt;
border-top-width: 0;
}
.date{
font-variant: small-caps;
margin: 1cm 0 3cm;
}
/ Text style /
p{ margin:1em 0; }
h1{ font-size:2.5em; background:#eee; padding: 5pt; margin:1cm -1cm 0; border-top: 1px black solid; }
a{ color: #0645ad; text-decoration: none; border-bottom: 1px dotted #0645ad;}
h1 > a, h2 > a, h3 > a{ color: black; }
a:visited{ color: #0b0080; }
h1 > a:visited, h2 > a:visited, h3 > a:visited{ color: black; }
a:hover{ color: #06e; }
a:active{ color: #faa700; }
a:focus{ outline: 1px dotted; background: #fdca23}
a:hover, a:active{ outline: 0; }
/ Tables, figures /
figure > *{
box-shadow: 3px 3px 3px #ccc;
}
blockquote{
background: #EEE;
}
hr{
display: block;
height: 2px;
border: 0;
border-top: 1px solid #aaa;
border-bottom: 1px solid #eee;
margin: 1em 0;
padding: 0;
}
pre {
border: 1px #aaa solid;
border-radius: 5px;
background: #f8f8f8;
padding: 3pt;
margin-left: 1cm;
padding:0.1cm 1cm;
}
b, strong{ font-weight: bold; }
dfn{ font-style: italic; }
ins{ background: #ff9; color: #000; text-decoration: none; }
mark{ background: #ff0; color: #000; font-style: italic; font-weight: bold; }
sub, sup{ font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup{ top: -0.5em; }
sub{ bottom: -0.25em; }
ul, ol{ padding: 0 0 0 2em; }
li { margin: 0 }
/p:last-child{ margin:0 }/
dd{ margin: 0 0 0 2em; }
td:nth-child(even), th:nth-child(even) { background: #F1F1F1 }
dt{ font-weight: bold; }
dl{ padding: 0 5mm; }
.footnotes{
background: #FDFCF2;
padding: 0 1em;
}
}
/* #######################
CSS rules for print
####################### */
@media print{
body{ font-size:12pt; max-width:100%; }
a{ text-decoration: underline; }
hr{ height: 1px; border:0; border-bottom:1px solid black; }
hr:after{ height: 1px; border:0; border-bottom:1px solid black; }
a[href]:after{ content: " (" attr(href) ")"; }
abbr[title]:after{ content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{ content: ""; }
pre, blockquote{ border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
tr, img{ page-break-inside: avoid; }
img{ max-width: 100% !important; }
@page :left{ margin: 15mm 20mm 15mm 10mm; }
@page :right{ margin: 15mm 10mm 15mm 20mm; }
p, h2, h3{ orphans: 3; widows: 3; }
h1, h2, h3{ page-break-after: avoid; }
}
</style>
Voici des commandes pour utiliser Pandoc via Notepad++ (par la commande 'Run'). Je n'ai pas ajouté l'option de ligne de commande pour faire une bibliographie.
Voici un exemple de document Markdown pour tester l'installation :
http://johnmacfarlane.net/pandoc/demo/README
Export Markdown > HTML standalone (un seul fichier) :
cmd /C cd $(CURRENT_DIRECTORY) && pandoc --standalone --self-contained --smart --table-of-contents -H document.css -f markdown -t html5 -o $(NAME_PART).html $(FILE_NAME)
Note: L'export cherche une feuille de style CSS nommée document.css, placée à côté du document à convertir. Vous pouvez utiliser celle que j'ai faite comme base :
http://gregoire.surrel.org/links/?T51SfA
Export Markdown > LaTeX :
cmd /C cd $(CURRENT_DIRECTORY) && pandoc --standalone --smart --table-of-contents -f markdown -t latex -o $(NAME_PART).tex $(FILE_NAME)
Export Markdown > DocX:
cmd /C cd $(CURRENT_DIRECTORY) && pandoc --standalone --smart --table-of-contents -f markdown -t docx -o $(NAME_PART).docx $(FILE_NAME)
Des dessins faits à la craie. À la craie, quoi !
(via http://sebsauvage.net/links/)
Un éditeur pour Impress.js
(voir http://gregoire.surrel.org/links/?_Izz7g)
(Via Sebsauvage)
Outil sympa pour voir ce que font les regex. Genre essayer d'y coller ça :
[a-z0-9!#$%&'+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'+/=?^_`{|}~-]+)@(?:[a-z0-9](?:[a-z0-9-][a-z0-9])?.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b
Pas très clair, de prime abord, mais on trouve vite la logique que c'est pour valider (pas trop mal) une adresse mail.
Embryon de code à adapter selon les browsers, ajouter un :hover et un :active.
<input type="button" value="Coucou" style="
font-size: 5mm;
color: white;
text-shadow: 1px 1px 3px black;
border-radius: 8px;
border: thin black solid;
background: hsl(0, 100%, 42%);
background: hsl(0, 100%, 42%)
-webkit-linear-gradient(top,
rgba(255, 255, 255, 0.5) 1%,
rgba(255, 255, 255, 0) 30%,
rgba(0, 0, 0, 0) 70%,
rgba(0, 0, 0, 0.25) 100%);
padding: 10px 20px;
margin: 1cm;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
">
Pleins de trucs et astuces en CSS (par le créateur d'Alsacréations)
(via http://sebsauvage.net/links/)
Pure awesomeness !
Comment demander plus de sous !
(via http://sebsauvage.net/links/?)
Souriez, vous êtes vulnérables
(via http://lehollandaisvolant.net/index.php?mode=links)
Belle leçon de démocratie !
(via http://sebsauvage.net/links/)
Gandalf s'est échappé du Seigneur des Anneaux, et a trouvé une nouvelle occupation.
Trains et neige...
Un bateau pour transporter...des bateaux ?!
Ya pas comme un problème ? Faut les garder au sec ?