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

 
  • #j
  • #ja
  • #java
RSS: #javascript

#javascript

  • #javascript’s
  • #javascript.npm
  • #javascript.part
  • #javascript.final
  • #javascript_
  • #javascript-
  • #javascript/jquery
  • #javascript/node.js
  • #javascript/typescript
0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 975
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 18/04/2021
    3
    @fil
    @lluc
    @jeanmarie
    3

    SVG-Edit/svgedit: Powerful SVG-Editor for your browser
    ▻https://github.com/SVG-Edit/svgedit

    un éditeur de SVG en JS, open-source
    A tester sur ▻https://svg-edit.github.io/svgedit/dist/editor/index.html

    #svg #editeur #web_based #appli_web #javascript

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 6/04/2021

    « ‹script› async, defer, async defer, module, nomodule, src, inline - the cheat sheet » by github/jakub-g
    ▻https://gist.github.com/jakub-g/385ee6b41085303a53ad92c7c8afd7a6

    #javascript #programming #async #defer

    Charger les scripts JS dans une page web, malgré le temps, je le fais toujours un peu de travers. Voilà une synthèse qui aide ; et voir l’article de Jake Archibald, si cette synthèse est trop touffue, l’article met les sujets en contexte.

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @jeanmarie
    jeanmarie @jeanmarie CC BY-NC-SA 20/03/2021
    6
    @spip
    @arno
    @fil
    @7h36
    @rastapopoulos
    @gblin
    6
    @arno @rastapopoulos @drbouvierleduc @fil @klaus @alexcorp

    En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.

    Si vous avez des exemples et des outils à ajouter, je suis preneur.

    ______________________________________

    LES EXEMPLES

    ▻http://www.framescollection.com/tunnelrats.html
    Peu de technique, mais une narration forte illustrée et rythmée graphiquement

    ▻http://www.framescollection.com/manly.html
    essentiellement graphique mais peu adaptable sur mobile

    ▻https://projects.lukehaas.me/scrollify/examples/apple
    principalement des animations visuelles et peu de texte

    ▻https://projects.lukehaas.me/scrollify/examples/layered-scrolling
    joue principalement sur les fonds (image ou vidéos) et peu de texte

    ►http://computer-grrrls.gaite-lyrique.net
    joue principalement sur le rythme des blocs de contenu

    ▻https://brest1937.kubweb.media/episode/heritage
    alterne animations et contenus textes/vidéos

    ▻https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
    très simple, repose sur l’image

    ▻https://www.liberation.fr/apps/2019/02/paris-populaire
    moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus

    ►https://fabre.montpellier3m.fr/Correspondance d’@arno
    pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)

    ▻https://www.bloomberg.com/graphics/2015-auto-sales
    haut niveau, avec animation de #SVG et tout

    ▻https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
    idem, gros niveau, The Guardian quoi

    ►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)

    ______________________________________

    LES OUTILS

    How to implement #scrollytelling with six different libraries partagé par @fil
    ►https://pudding.cool/process/how-to-implement-scrollytelling

    Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
    ►https://github.com/russellgoldenberg/scrollama

    Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
    ▻https://projects.lukehaas.me/scrollify

    ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
    ▻https://sjwilliams.github.io/scrollstory

    Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
    ►https://maxwellito.github.io/vivus

    graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
    ▻https://github.com/1wheel/graph-scroll

    enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
    ▻https://github.com/russellgoldenberg/enter-view

    Projects | Knight Lab partagé par @klaus
    ▻https://seenthis.net/messages/792645

    revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
    ►https://revealjs.com

    ______________________________________
    TAGS SUR SEENTHIS

    #art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms

    #webdev #spip_recette

    jeanmarie @jeanmarie CC BY-NC-SA
    • @arno
      ARNO* @arno ART LIBRE 20/03/2021

      Gaffe : dans un très grand nombre d’exemples, l’affichage n’est pas du tout responsive. C’est tout de même dommage de nos jours.

      ARNO* @arno ART LIBRE
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 21/03/2021

      Oui, c’est une contrainte forte à intégrer, c’est clair !

      jeanmarie @jeanmarie CC BY-NC-SA
    • @alexcorp
      alexcorp @alexcorp CC BY-NC 21/03/2021

      Voici un outil qui pourrait être utile : ►https://revealjs.com

      alexcorp @alexcorp CC BY-NC
    • @arno
      ARNO* @arno ART LIBRE 21/03/2021

      Un jour il faudra que je développe ces idées, parce que ça me tient à cœur, mais rapidement, sur les limites de ces formats :

      – les longforms ont été popularisés vers 2011 à partir du NY Times ; donc toute une partie des développements techniques s’est fait sans trop se poser la question du responsive, pas encore totalement à la mode à l’époque ;

      – faire ça bien, ça coûte bonbon. Donc le NY Times n’en fait presque plus ; et les autres ont repris les usages les plus simples et plus « automatisables ». Genre des effets de parallaxe et les images en fond fixed, souvent pas bien jolis, et qui donnent plus envie de vomir qu’autre chose. Les longforms du Monde, à un moment, c’était quasiment que ça.

      – et on est toujours dans une logique de CMS tout-automatique et de réduction des coûts. Les « art directed articles », comme le nom l’indique, ça implique qu’il y a une direction artistique (donc une personne dont c’est le métier) pour chaque article. Et mon constat : il n’y a pas vraiment de gens prêts à payer pour ça.

      – l’idéologie de l’édition sur le Web n’est plus de faire des pages Web super-belles avec de super-articles longs qui attireraient les gens, mais de partager sur les supports avec un maximum d’audience. Une grosse partie des médias, ces dernières années, s’est engouffré d’abord sur les formats courts (à une époque, on a même eu l’idée de découper les articles en plusieurs pages pour multiplier les paves vues…), puis les « pages » Facebook, puis que les formats « AMP » de Google ; certes ils en reviennent, mais c’est plus avec ce genre de tendances que tu vas avoir des développements du côté de la narration enrichie sur le Web…

      – et dernier écueil : ça demande des graphistes avec des compétences techniques, et des informaticiens avec des compétences graphiques, et ça ce sont des animaux mythologiques dont l’existence est encore discutée par les archéologues du Web.

      ARNO* @arno ART LIBRE
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 21/03/2021
      @drbouvierleduc @arno

      Autre exemple, ce que l’on avait fait il a quelques années avec @drbouvierleduc pour la région Limousin, des « expos virtuelles » dans le site Géoculture (toute la rubrique Focus) :
      ►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin

      En gros 100% avec le Noizetier. Dans l’idée ça peut soit être un unique contenu SPIP avec des centaines de noisettes, soit comme on l’a fait là, une page qui agrège les noisettes de plusieurs Rubriques/Sous-rubriques ce qui permet de gérer le chapitrage plus simplement (cf le menu chapitre en haut).
      Et c’est responsive :p

      Pour moi le noizetier est une des manières les plus souples/complètes de faire ça. Vu que tu peux en inventer autant que tu veux, suivant ce qui a été décidé avec la direction artistique de permettre de faire.

      Ça évite d’être lié à un contenu SPIP, et à seulement 2 ou 3 choix possibles, car sinon faudrait ajouter 12000 champs. On doit pouvoir reproduire les long forms de @arno assez facilement à priori.

      Par ailleurs tu peux les utiliser aussi bien vraiment toutes seules (le contenu vient de champs de config des noisettes) ou en utilisant le « vrai » contenu éditorial du site (le contenu de telle noisette venant du contenu d’un article, d’un événement, etc).

      Le plugin ne fait rien lui-même hein : tout dépend vraiment de ton « jeu de noisettes », càd ce que vous permettez de faire aux gens. C’est à peu près infini comme possibilités, vu que tu peux parfaitement avoir des noisettes « cartes », des noisettes « frise chrono », ou tout autre animation kikou un peu complexe, que tu intercales avec d’autres contenus plus simple, des textes, des images, etc.

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 21/03/2021

      #spip_blog

      b_b @b_b PUBLIC DOMAIN
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 24/03/2021

      Merci pour vos retours forts inintéressants :)

      jeanmarie @jeanmarie CC BY-NC-SA
    • @dlechenne
      dlechenne @dlechenne 24/03/2021

      Purement graphique et avec un travail de design sonore mais seulement dans une app
      Phallaina, le roman graphique
      ▻https://youtu.be/GIqQIpmhJGQ


      –
      j’ai en ai développé plusieurs avec des étudiant.es des Beaux-arts de Bordeaux ou j’enseigne.
      Ce ne sont que des images et ce n’est pas connecté à une base de donnée, par manque de temps pour un simple projet pédagogique, mais c’est faisable.
      ▻https://design-ebabx.fr/webapp/seahot
      ▻https://design-ebabx.fr/webapp/affluence

      dlechenne @dlechenne
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 15/04/2021

      Ce plugin aussi : ▻https://git.spip.net/spip-contrib-extensions/storify.git

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

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 15/02/2021
    5
    @kent1
    @tofulm
    @spip
    @02myseenthis01
    @marcimat
    5

    nodeca/pica : Resize image in browser with high quality and high speed
    ▻https://github.com/nodeca/pica

    Un script JS pour redimensionner une image dans le navigateur :

    Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.
    With pica you can:
    – Reduce upload size for large images, saving upload time.
    – Saves server resources on image processing.
    – Generate thumbnails in browser.

    #image #redimensionner #upload #javascript #client-side #SPIP

    cy_altern @cy_altern CC BY-SA
    • @tofulm
      tofulm @tofulm 15/02/2021

      A ajouter en option à bigup
      #bigup

      tofulm @tofulm
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 12/02/2021
    3
    @kent1
    @rastapopoulos
    @tofulm
    3

    pehaa/beerslider : A vanilla JS keyboard accessible plugin for any before-after comparison
    ▻https://github.com/pehaa/beerslider

    Un script JS pour réaliser un effet « avant / après » sur une image
    La démo : ▻https://pepsized.com/wp-content/uploads/2018/09/beerslider/demo/index.html

    #avant_après #beerslider #javascript

    cy_altern @cy_altern CC BY-SA
    • @b_b
      b_b @b_b PUBLIC DOMAIN 12/02/2021

      à intégrer dans ce vieux truc que j’avais pondu sans jamais l’utiliser ▻https://git.spip.net/spip-contrib-extensions/images_compare ?

      b_b @b_b PUBLIC DOMAIN
    • @arno
      ARNO* @arno ART LIBRE 12/02/2021

      Je l’utilise ici :
      ►https://fabre.montpellier3m.fr/A-la-recherche-du-tableau-disparu

      ARNO* @arno ART LIBRE
    Écrire un commentaire

  • @arno
    ARNO* @arno ART LIBRE 26/01/2021

    Vanilla-Tilt - A smooth 3D tilt #javascript library forked from Tilt.js (jQuery version)
    ▻https://micku7zu.github.io/vanilla-tilt.js

    (Je me le note notamment pour son effet de reflet – glare – en fonction de l’inclinaison de l’élément.)

    ARNO* @arno ART LIBRE
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 22/01/2021

    « Async Iteration & Streams — Why Async Iterators Matter » par Benjamin Gruenbaum, 08.04.2016 (présentation, 54 slides)
    ▻https://docs.google.com/presentation/d/1r2V1sLG8JSSk8txiLh4wfTkom-BoOsk52FgPBy8o3RM/edit

    Démystifie les sujets « foreach over asynchronous streams » et « async await » dans leur implémentation en JavaScript. Contient également en préambule une série de slides — masqués, pourtant intéressants — avec une présentation des Promises.

    #javascript #programming #promises

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 22/01/2021

    « We have a problem with Promises » par Nolan Lawson, 18.05.2015
    ▻https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html

    Quoiqu’il date, l’article est encore une lecture utile. Dans nos rencontres Gōng-fu I/O, je le cite à l’occasion, en rappelant qu’avec les Promise en JS, il faut essentiellement se souvenir de ces deux règles :

    1. les clauses .then() et .catch() prennent une fonction comme argument ; rien d’autre (cf. section « Advanced mistake #5 : promises fall through ») ;
    2. les fonctions qu’on passe à ces clauses .then() et .catch() (ou à la forme new Promise(…,…)) ne peuvent/doivent faire que ces trois choses-ci :

    a. retourner une nouvelle Promise ;
    b. retourner une valeur scalaire (primitive ou objet JS) ;
    c. soulever une exception avec throw.

    Une grande part des problèmes avec les Promise sont réglés en pratique par la vérification de ces deux règles.

    #javascript #programming #promises

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 22/01/2021

    « MDN › Hoisting »
    ▻https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

    Les subtilités des déclarations qui sont hoisted (déclarations var et de fonctions) ou non (let, const) durant la phase de compilation.

    #javascript #programming

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 22/01/2021

    « Javascript : Named vs Anonymous Functions » de Chris Ng, 01.05.2017 ▻https://www.linkedin.com/pulse/javascript-named-vs-anonymous-functions-chris-ng

    #javascript #programming

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @cdb_77
    CDB_77 @cdb_77 28/12/2020

    #Galène

    Galène is a #videoconferencing_server that is easy to deploy (just copy a few files and run the binary) and that requires moderate server resources. It was originally designed for lectures and conferences (where a single speaker streams audio and video to hundreds or thousands of users), but later evolved to be useful for student practicals (where users are divided into many small groups), and meetings (where a few dozen users interact with each other).

    Galène’s server side is implemented in #Go, and uses the #Pion implementation of #WebRTC. The server is regularly tested on Linux/amd64 and Linux/arm64, and has been reported to run on Windows; it should in principle be portable to other systems, including Mac OS X. The client is implemented in #Javascript, and works on recent versions of all major web browsers, both on desktop and mobile (but see below for caveats with specific browsers).

    While traffic is encrypted from sender to server and from server to client, Galène does not perform end-to-end encryption: anyone who controls the server might, in principle, be able to access the data being exchanged. For best security, you should install your own server.

    Galène’s is not the only self-hosted WebRTC server. Alternatives include Janus, Ion-SFU, and Jitsi.

    Galène is free and #open_source #software, subject to the MIT licence. Galène’s development is supported by Nexedi, who fund Alain Takoudjou’s work on the user interface.

    ▻https://galene.org
    #alternatives #alternative #zoom #microsoft_teams #teams #vidéoconférences #visioconférences #visio-conférences #vidéo-conférences #logiciel #galene

    pas utilisé... mais peut-être utile et intéressant à tester ?

    CDB_77 @cdb_77
    • @cdb_77
      CDB_77 @cdb_77 10/01/2021

      J’ai testé et... franchement... simple et très bien pour les visioconférences (on se voit bien et entend bien, on peut partager l’écran et converser dans une boîte « conversation »).

      Possible de l’essayer ici :
      ▻https://galene.org:8443/group/public

      CDB_77 @cdb_77
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 2/12/2020

    JSON Lines
    ▻https://jsonlines.org

    un format de stockage/échange pour JSON (semble un peu manquer d’implémentations dans les langages courants)
    Convertisseur vers JSON (npm) : ▻https://www.npmjs.com/package/jsonlines2json

    #json #javascript

    cy_altern @cy_altern CC BY-SA
    • @severo
      severo @severo PUBLIC DOMAIN 2/12/2020

      C’est pareil que ndjson ?

      Mike Bostock l’utilisait dans ses super articles sur l’utilisation de la ligne de commandes pour manipuler des données géographiques :

      ▻https://medium.com/@mbostock/command-line-cartography-part-2-c3a82c5c0f3

      severo @severo PUBLIC DOMAIN
    • @fil
      Fil @fil 2/12/2020

      je vois pas de différence ▻http://ndjson.org

      Fil @fil
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 26/11/2020

    Window.postMessage - Référence Web API | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/API/Window/postMessage

    Une méthode pour la communication entre fenêtres/onglets de navigateur :

    La méthode window.postMessage, quand elle est appelée, provoque l’envoi d’un MessageEvent à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d’évènements restants si window.postMessage est appelée depuis un gestionnaire d’évènement, des timeouts en attente enregistrées auparavant, etc.) Le MessageEvent est de type message, a une propriété data qui est initialisée à la valeur du premier argument passé à window.postMessage, une propriété origin correspondant à l’origine du document principal de la fenêtre appelant window.postMessage au moment où window.postMessage a été appelée, et une propriété source qui est la fenêtre depuis laquelle window.postMessage est appelée. (les autres propriétés standard d’évènement sont présentes avec leurs valeurs attendues).

    ...et les précautions de sécurités préconisées :

    Précautions de sécurité
    – Si vous ne prévoyez pas de recevoir de messages depuis d’autres sites, n’ajoutez pas de gestionnaire d’évènement pour les évènements message. C’est un moyen sûr d’éviter les problèmes de sécurité.
    – Si vous prévoyez de recevoir des messages depuis d’autres sites, vérifiez toujours l’identité de l’expéditeur à l’aide des propriétés origin et si possible source. Toute fenêtre (y compris, par exemple, ▻http://evil.example.com) peut envoyer un message à toute autre fenêtre, et vous n’avez aucune garantie qu’un expéditeur inconnu ne va pas envoyer de message malicieux. Cependant, même si vous vérifiez l’identité, vous devriez toujours vérifier la syntaxe du message reçu. Dans le cas contraire, une faille de sécurité dans le site auquel vous faites confiance peut ouvrir une vulnérabilité XSS dans votre propre site.
    – Spécifiez toujours explicitement une origine de destination, jamais *, quand vous utilisez postMessage pour envoyer des données à d’autres fenêtres. Un site malicieux peut changer l’adresse de la fenêtre à votre insu, et ainsi intercepter les données envoyées à l’aide de postMessage.

    #postMessage #javascript #politique_de_sécurité #Same_Origin_Policy #SOP

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 11/09/2020
    2
    @rastapopoulos
    @cy_altern
    2

    Chaînage optionnel (optional chaining) - #JavaScript | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining

    L’opérateur de chaînage optionnel ?. permet de lire la valeur d’une propriété située profondément dans une chaîne d’objets connectés sans avoir à valider expressément que chaque référence dans la chaîne est valide. L’opérateur ?. fonctionne de manière similaire à l’opérateur de chaînage ., à ceci près qu’au lieu de causer une erreur si une référence est null ou undefined, l’expression se court-circuite avec undefined pour valeur de retour. Quand il est utilisé avec des appels de fonctions, il retourne undefined si la fonction donnée n’existe pas.

    Découvert dans les notes de version de codium cf :

    Use the new convert to optional chain refactoring to quickly convert a sequence of expressions such as a && a.b && a.b.c() to instead use optional chaining: a?.b?.c(). Just select an expression to use it:

    https://code.visualstudio.com/assets/updates/1_49/ts-convert-chain.gif

    #optional_chaining #object #property #test

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/09/2020

      par contre ça vaut que pour les navs relativement récents (cette année seulement), donc quand c’est pour du dev JS côté serveur ou cli, genre avec node, ça va, mais si c’est pour du code exécuté par les navs, ça fera des erreurs chez encore pas mal de monde

      RastaPopoulos @rastapopoulos CC BY-NC
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 12/09/2020
      @rastapopoulos

      @RastaPopoulos : l’écriture semble tellement pratique que tu peux outrepasser le problème des navigateurs en codant en ES6 avec (par exemple) Gulp.babel pour générer le code « JS old style » :

      if (toto?.titi?.tata === 'patate') {

      est transformé en :
      if ((toto === null || toto === void 0 ? void 0 : (_toto$titi = toto.titi) === null || _toto$titi === void 0 ? void 0 : _toto$titi.tata) === 'patate') {

      Gulp + babel : ▻https://cobwwweb.com/compile-es6-code-gulp-babel-part-1

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

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

    Utiliser Fetch - Référence Web API | MDN
    ▻https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

    L’API Fetch fournit une interface JavaScript pour l’accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale fetch() qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone.
    Ce genre de fonctionnalité était auparavant réalisé avec XMLHttpRequest. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme Service Workers. Fetch fournit aussi un endroit unique et logique pour la définition d’autres concepts liés à HTTP comme CORS et les extensions d’HTTP.

    #fetch #javascript #httpRequest #asynchrone

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 28/08/2020
    2
    @spip
    @tofulm
    2

    pqina/filepond : 🌊 A flexible and fun JavaScript file upload library
    ▻https://github.com/pqina/filepond

    A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
    [...]
    Core Features
    – Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
    – Drop files, select on filesystem, copy and paste files, or add files using the API.
    – Async uploads with AJAX, supports chunk uploads, can encode files as base64 data and send along form post.
    – Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
    – Image optimization, automatic image resizing, cropping, filtering, and fixes EXIF orientation.
    – Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

    Voir aussi sur le site officiel :
    – la documentation : ▻https://pqina.nl/filepond/docs
    – les exemples : ▻https://pqina.nl/filepond/#examples

    #upload #SPIP #bigupload #javascript #redimensionner_image #EXIF

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @stephane
    Stéphane Bortzmeyer @stephane CC BY-SA 30/07/2020
    2
    @biggrizzly
    @cy_altern
    2

    “#5G Will Definitely Make the Web Slower, Maybe”

    ▻https://www.filamentgroup.com/lab/5g

    “During the years 2011 through 2019, 4g coverage spread from 5% to 79% of the world. During that same time period, the median average JavaScript transfer size to mobile devices increased by 611%, from 52kb to 372.9 KB.”

    Stéphane Bortzmeyer @stephane CC BY-SA
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 30/07/2020

      Voir aussi la carte mondiale du déploiement de la 5G : ▻https://www.speedtest.net/ookla-5g-map

      #javascript_payload

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @b_b
    b_b @b_b PUBLIC DOMAIN 15/07/2020
    3
    @rastapopoulos
    @tofulm
    @cy_altern
    3

    zurb/tribute : ES6 Native mentions
    ▻https://github.com/zurb/tribute

    A cross-browser @mention engine written in #ES6, no dependencies.

    demo : ▻https://zurb.github.io/tribute/example

    #javascript #autocomplete

    b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 15/07/2020

      oh, à utiliser dans Seenthis à la place du code perso, pour pas maintenir ce point ? et utilisable pour les tags aussi

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 15/07/2020

      C’est entre autres pour ça que je l’ai bookmarké oui, et pour la complétion des tags, il y a un ticket à ce sujet depuis... :p

      b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/07/2020
    4
    @jeanmarie
    @rastapopoulos
    @marcimat
    @arno
    4

    Flickity · Touch, responsive, flickable carousels
    ▻https://flickity.metafizzy.co

    script JS pour faire des carrousels responsives : léger et plein d’options (config en json) sans être trop bling-bling.
    (licence Open source pour les développements qui le sont aussi)

    #carousel #javascript #flickity

    cy_altern @cy_altern CC BY-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 7/07/2020

      aaaah ? enfin un remplaçant solide à Slick ?

      #intégration #web

      RastaPopoulos @rastapopoulos CC BY-NC
    • @jeanmarie
      jeanmarie @jeanmarie CC BY-NC-SA 8/07/2020

      Y a une licence pour les usages commerciaux : ▻https://flickity.metafizzy.co/license.html

      The Flickity Commercial Developer License is for individual developers. Each individual developer or team member needs to purchase a separate license.
      – Flickity Commercial Developer License for 1 developer $25

      The Flickity Commercial Team License is for up to 8 team members.
      – Flickity Commercial Team License for up to 8 developers $110

      The Flickity Commercial Organization License is for an unlimited number of team members. This license covers the entire team no matter how many people are working on it.
      – Flickity Commercial Organization License for Unlimited developers $320

      jeanmarie @jeanmarie CC BY-NC-SA
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 8/07/2020

      Semi-libre donc, mais il faut comprendre la notion de « site commercial », en effet, c’est le cas explicitement d’un site de e-commerce : dans ce cas on doit payer la librairie il me semble. Mais un site de présentation d’une entreprise, c’est uniquement de l’information. Ils n’explicitent pas vraiment ces notions. Mais de ce que je comprends pour l’instant, c’est plutôt quand tu veux utiliser leur librairie dans un produit fermé et commercial, un produit dont on ne verra pas le code. Ce qui n’est donc pas le cas d’un site de présentation de quoi que ce soit.

      RastaPopoulos @rastapopoulos CC BY-NC
    Écrire un commentaire

  • @oanth_rss
    oAnth_RSS @oanth_rss CC BY 2/07/2020

    A re-introduction to JavaScript (JS tutorial) - JavaScript (https:/...
    ▻https://diasp.eu/p/11292934

    A re-introduction to JavaScript (JS tutorial) - JavaScript | #javascript #tutorial

    oAnth_RSS @oanth_rss CC BY
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 20/05/2020
    1
    @tofulm
    1

    websanova/vue-store: A simple light-weight Vue “store” alternative to vuex.
    ▻https://github.com/websanova/vue-store

    Vue Store: a simple easy access store utility for Vue.js

    #vuejs #store #javascript #json

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 14/04/2020

    WebKit › Web Inspector Reference
    › Console Command Line API
    ▻https://webkit.org/web-inspector/console-command-line-api
    #javascript #console #debug

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 7/02/2020
    2
    @kent1
    @spip
    2

    wavesurfer.js
    ▻https://wavesurfer-js.org

    Un player audio open-source avec visualisation à la « sound cloud » (waveform) avec plein d’habillages possibles.
    Exemples : ▻https://wavesurfer-js.org/examples
    Plugins : ▻https://wavesurfer-js.org/plugins
    Le repo sur Github : ▻https://github.com/katspaugh/wavesurfer.js

    Voir aussi : ▻https://github.com/michaeldzjap/waveplayer.js/tree/master

    (un petit plugin SPIP ?)

    #player_audio #waveform #javascript #wavesurfer #SPIP #sound_cloud

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @cy_altern
    cy_altern @cy_altern CC BY-SA 3/02/2020
    1
    @tofulm
    1

    La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
    ▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html

    Utiliser les media query en javascript
    Voir aussi :
    – la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
    – des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries

    #javascript #media_query #matchMedia

    cy_altern @cy_altern CC BY-SA
    Écrire un commentaire

  • @olange
    Olivier Lange @olange CC BY-SA 29/01/2020
    1
    @fil
    1

    « 2016 – the year of web streams » by Jake Archibald, 25.01.2016
    ►https://jakearchibald.com/2016/streams-ftw

    #webstreams #javascript

    What is the underlying data-structure transporting content? It is Uint8Array.

    Olivier Lange @olange CC BY-SA
    Écrire un commentaire

0 | 25 | 50 | 75 | 100 | 125 | 150 | 175 | 200 | ... | 975

Thèmes liés

  • #programming
  • #react
  • #web-development
  • programminglanguage: javascript
  • #software-development
  • #javascript
  • #front-end-development
  • #web
  • #vuejs
  • technology: html
  • #spip
  • #nodejs
  • #software-engineering
  • #hackernoon-top-story
  • #promises
  • #python
  • #typescript
  • technology: api
  • #interview
  • #jquery
  • industryterm: software
  • technology: php
  • #artificial-intelligence
  • programminglanguage: php
  • #machine-learning
  • technology: java
  • #build
  • #cartographie
  • #documentation
  • #angular
  • #gitlab
  • #technology
  • #events
  • #es6
  • programminglanguage: python
  • position: editor
  • #functional-programming
  • #markdown
  • #développement
  • #frontend