Bookmark Bronco2017-11-29T16:19:00+01:00https://warriordudimanche.net/shaarli/https://warriordudimanche.net/shaarli/https://warriordudimanche.net/shaarli/Gagner du temps quand on cherche un mobilehttps://warriordudimanche.net/shaarli/?4-i3Jw2017-11-29T16:19:00+01:00En passant, je vous file un petit bookmarklet que j'ai bricolé quand je cherchais un smartphone pas trop cher: il suffit de sélectionner le nom d'un portable sur une page web et de cliquer sur le bookmarklet; il ouvre alors une nouvelle page avec une recherche sur lesnumériques.com.<br />
<br />
C'est tout con, mais ça m'a fait gagner du temps.<br />
```<br />
javascript:(function(){if(window.getSelection){sel=window.getSelection();}else%20if(document.getSelection){sel=%20document.getSelection();}else{var%20selection=document.selection&&document.selection.createRange();if(selection.text){sel=selection.text;}};window.open('https://www.lesnumeriques.com/recherche?q='+sel,'infos');})()<br />
```<br />
<br />
Chercher sur les numériques<br />
<br />
Glissez-déposez ce lien vers les bookmarks pissétou.<br />
<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/big/bazinga.png <br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?4-i3Jw">Permalink</a>)Little UI Detailshttps://warriordudimanche.net/shaarli/?WOldoA2017-09-15T13:42:00+02:00J'ai la flemme de résumer, mais je capture <br />
<br />
<br />
![capture](data/medias/images/captures/little-ui-details.png)<br />
<br />
<br />
<br />
Via https://links.kalvn.net/<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?WOldoA">Permalink</a>)Taper les accents espagnols sur ubuntu/linuxminthttps://warriordudimanche.net/shaarli/?LIIPrw2017-09-09T18:55:00+02:00![titre](http://warriordudimanche.net/data/medias/http-www-axl-cefan-ulaval-ca-europe-imagesespagne-drap.gif) <br />
Pour ceux qui viennent de windaube et sont habitués aux combinaisons alt+160 etc, il existe des équivalents sous linux.<br />
<br />
## Méthode 1: la combinaison native de la mort<br />
☺: c'est apparemment universel<br />
☹: c'est aussi chiant à retenir qu'à taper<br />
```<br />
ctrl+shift+ud1 ⇨ Ñ<br />
ctrl+shift+uf1 ⇨ ñ<br />
ctrl+shift+ud3 ⇨ Ó<br />
ctrl+shift+uf3 ⇨ ó<br />
ctrl+shift+ucd ⇨ Í<br />
ctrl+shift+ued ⇨ í<br />
ctrl+shift+uc1 ⇨ Á<br />
ctrl+shift+ue1 ⇨ á<br />
ctrl+shift+uda ⇨ Ú<br />
ctrl+shift+ufa ⇨ ú<br />
altGr+? ⇨ ¿<br />
altGr+! ⇨ ¡<br />
```<br />
ça marche, mais c'est velu.<br />
<br />
## Méthode 2: la touche compose.<br />
☺: ça fonctionne très bien<br />
☹: c'est un peu moins pénible mais il faut configurer la touche compose (clavier>agencements>options>position de la touche compose)<br />
On appuie successivement sur:<br />
```<br />
compose ' a ⇨ á<br />
compose ' o ⇨ ó<br />
compose ' u ⇨ ú<br />
compose ' i ⇨ í<br />
compose altGr+~ n ⇨ ñ<br />
```<br />
Pour la «ñ», c'est carrément le cauchemar.<br />
<br />
## Méthode 3: la combinaison mieux mais partielle<br />
```<br />
altGr + & puis a ⇨ á<br />
altGr + & puis o ⇨ ó<br />
altGr + & puis u ⇨ ú<br />
altGr + & puis i ⇨ í<br />
```<br />
<br />
Pour la «ñ», ça reste la merde.<br />
<br />
<br />
Après, il faudrait se bidouiller un clavier à partir du clavier français en remplaçant les altGr+a. J'ai un peu cherché sans y arriver, pour l'instant.<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?LIIPrw">Permalink</a>)Petit guide exhaustif des biais cognitifs – Buster Benson | Associations Libreshttps://warriordudimanche.net/shaarli/?npJ_Ow2017-09-09T09:30:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/petit-guide-exhaustif-des-biais-cognitifs-buster-benson-associations-libres-Conf-neocast-capture-02.jpg) <br />
### Résumé de cet excellent article qui met en valeur les travers irrationnels de notre cerveau. J'ai **beaucoup** résumé, allez voir l'article lui-même, plus complet et édifiant.<br />
<br />
1. ** trop d'information: filtrage et problèmes d'attention**<br />
* Le cerveau filtre en ne retenant que ce qu'il a déjà mémorisé et délaisse le reste (biais d'attention)<br />
* Il remarquera ce qui sort beaucoup de l'ordinaire et oblitérera alors ce qu'il considère comme habituel (effet de distinctivité)<br />
* Il donne trop d'importance à ce qui a changé et empêche une évaluation objective (effet de contraste)<br />
* Il remarque en priorité ce qui confirme nos croyances (biais de confirmation)<br />
* Il met en exergue les failles des autres et masque les nôtres (biais du point aveugle)<br />
2. **manque de sens: perception partielle et subjectivité**<br />
* Le cerveau cherche des motifs, des répétitions, quitte à en voir là où il n'y en a pas (illusion des séries, confabulation)<br />
* Il comble les blancs avec des stéréotypes (erreur d'attribution)<br />
* Il imagine que ce qu'il aime ou connaît est meilleur que ce qu'il n'aime pas ou ne connaît pas (effet de halo)<br />
* Il simplifie les nombres et probabilités (biais de normalité)<br />
* Il pense que les autres savent ce qu'il sait et qu'il sait ce que les autres savent (illusion de transparence)<br />
* Il projette son état d'esprit actuel sur la vision du passé et du futur (biais de résultat)<br />
3. **besoin d'agir vite:**<br />
* Le cerveau surestime ses capacités et l'importance de ce que nous faisons (biais d'excès de confiance)<br />
* Il favorise le proche et l'immédiat au détriment du lointain pour rester concentré (appel à la nouveauté)<br />
* Il est plus motivé pour finir les choses dans lesquelles nous nous sommes investis, même s'il y a des raisons d'abandonner (biais des coûts irrationnels, escalade irrationnelle)<br />
* Il a tendance à choisir la solution qui lui apparaît comme moins risquée ou qui préserve le statu quo<br />
* Il favorise les options les plus simples (ou simplistes) au détriment des options plus complexes ou ambiguës quitte à délaisser une solution meilleure à long terme.<br />
4. **impossibilité de tout mémoriser (auto-renforcement)**<br />
* Le cerveau renforce et modifie les souvenirs (effacement d'un souvenir ou injection de détails)<br />
* Il écarte le spécifique et favorise le général (association implicite)<br />
* Il réduit les événements et listes à leurs élément-clés<br />
* Il stocke l'information en fonction du vécu et lui attribue donc à l'événement une importance qu'il n'a pas forcément<br />
<br />
### Donc, pour faire simple:<br />
* Nous ne voyons pas tout et nous filtrons des choses importantes.<br />
* Nous cherchons trop le sens quitte à créer des illusions<br />
* Nous avons tendance à décider trop vite<br />
* Notre mémoire nous pousse à l'erreur<br />
<br />
### Que faire ?<br />
Pour éliminer ces problèmes : RIEN.<br />
<br />
Par contre, on peut accepter ces faiblesses et les garder à l'esprit dans nos jugements.<br />
<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/xbig/wrong.jpg <br />
<br />
<br />
<br />
<br />
<br />
Via Tibiaster djanybekensisSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?npJ_Ow">Permalink</a>)How To Install Java On Ubuntuhttps://warriordudimanche.net/shaarli/?RGarEg2017-08-28T16:19:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/how-to-install-java-on-ubuntu-24823_963e_12.jpg) <br />
Pour les ceusses qui auraient du mal à faire fonctionner les .jar avec open JDK 8/9, j'ai trouvé un moyen de passer au java d'Oracle <br />
<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/big/patape.png<br />
<br />
J'avais un soucis d'exécution sur Linux Mint: quand je lançais un .jar, rien ne se passait. Après avoir essayé plein de solutions, j'ai décidé de tester avec la version officielle de Java et ça a marché.<br />
<br />
1. Télécharger le .tar correspondant à linux ( [Lien direct](http://javadl.oracle.com/webapps/download/AutoDL?BundleId=225343_090f390dda5b47b9b721c7dfaa008135) )<br />
2. Désarchiver le fichier Tar <br />
3. Après avoir ouvert le dossier usr/ avec les droits root (clic droit > **ouvrir en tant qu'utilisateur root** ), créer un dossier «java»<br />
4. copier dedans le dossier désarchivé précédemment<br />
5. ouvrir un terminal (**_ctrl+alt+t_**) et taper ``` sudo xed /etc/environment```<br />
6. ajouter ```:/usr/java/NOM_DU_DOSSIER_COPIÉ/bin``` avant la seconde guillemet dans la ligne ```PATH=".....```<br />
7. ajouter la ligne ```JAVA_HOME="/usr/java/NOM_DU_DOSSIER_COPIÉ"```<br />
8. redémarrer<br />
9. cliquer bouton droit sur un .jar et sélectionner **ouvrir avec** > **autre application**<br />
10. Entrez une commande personnalisée: ```/usr/java/NOM_DU_DOSSIER_COPIÉ/bin/java -jar``` et validez<br />
<br />
Vous avez installé java à la main et associé les .jar à l'exécutable java.<br />
<br />
<br />
Après, ça fonctionne.<br />
<br />
C'est moche d'en arriver là...<br />
<br />
Mais ça fonctionne.<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/normal/bing.png Source image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?RGarEg">Permalink</a>)Pierre-Yves Revaz ☀ sur Twitter : Le truc !https://warriordudimanche.net/shaarli/?p68hzw2017-07-29T13:57:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/pierre-yves-revaz-sur-twitter-le-truc-DFugFvuWsAAtlm7.jpg) <br />
Mouhouhaha !<br />
C'est trop géniaaaaal !Source image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?p68hzw">Permalink</a>)Reinforcing Heavy Frame Corners/Joints: 5 Steps (with Pictures)https://warriordudimanche.net/shaarli/?J0TXOw2017-06-26T17:52:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/reinforcing-heavy-frame-corners-joints-5-steps-with-pictures-FW8KFZPJ48Q1JU3.SMALL.jpg) <br />
Pas con ça ! Utiliser des fers à béton avec de la colle comme cheville sur des poutres/bastaings etc devant supporter d'importants efforts mécaniques oO<br />
<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/xbig/likeaboss.jpg Source image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?J0TXOw">Permalink</a>)Contrer une agression verbale, c’est simple comme la dialectique ! – Elixir De viehttps://warriordudimanche.net/shaarli/?K_y_qg2017-06-06T12:24:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/contrer-une-agression-verbale-cest-simple-comme-la-dialectique-elixir-de-vie-oui_mais2.jpg) <br />
Il s'agit plus d'une évocation que d'un tutoriel. <br />
Toutefois, quand il s'agit de désamorcer une attaque verbale, l'inattendu est effectivement très utile: plutôt que d'avoir la première réponse ou réaction qui vient à l'esprit, que votre "agresseur" attend, rétorquer par une chose qu'il n'attend pas... l'humour est très bon dans la plupart des cas.<br />
<br />
Un petit truc qui fonctionne bien, qui entre dans la partie surenchère du billet, c'est d'éviter de se défendre ou de se justifier et d'aller dans le sens de l'adversaire: au lieu de dire"non, mais..." dire plutôt "oui, t'as carrément raison" et enchaîner en poussant la logique à l'absurde.<br />
Je conseille le film [oui mais](http://www.allocine.fr/film/fichefilm_gen_cfilm=29325.html) dans lequel Jugnot explique très bien cette méthode de défense.<br />
<br />
Via SebsauvageSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?K_y_qg">Permalink</a>)Vulnérabilité Target="_blank" et windows.openerhttps://warriordudimanche.net/shaarli/?Y21vdw2017-04-25T12:39:00+02:00![titre](http://warriordudimanche.net/data/medias/http-chats-montmartre-free-fr-imgChat_poisson_web.jpg) <br />
Donc, il suffit d'ajouter à tous les liens sortant:<br />
<br />
<br />
```<br />
rel="noopener noreferrer"<br />
```<br />
<br />
et pour le js, quand on utilise window.open<br />
<br />
<br />
```<br />
var newWnd = window.open();<br />
newWnd.opener = null<br />
<br />
```<br />
<br />
<br />
<br />
Faut que j'y pense...<br />
Source image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?Y21vdw">Permalink</a>)Retour d'expérience : bonnes pratiques à appliquer en cas de déréférencement Google (et autres) | bioinfo-fr.nethttps://warriordudimanche.net/shaarli/?sNwN9A2017-04-06T10:48:00+02:00Intéressant: hop, coudification, merci copain !<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?sNwN9A">Permalink</a>)Les super pouvoirs des navigateurs mobiles - Stéphanie Walter : design et mobile, UX et UI Stéphanie Walter : design et mobile, UX et UIhttps://warriordudimanche.net/shaarli/?GS8jzQ2017-01-13T13:16:00+01:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/les-super-pouvoirs-des-navigateurs-mobiles-stephanie-walter-design-et-mobile-ux-et-ui-stephanie-walter-design-et-mobile-ux-et-ui-images) <br />
Très intéressant... à lire plus tard.Via SerendipitySource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?GS8jzQ">Permalink</a>)Utiliser un proxy pour les mises à jourhttps://warriordudimanche.net/shaarli/?f1i9ag2017-01-10T11:01:00+01:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/utiliser-un-proxy-pour-les-mises-a-jour-maxresdefault.jpg) <br />
Donc, dans linux mint, quand on veut pouvoir faire les maj au boulot via un proxy, renseigner le proxy dans les paramètres réseau ne suffit pas, il faut également le faire dans Synaptic...<br />
<br />
...<br />
<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/normal/corbeau.pngSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?f1i9ag">Permalink</a>)How to Install LAMP Server on Linux Mint 18 With One Commandhttps://warriordudimanche.net/shaarli/?plRguw2016-11-27T18:28:00+01:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/how-to-install-lamp-server-on-linux-mint-18-with-one-command-gloria.png) <br />
Bon, je galérais lors de l'install de php sur mint 18...<br />
```sudo apt-get install lamp-server^ -y```<br />
Ben ça marche.<br />
../.http://warriordudimanche.net/plugins/WDD_replace/img/xbig/classe.jpg Source image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?plRguw">Permalink</a>)10 principles for smooth web animations – Gyroscopehttps://warriordudimanche.net/shaarli/?t95-_A2016-11-24T17:52:00+01:00![titre](http://warriordudimanche.net/data/medias/images/_WEBLINKS/10-principles-for-smooth-web-animations-gyroscope-motion.png) <br />
Traduction rapide pour mémoire de ces 10 principes pour des animations fluides...<br />
<br />
<br />
1. Ne change jamais d'autres propriétés que **_opacity_** ou **_transform_** ! (même si ça a l'air chouette, ne le fais pas !)<br />
2. Cache les objets avec **_opacity:0_** et **_pointer-events: none_** pour éviter les rendus inutiles<br />
3. N'anime pas tout en **_même temps_** (à la place fais des chorégraphies: déclenche une série d'animations par l'ajout d'une classe, chaque animation ayant son propre **_transition-delay_**).<br />
4. Augmente les transition-delay pour créer un effet de chorégraphie.<br />
5. Utilise un modificateur de délai global pour créer tes animations en slow motion puis accélérer ensuite<br />
6. Filme tes animations pour avoir une perspective à la troisième personne.<br />
7. L'activité réseau peut ralentir les animations: pense au preload or temporise les grosses requêtes HTTP<br />
8. N'attache pas d'animations au défilement de page et évite de créer tes propres scrollbars<br />
9. Teste sur mobile tôt et souvent.<br />
10. Teste sur des appareils différents.<br />
<br />
<br />
Via Kalvn's linksSource image<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?t95-_A">Permalink</a>)Touit du Lundi 3 Octobre 2016 à 13:27:11: con de javascript !https://warriordudimanche.net/shaarli/?GV9GIA2016-10-03T13:27:00+02:00![titre](http://warriordudimanche.net/data/medias/images/_TOUITS/touit-du-lundi-3-octobre-2016-a-13-27-11-con-de-javascript-nocomment.jpg) <br />
Ce moment où tu perds 45 minutes à chercher à comprendre pourquoi l'événement *«drop»* ne se déclenche pas pour finalement apprendre par hasard que seul un objet ayant un eventlistener sur *«dragover»* peut recevoir un *«drop»*...<br /><br />
*fuckingkiddingme* *facepalm*<br />
<br />
*repost automatique de mon site...*<br>(<a href="https://warriordudimanche.net/shaarli/?GV9GIA">Permalink</a>)Si Chromium freeze ...https://warriordudimanche.net/shaarli/?3oIpGg2016-06-15T17:50:12+02:00Sous Mint 17.3, il m'arrivait régulièrement d'avoir des freezes et des affichages tout en fantaisie avec Chromium; il me fallait carrément rebooter et de toutes façons, au bout d'un moment, le système décidait de mettre fin à ses jours.<br />
En fait, la solution est toute bête: décocher la case *utiliser l'accélération matérielle*<br />
oO<br />
<br />
Franchement, une case accélération matérielle qui le fait ralentir jusqu'à ce que mort s'en suive, c'est assez cocasse ^^<br>(<a href="https://warriordudimanche.net/shaarli/?3oIpGg">Permalink</a>)Multitasking is Killing Your Brain — [via Adrian Gaudebert]https://warriordudimanche.net/shaarli/?nrw6eg2016-06-14T10:45:14+02:00C'est exactement ça... quand tu fais plusieurs tâches à la fois :<br />
1. tu n'es jamais satisfait du résultat et tu as l'impression de n'avoir pas avancé (puisque rien ne se termine vraiment)<br />
2. la qualité et l'efficacité du résultat ne sauraient être que moindre (normal)<br />
3. ça fatigue tellement le cerveau, qu'on perd des capacités cognitives, parfois de façon durable (il suffit de voir dans quel état on est en fin de journée)<br />
4. ça pousse à la dépression et au burnout ( http://www.warriordudimanche.net/article223/comment-j-ai-fait-un-burnout ) <br />
<br />
Ce qu'il faut ajouter, c'est que la pression de notre environnement est importante et nous pousse à la multitâchisation de nos existences: on doit faire plus, mieux, plus vite etc.<br />
Sans penser à mal, l'entourage passe son temps à demander des choses qui viennent s'accumuler sur la todo provoquant du stress, de la frustration, de la fatigue et à terme la dépression.<br />
<br />
# Signes alarmants:<br />
1. «j'ai l'impression de bosser tout le temps»<br />
2. «je n'ai plus de temps pour moi»<br />
3. «je suis épuisé dès le réveil alors que je me suis endormi comme une masse tôt hier»<br />
4. «il m'arrive de me mettre en colère quand quelqu'un vient me demander quelque-chose dans la journée, même si ce qu'il demande est objectivement insignifiant»<br />
5. «j'ai des douleurs ou des désagréments chroniques» (mots de tête, de dos, de ventre, nausées, fatigue, crampes, perte d'appétit etc)<br />
6. «je n'ai plus envie de rien, pas même des choses qui me passionnent d'habitude»<br />
7. «j'ai du mal à supporter mon entourage habituel»<br />
8. «j'ai l'impression que tout repose sur mes épaules et que sans moi, les autres ne s'en sortiraient pas»<br />
<br />
# Comment agir pour éviter l'excès:<br />
1. savoir dire non et refuser des choses dont on sait qu'on n'aura pas le temps de les faire, même si la personne cherche à vous culpabiliser: TRES IMPORTANT ! (vous êtes plus important qu'une tâche à faire ! Si quelqu'un vous culpabilise, retournez lui l'effet en lui disant que vous vous sentez fragile et en vous étonnant qu'il se soucie aussi peu de votre santé.)<br />
2. savoir dire oui mais en imposant des délais ou des conditions raisonnables ou en priorisant les tâches. Quand quelqu'un vient vous voir pour ajouter une tâche, dites-lui: «je suis déjà en train de faire ce que tu m'as demandé avant... quelle tâche est plus urgente sachant qu'il me faut au moins xx heures pour la mener à bien ?»<br />
Quand on dit oui et qu'on impose ses conditions, on y gagne sur tous les points: on se montre accessible mais également ferme et déterminé.<br />
3. savoir reconnaître ses limites: TRES IMPORTANT AUSSI dans un univers où tout le monde doit être surhumain. <br />
«je suis fatigué, j'en ai marre, je n'y arriverai pas: aujourd'hui je me repose.»<br />
4. savoir reconnaître les tâches RÉELLEMENT URGENTES: comment les reconnaître ? facile avec le test du «et alors ?»<br />
>«- va faire les courses et dépose ça à la poste...<br />
>- non, je suis fatigué, j'irai demain, j'ai un creux en fin d'aprème.<br />
>- mais il n'y a plus rien au frigo et ce paquet ne partira que demain alors que je voulais le poster de suite.<br />
>- et alors ?<br />
>- qu'est-ce qu'on fait à manger ce soir ?<br />
>- des oeufs durs mayo et des frites... des pâtes, du riz, des lentilles... ce qu'on veut.<br />
>- c'est pas terrible.../pas équilibré... etc.<br />
>- et alors ?»<br />
etc...<br />
Si les conséquences de la non réalisation immédiate de la tâche ne sont pas *GRAVES* alors vous avez le DROIT de vous reposer/flâner/glander/procrastiner à la place.<br />
5. savoir ne rien faire d'utile, voire ne rien faire du tout: si vous n'y arrivez pas sans penser aux tâches qui vous attendent ou sans culpabiliser, c'est qu'il y a un problème... forcez-vous de temps en temps.<br />
6. savoir faire de vrais pauses de temps en temps: les pauses sont NÉCESSAIRES pour la SURVIE à long terme... ce n'est pas pour rien que le monde du travail en ménage encore quelques-unes (et encore): c'est simplement vital.<br />
<br />
J'ai sans doute oublié des choses, mais il me semblait nécessaire de redire tout ce que j'ai appris à mes dépends et par la bouche des médecins et psy qui m'ont reçu, écouté et soigné...<br />
<br />
Quand la limite est franchie, elle l'est pour longtemps: après un burnout, on n'est plus jamais le même.<br />
Prenez soin de vous !<br />
<br />
;-)<br>(<a href="https://warriordudimanche.net/shaarli/?nrw6eg">Permalink</a>)Inkskape et les bugs bloquants et boîtes de dialogue infinies lors de copier-coller...https://warriordudimanche.net/shaarli/?7Jb05g2016-06-13T10:07:21+02:00Comme je ne suis sans doute pas le seul dans ce cas, je pose la solution ici:<br />
Avant de vous lancer dans des réinstallations et des vérifications de version, vérifiez d'abord que vous ne lancez pas inkscape en même temps que <br />
- FreeRapid Downloader<br />
- jDownloader<br />
- xfce4-clipman-plugin 1.1.3<br />
- Netbeans<br />
- xfce4-settings-helper (Xfce 4.8)<br />
<br />
En effet, ces logiciels utilisant la détection du presse-papier, ils perturbent le copier coller dans inkscape...<br />
Il suffit donc de les fermer le temps de l'utiliser.<br />
<br />
De rien ^^<br>(<a href="https://warriordudimanche.net/shaarli/?7Jb05g">Permalink</a>)Remove forced yellow input background in Chrome / Webagilityhttps://warriordudimanche.net/shaarli/?ye1GDQ2016-06-13T08:46:36+02:00Con de Chromium avec son fond jaune merdique sur les input pré remplis ! <br />
Un "bug" de 2008, quoi, chier...<br />
Donc, un palliatif est d'utiliser un box shadow de la couleur qu'on veut:<br />
```<br />
input:-webkit-autofill {<br />
-webkit-box-shadow: 0 0 0px 1000px white inset;<br />
}<br />
```<br />
<br />
Par contre, comme le dit l'auteur : « if you desperately need transparent background color you're doomed»<br>(<a href="https://warriordudimanche.net/shaarli/?ye1GDQ">Permalink</a>)joshbuchea/HEAD: A list of everything that could go in the <head> of your documenthttps://warriordudimanche.net/shaarli/?1xcQ7w2016-06-11T10:01:07+02:00Je l'avais paumé, je m'en fais une copie là... [via la river]<br />
<br />
# HEAD<br />
<br />
A list of everything that could go in the `<head>` of your document<br />
<br />
## Table of Contents<br />
<br />
- [Recommended Minimum](#recommended-minimum)<br />
- [Elements](#elements)<br />
- [Meta](#meta)<br />
- [Meta: Not Recommended](#meta-not-recommended)<br />
- [Link](#link)<br />
- [Link: Not Recommended](#link-not-recommended)<br />
- [Favicons](#favicons)<br />
- [Social](#social)<br />
- [Facebook / Open Graph](#facebook--open-graph)<br />
- [Facebook / Instant Articles](#facebook--instant-articles)<br />
- [Twitter](#twitter)<br />
- [Google+ / Schema.org](#google--schemaorg)<br />
- [OEmbed](#oembed)<br />
- [Browsers / Platforms](#browsers--platforms)<br />
- [Apple iOS](#apple-ios)<br />
- [Apple Safari](#apple-safari)<br />
- [Google Android](#google-android)<br />
- [Google Chrome](#google-chrome)<br />
- [Microsoft Internet Explorer](#microsoft-internet-explorer)<br />
- [Microsoft Internet Explorer: Legacy, Do Not Use!](#microsoft-internet-explorer-legacy-do-not-use)<br />
- [Browsers (Chinese)](#browsers-chinese)<br />
- [360 Browser](#360-browser)<br />
- [QQ Mobile Browser](#qq-mobile-browser)<br />
- [UC Mobile Browser](#uc-mobile-browser)<br />
- [App Links](#app-links)<br />
- [Notes](#notes)<br />
- [Performance](#performance)<br />
- [Other Resources](#other-resources)<br />
- [Related Projects](#related-projects)<br />
- [Other Formats](#other-formats)<br />
- [Translations](#translations)<br />
- [Contributing](#contributing)<br />
- [Author](#author)<br />
- [License](#license)<br />
<br />
## Recommended Minimum<br />
<br />
Below are the essential tags for basic, minimalist websites:<br />
<br />
```html<br />
<meta charset="utf-8"><br />
<meta http-equiv="x-ua-compatible" content="ie=edge"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><br />
<title>Page Title</title><br />
```<br />
<br />
## Elements<br />
<br />
``` html<br />
<!-- Document Title --><br />
<title>Page Title</title><br />
<br />
<!-- Base URL to use for all relative URLs contained within the document --><br />
<base href="https://example.com/page.html"><br />
<br />
<!-- External CSS --><br />
<link rel="stylesheet" href="styles.css"><br />
<br />
<!-- In-document CSS --><br />
<style><br />
/* ... */<br />
</style><br />
<br />
<!-- JavaScript --><br />
<script src="script.js"></script><br />
```<br />
<br />
## Meta<br />
<br />
``` html<br />
<meta charset="utf-8"><br />
<meta http-equiv="x-ua-compatible" content="ie=edge"><br />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><br />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><br />
<br />
<!-- Allows control over where resources are loaded from --><br />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"><br />
<!-- Place as early in the document as possible --><br />
<!-- Only applies to content below this tag --><br />
<br />
<!-- Name of web application (only should be used if the website is used as an app) --><br />
<meta name="application-name" content="Application Name"><br />
<br />
<!-- Short description of the page (limit to 150 characters) --><br />
<!-- In *some* situations this description is used as a part of the snippet shown in the search results. --><br />
<meta name="description" content="A description of the page"><br />
<br />
<!-- Control the behavior of search engine crawling and indexing --><br />
<meta name="robots" content="index,follow,noodp"><!-- All Search Engines --><br />
<meta name="googlebot" content="index,follow"><!-- Google Specific --><br />
<br />
<!-- Tells Google not to show the sitelinks search box --><br />
<meta name="google" content="nositelinkssearchbox"><br />
<br />
<!-- Tells Google not to provide a translation for this page --><br />
<meta name="google" content="notranslate"><br />
<br />
<!-- Verify ownership for Google Search Console --><br />
<meta name="google-site-verification" content="verification_token"><br />
<br />
<!-- Used to name software used to build the website (i.e. - Wordpress, Dreamweaver) --><br />
<meta name="generator" content="program"><br />
<br />
<!-- Short description of your sites subject --><br />
<meta name="subject" content="your website's subject"><br />
<br />
<!-- Very short sentence describing the purpose of the website --><br />
<meta name="abstract" content=""><br />
<br />
<!-- Describes the topic of the website --><br />
<meta name="topic" content=""><br />
<br />
<!-- Brief summary of the company or purpose of the website --><br />
<meta name="summary" content=""><br />
<br />
<!-- A deprecated tag that does the same as the keywords meta tag --><br />
<meta name="classification" content="business"><br />
<br />
<!-- Full domain name or web address --><br />
<meta name="url" content="https://example.com/"><br />
<br />
<!-- Does the same as URL, older and not supported --><br />
<meta name="identifier-URL" content="https://example.com/"><br />
<br />
<meta name="directory" content="submission"><br />
<br />
<!-- Does the same function as the keywords tag --><br />
<meta name="category" content=""><br />
<br />
<!-- Makes sure your website shows up in all countries and languages --><br />
<meta name="coverage" content="Worldwide"><br />
<br />
<!-- Does the same as the coverage tag --><br />
<meta name="distribution" content="Global"><br />
<br />
<!-- Gives a general age rating based on sites content --><br />
<meta name="rating" content="General"><br />
<br />
<!-- Allows control over how referrer information is passed --><br />
<meta name="referrer" content="never"><br />
<br />
<!-- Disable automatic detection and formatting of possible phone numbers --><br />
<meta name="format-detection" content="telephone=no"><br />
<br />
<!-- Geo tags --><br />
<meta name="ICBM" content="latitude, longitude"><br />
<meta name="geo.position" content="latitude;longitude"><br />
<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" --><br />
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" --><br />
```<br />
<br />
- [Meta tags that Google understands](https://support.google.com/webmasters/answer/79812?hl=en)<br />
- [WHATWG Wiki: MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions)<br />
- [ICBM on Wikipedia](https://en.wikipedia.org/wiki/ICBM_address#Modern_use)<br />
- [Geotagging on Wikipedia](https://en.wikipedia.org/wiki/Geotagging#HTML_pages)<br />
<br />
### Meta: Not Recommended<br />
Below are the meta attributes which are not recommended for use:<br />
<br />
```html<br />
<!-- Used to declare the document language, but not well supported. Better to use <html lang=""> --><br />
<meta name="language" content="en"><br />
<br />
<!-- Google disregards & Bing considers it an indicator of spam --><br />
<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces"><br />
<br />
<!-- No evidence of current use in any search engines --><br />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm"><br />
<br />
<!-- Provides an easy way for spam bots to harvest email addresses --><br />
<meta name="reply-to" content="email@example.com"><br />
<br />
<!-- Better to use <link rel="author"> or humans.txt file --><br />
<meta name="author" content="name, email@example.com"><br />
<meta name="designer" content=""><br />
<meta name="owner" content=""><br />
<br />
<!-- Tells search bots to revisit the page after a period. This is not supported because most Search Engines now use random intervals for re-crawling a webpage --><br />
<meta name="revisit-after" content="7 days"><br />
<br />
<!-- Sends user to a new URL after a certain amount of time --><br />
<!-- The W3C recommends that this tag not be used. Google recommends using a server-side 301 redirect instead. --><br />
<meta http-equiv="refresh" content="300; url=https://example.com/"><br />
<br />
<!-- Cache Control --><br />
<!-- Better to configure cache control server side --><br />
<meta http-equiv="Expires" content="0"><br />
<meta http-equiv="Pragma" content="no-cache"><br />
<meta http-equiv="Cache-Control" content="no-cache"><br />
```<br />
<br />
## Link<br />
<br />
``` html<br />
<!-- Helps prevent duplicate content issues --><br />
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"><br />
<br />
<!-- Used to be included before the icon link, but is deprecated and no longer is used --><br />
<link rel="shortlink" href="https://example.com/?p=42"><br />
<br />
<!-- Links to an AMP HTML version of the current document --><br />
<link rel="amphtml" href="https://example.com/path/to/amp-version.html"><br />
<br />
<!-- Points to a CSS stylesheet --><br />
<link rel="stylesheet" href="https://example.com/styles.css"><br />
<br />
<!-- Links to a JSON file that specifies "installation" credentials for web applications --><br />
<link rel="manifest" href="manifest.json"><br />
<br />
<!-- Links to the author of the document --><br />
<link rel="author" href="humans.txt"><br />
<br />
<!-- Refers to a copyright statement that applies to the links context --><br />
<link rel="copyright" href="copyright.html"><br />
<br />
<!-- Gives a reference to a location in your document that may be in another language --><br />
<link rel="alternate" href="https://es.example.com/" hreflang="es"><br />
<br />
<!-- Gives information about an author or another person --><br />
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html"><br />
<link rel="me" href="mailto:name@example.com"><br />
<link rel="me" href="sms:+15035550125"><br />
<br />
<!-- Links to a document that contains an archive link to the current document --><br />
<link rel="archives" href="https://example.com/2003/05/" title="May 2003"><br />
<br />
<!-- Links to top level resource in an hierarchical structure --><br />
<link rel="index" href="https://example.com/" title="DeWitt Clinton"><br />
<br />
<!-- Gives the starting point of the document --><br />
<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1"><br />
<br />
<!-- Leads to the preceding resource of the sequence the current document is in --><br />
<link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention."><br />
<br />
<!-- Gives a self reference - useful when the document has multiple possible references --><br />
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"><br />
<br />
<!-- The first, next, previous, and last documents in a series of documents, respectively --><br />
<link rel="first" href="https://example.com/atomFeed.php"><br />
<link rel="next" href="https://example.com/atomFeed.php?page=4"><br />
<link rel="previous" href="https://example.com/atomFeed.php?page=2"><br />
<link rel="last" href="https://example.com/atomFeed.php?page=147"><br />
<br />
<!-- Used when using a 3rd party service to maintain a blog --><br />
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"><br />
<br />
<!-- Forms an automated comment when another wordpress blog links to your wordpress blog or post --><br />
<link rel="pingback" href="https://example.com/xmlrpc.php"><br />
<br />
<!-- Notifies a url when you link to it on your site --><br />
<link rel="webmention" href="https://example.com/webmention"><br />
<br />
<!-- Loads in an external HTML file into the current HTML file --><br />
<link rel="import" href="component.html"><br />
<br />
<!-- Open Search --><br />
<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"><br />
<br />
<!-- Feeds --><br />
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"><br />
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"><br />
<br />
<!-- Prefetching, preloading, prebrowsing --><br />
<link rel="dns-prefetch" href="//example.com/"><br />
<link rel="preconnect" href="https://www.example.com/"><br />
<link rel="prefetch" href="https://www.example.com/"><br />
<link rel="prerender" href="https://example.com/"><br />
<link rel="subresource" href="styles.css"><br />
<link rel="preload" href="image.png"><br />
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ --><br />
```<br />
<br />
### Link: Not Recommended<br />
Below are the link relations which are not recommended for use:<br />
<br />
```html<br />
<link rel="shortcut icon" href="path/to/favicon.ico"><br />
```<br />
<br />
### Favicons<br />
<br />
``` html<br />
<!-- For IE 10 and below --><br />
<!-- No link, just place a file called favicon.ico in the root directory --><br />
<br />
<!-- For IE 11, Chrome, Firefox, Safari, Opera --><br />
<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png"><br />
<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png"><br />
<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png"><br />
<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png"><br />
<link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png"><br />
<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ --><br />
```<br />
<br />
- [All About Favicons (And Touch Icons)](https://bitsofco.de/all-about-favicons-and-touch-icons/)<br />
- [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)<br />
<br />
## Social<br />
<br />
### Facebook / Open Graph<br />
<br />
``` html<br />
<meta property="fb:app_id" content="123456789"><br />
<meta property="og:url" content="https://example.com/page.html"><br />
<meta property="og:type" content="website"><br />
<meta property="og:title" content="Content Title"><br />
<meta property="og:image" content="https://example.com/image.jpg"><br />
<meta property="og:description" content="Description Here"><br />
<meta property="og:site_name" content="Site Name"><br />
<meta property="og:locale" content="en_US"><br />
<meta property="article:author" content=""><br />
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup --><br />
<!-- Open Graph: http://ogp.me/ --><br />
```<br />
<br />
- [Facebook Open Graph Markup](https://developers.facebook.com/docs/sharing/webmasters#markup)<br />
- [Open Graph protocol](http://ogp.me/)<br />
<br />
### Facebook / Instant Articles<br />
<br />
``` html<br />
<meta charset="utf-8"><br />
<meta property="op:markup_version" content="v1.0"><br />
<br />
<!-- The URL of the web version of your article --><br />
<link rel="canonical" href="http://example.com/article.html"><br />
<br />
<!-- The style to be used for this article --><br />
<meta property="fb:article_style" content="myarticlestyle"><br />
```<br />
<br />
- [Facebook Instant Articles: Creating Articles](https://developers.facebook.com/docs/instant-articles/guides/articlecreate)<br />
- [Instant Articles: Format Reference](https://developers.facebook.com/docs/instant-articles/reference)<br />
<br />
### Twitter<br />
<br />
``` html<br />
<meta name="twitter:card" content="summary"><br />
<meta name="twitter:site" content="@site_account"><br />
<meta name="twitter:creator" content="@individual_account"><br />
<meta name="twitter:url" content="https://example.com/page.html"><br />
<meta name="twitter:title" content="Content Title"><br />
<meta name="twitter:description" content="Content description less than 200 characters"><br />
<meta name="twitter:image" content="https://example.com/image.jpg"><br />
<!-- More info: https://dev.twitter.com/cards/getting-started --><br />
<!-- Validate: https://dev.twitter.com/docs/cards/validation/validator --><br />
```<br />
<br />
- [Twitter Cards: Getting Started Guide](https://dev.twitter.com/cards/getting-started)<br />
- [Twitter Card Validator](https://dev.twitter.com/docs/cards/validation/validator)<br />
<br />
### Google+ / Schema.org<br />
<br />
``` html<br />
<link href="https://plus.google.com/+YourPage" rel="publisher"><br />
<meta itemprop="name" content="Content Title"><br />
<meta itemprop="description" content="Content description less than 200 characters"><br />
<meta itemprop="image" content="https://example.com/image.jpg"><br />
```<br />
<br />
### OEmbed<br />
<br />
``` html<br />
<link rel="alternate" type="application/json+oembed"<br />
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"<br />
title="oEmbed Profile: JSON"><br />
<link rel="alternate" type="text/xml+oembed"<br />
href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"<br />
title="oEmbed Profile: XML"><br />
```<br />
<br />
- [oEmbed format](http://oembed.com/)<br />
<br />
## Browsers / Platforms<br />
<br />
### Apple iOS<br />
<br />
``` html<br />
<!-- Smart App Banner --><br />
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"><br />
<br />
<!-- Disable automatic detection and formatting of possible phone numbers --><br />
<meta name="format-detection" content="telephone=no"><br />
<br />
<!-- Add to Home Screen --><br />
<meta name="apple-mobile-web-app-capable" content="yes"><br />
<meta name="apple-mobile-web-app-status-bar-style" content="black"><br />
<meta name="apple-mobile-web-app-title" content="App Title"><br />
<br />
<!-- Touch Icons --><br />
<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png"><br />
<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png"><br />
<!-- In most cases, one 180×180px touch icon in the head is enough --><br />
<!-- If you use art-direction and/or want to have different content for each device, you can add more touch icons --><br />
<br />
<!-- Startup Image --><br />
<link rel="apple-touch-startup-image" href="path/to/startup.png"><br />
<br />
<!-- More info: https://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html --><br />
```<br />
<br />
- [Apple Meta Tags](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)<br />
<br />
### Apple Safari<br />
<br />
```html<br />
<!-- Pinned Site --><br />
<link rel="mask-icon" href="path/to/icon.svg" color="red"><br />
```<br />
<br />
### Google Android<br />
<br />
``` html<br />
<meta name="theme-color" content="#E64545"><br />
<br />
<!-- Add to homescreen --><br />
<meta name="mobile-web-app-capable" content="yes"><br />
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen --><br />
```<br />
<br />
### Google Chrome<br />
<br />
``` html<br />
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"><br />
<br />
<!-- Disable translation prompt --><br />
<meta name="google" value="notranslate"><br />
```<br />
<br />
### Microsoft Internet Explorer<br />
<br />
``` html<br />
<meta http-equiv="x-ua-compatible" content="ie=edge"><br />
<meta http-equiv="cleartype" content="on"><br />
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible"><br />
<br />
<!-- Disable link highlighting on IE 10 on Windows Phone (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --><br />
<meta name="msapplication-tap-highlight" content="no"><br />
<br />
<!-- Pinned sites (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --><br />
<meta name="application-name" content="Contoso Pinned Site Caption"><br />
<meta name="msapplication-tooltip" content="Example Tooltip Text"><br />
<meta name="msapplication-starturl" content="/"><br />
<br />
<meta name="msapplication-config" content="http://example.com/browserconfig.xml"><br />
<br />
<meta name="msapplication-allowDomainApiCalls" content="true"><br />
<meta name="msapplication-allowDomainMetaTags" content="true"><br />
<meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml"><br />
<meta name="msapplication-navbutton-color" content="#FF3300"><br />
<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile"><br />
<meta name="msapplication-square150x150logo" content="path/to/logo.png"><br />
<meta name="msapplication-square310x310logo" content="path/to/largelogo.png"><br />
<meta name="msapplication-square70x70logo" content="path/to/tinylogo.png"><br />
<meta name="msapplication-wide310x150logo" content="path/to/widelogo.png"><br />
<meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico"><br />
<meta name="msapplication-task-seperator" content="1"><br />
<meta name="msapplication-TileColor" content="#FF3300"><br />
<meta name="msapplication-TileImage" content="path/to/tileimage.jpg"><br />
<meta name="msapplication-window" content="width=1024;height=768"><br />
```<br />
<br />
### Microsoft Internet Explorer: Legacy, Do Not Use!<br />
<br />
``` html<br />
<!-- Disable the image toolbar when you mouse over images in IE 6 (https://msdn.microsoft.com/en-us/library/ms532986(v=vs.85).aspx) --><br />
<meta http-equiv="imagetoolbar" content="no"><br />
<br />
<!-- Disable Windows theming to form inputs/buttons (https://support.microsoft.com/en-us/kb/322240) --><br />
<meta name="MSThemeCompatible" content="no"><br />
<br />
<!-- Disable a feature that only appeared on IE 6 beta (https://stackoverflow.com/q/2167301) --><br />
<meta name="MSSmartTagsPreventParsing" content="true"><br />
<br />
<!-- Interpage Transitions (https://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx) --><br />
<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=2)"><br />
<meta http-equiv="Page-Exit" content="revealtrans(duration=3,transition=12)"><br />
<meta http-equiv="Site-Enter" content="revealtrans(duration=2,transition=2)"><br />
<meta http-equiv="Site-Exit" content="revealtrans(duration=3,transition=12)"><br />
```<br />
<br />
## App Links<br />
<br />
``` html<br />
<!-- iOS --><br />
<meta property="al:ios:url" content="applinks://docs"><br />
<meta property="al:ios:app_store_id" content="12345"><br />
<meta property="al:ios:app_name" content="App Links"><br />
<!-- Android --><br />
<meta property="al:android:url" content="applinks://docs"><br />
<meta property="al:android:app_name" content="App Links"><br />
<meta property="al:android:package" content="org.applinks"><br />
<!-- Web Fallback --><br />
<meta property="al:web:url" content="http://applinks.org/documentation"><br />
<!-- More info: http://applinks.org/documentation/ --><br />
```<br />
<br />
- [App Links Docs](http://applinks.org/documentation/)<br />
<br />
## Browsers (Chinese)<br />
<br />
### 360 Browser<br />
<br />
``` html<br />
<!-- select rendering engine in order --><br />
<meta name="renderer" content="webkit|ie-comp|ie-stand"><br />
```<br />
<br />
### QQ Mobile Browser<br />
<br />
``` html<br />
<!-- Locks the screen into the specified orientation --><br />
<meta name="x5-orientation" content="landscape/portrait"><br />
<!-- Display this page in fullscreen --><br />
<meta name="x5-fullscreen" content="true"><br />
<!-- Page will be displayed in "application mode"(fullscreen,etc.) --><br />
<meta name="x5-page-mode" content="app"><br />
```<br />
<br />
### UC Mobile Browser<br />
<br />
``` html<br />
<!-- Locks the screen into the specified orientation --><br />
<meta name="screen-orientation" content="landscape/portrait"><br />
<!-- Display this page in fullscreen --><br />
<meta name="full-screen" content="yes"><br />
<!-- UC browser will display images even if in "text mode" --><br />
<meta name="imagemode" content="force"><br />
<!-- Page will be displayed in "application mode"(fullscreen,forbiding gesture, etc.) --><br />
<meta name="browsermode" content="application"><br />
<!-- Disabled the UC browser's "night mode" in this page --><br />
<meta name="nightmode" content="disable"><br />
<!-- Simplify the page to reduce data transfer --><br />
<meta name="layoutmode" content="fitscreen"><br />
<!-- Disable the UC browser's feature of "scaling font up when there are many words in this page" --><br />
<meta name="wap-font-scale" content="no"><br />
```<br />
<br />
- [UC Browser Docs](http://www.uc.cn/download/UCBrowser_U3_API.doc)<br />
<br />
## Notes<br />
<br />
### Performance<br />
Moving the `href` attribute to the beginning of an element improves compression when GZIP is enabled, because the `href` attribute is used in `a`, `base` and `link` tags.<br />
<br />
Example:<br />
``` html<br />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"><br />
```<br />
<br />
## Other Resources<br />
<br />
- [HTML5 Boilerplate Docs: The HTML](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/html.md)<br />
- [HTML5 Boilerplate Docs: Extend and customize](https://github.com/h5bp/html5-boilerplate/blob/master/dist/doc/extend.md)<br />
<br />
## Related Projects<br />
<br />
- [Atom HTML Head Snippets](https://github.com/joshbuchea/atom-html-head-snippets) - Atom package for `HEAD` snippets<br />
- [Sublime Text HTML Head Snippets](https://github.com/marcobiedermann/sublime-head-snippets) - Sublime Text package for `HEAD` snippets<br />
- [head-it](https://github.com/hemanth/head-it) - CLI interface for `HEAD` snippets<br />
- [vue-head](https://github.com/ktquez/vue-head) - Manipulating the meta information of the `HEAD` tag for Vue.js<br />
<br />
## Other Formats<br />
<br />
- [PDF](https://gitprint.com/joshbuchea/HEAD/blob/master/README.md)<br />
<br />
## Translations<br />
<br />
- [Japanese](http://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html)<br />
- [Russian/Русский](https://github.com/Konfuze/HEAD)<br />
<br />
## Contributing<br />
<br />
Open an issue or a pull request to suggest changes or additions.<br />
<br />
Please follow these steps for pull requests:<br />
- Modify only one tag, or one related set of tags at a time<br />
- Use double quotes on attributes<br />
- Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional<br />
- Consider including a link to documentation that supports your change<br />
<br />
### Contributors<br />
<br />
Check out all the super awesome [contributors](https://github.com/joshbuchea/HEAD/graphs/contributors).<br />
<br />
## Author<br />
<br />
**[Josh Buchea](http://joshbuchea.com/)**<br />
<br />
## License<br />
<br />
[CC0 License](LICENSE)<br />
<br />
![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png "CC0")<br>(<a href="https://warriordudimanche.net/shaarli/?1xcQ7w">Permalink</a>)Comment débloquer un PC dont on aurait perdu le mot de passe administrateur? – Tuxicoman [Liens de WebManiaK]https://warriordudimanche.net/shaarli/?CwSohg2016-06-07T08:35:35+02:00Copie pour mémoire : <br />
# LINUX<br />
<br />
*Au bootloader, appuyer sur « e » pour entrer dans le mode édition.<br />
*Cherchez la ligne qui contient « linux vmlinuz-« . <br />
*Dans cette ligne remplacez « ro » par « rw » et ajouter « init=/bin/bash » à la fin de la ligne.<br />
*Appuyez sur F10 pour démarrer avec ces modifications (temporaires). <br />
*Vous arriverez sur un terminal en root. De là vous pouvez :<br />
1-changer le mot de passe d’un utilisateur existant : passwd TOTO<br />
2-créer un nouvel utilisateur : adduser TOTO<br />
3-supprimer un nouvel utilisateur : deluser TOTO<br />
<br />
# WINDOWS<br />
<br />
*Accédez à la partition Windows depuis un autre système (Live CD/USB linux, Windows Install disk rescue mode).<br />
*Remplacez le fichier C:\windows\system32\utilman.exe par une copie de C:\windows\system32\cmd.exe<br />
*Lorsque vous redémarrerez Windows et arriverez devant l’écran de login, pressez la combinaisons de touches Windows +U sur le clavier.<br />
*Plutôt que de lancer l’outil d’aide pour malvoyants (utilman.exe) c’est une console (cmd.exe) avec les droits root qui s’affichera. <br />
*De là vous pouvez :<br />
1-connaitre la liste des utilisateurs: net user<br />
2-changer le mot de passe d’un utilisateur existant : net user TOTO MOTDEPASSE<br />
3-créer un nouvel utilisateur : net user TOTO MOTDEPASSE /add<br />
4-donner les droits root à un utilisateur : net localgroup Administrators TOTO /add<br />
5-Supprimer un utilisateur :net user NewGuy /delete<br />
<br />
A noter que vous ne pouvez pas utiliser cette technique pour modifier le mot de passe d’un compte en ligne Microsoft (nécessaire pour utiliser le Microsoft Store sur Windows 10). En effet, dans ce cas, c’est Microsoft l’administrateur du compte… Mais on peut heureusement créer un autre compte administrateur en local pour accéder à sa machine quand même !<br />
<br />
# PROTECTION<br />
<br />
Comme vous le voyez, c’est assez facile pour quelqu’un avec un accès physique à la machine de prendre le contrôle de la machine. Pour vous en protéger, il y a plusieurs solutions :<br />
<br />
*Verrouiller la séquence de démarrage ( mettre un mot de passe à GRUB si vous utilisez linux, verrouiller le disque utilisé pour le démarrage le BIOS, mettre un mot de passe au BIOS, verrouiller l’accès à la carte mère par un locker : sinon, on peut remettre les réglages du BIOS par défaut en bougeant un jumper sur la carte mère)<br />
*Chiffrer le contenu du disque. Pas de redémarrage possible sans votre accord. Empêche à priori tout vol de vos données. Mais on peut toujours mettre un keylogger pour récupérer votre mot de passe de chiffrement.<br>(<a href="https://warriordudimanche.net/shaarli/?CwSohg">Permalink</a>)11 'Avconv' Commands to Record, Convert and Extract Videos & Audios from Linux Terminalhttps://warriordudimanche.net/shaarli/?hXEUsw2016-06-02T11:02:05+02:00En complément du post précédent<br>(<a href="https://warriordudimanche.net/shaarli/?hXEUsw">Permalink</a>)Note : transformer des M4A en MP3 avec avconv - Le Hollandais Volanthttps://warriordudimanche.net/shaarli/?vvJz9Q2016-06-02T10:30:32+02:00Merci Timooo ! ;-)<br>(<a href="https://warriordudimanche.net/shaarli/?vvJz9Q">Permalink</a>)software installation - How can I install Adobe AIR? - Ask Ubuntuhttps://warriordudimanche.net/shaarli/?00eFTw2016-05-24T12:44:19+02:00Pour installer Scratch 2 sur un linux, il faut y installer adobeAir d'abord.<br />
Comme ça merde souvent ^^, voici un tuto.<br />
Comme je suis gentil, je vous ai fait un pack:<br />
le dossier: http://bozon.warriordudimanche.net/index.php?f=1574434e03db99,<br />
et le zip qui va bien : http://bozon.warriordudimanche.net/index.php?zipfolder=1574434e03db99<br />
<br />
De rien !<br>(<a href="https://warriordudimanche.net/shaarli/?00eFTw">Permalink</a>)Passing an Array as Arguments, not an Array, in PHP - Stack Overflowhttps://warriordudimanche.net/shaarli/?M9Rx-g2016-05-12T12:27:43+02:00J'aime les gens de stackoverflow... JE-LES-AIME ! <3 Non, mais d'amour... vraiment !<br />
Quelle que soit la connerie que tu cherches à obtenir, si tirée par les cheveux qu'elle soit, illes te trouvent la solution... pis qui marche du premier coup en plus ^^<br />
<br />
Par exemple, pour gérer les templates dans la future version 3 de bozon, je voulais pouvoir insérer des appels à des méthodes dans le code html, afin d'éviter des templates en .php... il me fallait pouvoir passer des paramètres en nombre variable... donc, transformer une chaine de caractères en un appel de méthode paramétrée...<br />
Ben c'est possible ! \o/ <br />
Merci qui, merci StackOverflow !<br>(<a href="https://warriordudimanche.net/shaarli/?M9Rx-g">Permalink</a>)How To Install FreeMind 1.0.1 On Ubuntu 14.04, Linux Mint 17, Elementary OS 0.3, Deepin 2014 And Other Ubuntu 14.04 Derivatives | LinuxG.nethttps://warriordudimanche.net/shaarli/?XhFHRA2016-04-28T16:14:40+02:00ben oui, parce que la version des dépôts est la 0.9<br>(<a href="https://warriordudimanche.net/shaarli/?XhFHRA">Permalink</a>)touches_magiques - Documentation Ubuntu Francophonehttps://warriordudimanche.net/shaarli/?os7vyw2016-04-28T08:44:29+02:00Petit rappel perso (je ne m'en souviens jamais ^^)<br />
<br />
<br />
Redémarrer le serveur graphique: [Alt]+[Ctrl]+[flèche retour arrière]<br />
Passer en mode console pour tuer le processus fou: [Alt]+[Ctrl]+[F1] (revenir au mode graphique: [Alt]+[Ctrl]+[F7]<br />
<br />
<br />
Fn étant une des touches de fonction "F1", "F2", etc... Les touches F1 à F6 sont des consoles, et F7 est le serveur graphique X lui-même.<br />
<br />
Donc [Alt]+[Ctrl]+[F1] pour aller en console et tuer le processus fou, puis [Alt]+[Ctrl]+[F7] pour revenir au mode graphique.<br />
<br />
<br />
SysRq=Imprim Écran<br />
<br />
Redémarrer la machine:<br />
* Alt SysRq s - Synchronise les disques<br />
* Alt SysRq e - Essaie de fermer les processus en envoyant SIGTERM [facultatif]<br />
* Alt SysRq i - Tue tous les processus restant en envoyant SIGKILL [facultatif]<br />
* Alt SysRq u - Démonte les disques<br />
* Alt SysRq b - Redémarre<br />
<br />
<br />
Autres touches:<br />
<br />
* Alt SysRq 0-9: Détermine le niveau de log de la console <br />
* Alt SysRq b: Redémarre l'ordinateur reBoot<br />
* Alt SysRq c: Redémarre via kexec pour faire un crashdump Crashdump<br />
* Alt SysRq e: Envoie un signal de terminaison (SIGTERM) à tous les processus (sauf init) tErm<br />
* Alt SysRq f: Tue le processus qui consomme le plus de mémoire (via oom-killer) <br />
* Alt SysRq i: Envoie un signal de fin (SIGKILL, plus ferme que SIGTERM) à tous les processus (sauf init) kIll<br />
* Alt SysRq k: Tue tous les processus de la console virtuelle courante. Ne fonctionne plus sur Ubuntu 14.04 et versions suivantes. Key<br />
* Alt SysRq l: (L minuscule) Envoie un signal de fin (SIGKILL, plus ferme que SIGTERM) à tous les processus (même init) kilL<br />
* Alt SysRq m: Affiche le contenu actuel de la mémoire Memory<br />
* Alt SysRq o: Éteint le systeme via APM Out<br />
* Alt SysRq p: Affiche sur la console les registres et drapeaux actuels Print<br />
* Alt SysRq r: Bascule la gestion du clavier de mode brute (raw) à XLATE Raw<br />
* Alt SysRq s: Synchronise les disques (tente d'écrire toutes les données non sauvegardées) sync<br />
* Alt SysRq t:<br>(<a href="https://warriordudimanche.net/shaarli/?os7vyw">Permalink</a>)Elliot Chance - It's Impossible to Validate an Email Addresshttps://warriordudimanche.net/shaarli/?3UsUJw2016-04-26T23:08:27+02:00Très intéressant: je retiens surtout l'astuce du + dans l'adresse email.<br />
<br />
«Let's say Bob's emails address is bob@smith.com. A sub-address uses a + to add a label like bob+spam@smith.com. If Bob were to sign up to a site with the latter he would still get the messages as normal to bob@smith.com but now you (or rather, he) can create filters or simply switch off one of the sub-addresses altogether.<br />
<br />
One more interesting tidbit is if you use unique sub-addresses for each of the sites you sign up to you will be able to see when someone, or rather who, sells your email to someone else... Busted!»<br>(<a href="https://warriordudimanche.net/shaarli/?3UsUJw">Permalink</a>)update textContent VS data VS nodeValue · jsPerf - Le Hollandais Volanthttps://warriordudimanche.net/shaarli/?QC5Sew2016-03-08T08:19:18+01:00Zut, flûte et cacaboudin, moi qui utilise régulièrement innerHTML... bon, en même temps, c'est pour changer le texte d'un bouton ou coller le résultat d'une requête ajax dans un div... la différence ne doit pas être flagrante ^^<br />
Bonne astuce toutefois si les opérations doivent être répétées dans des boucles...<br>(<a href="https://warriordudimanche.net/shaarli/?QC5Sew">Permalink</a>)The Linux Mint Blog » Blog Archive » How to upgrade to Linux Mint 17.3https://warriordudimanche.net/shaarli/?VVAXgA2016-01-22T17:56:46+01:00Gestionnaire de mise à jour>Menu Edition>Mettre à jour vers Linux Mint Rosa<br />
C'est plus simple, non ?! ^^<br>(<a href="https://warriordudimanche.net/shaarli/?VVAXgA">Permalink</a>)php - basename() fail when file name start by an accent - Stack Overflowhttps://warriordudimanche.net/shaarli/?hiE_XQ2016-01-16T14:19:44+01:00Tiens, voilà un bug qui vient de me faire paumer un bon moment !<br />
La fonction basename ne reconnaît pas le premier caractère si celui-ci est accentué... la classe.<br />
Bon, donc un petit truc pour pallier à ça:<br />
```<br />
function _basename($file){<br />
$array=explode('/',$file);<br />
if (is_array($array)){<br />
return end($array);<br />
}else{<br />
return $file;<br />
}<br />
} <br />
<br />
```<br>(<a href="https://warriordudimanche.net/shaarli/?hiE_XQ">Permalink</a>)Comment cacher les photos de banques d’images sur Google Images (via Korben)https://warriordudimanche.net/shaarli/?Eb9q0Q2016-01-06T10:50:32+01:00Vous pouvez les filtrer en ajouter ceci dans votre champ de recherche :<br />
<br />
-site:istockphoto.com -site:123rf.com -site:dreamstime.com -site:reflexstock.com -site:photospin.com -site:crestock.com -site:canstockphoto.com -site:visualphotos.com -site:superstock.com -site:depositphotos.com -site:shutterstock.com -site:istockphoto.com -site:fotolia.com -site:agefotostock.com -site:profimedia.com -site:clipartof.com -site:colourbox.com -site:pixmac.com -site:inmagine.com -site:cutcaster.com -site:oneinhundred.com -site:clipartoday.com -site:gettyimages.* -site:yaymicro.com -site:graphicleftovers.com -site:mostphotos.com -site:featurepics.com -site:masterfile.com -site:vectorstock.com -site:bigstockphoto.com<br>(<a href="https://warriordudimanche.net/shaarli/?Eb9q0Q">Permalink</a>)How to Format USB Drive in the Terminal | Unixmenhttps://warriordudimanche.net/shaarli/?tyC55w2015-12-29T19:35:40+01:00Petit blème pour reformatter une sd via gparted.. hop, la ligne de commande te sort de la mouise ! ^^<br>(<a href="https://warriordudimanche.net/shaarli/?tyC55w">Permalink</a>)Kobo Aura: les annotationshttps://warriordudimanche.net/shaarli/?joIDIQ2015-12-26T11:31:50+01:00Pour les possesseurs de la Kobo Aura qui souhaiteraient récupérer directement les citations par livre lu, les fichiers xml contenant ces annotations se trouve dans le dossier Digital Editions/Annotations.<br />
Pour chaque livre commencé, la Kobo crée le fichier annotation et le remplit dès que vous utilisez la fonction.<br />
C'est du XML, donc on s'y retrouve facilement.<br />
L'arborescence dans ce dossier est la même que pour les fichiers de livre à la racine de la Kobo.<br />
Voilà. Allez, bisous !<br>(<a href="https://warriordudimanche.net/shaarli/?joIDIQ">Permalink</a>)Fuego de campamento que no se apaga en toda la noche » No Puedo Creerhttps://warriordudimanche.net/shaarli/?0WE9lw2015-11-12T19:35:53+01:00Un feu de camp auto alimenté qui s'éteint pas, simple et pas bête ^^<br>(<a href="https://warriordudimanche.net/shaarli/?0WE9lw">Permalink</a>)Normal mirror vs 2-way mirror - 9GAGhttps://warriordudimanche.net/shaarli/?ee5pgg2015-10-13T14:31:32+02:00Tiens? Si c'est vrai, c'est bon à savoir: comment discerner une glace sans teint d'un miroir normal...<br>(<a href="https://warriordudimanche.net/shaarli/?ee5pgg">Permalink</a>)Vernir du boishttps://warriordudimanche.net/shaarli/?j71Kuw2015-10-11T19:53:07+02:00Oui, mais il manque une étape ESSENTIELLE quand on vernit du bois neuf: faire lever les fibres !<br />
Avant de vernir, il faut humidifier à l'éponge la surface fraîchement poncée; selon l'essence de bois on verra plus ou moins rapidement certaines fibres gonfler et ressortir... on attend alors le séchage complet, on ponce à nouveau et on refait la même chose.<br />
Si on ne procède pas à la levée des fibres avant de vernir, c'est le vernis qui va faire gonfler le veinage du bois et adieu la belle surface bien lisse.<br>(<a href="https://warriordudimanche.net/shaarli/?j71Kuw">Permalink</a>)What forces layout/reflow. The comprehensive list.https://warriordudimanche.net/shaarli/?bAp1hA2015-09-29T08:59:11+02:00Tout ce qui force le reflow... intéressant.<br />
Je copie là:<br />
<br />
<br />
# What forces layout / reflow<br />
<br />
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or [layout thrashing](http://www.kellegous.com/j/2013/01/26/layout-performance/), and is common performance bottleneck. <br />
<br />
### Element<br />
<br />
##### Box metrics<br />
* `elem.offsetLeft`, `elem.offsetTop`, `elem.offsetWidth`, `elem.offsetHeight`, `elem.offsetParent`<br />
* `elem.clientLeft`, `elem.clientTop`, `elem.clientWidth`, `elem.clientHeight`<br />
* `elem.getClientRects()`, `elem.getBoundingClientRect()`<br />
<br />
##### Scroll stuff<br />
* `elem.scrollBy()`, `elem.scrollTo()`<br />
* `elem.scrollIntoView()`, `elem.scrollIntoViewIfNeeded()` <br />
* `elem.scrollWidth`, `elem.scrollHeight`<br />
* `elem.scrollLeft`, `elem.scrollTop` also, setting them<br />
<br />
<br />
##### Focus<br />
* `elem.focus()` can trigger a *double* forced layout ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2369&ct=rc&cd=4&dr=C))<br />
<br />
##### Also…<br />
* `elem.computedRole`, `elem.computedName` <br />
* `elem.innerText` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Element.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=2626&ct=rc&cd=4&dr=C))<br />
<br />
### getComputedStyle <br />
<br />
`window.getComputedStyle()` will typically force style recalc ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/dom/Document.cpp&sq=package:chromium&type=cs&l=1860&q=updateLayoutTreeForNodeIfNeeded))<br />
<br />
`window.getComputedStyle()` will force layout, as well, if any of the following is true: <br />
<br />
1. The element is in a shadow tree<br />
1. There are media queries (viewport-related ones). Specifically, one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/MediaQueryExp.cpp&sq=package:chromium&type=cs&l=163&q=MediaQueryExp::isViewportDependent))<br />
* `min-width`, `min-height`, `max-width`, `max-height`, `width`, `height`<br />
* `aspect-ratio`, `min-aspect-ratio`, `max-aspect-ratio`<br />
* `device-pixel-ratio`, `resolution`, `orientation` <br />
1. The property requested is one of the following: ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/css/CSSComputedStyleDeclaration.cpp&sq=package:chromium&l=457&dr=C&q=isLayoutDependent))<br />
* `height`, `width`<br />
* `top`, `right`, `bottom`, `left`<br />
* `margin` [`-top`, `-right`, `-bottom`, `-left`, or *shorthand*] only if the margin is fixed.<br />
* `padding` [`-top`, `-right`, `-bottom`, `-left`, or *shorthand*] only if the padding is fixed.<br />
* `transform`, `transform-origin`, `perspective-origin`<br />
* `translate`, `rotate`, `scale`<br />
* `webkit-filter`, `backdrop-filter`<br />
* `motion-path`, `motion-offset`, `motion-rotation`<br />
* `x`, `y`, `rx`, `ry`<br />
<br />
### window<br />
<br />
* `window.scrollX`, `window.scrollY`<br />
* `window.innerHeight`, `window.innerWidth`<br />
* `window.getMatchedCSSRules()` only forces style<br />
<br />
<br />
### Forms<br />
<br />
* `inputElem.focus()`<br />
* `inputElem.select()`, `textareaElem.select()` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/html/HTMLTextFormControlElement.cpp&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&l=192&dr=C))<br />
<br />
### Mouse events<br />
<br />
* `mouseEvt.layerX`, `mouseEvt.layerY`, `mouseEvt.offsetX`, `mouseEvt.offsetY` ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/events/MouseRelatedEvent.cpp&q=f:mouserelatedevent%20computeRelativePosition&sq=package:chromium&type=cs&l=132))<br />
<br />
### document<br />
<br />
* `doc.scrollingElement` only forces style<br />
<br />
### Range<br />
<br />
* `range.getClientRects()`, `range.getBoundingClientRect()`<br />
<br />
### SVG<br />
<br />
* Quite a lot; haven't made an exhaustive list , but [Tony Gentilcore's 2011 Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) pointed to a few.<br />
<br />
<br />
### contenteditable<br />
<br />
* Lots & lots of stuff, …including copying an image to clipboard ([source](https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/editing/Editor.cpp&sq=package:chromium&l=420&dr=C&rcl=1442532378))<br />
<br />
<br />
## *Appendix<br />
<br />
* Reflow only has a cost if the document has changed and invalidated the style or layout. Typically, this is because the DOM was changed (classes modified, nodes added/removed, even adding a psuedo-class like :focus).<br />
* If layout is forced, style must be recalculated first. So forced layout triggers both operations. Their costs are very dependent on the content/situation, but typically both operations are similar in cost.<br />
* What should you do about all this? Well, the `More on forced layout` section below covers everything in more detail, but the short version is: <br />
1. `for` loops that force layout & change the DOM are the worst, avoid them. <br />
1. Use DevTools Timeline to see where this happens. You may be surprised to see how often your app code and library code hits this.<br />
1. Batch your writes & reads to the DOM (via [FastDOM](https://github.com/wilsonpage/fastdom) or a virtual DOM implementation). Read your metrics at the begininng of the frame (very very start of `rAF`, scroll handler, etc), when the numbers are still identical to the last time layout was done. <br />
<br />
<center><br />
![image](https://cloud.githubusercontent.com/assets/39191/10144107/9fae0b48-65d0-11e5-8e87-c9a8e999b064.png)<br />
_Timeline trace of The Guardian. Outbrain is forcing layout repeatedly, probably in a loop._<br />
</center><br />
<br />
##### Cross-browser <br />
* The above data was built by reading the Blink source, so it's true for Chrome, Opera, and most android browsers.<br />
* [Tony Gentilcore's Layout Triggering List](http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html) was for 2011 WebKit and generally aligns with the above. <br />
* Modern WebKit's instances of forced layout are mostly consistent: [`updateLayoutIgnorePendingStylesheets` - GitHub search - WebKit/WebKit ](https://github.com/WebKit/webkit/search?q=updateLayoutIgnorePendingStylesheets&utf8=%E2%9C%93)<br />
* Gecko's reflow appears to be requested via FrameNeedsReflow. Results: [`FrameNeedsReflow` - mozilla-central search](http://lxr.mozilla.org/mozilla-central/search?string=FrameNeedsReflow&find=&findi=%5C.c&filter=%5E%5B%5E%5C0%5D*%24&hitlimit=&tree=mozilla-central)<br />
* No concrete data on Edge/IE, but it should fall roughly in line, as the return values for these properties are spec'd. What would differ is the amount of clever optimization.<br />
<br />
##### Browsing the Chromium source:<br />
* forced layout (and style recalc): [`updateLayoutIgnorePendingStylesheets` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutIgnorePendingStylesheets%20-f:out%20-f:test&sq=package:chromium&type=cs)<br />
* forced style recalc: [`updateLayoutTree` - Chromium Code Search](https://code.google.com/p/chromium/codesearch#search/&q=updateLayoutTree%20-f:out&p=1&sq=package:chromium&type=cs)<br />
<br />
#### CSS Triggers<br />
<br />
[CSS Triggers](http://csstriggers.com/) is a related resource and all about what operations are required to happen in the browser lifecycle as a result of setting/changing a given CSS value. It's a great resource. The above list, however, are all about what forces the purple/green/darkgreen circles synchronously from JavaScript. <br />
<br />
#### More on forced layout<br />
<br />
* [Avoiding layout thrashing — Web Fundamentals](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en)<br />
* [Fixing Layout thrashing in the real world | Matt Andrews](https://mattandre.ws/2014/05/really-fixing-layout-thrashing/)<br />
* [Timeline demo: Diagnosing forced synchronous layouts - Google Chrome](https://developer.chrome.com/devtools/docs/demos/too-much-layout)<br />
* [Preventing &apos;layout thrashing&apos; | Wilson Page](http://wilsonpage.co.uk/preventing-layout-thrashing/)<br />
* [wilsonpage/fastdom](https://github.com/wilsonpage/fastdom)<br />
* [Rendering: repaint, reflow/relayout, restyle / Stoyan](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)<br />
* [We spent a week making Trello boards load extremely fast. Here’s how we did it. - Fog Creek Blog](http://blog.fogcreek.com/we-spent-a-week-making-trello-boards-load-extremely-fast-heres-how-we-did-it/)<br />
* [Minimizing browser reflow | PageSpeed Insights | Google Developers](https://developers.google.com/speed/articles/reflow?hl=en)<br />
* [Optimizing Web Content in UIWebViews and Websites on iOS](https://developer.apple.com/videos/wwdc/2012/?id=601)<br />
* [Accelerated Rendering in Chrome](http://www.html5rocks.com/en/tutorials/speed/layers/)<br />
* [web performance for the curious](https://www.igvita.com/slides/2012/web-performance-for-the-curious/)<br />
* [Jank Free](http://jankfree.org/)<br>(<a href="https://warriordudimanche.net/shaarli/?bAp1hA">Permalink</a>)chiffres en blanc sur fond rose?? - Geckozonehttps://warriordudimanche.net/shaarli/?gZ0FKQ2015-09-21T22:25:46+02:00Si vous avez des chiffres blancs sur fond rose qui apparaissent dans firefox, allez dans about:config et passez layers.acceleration.draw-fps à false ;-)<br>(<a href="https://warriordudimanche.net/shaarli/?gZ0FKQ">Permalink</a>)Quelques astuces pour les clés GPG (via le hollandais volant)https://warriordudimanche.net/shaarli/?degMWA2015-09-21T09:32:47+02:00J'avoue que l'idée du qrcode ne m'était pas venue à l'esprit... excellent :-D<br>(<a href="https://warriordudimanche.net/shaarli/?degMWA">Permalink</a>)Astuce : changer la clé Windows 7 (via Le Blog de Cyrille BORNE)https://warriordudimanche.net/shaarli/?Gn7G4w2015-09-20T12:05:46+02:00Bon à savoir ça !<br>(<a href="https://warriordudimanche.net/shaarli/?Gn7G4w">Permalink</a>)Use Cases for CSS Variables | James Steinbachhttps://warriordudimanche.net/shaarli/?-03RNA2015-09-07T12:44:51+02:00Bien sympa, les variables en css, mais tant que ce n'est pas universellement supporté, ça ne sert à rien...<br>(<a href="https://warriordudimanche.net/shaarli/?-03RNA">Permalink</a>)grub2 - What to do when I get an "attempt to read or write outside of disk 'hd0'" error and Boot Repair does not solve the problem? - Ask Ubuntuhttps://warriordudimanche.net/shaarli/?97AmEg2015-08-25T10:11:44+02:00Bon, vu que j'ai quelques emmerdes de ce côté, je me note ce qui a marché ^^<br />
<br />
grub rescue > ls<br />
(hd0) (hd0, msdos9)<br />
grub rescue > ls (hd0,msdos9)<br />
grub rescue > ls (hd0,msdos8)<br />
grub rescue > ls (hd0,msdos5) # suppose this is linux<br />
grub rescue > ls (hd0,msdos5)<br />
grub rescue > set root=(hd0,msdos5)<br />
grub rescue > set prefix=(hd0,msdos5)/boot/grub<br />
grub rescue > insmod normal<br />
grub rescue > normal<br />
Now, system's boot menu appears. Boot into linux.<br />
<br />
sudo update-grub<br />
sudo grub-install /dev/sda # If the drive is hd0 the equivalent is sda, if it's hd1 then use sdb<br />
<br />
sur ma config, c'était hd0,1<br>(<a href="https://warriordudimanche.net/shaarli/?97AmEg">Permalink</a>)[CSS] Quelques possibilités apportées par le modèle « flexbox » - Le Hollandais Volanthttps://warriordudimanche.net/shaarli/?ue7YtQ2015-08-23T13:33:43+02:00Faut que je m'y mette, je fais régulièrement partie des délinquants ! ^^<br>(<a href="https://warriordudimanche.net/shaarli/?ue7YtQ">Permalink</a>)Footer Sticky At Bottom With Flexible Height (via le hollandais volant)https://warriordudimanche.net/shaarli/?kv1OIw2015-08-18T08:37:30+02:00\o/ merci Timo !<br>(<a href="https://warriordudimanche.net/shaarli/?kv1OIw">Permalink</a>)Fold N Fly ✈https://warriordudimanche.net/shaarli/?Okn4lg2015-08-15T21:47:00+02:00Le site ultime des avions en papier ?<br>(<a href="https://warriordudimanche.net/shaarli/?Okn4lg">Permalink</a>)[CSS] Note centrer une image dans un bloc - Le Hollandais Volanthttps://warriordudimanche.net/shaarli/?8rHJKg2015-07-31T20:07:53+02:00Tiens, j'ai eu besoin d'une astuce comme ça ya pas longtemps : merci !<br />
Drirect dans mon snippetvamp ;-)<br />
http://snippetvamp.warriordudimanche.net/snippetvamp.php?snippet=55bbb92ea7faf<br>(<a href="https://warriordudimanche.net/shaarli/?8rHJKg">Permalink</a>)7 Rules for Creating Gorgeous UI (Part 1) — Mediumhttps://warriordudimanche.net/shaarli/?uHF9mQ2015-07-09T10:32:21+02:00Je croyais avoir déjà coudifié... donc, un résumé:<br />
<br />
1- La lumière vient d'en haut: donner un effet 3d subtil en creux ou en relief <br />
- en creux: text input, boutons pressés, ascenseur, bouton radio, checkbox<br />
- en relief: boutons non pressés, bouton d'ascenseur, dropdown, cards, boutons d'un radio selectionné, popups<br />
<br />
2- Noir et blanc d'abord: <br />
- réaliser l'ensemble en N&B puis au final ajouter la couleur mais toujours avec un objectif précis (ça, il faudra que je le retienne ^^)<br />
- ajout de la couleur: une seule couleur et ses variations (saturation ou luminosité) pour conserver la pertinence de la couleur<br />
<br />
3- Doubler les espaces vides: espace entre les lignes, entre les éléments, entre les groupes d'éléments... ex: entre les items d'un menu, 2x la hauteur du texte.<br />
<br />
4- Placer du texte au-dessus d'une image: <br />
- directement dessus avec une image sombre et un texte blanc, lisible dans toutes les dimensions d'écran<br />
- ajouter un overlay pour pouvoir gérer l'assombrissement (marche aussi très bien avec les thumbnails)<br />
- texte avec fond de couleur ou noir (semi transparent ou pas)<br />
- fond flouté (div avec le même fond flou ou texte placé sur une partie floue de l'image)<br />
- dégradé doux vers une couleur unique (en général en footer) : permet d'améliorer la lisibilité du texte sans altérer l'image (effet possible via css: un fond dégradé de noir rgba de 0% à 20% d'opacité par exemple)<br />
- on peut mélanger le flou et le dégradé<br />
<br />
5- Faire ressortir le texte: <br />
- diviser le css du texte entre ce qui en accroît la visibilité (gras, grand, capitalisé, italique, plus de marge ou de contraste etc) et ce qui la décroît (petit, fin, moins contrasté, moins de marge etc).<br />
- hover/selected: jouer sur la couleur du texte, la couleur du fond, l'ombre, le soulignage, relief/creux, le changement de contraste (blanc>coloré ou coloré>blanc avec un fond subtilement assombri)<br />
<br />
6- Utiliser les bonnes polices:<br />
- clair et simple<br />
- peu de polices différentes<br />
- icon fonts<br />
<br />
7- Chercher l'inspiration: observer les UI qu'on trouve belles et chercher pourquoi pour s'en inspirer<br>(<a href="https://warriordudimanche.net/shaarli/?uHF9mQ">Permalink</a>)Installer son propre serveur DNS sous Ubuntu - Le Hollandais Volanthttps://warriordudimanche.net/shaarli/?-iPS5Q2015-07-08T11:12:31+02:00Allez, hop, c'est parti ^^<br />
MER-CI TI-MO (merciiiitiomoooo) ;-)<br>(<a href="https://warriordudimanche.net/shaarli/?-iPS5Q">Permalink</a>)Handwriting.io – Digital Handwritinghttps://warriordudimanche.net/shaarli/?1YMmBw2015-06-15T15:40:55+02:00Tiens, c'est sympa, ça: un service permettant d'imiter l'écriture manuscrite: ce n'est pas une police de caractères manuscrite car le service introduit des variations sur chaque caractère afin de le rendre plus naturel au sein du flot d'écriture.<br />
Le rendu est étonnamment naturel, en effet...<br>(<a href="https://warriordudimanche.net/shaarli/?1YMmBw">Permalink</a>)