Seenthis
•
 
Identifiants personnels
  • [mot de passe oublié ?]

 
  • #w
  • #we
  • #web
RSS: #web_dev

#web_dev

  • #web_development
  • #web_developpement
0 | 25
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 12/01/2021
    1
    @b_b
    1

    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

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 12/01/2021

      lol c’est assez rigolo, il faut voir des vraies utilisations concrètes utiles ensuite, mais c’est rigolo en tout cas :)
      (et ce que ça fait quand on a des centaines d’onglets, dans des conteneurs différents)

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 27/09/2020

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 23/05/2020
    1
    @jeanmarie
    1

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 20/05/2020
    8
    @biggrizzly
    @rastapopoulos
    @monolecte
    @bouts
    @tofulm
    @7h36
    @alexcorp
    @jeanmarie
    8

    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

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 20/05/2020

      Un commentaire précise qu’il faut quand même pas juste prendre en compte le premier chargement, ça n’a pas de sens, car pour là où c’est utilisé, c’est généralement pour des choses qu’on utilise plusieurs fois, où on a un compte, etc. Donc une fois le premier chargement, une grosse partie est déjà en mémoire du navigateur, que ce soit le JS et la plupart des éléments d’interface.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 21/05/2020

      Pour le premier chargement, ça dépend à quel utilisateur on s’adresse mais si la première impression qu’on a en arrivant sur un site c’est sa lenteur, ça fait mauvais genre. De plus le cache ne dure pas indéfiniment, en plus du fait que le fichier JS peut inclure autre chose que la librairie du framework et donc demander à être téléchargé de nouveau à chaque màj du code.
      C’est amusant de voir les commentaires sur le site developpez, certains semblent penser qu’on ne peut pas faire de site/app sans ces frameworks... Cela explique sûrement que tant de sites ou d’applications Web soient si lourds.
      Pour moi le pire que j’ai vu (en tant qu’utilisateur) c’est le site d’Arrêts sur image, qui utilise Angular. Une aberration. Ils ont optimisé un poil depuis le lancement donc c’est moins pire aujourd’hui mais ça reste une erreur technique majeure à mon sens.

      alexcorp @alexcorp CC BY-NC
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/05/2020

      Ah bah pour un site de média éditorial, essentiellement fait de texte avec quelques images et vidéos, ça n’a aucun putain de sens… Normalement c’est pour de l’applicatif, des trucs où ça doit mettre jour des données en direct, etc. C’est ce que je disais plus haut, normalement quand on l’utilise c’est pour de l’appli, où t’as un compte, où ya du fonctionnel (pour l’interface d’admin d’un média éditorial à la limite, mais pas sa partie publique). Pour juste du texte et des commentaires dessous… hu

      RastaPopoulos @rastapopoulos CC BY-NC
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 22/05/2020

      C’est tout le problème, les développeurs connaissent tel ou tel framework et se mettent à l’utiliser partout, sans discernement. Dans les commentaires sur Développez, il y en a même un qui explique que sans framework Javascript son appli ne serait pas jolie ! Et même pour les applis, sauf besoins très spécifiques, j’ai quelques doutes sur l’utilité de ces machineries, l’auteur du texte initial a raison, le Javascript de base (ou jQuery) peut faire beaucoup de choses. Bien sûr ça suppose de passer un peu plus de temps à coder (et de se confronter à des choses peut-être plus complexes au premier abord), encore que la maintenance sera probablement beaucoup plus légère ensuite.
      Je précise par ailleurs que j’ai déjà utilisé Angular de manière assez intensive, je suis loin d’être un anti-framework primaire.

      alexcorp @alexcorp CC BY-NC
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 26/03/2020
    2
    @jeanmarie
    @monolecte
    2
    @tofulm

    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

    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 26/03/2020
      @b_b

      Poke @b_b ;)

      jeanmarie @jeanmarie CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 27/03/2020
      @jeanmarie

      @jeanmarie ouep j’en ai lu quelques uns de ces articles «X super tips to boost your...» ;)

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 9/01/2020
    3
    @tofulm
    @b_b
    @marcimat
    3

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 22/11/2019

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 15/11/2019
    3
    @spip
    @jeanmarie
    @touti
    3

    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

    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 18/11/2019
      @seenthis

      @seenthis je crois que nous avons un spammeur : @devytheja

      jeanmarie @jeanmarie CC BY-NC-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2019
      @seenthis

      @seenthis ça serait pas « un peu » du spam ça ?

      b_b @b_b PUBLIC DOMAIN
    • @b_b
      b_b @b_b PUBLIC DOMAIN 18/11/2019
      @jeanmarie @seenthis

      @jeanmarie @seenthis on est d’accord, je supprime le compte tout de suite.

      b_b @b_b PUBLIC DOMAIN
    • @biggrizzly
      BigGrizzly @biggrizzly CC BY-NC-SA 18/11/2019
      @seenthis

      @seenthis : Les commentaires se retrouvent sur un billet de cy_altern.

      BigGrizzly @biggrizzly CC BY-NC-SA
    Écrire un commentaire

  • @alimielle
    alimielle @alimielle 1/09/2019
    3
    @rastapopoulos
    @monolecte
    @cy_altern
    3

    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

    alimielle @alimielle
    • @touti
      touti @touti 2/09/2019

      #plook

      touti @touti
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 2/09/2019

      #web_dev

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 6/08/2019
    1
    @tofulm
    1

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 19/07/2019
    2
    @spip
    @jeanmarie
    2

    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

    cy_altern @cy_altern CC BY-SA
    • @fil
      Fil @fil 20/07/2019

      you should ask your visitors their consent before exposing them to third party services

      Autre solution : ne pas les exposer…

      Fil @fil
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 16/07/2019
    2
    @rastapopoulos
    @tofulm
    2

    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

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 16/07/2019

      Toi tu devrais utiliser l’indispensable extension seenthis search pour firefox avant de poster :p

      ▻https://seenthis.net/messages/612841

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 24/06/2019
    1
    @spip
    1

    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

    • #Open Source
    cy_altern @cy_altern CC BY-SA
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 24/06/2019

      #spip_blog

      jeanmarie @jeanmarie CC BY-NC-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 13/06/2019

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 13/06/2019

    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

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 13/06/2019

      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...

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 17/05/2019
    3
    @spip
    @tofulm
    @aris
    3

    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

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 20/05/2019

      Ici aussi ►https://seenthis.net/messages/325302 en 2014 :p

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @stephane
    Stéphane Bortzmeyer @stephane CC BY-SA 17/05/2019
    2
    @kent1
    @suske
    2

    “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

    Stéphane Bortzmeyer @stephane CC BY-SA
    • @touti
      touti @touti 17/05/2019

      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

      touti @touti
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 4/05/2019
    6
    @jeanmarie
    @rastapopoulos
    @mukt
    @monolecte
    @gastlag
    @tofulm
    6

    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

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 4/05/2019

      #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    • @tofulm
      tofulm @tofulm 4/05/2019

      en complément :
      ▻https://la-cascade.io/tag/svg

      tofulm @tofulm
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 15/04/2019
    5
    @b_b
    @tofulm
    @rastapopoulos
    @arno
    @jeanmarie
    5

    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

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @arno
    ARNO* @arno ART LIBRE 8/04/2019
    5
    @tofulm
    @monolecte
    @recriweb
    @rastapopoulos
    @cy_altern
    5

    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.

    ARNO* @arno ART LIBRE
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 9/04/2019

      Le brouillon de modification de la spécification de la balise img au whatwg : ▻https://github.com/whatwg/html/pull/3752

      #lazy_loading #loading #image #web_dev

      cy_altern @cy_altern CC BY-SA
    • @arno
      ARNO* @arno ART LIBRE 18/10/2019

      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).

      ARNO* @arno ART LIBRE
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 29/03/2019
    7
    @spip
    @recriweb
    @biggrizzly
    @rastapopoulos
    @gastlag
    @tofulm
    @suske
    7

    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

    • #Microsoft
    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 30/08/2018

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

    un débogueur de json en ligne

    #json #web_dev #debogage #outil

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 26/08/2018

    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

    #wamp #web_dev #laragon #nodejs #composer #windows

    cy_altern @cy_altern CC BY-SA
    • @james
      James @james PUBLIC DOMAIN 27/08/2018

      ▻https://www.youtube.com/watch?v=sHHl5kihXD4

      James @james PUBLIC DOMAIN
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 6/05/2018
    1
    @jeanmarie
    1

    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

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 7/05/2018

      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).

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 10/05/2018
      @rastapopoulos

      @rastapopoulos

      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.

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @tofulm
    tofulm @tofulm 12/11/2017
    10
    @sandburg
    @cy_altern
    @rastapopoulos
    @denisb
    @baroug
    @jeanmarie
    @mukt
    @monolecte
    @7h36
    @ze_dach
    10

    Front-End Checklist | Front-End-Checklist
    ►http://frontendchecklist.com

    ▻https://gethead.info

    tofulm @tofulm
    • @sandburg
      Sandburg @sandburg CC BY-SA 12/11/2017
      @tetue

      #uxdesign @tetue

      Sandburg @sandburg CC BY-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 12/11/2017

      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

      #head #web_dev #bonne_pratique #checklist

      cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 13/11/2017

      #intégration #web #HTML #CSS

      RastaPopoulos @rastapopoulos CC BY-NC
    • @tetue
      tetue @tetue CC BY 19/11/2017
      @sandburg

      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 @tetue CC BY
    • @sandburg
      Sandburg @sandburg CC BY-SA 21/11/2017
      @tetue

      @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.

      Sandburg @sandburg CC BY-SA
    Écrire un commentaire

0 | 25

Thèmes liés

  • #outil
  • #spip
  • #api
  • #php
  • #json
  • #image
  • #vscodium
  • #intégration
  • #css
  • #linter
  • #couleurs
  • #php
  • programminglanguage: html
  • #jshint
  • #cookie
  • #html
  • #web
  • #graphisme
  • #extension
  • #gulp
  • #accessibilité
  • #couleur
  • technology: html
  • #palette
  • #svg
  • #css
  • #police
  • #icone