Un TriCount/Splitwise/CoSpend/SettleUp, mais sans devoir avoir une app ni un compte.
Petit outil qui permet de générer des animations CSS3.
On peut faire des trucs bien fun, et aussi probablement des trucs imbuvables qui donnent le mal de mer.
Suppression de métadonnées de tout type de documents
Librairie Javascript pour ajouter les préfixes/extensions des navigateurs pour le CSS3.
Duplicity, couteau suisse de la sauvegarde. Permet de sauvegarder sur des disques réseau, dans la Cloud, sur un disque dur, le tout chiffré si nécessaire.
À tester !
BlogoText est à mettre à jour...
Procrastination, quand tu nous tiens. Surtout que la migration vite fait que j'ai tenté n'a pas marché direct, il va falloir prendre un peu de temps.
Framework PHP pour base de données
Intro à D3.js, avec une petite liste d'abstrations pour faire des graphiques :
- NVD3
- xCharts
- polychart
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
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)
Un éditeur pour Impress.js
(voir http://gregoire.surrel.org/links/?_Izz7g)
(Via Sebsauvage)
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);
">
Dessins avec Leaflet
Tout un tas d'outils modernes pour faire du web...
Snippets HTML / CSS / JavaScript qui semblent sympas.
Discussion à propos de futures évolutions de Shaarli.