How to Make an Area Chart With CSS | CSS-Tricks
Pas con ça: une méthode HTML+CSS only et sans lib pour faire des graphiques légers et responsive. Ça utilise les variables CSS et le clip-path... Élégant, astucieux, léger, responsive et accessible...
Pas con ça: une méthode HTML+CSS only et sans lib pour faire des graphiques légers et responsive. Ça utilise les variables CSS et le clip-path... Élégant, astucieux, léger, responsive et accessible...
Au menu du jour une API qui permet de memiser une image du ouebe en une ligne...
Ben, je viens de vous le dire ! vous m'écoutez ou pas quand je parle ?!
Il s'agit de pouvoir fabriquer un meme en un minimum de temps: une image glanée sur le net et pouf, c'est parti.
Les arguments GET sont les suivants:
Comme pour fancytation et les autres API:
Vous pouvez générer un bookmarklet destiné à utiliser l'API en utilisant l'argument $_GET bookmarklet
ce qui donnera :
Ainsi, il suffit d'utiliser la fonction «afficher l'image» de votre navigateur puis de cliquer sur le bookmarklet pour entrer le texte du meme et récupérer l'image générée.
Allez dans le pet du saigneur
En résumé
OMAGAD: SQlite peut gérer les données JSON ?!
Oufti !
The benefit here is you can start off with a table which could be as simple as just a single JSON column, and add columns and indexes as you find useful data in that JSON. For example this can work really well for webhooks, insert all the data you are sent straight into a table, then pull out the useful stuff later. Have fun.
Merci Seb !
MMMouaip... Oui, c'est minimaliste, mais ce n'est pas un CMS: il ne permet pas du tout de gérer le contenu, il se contente de mettre en HTML des fichiers txt écrits en MD et collés sur le serveur via FTP...
En gros, c'est un simple script php qui liste le contenu d'un dossier à l'aide d'un glob
, parse le contenu à la recherche de balises normailsées (author etc) et génère le HTML à l'aide de la lib parsedown.
Alors, ce n'est pas pour autant que c'est nul, hein: c'est simple et uber minimaliste, en effet... C'est bien que ça existe.
Mais ce n'est pas un CMS, on ne peut RIEN gérer sans accès FTP, on ne peut pas utiliser de plugins, de configuration etc...
Dans une volonté de mettre un peu d'ordre sur un serveur qui n'a rien à envier à la chambre de ma fille en matière d'entropie, je relocalise certains bouts de code tout en les dépoussiérant un peu...
Aujourd'hui, j'ai repris un peu pix, le placeholder codé au tout début du jurassique...
il s'agit d'une api permettant de récupérer une image unie d'une certaine taille et d'une certaine couleur en guise de placeholder.
api.warriordudimanche.net/pix/?w=150&h=150
api.warriordudimanche.net/pix/?w=256&h=128&c=f00
Tiens, intéressant ça: utiliser console.log({ myVariable });
plutôt que console.log(myVariable);
ou console.log("myVariable:", myVariable);
Alors: +1, +1... heu +1 et ... +1 «Tout ces outils, cumulés, finissent par imposer aux développeurs une charge mentale énorme sur la partie technique avant même de pouvoir commencer à produire du code, avant même de commencer à travailler concrètement sur le problème initial à résoudre.»
et en plus, tout le temps passé à utiliser des frameworks qui mâchent le travail peuvent empêcher de comprendre comment les choses fonctionnent...
Comme je le disais dans le billet précédent à propos de SVGBox, l'idée était bonne mais le poids était rédhibitoire.
Pourtant, ça peut être sympa d'avoir un catalogue d'icônes prêtes à servir et dont on puisse altérer la couleur, sans compter que ce serait une bonne alternative aux webfonts tout en étant plus accessible.
Donc, j'ai récupéré le pack d'icônes de fontAwesome et j'ai bidouillé une API qui permette de faire la même chose que SVGBox.net, à savoir obtenir une icône svg dans la couleur que l'on souhaite.
api.warriordudimanche.net/iconeleon/?i=headphones donne:
et si on ajoute le paramètre c on peut changer la couleur: api.warriordudimanche.net/iconeleon/?i=headphones&c=red
La couleur peut-être au format HTML, un nom de couleur css ou un rgba quelconque...
api.warriordudimanche.net/iconeleon/?i=headphones&c=rgba(255,0,255,0.5)
Toute icône modifiée est sauvegardée en cache pour éviter une surcharge du serveur
Je vous ai ajouté un frontend minimaliste pour rechercher les icones dans les 1615 du pack.
Du coup, si ça peut être utile, n'hésitez pas à vous servir voire à proposer un frontend plus... comment dire ? abouti ?
Tiens, ça peut être utile ça ! Bonne idée et toute simple en plus ! Merci Timo !
EDIT: Sinon, il y a ça aussi, plus élaboré mais pas usine à gaz quand même : https://postit.ecyseo.net/ Merci JerryWham
Aujourd'hui, c'est cadeau, c'est pour moi: une api permettant de créer une image à partir d'un texte, genre pour pimper un peu une citation (d'où le nom fancytation... gag)
TROLL INSIDE
Wow, la programmation fonctionnelle revient à la mode pour plein de raisons...Donc, après avoir poussé au cul pour adopter la POO qu'est trop bien que les frameworks c'est le top pis toussa, on revient en arrière en utilisant les arguments de l'époque où on défendait la PF.
On remballe du vieux pour faire du neuf révolutionnaire: on se croirait dans l'éducation nationale, mon gars !
Omagad, c'est tellement ça !
The mental model for Git is needlessly complex Git provides a poor user experience
Ha ! Je ne suis pas tout seul... Pour moi, GIT c'est de la magie: peu intuitif, impossible à mémoriser, tu comprends pas quand ça merde, tu comprends pas pourquoi ça marche...
Comme découvert grâce à ArthurHoaro, pour obliger le navigateur à gérer le drop de fichier sur une dropzone, il faut d'abord faire un preventDefault() sur les événements dragover et/ou dragenter.
On peut le faire en dur dans le HTML:
<div ondragover="return false">
<div ondragover="event.preventDefault()">
Ce qui peut même servir pour le ciblage du drop avec un sélecteur genre *[ondragover]
On peut bien entendu également le définir directement dans le js:
document.getElementById("body").addEventListener("drop",function(e){
console.log(e);
e.preventDefault();
e.stopPropagation();
})
document.getElementById("body").addEventListener("dragover",function(e){
e.preventDefault();
e.stopPropagation();
})
document.getElementById("body").addEventListener("dragenter",function(e){
e.preventDefault();
e.stopPropagation();
})
Sources: