Je partage une petit truc vraiment tout con que je viens de tester pour une de mes applis de boulot.
J'avais besoin de confirmer vite fait et sans prise de tête le clic sur un lien «supprimer»: j'ai opté pour l'utilisation d'un attribut «confirm» et d'un bout de JS qui va bien.
Le code ci-dessous utilise ma petite betalib VanillaJS perso (http://cdn.warriordudimanche.net/VanillaJS.js) parce que j'avais la flemme de récrire la partie ciblage et foreach, mais vous aurez pigé le concept (c'est vraiment tout con)
<a href="https://www.warriordudimanche.net/?delete" confirm="true">Delete</a>
on('click','a[confirm]',function(e){
// La partie à mettre dans un évènement click
e.stopPropagation();
if (!confirm("Etes-vous certain ?")){
e.preventDefault();
return false;
}
});
L'avantage, c'est qu'il suffit de coller l'attribut «confirm» sur un lien pour qu'il ne soit activé qu'en cas de confirmation.
En passant, j'ai mis à jour ma page sur les caractères unicode...
Il y a plus de rubriques et j'ai ajouté un moteur de recherche qui accepte plusieurs mots séparés par des espaces.
par exemple: http://unicode.warriordudimanche.net/?search=aubergine
Allez, bisou !Sinon, il y a Fontello ( http://fontello.com/ ) qui permet de choisir ses icônes dans plusieurs bibliothèques de webfonts (font awesome, Entypo, Typicon, Iconic, Modern Pictogram, Meteocons, MFG labs, Maki, Zocial, Brandico, Elusive, Linecons, Web symbols)
On fait son marché et on récupère un zip contenant la webfont et les css tout prêts...
De rien !
ça a l'air vachement bien ça...
Todo_aujourdhui[ ]='* regarder ça de plus près';
Les animations dans canvas avec un projet «simple»: un solitaire.
Un jour, j'aurai le temps de regarder... un jour
La dernière fois que j'ai abordé le sujet de googol, j'en étais à chercher un moyen de contourner les blocages de google ET de startpage... J'avais pensé à multiplier les moteurs alternatifs, à multiplier les serveurs de relais...
Mais depuis, j'ai pas progressé:
je continue à réfléchir dans mon coin: je laisse mûrir... je file le dossier à mon inconscient en me disant qu'une solution finira bien par se présenter: pour le mec qui a un marteau, tous les problèmes sont des clous... parfois, il faut prendre le problème par un autre bout.
Et comme je m'interrogeais pour la millionième fois sur le langage auquel je pourrais me former, mon inconscient m'a rétorqué : «et googol dans un autre langage...?»
J'ai confié la question à quelques neurones pas encore cramés par le travail à la maison... Après délibération, une page HTML + js pourrait éventuellement réaliser une partie du boulot:
Les points négatifs:
Les points positifs:
Pour le problème de l'IP visible lors de l'appel aux miniatures, on peut imaginer une partie backend en php dédiée à cette tâche uniquement (en gros, tipiak les thumbs de google, les mettre en cache et les servir).
En ce qui concerne la visibilité de l'IP lors de la requête initiale, là je sèche. On a besoin que le client envoie la requête avec sa propre IP non bloquée pour que JS récupère la réponse, parse les résultats et produise la page propre...
Voilà...
C'est beau !
Utiliser et comprendre les étapes dans les animations css en faisaint une machine de Goldberg...
Faut que je regarde ça de plus près dis-donc...
Dire qu'aujourd'hui, il suffit d'ajouter
loading="lazy"
à une balise image pour implémenter le lazyload...
C'est beau.
Intéressant : des onglets css only... Je garde !
// boutons
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab1</label>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Tab2</label>
// contenus
<div class="tab content1">Tab1 Contents </div>
<div class="tab content2">Tab2 Contents </div>
// css pour cacher/montrer
input { display: none; } /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none } /* hide contents *//* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2 { display: block; }
// css pour styler
input + label { /* box with rounded corner */
border: 1px solid #999;
background: #EEE;
padding: 4px 12px;
border-radius: 4px 4px 0 0;
position: relative;
top: 1px;
}
input:checked + label { /* white background for selected tab */
background: #FFF;
border-bottom: 1px solid transparent;
}
input ~ .tab { /* grey line between tab and contents */
border-top: 1px solid #999;
padding: 12px;
}
Certains se souviennent peut-être de goofi, pour récupérer des google fonts en local; sur la base de ce script, j'ai bricolé une version qui permettra de faire la même chose avec les bibliothèques et frameworks (notamment js) que tout un chacun utilise et dont l'appel participe aux stats de google et consorts à chaque requête sur leur serveur.
Donc, en gros, il suffit de remplacer l'appel du script dans le
en ajoutant getlib.php?url= devant.Ainsi
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
deviendra
<script src="http://monserveur/getlib.php?url=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Le fichier est récupéré une seule fois et seule la vertsion locale sera renvoyée par la suite.
Au cas où vous voulez que le script récupère une éventuelle mise à jour, il suffit d'ajouter update dans l'url:
<script src="http://monserveur/getlib.php?update&url=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Getlib vérifiera alors si le fichier distant a changé et le retéléchargera si c'est nécessaire.
Comme avec Goofi, seule l'IP du serveur qui héberge le script est connue du serveur distant, jamais celle du visiteur.
C'est tout! Je n'ai pas testé à fond encore et les erreurs ne sont pas gérées pour le moment, mais ça fonctionne quand même pas mal !
<?php
# get libs from distant servers to local (& avoid unnecessary requests to servers who can log user's connections)
# ex:
# https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
# becomes
# getlib.php?url=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
# if you want to update local file if the distant one changes, just add "update"
# getlib.php?update&url=https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js
# author: warriordudimanche.net
#
$lib_folder='libs/';
$check_updates=isset($_GET['update']);
if (!empty($_GET['url'])){
if (!is_dir($lib_folder)){mkdir($lib_folder);}
$url=strip_tags($_GET['url']);
define('LOCAL_FILENAME',$lib_folder.basename($url));
$ext=pathinfo(LOCAL_FILENAME)['extension'];
//$flag='non';
if (
!is_file(LOCAL_FILENAME)
||
($check_updates && !isSameFile($url))
){
$lib=file_get_contents($url,false,null,0,1000000);
file_put_contents(LOCAL_FILENAME,$lib);
$head = array_change_key_case(get_headers($url, TRUE));
file_put_contents(LOCAL_FILENAME.'.info', $head['last-modified']);
//$flag='oui';
}
if ($ext=='css'){
$mime='text/css';
}elseif ($ext=='js'){
$mime='text/javascript';
}else{
$mime=mime_content_type(LOCAL_FILENAME);
}
header('Content-Type: '.$mime);
exit(file_get_contents(LOCAL_FILENAME));
}
function isSameFile($url){
$head = array_change_key_case(get_headers($url, TRUE));
$local=file_get_contents(LOCAL_FILENAME.'.info');
$distant=$head['last-modified'];
return $distant==$local;
}
Un excellent résumé des bonnes pratiques pour éviter la fuite de données des utilisateurs... Mais... OMAGAD !
Il parle de Goofi !!!
Très bonne vidéo sur la pérennité du code, des services, des API... (coucou Google )
«the code never was the important part»
Il y a quelques personnes qui me posent des questions à propos de googol, du coup, je fais une petite page pour résumer à quoi je me suis heurté et où j'en suis de mes tentatives...