CodePen est pratique pour partager des astuces mais il se limite à ce qui est JavaScript, CSS et HTML.
J'ai une collection de fichiers textes qui contiennent des bouts de code, astuces et autres exemples de script ainsi que de la documentation que j'utilise assez souvent.
J'ai donc installé un wiki histoire d'avoir une interface plus agréable et facile à gérer pour administrer tout ça.
S'il existe des systèmes pour faire de l'autocomplétion en javascript, tous ont le même défaut: ils ne sont pas capable de detecter des fautes de frappe ou de proposer des résultats qui s'approchent de la recherche voulue.
Mailcheck propose un système qui s'en approche: il permet de corriger les fautes de frappe dans un nom de domaine par exemple. Il utilise une fonction venant de sift3 : Super Fast and Accurate string distance algorithm. Dans la version 4 (sift4), la version Simplest gère les rempalcement/ajout/suppression de caractère (Distance de Levenshtein) . La version common gérant les transpositions (Distance de Damerau-Levenshtein).
Cet algorythme se base sur le calcul de la plus longue distance de chaine commune. Hors il reste un problème : imaginons que notre mot à chercher dans une liste de phrase ne soit pas unique mais que l'on souhaites chercher plusieurs mots, avec d'éventuelles fautes de frappe.
J'ai donc mis en place un petit script qui calcule pour un mot chercher un score pour chaque phrase d'une liste. Ce score est d'autant plus élevé que les sous-chaines de la recherches trouvées dans les phrases sont longues et nombreuses.
Les blogs ne sont pas très efficaces pour afficher du code et en faire des démo rapidement, j'ai donc préféré mettre quelques-uns de mes bouts de code javascript sur codepen: http://codepen.io/keul/
Bien entendu, c'est du Vanilla JS, donc pas besoin de JQuery ou autres librairies javascript et s'assurer de bonnes performances.
Un des scripts permet d'avoir des cases à cocher dans un menu déroulant (dont la version native est assez moche, n'étant aps déroulante): c'est dispo ici.
Un second script permet d'avoir des entêtes de tableau fixes comme dans els tableurs. disponible ici, et une variante pour les tableaux trop larges est disponible là.
J'ai fait une sauvegarde ici au cas où ils ne seraient plus accessibles sur codepen
À gauche, une voiture qui peut être moins performante dû à la grosse remorque qu'on peut lui atteler grâce à son attache remorque
À droite, une voiture performante qui vous assure par son absence d'attache remorque que rien ne vous ralentira.
Qui irait acheter une nouvelle voiture sans attache-remorque pour s'assurer que celle-ci a toujours de bonnes performances? Personne?
Maintenant, si l'on suit cet article de Génération-nt: "AMP HTML : Google dope le Web mobile"
On se rend compte que Google propose un "sous-ensemble de HTML avec par exemple des restrictions fortes au niveau de JavaScript"
Grosso-modo, en retirant les scripts (souvent dispensables, charger jQuery, un script d'une centaine de Ko pour animer un menu déroulant), la plupart des pubs (avec script qui font de l'analyse, du tracking et plus) et d'autres idioties, HTML AMP permet de meilleures performances.
<putaclick> Vous ne devinerez jamais ce qu'a fait Google pour accélérer le web </putaclick>
Qui irait refaire son site web dans une version sans attache-remorque pour s'assurer que celle-ci a toujours de bonnes performances?
"Twitter, Pinterest, WordPress.com ou encore LinkedIn sont de premiers partenaires technologiques qui vont intégrer des pages AMP HTML. Une trentaine d'éditeurs sont d'ores et déjà dans la boucle parmi lesquels la BBC, BuzzFeed, Financial Times, The Guardian, Mashable, The Washington Post ainsi que Les Échos."
Est-ce que ça va marcher?
Je ne sais pas, google fait son forcing, mais comme google plus, ça n'attirera que ceux qui se soucient de leurs référencements.
Comment en est-on arrivé là?
Est-ce un problème technologique?
Non, c'est le résultat de personnes bornées, qui ne réfléchissent pas à l'avenir et qui comprennent mal ce qui se passe réellement.
Se retrouvant face à un mur, elles ne se remettent pas en question, n'admettent pas leurs erreurs et préfèrent accuser la technologie.
Prenons une image bien connue:
N'est-ce pas super? On n'a rien à payer pour la grange.
Ouais! Et même la nourriture est gratuite.
Cochons discutant du modèle "Gratuit"
La plupart des sites web gratuits affichent de la pub aux visiteurs et essayent de récolter leurs données personnelles afin de les revendre aux publicitaires. Le visiteur est donc comparé à un cochon, à un produit qu'on vend au "client", le "publicitaire".
Puis, il y a eu des incidents: à force de mal nourrir et entretenir les animaux, ceux-si sont devenu malades et de piètre qualité.
Pour le web, c'est pareil, à force de mal respecter les visiteurs, en leurs mettant des publicités abusives,contenant des virus, ralentissant la navigation et bourrant les quotas, ceux-ci ont commencé à s'équiper en logiciels de blocage de publicité.
Et plutôt que de se remettre en question, ceux-ci persévèrent et se mettent à bloquer ceux qui bloquent la publicité, ce qui les risque de mener à la pire des solutions pour eux, non plus le retrait des publicités, mais le retrait des liens menant vers des pubs qui abusent avec la publicité. (à l'image de WoT)
Les pages web sont basées sur le langage HTML qui est prévu pour s'adapter au support.
Les navigateurs peuvent ainsi se débrouiller pour afficher la page web sur votre ordinateur, smartphone, tablette ou tout autre appareil.
Ils redimensionnent alors les blocs de texte pour les adapter à la taille de l'écran et peuvent aussi s'adapter aux utilisateurs ayant des handicaps (voir la section Chrome), en mettant un fond sombre, en imposant une taille de texte minimale, en permettant la synthèse vocale...
Certains navigateurs vont plus loin, et rendent le bidouillage possible en modifiant leurs configuration et en gérant des modules supplémentaires. Le module Stylish permet par exemple de facilement modifier l'apparence et la mise en forme du contenu grâce à des règles CSS (note: c'est aussi possible sans module en modifiant le fichier userContent.css, mais c'est moins pratique, vu qu'il faut redémarrer le navigateur à chaque modification).
En quoi est-ce utile? En quoi est-ce pratique?
Pour mes parents, j'ai configuré leur navigateur en utilisant ce style, Il retire tout soulignage et force le soulignage de tous les liens cliquables. Ils peuvent donc facilement savoir ce qui est cliquable en naviguant sur internet.
Certes, tous les liens dans les menus sont soulignés, ça devient moche à en tuer des graphistes mais bon.
Un peu de philosophie
En fin de compte, ce qui est très intéressant, c'est que HTML est un langage ouvert, documenté et librement utilisable, qui devient ainsi plein de possibilités:
les webmasters peuvent inclure des données et modules d'autres sites, gérer une identification externe...
les créateurs de logiciels peuvent effectuer des traitements de manière automatique (les linuxiens adorent l'outil wget)
les visiteurs peuvent très facilement profiter du bidouillage des codeurs grâce aux extensions des navigateurs.
Bien entendu, tout ceci n'est possible facilement qu'avec des protocoles et logiciels libres. Apple ne vous laisse pas la possibilité de bidouiller dans sa cage dorée iOS, contrairement à Google qui permet un minimum le bidouillage sous Android en autorisant l’installation applications tierces, même si les bidouilles restent assez limitées, par la volonté des constructeurs.
En effet, les constructeurs sont des sociétés capitalistes dont le but est la recherche du profit et l'accumulation du capital, en concevant certes de beaux produits qui "it just works", abrités des virus et des bidouilles, mais qui ne font pas forcément avancer l’humanité.
Avec un système libre, vous enverrez un satellite dans l'espace. Avec un système verrouillé, vous enverrez des piafs sur des cochons.
Le coté technique
Mettez dans un nouveau style sous stylish les lignes suivantes:
* {background:grey !important;}
a {border:1px solid red !important;}
Si vous relancez le navigateur, vous verrez que la couleur de fond à changée et que les liens sont encadrés en rouge
Explications:
A gauche, nous avons l'élément HTML modifié: "*" corresponds à tous les éléments, "a" aux liens, "img" aux images (liste des tags)...
Nous avons ensuite une accolade indiquant ce qui sera affecté à l'élément HTML
Nous avons ensuite une ou plusieurs propriété(s) (liste des propriétés) et ses(leurs) valeurs
Puis le mot clef "!important", qui force la valeur à être appliqué (on augmente son importance)
Puis la fin de l'accolade
Essayez maintenant de mettre tous les textes en noir et les liens en bleu.
1. Installez 
Derniers commentaires