5 VSCode Quick Tips to Boost Your HTML Writing - By Felipe Augusto Rosa
▻https://hackernoon.com/5-vscode-quick-tips-to-boost-your-html-writing-uw943yx6?source=rss
Quelques optimisation/astuces de VSCodium pour faciliter l’écriture du HTML : sélection, commentaires, tag wrapping et emmet
Pour emmet voir aussi :
– la doc : ▻https://docs.emmet.io
– la cheat-sheet : ▻https://docs.emmet.io/cheat-sheet
merci @tofulm !
@jeanmarie ouep j’en ai lu quelques uns de ces articles «X super tips to boost your...» ;)
Setup VS Code for Efficient PHP development 🚀 | Theodo
▻https://blog.theodo.com/2019/07/vscode-php-development
Extensions utiles et leur configuration pour développer en PHP avec VS Code/VS Codium (inclu la configuration de Xdebug)
felixfbecker/vscode-php-intellisense : Advanced PHP IntelliSense for Visual Studio Code 🆚💬
▻https://github.com/felixfbecker/vscode-php-intellisense
Le repo/doc officielle de l’extension PHP Langage Server de VSCodium
Voir aussi :
– le repo pour le PHP Langage Server en lui-même : ▻https://github.com/felixfbecker/php-language-server
– la doc du concept de langage server protocol (LSP) : ▻https://microsoft.github.io/language-server-protocol
#web_dev #outil #Langage_Server_Protocol #VSCodium #PHP_langage_server
Trimage (lossless) image compressor
►https://trimage.org
En complément de ▻https://seenthis.net/messages/111251 une compilation d’outils d’optimisation du poids des images :
– GUI :
. Trimage sous Linux
. ImageOptim sous MacOS : ►http://imageoptim.com
. PNGGauntlet sous Windows : ▻https://pnggauntlet.com
– en ligne de commande :
. OptiPNG : ▻http://optipng.sourceforge.net et sa doc « A guide to PNG optimization » : ▻http://optipng.sourceforge.net/pngtech/optipng.html
. jpegoptim : ▻https://github.com/tjko/jpegoptim
– Gulp : gulp-imagemin ▻https://github.com/sindresorhus/gulp-imagemin et sa doc : ▻https://www.tutorialspoint.com/gulp/gulp_optimizing_images.htm
– SPIP : utilitaire spip-cli ►http://zone.spip.org/trac/spip-zone/changeset/94606 (avec une option de commande pour traiter l’ensemble d’un répertoire, par ex IMG)
#image #jpg #png #optimisation #web_dev #gulp #SPIP #spip-cli
Quel avenir pour les sites « low-tech » ? – Graphisme & interactivité
▻https://graphism.fr/quel-avenir-pour-les-sites-low-tech
Nombreux sont les articles qui disent que le numérique, Internet et le web émettent des gaz à effets de serre et donc que toute cette immatérialité (apparente) contribue à détruire notre environnement. Vous en avez sûrement déjà lu. Je ne reviendrai pas sur le sujet.
Alors faut-il arrêter d’aller sur Internet ? Faut-il arrêter de faire des sites web ? Le métier de webdesigner (et de designer dans son ensemble, mais ça, je reviendrai dessus avec d’autres articles) est-il condamné à disparaître… ou pourquoi pas à se réinventer ? Si oui, pour faire quoi ? Et comment ? Toutes ces questions, je me les pose, et chaque jour, je me demande s’il ne vaudrait mieux pas mettre un bon nombre de projets et d’actions sur pause (ou sur stop) pour éviter d’être contre-productif et éviter de détruire ce qu’il reste à détruire.
Unserialize - PHP, JSON, Base64
▻https://www.unserialize.com
Utilitaire en ligne pour désérialiser des données sérialisées en JSon ou PHP serialize
akilia/tarteaucitron : Portage pour SPIP de la solution de gestion de consentement aux cookies Tarteaucitron.js
▻https://github.com/akilia/tarteaucitron
Ce plugin propose une interface de configuration permettant le paramétrage de certaines options du plugin ainsi que la possibilité d’activer 4 services au choix :
– Gtag (Global Site Tag, le nouveau script de suivi pour Google Analytics)
– Google Maps
– Facebook
– Facebook Pixel
Il donne la possibilité d’ajouter de (très nombreux !) services supplémentaires directement dans le plugin : voir ▻https://opt-out.ferank.eu/fr/install / Etape 3 : ajouter les services et intégrer le code proposé dans un fichier à placer dans le répertoire /services du plugins
La doc de Tarteaucitron : ▻https://opt-out.ferank.eu/fr
Le repo Github de Tarteaucitron : ▻https://github.com/AmauriC/tarteaucitron.js
Open Source / apibridge · GitLab
▻https://git.nursit.net/open/apibridge
API Bridge
Point d’entrée pour échanger des données (json par défaut) avec un site SPIP ou entre deux sites SPIP
Fonctionnement
S’appuie sur des appels HTTP à bridge.api (mais peut être étendu à d’autres noms d’actions facilement). Les urls xxx.api appellent chez SPIP automatiquement les fichiers action/api_xxx.php. C’est donc le fichier action/api_bridge.php qui s’occupe de l’analyse de la requête et d’émettre la réponse.
Exemples d’appels simples :
▻https://domain.tld/bridge.api/v1/ping
▻https://domain.tld/bridge.api/v1/ping/timestamp
sasstools/sass-lint : Pure Node.js Sass linting
▻https://github.com/sasstools/sass-lint
Un « linter » SASS/SCSS qui semble efficace et complet (fonctionne en gulp + webpack)
L’extension VScodium : ▻https://marketplace.visualstudio.com/items?itemName=glen-84.sass-lint
About JSHint
▻https://jshint.com/about
JSHint is a community-driven tool that detects errors and potential problems in JavaScript code. Since JSHint is so flexible, you can easily adjust it in the environment you expect your code to execute. JSHint is open source and will always stay this way.
La documentation : ▻https://jshint.com/docs
Toutes les options : ▻https://jshint.com/docs/options
Testé un peu, j’ai tenté de basculer ma conf #eslint ▻https://github.com/brunob/leaflet.fullscreen/blob/master/.eslintrc vers #jshint sans succès pour l’insntant, donc je reste sur eslint...
google webfonts helper
▻https://google-webfonts-helper.herokuapp.com/fonts
Une appli web offrant une interface pour récupérer simplement les fichiers de polices de Google Web Font à intégrer dans un site en local (on évite l’utilisation de ces polices en chargement depuis chez Big Brother pour cause de tracking) : configurable, téléchargement des fichiers + code CSS @font-face à utiliser
Peut aussi s’utiliser via une API : cf ▻https://github.com/majodev/google-webfonts-helper#rest-api
#web_dev #google_font #police #web_font #font-face #open_source #SPIP
Ici aussi ►https://seenthis.net/messages/325302 en 2014 :p
“I charged $18,000 for a Static HTML Page ... and got away with it.” A tale of #corporate_bureaucracy.
C’est tellement ça. Actuellement sur une refonte qui devait durer 3 mois maximum tel que planifié dans le contrat. Le client n’a rien fait pour son site depuis 8 mois malgré indications et conseils pour le soutenir dans sa réécriture. Son mail reçu hier pour demander ce qu’il doit faire en priorité me laisse bouche bée.
#exploitation #travail_du_web
Using SVG | CSS-Tricks
▻https://css-tricks.com/using-svg
Synthèse complète de toutes les méthodes pour intégrer du SVG dans une page web
Remix Icon - Open source icon library
▻https://remixicon.com
Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 1400+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in “Outlined” and “Filled” styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.
Jeu d’icônes pour le développement web.
Présente le gros avantage de pouvoir être utilisé comme une webfont (à la fontawesome/glyphicon) ou en tant qu’images SVG individuelle mais aussi sous forme de sprite SVG.
La documentation : ▻https://github.com/Remix-Design/remixicon#usage
#icone #svg #sprite #fontawesome #glyphicon #web_dev #remixicon
Native image lazy-loading for the web!
▻https://addyosmani.com/blog/lazy-loading
In this post, we’ll look at the new loading attribute which brings native <img> and <iframe> lazy-loading to the web!. For the curious, here’s a sneak preview of it in action:
<img src="celebration.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>We are hoping to ship support for loading in Chrome 75 and are working on a deep-dive of the feature we’ll publish soon. Until then, let’s dive into how loading works.
Le brouillon de modification de la spécification de la balise img au whatwg : ▻https://github.com/whatwg/html/pull/3752
Mise à jour octobre 2019 : présent chez 61% des visiteurs :
▻https://caniuse.com/#search=lazy
C’est-à-dire les différentes versions de Chrome. Apparemment pas prévu de l’intégrer sur les autres navigateurs (donc pas iOS, où l’on n’a pas le choix du moteur de rendu HTML).
Guide to Web Authentication
▻https://webauthn.guide
The Web Authentication API (also known as WebAuthn) is a specification written by the W3C and FIDO, with the participation of Google, Mozilla, Microsoft, Yubico, and others. The API allows servers to register and authenticate users using public key cryptography instead of a password.
Système d’authentification basé sur une clé publique/privée et non plus sur un mot de passe (enfin !). Reste quand même le problème du stockage de la clé privée et son transfert entre les différents terminaux d’un utilisateur...
Prévu pour permettre la fédération d’identité côté utilisateur, c’est potentiellement le futur pour l’authentification web (?) Reste à savoir si les grandes plate-forme et les utilisateurs vont s’en emparer ou si ça ne sera qu’une tentative de plus (comme le moribond OpenID par ex)...
Voir aussi :
– la doc de l’API sur MDN (en anglais) : ▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
– une démo jouable (POC) avec code source et débogueur : ▻https://webauthn.org
– une implémentation javascript + node.js : ▻https://github.com/fido-alliance/webauthn-demo avec un explication détaillée : ▻https://slides.com/fidoalliance/jan-2018-fido-seminar-webauthn-tutorial#/25
– la recommandation du W3C : ▻https://www.w3.org/TR/webauthn
– la compatibilité des navigateurs : ▻https://www.caniuse.com/#feat=webauthn
#WebAuthn #authentification #API #openid #SPIP #web_dev #auth
Laragon - portable, isolated, fast & powerful universal development environment for PHP, Node.js, Python, Java, Go, Ruby.
▻https://laragon.org
Un serveur web de développement opensource sous Windows : « light » (18 Mo), configurable (document root apache, datadir MariaDB) et portable. Intègre PHP, MariaDB, XDebug etc... mais aussi NodeJS et Composer, une appli d’envoi de mail et un « mail catcher ». Génère des vhost en .test et (depuis la v3.3) semble intégrer une génération de certificats SSL internes.
– Versions de PHP 5. et 7. + ajout « simple » d’une nouvelle version : ▻https://forum.laragon.org/topic/166/tutorial-how-to-add-another-php-version
– phpmyadmin n’est pas inclut par défaut : ▻https://forum.laragon.org/topic/98/tutorial-how-to-add-phpmyadmin
Documentation : ▻https://laragon.org/docs et tutoriaux : ▻https://forum.laragon.org/category/5/tutorials
GitHub : ▻https://github.com/leokhoa/laragon
Firefox Multi-Account Containers - Modules pour Firefox
►https://addons.mozilla.org/fr/firefox/addon/multi-account-containers
About This Extension
The Firefox Multi-Account Containers extension lets you carve out a separate box for each of your online lives – no more opening a different browser just to check your work email! Here is a quick video showing you how it works.
Under the hood, it separates website storage into tab-specific Containers. Cookies downloaded by one Container are not available to other Containers. With the Firefox Multi-Account Containers extension, you can...
Sign in to two different accounts on the same site (for example, you could sign in to work email and home email in two different Container tabs.
Keep different kinds of browsing far away from each other (for example, you might use one Container tab for managing your Checking Account and a different Container tab for searching for new songs by your favorite band)
Avoid leaving social-network footprints all over the web (for example, you could use a Container tab for signing in to a social network, and use a different tab for visiting online news sites, keeping your social identity separate from tracking scripts on news sites)
Et pour un container spécialisé pour Facebook (et automatiquement utilisé), voir ▻https://addons.mozilla.org/fr/firefox/addon/facebook-container
#firefox #extension #session #cookie #outil #web_dev #vie_privée
Bé euuh ya plus besoin de plugin pour ça non ? C’est dans le noyau, j’ai bien des conteneurs sans aucun plugin en plus (mais je les affiche avec Conex).
Firefox Multi-Account Containers was first introduced as “Containers” available only in Firefox Nightly. It went on to be a Test Pilot Experiment, where we improved the user experience and added new features. Now it exists here as an extension that can be installed by all Firefox users.
Although you can still use the feature built into Firefox Nightly, we recommend using this extension as it has a richer user experience.
En résumé, ça semble juste être une surcouche à l’API qu’utilise #conex par exemple.
Front-End Checklist | Front-End-Checklist
▻http://frontendchecklist.com
The perfect Front-End Checklist for modern websites and meticulous developers
La liste exhaustive des éléments à vérifier lors de la mise en place d’un site : nombreuses références, classement par importance...
A free guide to <head> elements
Petite précision (@sandburg) : ce n’est que très lointainement associable à l’UX design. Déjà ce n’est pas strictement du design, mais du dev, plus précisément une liste de bonnes pratiques de développement web — ce qui, certes, conditionne l’expérience utilisateur/trice, mais de la même façon que tout conditionne l’expérience utilisateur/trice. Je précise, pour éviter d’accroître la confusion, en ces temps où l’UX est tellement à la mode qu’on qualifie un peu tout est n’importe quoi d’UX, au risque que ça ne veille bientôt (voire déjà) plus rien dire.
@tetue
Il semble pourtant admis que l’UX design comprend plusieurs aspects :
– le cognitif
– l’artistique
– le tech
Comme l’ont bien souligné les cartes mémo UX methods : le profil Evangelist, le profil Activist et le profil Scientist.
Pour moi, ces 3 profils, s’ils sont bien dans les rails, sont des ux designer, un peu plus spécialisés qu’un Ux Designer encadrant (qui est souvent le profil rattaché à Ux activist). Quand un tech (genre moi) fait de l’UI depuis 10 ans, a un diplome le sciences cognitives, s’est formé aux approches et aux méthodes d’ux design, les emploie quotidiennement, mais souhaite rester dans le tech au maximum et ne fait pas beaucoup de web, il est quoi ?
On se voit ce WE de toute façon.
#accessibilité (pour le bouton permettant d’apercevoir les #daltonisme)
générateur de jeux de couleurs avec plein de paramétrages. Exportation divers formats dont SCSS et SVG. Comprend aussi une option pour tester les anomalies de vision de la couleur sur les jeux générés.
guide-integrateur/README.md at master · DISIC/guide-integrateur · GitHub
▻https://github.com/DISIC/guide-integrateur/blob/master/README.md
Ce guide de l’intégrateur vous est proposé dans le cadre des ressources accompagnant la prise en main de la version 3 du référentiel général d’accessibilité pour les administrations (RGAA 3).
[...]
Ce guide s’adresse aux intégrateurs chargés de réaliser les gabarits HTML et CSS et se focalise sur les problématiques de respect de la sémantique et de la mise en forme. Il n’est pas question dans ce guide de JavaScript, qui fait l’objet avec ARIA, d’un tout autre guide.
[...]
Le guide a été pensé comme une série de fiches pratiques pour en faciliter l’utilisation. Vous pouvez les lire en fonction de vos besoins, sans avoir à suivre un ordre particulier, chaque fiche étant indépendante.
Validation des formulaires de données - Guides pour développeurs Web | MDN
▻https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire
Une des fonctionnalités de HTML5 est de pouvoir valider la plupart des données des utilisateurs sans avoir recours à des scripts. On utilise pour cela des attributs de validation sur les éléments du formulaire.
et pour quelques exemples basiques : ▻http://dmouronval.developpez.com/tutoriels/html/formulaires-html5
#macOS 10.12 Sierra #Apache Setup : Multiple #PHP Versions | Grav
▻https://getgrav.org/blog/macos-sierra-apache-multiple-php-versions
Partie 2: MySQL, Virtual Hosts, APC cache, YAML, et Xdebug
▻https://getgrav.org/blog/macos-sierra-apache-mysql-vhost-apc
Partie 3: SSL
▻https://getgrav.org/blog/macos-sierra-apache-ssl