#web_dev

Introducing Ray : a debugging tool for pragmatic developers - Freek Van der Herten’s blog on PHP, Laravel and JavaScript
▻https://freek.dev/1868-introducing-ray-a-debugging-tool-for-pragmatic-developers

Ray, a desktop app that vastly improves your debugging experience. Ray is a dedicated window to send dumped values to. It has a lot of features that help you find and fix bugs faster.

Outil de débogage (payant par licence annuelle) à mi-chemin entre Xdebug et les var_dump() basiques. Logiciel disponible sous Linux/MacOS/Windows.
Le site officiel : ▻https://myray.app
La documentation : ▻https://spatie.be/docs/ray/v1/introduction
Le package PHP pour envoyer les debug au logiciel : ▻https://github.com/spatie/ray

#débogage #ray #web_dev

Quant-UX - Prototype, Test and Learn - 3.0.60
▻https://quant-ux.com/#

Quant UX is a free research, usability & UI prototyping/wireframing tool to quickly test your design and analyse interactive prototypes. Our visual analysis makes it easy for you to find and quickly fix pain points in your UI design.

Un outil open-source de maquettage avec possibilités d’interactions utilisateurs et d’analyses de celles-ci

Le repo Github : ▻https://github.com/KlausSchaefers/quant-ux

#prototype #maquette #web_dev #outil_web #conception #ergonomie #UX #interface #adobe_XD

Penpot - Design Freedom for Teams
►https://penpot.app

Penpot is the first Open Source design and prototyping platform meant for cross-domain teams. Non dependent on operating systems, Penpot is web based and works with open web standards (SVG).

(= un remplaçant d’Adobe XD open-source)

Le repo Github : ▻https://github.com/penpot/penpot (comprend aussi un docker pour installation serveur)

#penpot #adobe_XD #prototype #maquette #web_dev #outil_web

TabFS
▻https://omar.website/tabfs

TabFS is a browser extension that mounts your browser tabs as a filesystem on your computer.
[...]
Each of your open tabs is mapped to a folder.
The files inside a tab’s folder directly reflect (and can control) the state of that tab in your browser.
Example: the url.txt, text.txt, and title.txt files inside a tab’s folder, which tell me those live properties for that tab

This gives you a ton of power, because now you can apply all the existing tools on your computer that already know how to deal with files — terminal commands, scripting languages, point-and-click explorers, etc — and use them to control and communicate with your browser.

Now you don’t need to code up a browser extension from scratch every time you want to do anything. You can write a script that talks to your browser in, like, a melange of Python and bash, and you can save it as a single ordinary file that you can run whenever, and it’s no different from scripting any other part of your computer.

#tabfs #extension #navigateur #scripts #web_dev

Fork Awesome, a fork of the iconic font and CSS toolkit
▻https://forkaweso.me/Fork-Awesome

Un fork de FontAwesome (équivalent FA v4 ?) en licence open source :

Fork Awesome is fully open source and is GPL friendly. You can use it for commercial projects, open source projects, or really just about whatever you want.

Syntaxe des classes strictement identique : <i class="fa fa-camera-retro"></i>

#font_awesome #fork_awesome #web_dev #police #picto #icone

Image Techniques On The Web
▻https://ishadeed.com/article/image-techniques

Manipulations avancées pour la gestion des images dans les pages web :
– balises <img> et <picture>,
– attributs HTML height, width, alt et srcset
– propriétés CSS object-fit et object-position (dément !),
– embed de balise <img> dans une balise <svg> pour pouvoir jouer avec la propriété CSS preserveAspectRatio, lui associer un <title> et une <desc>
– intégration d’images SVG et utilisation de balises mask
– exemples d’utilisation d’un div avec border pour emballer une image et la faire ressortir si ton sur ton

#image #web_dev #css #svg #img #picture

Quels sont les coûts liés à l’utilisation de frameworks JavaScript pour le développement Web ? Une analyse des sites utilisant React, Vue.js ou Angular
▻https://javascript.developpez.com/actu/303519/Quels-sont-les-couts-lies-a-l-utilisation-de-frameworks-JavaS

S’invitant dans le débat, Tim Kadlec, un développeur qui aide les organisations à améliorer les performances de leurs sites, estime pour sa part qu’il n’y a « pas de moyen plus rapide de ralentir un site que d’utiliser un tas de JavaScript », et c’est justement ce que font les frameworks JavaScript : utilisez beaucoup plus de JavaScript. Mais « le truc avec JavaScript », poursuit-il, « c’est que vous finissez par payer une taxe sur les performances pas moins de quatre fois », dit-il. Les quatre taxes auxquelles il fait allusion sont :
– le coût de téléchargement du fichier sur le réseau ;
– le coût de l’analyse et de la compilation du fichier non compressé une fois téléchargé ;
– le coût d’exécution du JavaScript ; et
– le coût de la mémoire.

Avec des graphes comparatifs de divers paramètres tels que « Quantité de JavaScript servi », « Temps de traitement CPU »

Pour illustration de cette lenteur et du peu d’importance donnée à l’UX par les développeurs, voir par exemple le backoffice de #Mailjet ou #Gandi_v5 qui sont des modèles de lenteur totalement désespérant et rebutant pour l’utilisateur... (en plus d’un manque d’ergonomie flagrant sur toutes les fonctionnalités un peu avancées)

Et conséquence non évoquée ici, le coût écologique lié à l’utilisation de ces framework doit être non négligeable...

L’article original (En) : ▻https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks

#lenteur #framework_javascript #web_dev #fail

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 !

#vscodium #astuce #emmet #html #web_dev

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)

#php #vscodium #web_dev

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.

https://graphism.fr/wp-content/uploads/2019/09/scar.png

#low-tech #internet #ressources #graphisme

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

#outil #web_dev #unserialize #serialiser #json

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

(merci Peetdu :-) !)
#spip #cnil #cookie #RGPD #web_dev

Spout - Read and write spreadsheets, quickly and at scale
►http://opensource.box.com/spout

Une librairie PHP qui génère des fichiers tableurs aux formats CSV / XLSX / ODS
Le repo github: ▻https://github.com/box/spout

#web_dev #tableur #xlsx #ods #csv #librairie #PHP

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

#SPIP #API #json #web_dev

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

#linter #SCSS #SASS #gulp #outil #web_dev #vscodium

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

#javascript #jshint #web_dev #outil #erreur #linter

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

“I charged $18,000 for a Static HTML Page ... and got away with it.” A tale of #corporate_bureaucracy.

▻https://idiallo.com/blog/18000-dollars-static-web-page

#HTML #Web_development #freelance

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

#SVG #CSS #web_dev

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

https://addyosmani.com/assets/images/loading-attribute.png

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.

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

JSON Formatter & Validator
▻https://jsonformatter.curiousconcept.com

un débogueur de json en ligne

#json #web_dev #debogage #outil