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

https://www.npmjs.com

  • ►/package
    • ►/gulp-sass
    • ►/angular-svg-icon
    • ►/jsonlines2json
    • ►/subfont
    • ►/hgrep
    • ►/mona
    • ►/gh-pages
    • ►/nativefier
    • ►/ngraph.graph
    • ►/leadfoot
      • ►#star
    • ►/mversion
    • ►/facebook-export
  • @cy_altern
    cy_altern @cy_altern CC BY-SA 13/12/2021

    gulp-sass - npm
    ▻https://www.npmjs.com/package/gulp-sass

    Passage en version 5 de gulp-sass : modification de la syntaxe + migration du compilateur Sass de Node Sass à Dart Sass :

    To use gulp-sass, you must install both gulp-sass itself and a Sass compiler. gulp-sass supports both Dart Sass and Node Sass, but Node Sass is deprecated. We recommend that you use Dart Sass for new projects, and migrate Node Sass projects to Dart Sass when possible.

    Ce qui donne dans le gulpfile.js :

    var sass = require('gulp-sass')(require('sass'));

    #gulp #sass #web_dev #Dart_Sass #Node

    cy_altern @cy_altern CC BY-SA
    É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 23/05/2020
    2
    @jeanmarie
    @aurelie
    2

    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
    • @aurelie
      Aurélie @aurelie 11/07/2021

      Pour les #svg, dernièrement, sous Angular Material, j’ai utilisé angular-svg-icon pour pouvoir facilement styler les SVG, sans que leur code « pollue » le dev.

      Concrètement, lorsqu’on inspecte dans le navigateur, le code du SVG s’affiche. Donc on peut aller faire ce qu’on veut sur les parh & co 😁

      J’avais utilisé un outil un peu similaire, il y a quelques années sur un projet en JS, donc on peut aussi trouver pour d’autres choses qu’Angular 😉
      #angular #css
      ▻https://www.npmjs.com/package/angular-svg-icon

      Aurélie @aurelie
    Écrire un commentaire
  • @arno
    ARNO* @arno ART LIBRE 8/09/2017
    3
    @kent1
    @monolecte
    @tofulm
    3

    subfont
    ▻https://www.npmjs.com/package/subfont

    A command line tool to statically analyse your page in order to generate the most optimal web font subsets, then inject them into your page.

    Speed up your time to first meaningful paint by reducing the web font payload and critical path to the font files.

    Subfont will:

    – Automatically figure out what characters are used from each font
    – Create an exact subset of used characters of each font
    – Add the font subsets to your pages with browser preload hints for reduced time to first meaningful paint
    – Give the subsetted fonts new names and prepend them in front of the original fonts in your font-family definitions (enables missing glyph fallback)
    – Async load your original @font-face declaring CSS at the bottom of your page, moving it off the critical path

    Perso c’est pas ma priorité, mais je vois souvent passer des demandes à ce sujet.

    ARNO* @arno ART LIBRE
    Écrire un commentaire
  • @fil
    Fil @fil 30/12/2016
    5
    @cy_altern
    @lluc
    @booz
    @b_b
    @hackernoon
    5

    pigshell - unix the web
    ▻http://pigshell.com

    http://pigshell.com/images/pigshell-logo-320x240.png

    Resources on the web are represented as files in a hierarchical file system. These include public web pages as well as your data on Facebook, Google drive and Picasa albums. Construct pipelines of simple unix-style commands to filter, transform and display your files.

    #web #outils #cli #bizarre #cartographie #data

    hgrep
    ▻https://www.npmjs.com/package/hgrep

    hgrep is a Unix CLI tool which lets you select elements with jQuery/CSS syntax and print either the HTML serialization of the selection, or a specified attribute of each element, or their text representation.

    For example, to print all the story links from the HN front page:

    curl -s https://news.ycombinator.com | hgrep -a href ".athing .title > a"

    Fil @fil
    • @cy_altern
      cy_altern @cy_altern CC BY-SA 30/12/2016

      le guide de l’utilisateur : ▻http://pigshell.com/v/0.6.4/usr/doc/pigshell.html
      => ça reste un truc pour les forcenés/ultimes de la ligne de commande !
      ...mais avec un peu de métier ça doit être rudement pratique pour de la récupération/sauvegardes/archivage de données en ligne :

      ls /gdrive/username@gmail.com | grep -f mime spreadsheet | grep -e ’x.mtime > Date.parse("Dec 31, 2013")’ | cp .

      The above command finds all files in the given user’s GDrive containing the string “spreadsheet” in their mime property, selects those files which those files modified since Dec 31, 2013 and copies them to the current directory.

      #commande #pigshell #archivage

      cy_altern @cy_altern CC BY-SA
    Écrire un commentaire
  • @robin
    robin @robin CC BY 2/12/2016
    1
    @la_taupe
    1

    mona
    ▻https://www.npmjs.com/package/mona

    mona is a Javascript library for easily writing reusable, composable parsers. It makes parsing complex grammars easy and fun!

    robin @robin CC BY
    Écrire un commentaire
  • @robin
    robin @robin CC BY 18/11/2016

    gh-pages
    ▻https://www.npmjs.com/package/gh-pages

    Publish to a gh-pages branch on GitHub (or any other branch on any other remote)

    robin @robin CC BY
    Écrire un commentaire
  • @james
    James @james PUBLIC DOMAIN 10/05/2016
    13
    @fil
    @tofulm
    @touti
    @7h36
    @hassan_nya
    @suske
    @baroug
    @severo
    @rastapopoulos
    @ze_dach
    @mukt
    @oletrouher
    @hackernoon
    13
    @0gust1 @robin @archiloque

    Lost in #Javascript ...

    ▻https://www.npmjs.com
    ▻http://bower.io
    ▻http://browserify.org
    ▻http://gruntjs.com
    ▻https://nodejs.org/en
    ▻http://jshint.com
    ▻http://gulpjs.com

    ça fait beaucoup de trucs à découvrir...

    @0gust1, @robin, @archiloque, vous n’auriez pas un tuto, un guide, pour aider un débutant à entrer dans ce monde merveilleux ?

    James @james PUBLIC DOMAIN
    • @archiloque
      Archiloque @archiloque CC BY 10/05/2016
      @james

      @james perso j’ai bien aimé ►https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b c’est partial mais ça te donne des idées

      Archiloque @archiloque CC BY
    • @b_b
      b_b @b_b PUBLIC DOMAIN 10/05/2016

      – npm « va de paire » avec node
      – amha tu peux oublier bower maintenant
      – perso je suis passé de jshint à eslint :
      ▻https://github.com/shramov/leaflet-plugins/commit/526bee1f670dbceb5480e212c8c536a5cfb253ad
      voici la conf minimale que j’utilise :
      ▻https://github.com/shramov/leaflet-plugins/blob/master/.eslintrc

      b_b @b_b PUBLIC DOMAIN
    • @james
      James @james PUBLIC DOMAIN 10/05/2016

      ▻http://eslint.org donc.

      et du coup, me rappelant de l’excellent ►http://www.phptherightway.com, je tombe sur ▻http://jstherightway.org

      un peu de lecture en perspective :-)

      James @james PUBLIC DOMAIN
    • @robin
      robin @robin CC BY 10/05/2016

      Je n’ai pas de guide (ça fait trop longtemps...) mais ceci dit j’ai remarqué que dans JavaScript Weekly (▻http://javascriptweekly.com) et Node Weekly (▻http://nodeweekly.com) il y avait souvent des liens vers des tutoriels de qualité.

      Dans ta liste, je te conseillerais d’oublier bower (je n’utilise que npm, que ce soit pour du client ou du serveur), grunt et gulp (je fais tout mes build scripts aussi dans npm, avec de l’Unix et du JS ; quelques exemples simples : ▻https://github.com/scienceai/crossref/blob/master/package.json#L6), et JSHInt qui comme d’autres l’ont dit est dépassé par ESLint.

      J’utilise ▻https://github.com/scienceai/eslint-config-scienceai comme config, mais c’est un compromis, à toi de voir s’il correspond.

      De façon générale, JS c’est comme Unix : il y a plein de petits outils, mais il ne faut surtout pas partir sur l’impression que tu as besoin de tout connaître pour bien t’en servir. Il faut juste trouver ce dont tu as besoin pour commencer, puis progressivement améliorer les choses en rajoutant telle ou telle brique à ta boîte à outils (enfin tu vois quoi).

      Si c’est pour faire du client, je te conseille de regarder rapidement du coté de la transpilation browserify+babel+uglify+watchify parce que c’est un peu touffu et abscons la première fois mais par contre une fois que ça roule ça devient difficile de revenir à une longue liste d’éléments script et à ES5.

      Et pose des questions !

      robin @robin CC BY
    • @suske
      Suske @suske 10/05/2016

      #bande_de_geeks :-*

      Suske @suske
    • @james
      James @james PUBLIC DOMAIN 10/05/2016
      @suske

      Bisous aussi @suske

      Merci à tous ! Vraiment :-)

      Et oui je risque fort de revenir avec des questions ;)

      James @james PUBLIC DOMAIN
    • @0gust1
      0gust1 @0gust1 CC BY-NC 10/05/2016

      Coté task-runners grunt est clairement en perte de vitesse. Npm scripts est une solution très élégante (plus légère et moins de dépendances), par contre pas toujours simple à mettre en place sur des gros projets. Dans ce cas, j’utilise Gulp (mais toujours en combinaison avec npm-scripts). Pour ajouter un lien aux excellents postés par les autres : ▻http://naholyr.fr/2015/11/ecrire-des-scripts-npm-multi-plateforme
      Il y a aussi webpack, d’ailleurs qui est un « builder/packer » (plutôt qu’un task-runner utilisé pour faire du build... à la différence de Gulp/Grunt), capable de gérer aussi les CSS, les images, etc...

      Coté « packers », je privilégie browserify et l’écosystème autour, mais il faut avouer que webpack a certains avantages (et dès que l’on fait du #React sur des projets moyens à gros, on le rencontre souvent).

      Coté « data-binding », #React est plus que populaire... mais n’est pas toujours le plus simple ou le plus élégant (franchement il y a tout et n’importe quoi dans son écosystème). Pour des projets petits à moyen, j’aime beaucoup VueJS que je trouve largement sous-estimé (le technical-marketing-driven development de la communauté JS est... fatiguant :-S)

      Enfin, si tu veux être un « hipster » (et avoir peut être un cran d’avance), regarde du coté de :
      – Elm (un dialecte de Haskell compilant vers du JS) – surprenant de simplicité et très intéressant, bien plus propre et simple que du React+Redux (il a servi d’inspiration aux auteurs de Redux)
      – Cycle.js, pour faire du « Functionnal Reactive Programming » (pas encore suffisament testé, mais les concepts sont intéressants).

      ►http://elm-lang.org (la version 0.17 vient juste de sortir et est encore plus simple)
      ▻http://cycle.js.org

      0gust1 @0gust1 CC BY-NC
    • @robin
      robin @robin CC BY 11/05/2016
      @0gust1

      Si je puis exprimer quelques légères différences d’opinion avec @0gust1... :)

      Personnellement, je bosse au quotidien sur un gros projet JS et je n’ai pas rencontré de situation où les npm scripts n’étaient pas suffisants. Il est vrai qu’on n’a pas de collaborateur sous Windows, du coup la portabilité est plus simple. YMMV !

      Pour WebPack, je m’en méfie comme de la peste. J’ai tenté le coup il y a six mois pour un nouveau projet, et au départ ça avait l’air génial, presque magique. Et puis j’ai voulu configurer un truc pas tout à fait comme tout le monde... catastrophe. Au moins browserify ça ne fait qu’un truc mais ça le fait bien, et quand tu veux autre chose il suffit d’aller voir ailleurs :)

      C’est vrai que la qualité de l’écosystème React est inégale, mais il y a quand même des choses très bonnes (comme react-motion, ou les linters de JSX). Personnellement je ne suis pas fan de Redux, je pense qu’il y a une place à prendre. À l’usage React même c’est quand même top.

      J’espère que les gars de Cycle vont nous sortir quelque chose de bien ; ils semblent avoir bien compris les problèmes de RxJS (IMHO inutilisable même si le concept est top) avec xstream. À suivre, mais bon c’est très, très hipster pour commencer :)

      robin @robin CC BY
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/05/2016

      Je lis cela comme de la prose ésotérique. Presque je pourrais entrer en transe si j’allumais des bougies.
      :D

      RastaPopoulos @rastapopoulos CC BY-NC
    • @b_b
      b_b @b_b PUBLIC DOMAIN 11/05/2016
      @rastapopoulos

      @rastapopoulos c’est pour toi :p

      http://www.commitstrip.com/wp-content/uploads/2016/05/Strip-Pepperidge-farm-650-final.jpg

      b_b @b_b PUBLIC DOMAIN
    • @rastapopoulos
      RastaPopoulos @rastapopoulos CC BY-NC 11/05/2016

      Haha, ouais, c’est un peu ça. #vieux_con

      RastaPopoulos @rastapopoulos CC BY-NC
    • @nicolasm
      Nicolas🌱 @nicolasm CC BY-SA 11/05/2016

      J’ai la même impression que pour la cartoon. Avant tu voulais coder, tu codais. Maintenant faut investir beaucoup de temps pour comprendre l’environnement avant de comprendre comment coder.

      Nicolas🌱 @nicolasm CC BY-SA
    • @nicolasm
      Nicolas🌱 @nicolasm CC BY-SA 11/05/2016

      (et puis jquery, c’est super récent hé :p ) #dhtml

      Nicolas🌱 @nicolasm CC BY-SA
    • @0gust1
      0gust1 @0gust1 CC BY-NC 11/05/2016
      @robin @rastapopoulos @nicolasm

      @robin pas vraiment de désaccord :) c’est vrai que ces dernières années j’ai bossé dans des environnements assez hétérogènes (l’outillage devait marcher sous Win, OSX et Linux).

      Pour webpack, j’ai eu exactement les mêmes sentiments...

      Sinon, je m’aperçois que j’ai oublié de mettre le lien vers #vueJS : ►http://vuejs.org Pour des projets pas énormes, je trouve ça beaucoup plus rapide/efficace que React.

      Désolé pour les liens de « hipster » (c’est vrai que je ne commencerais pas par là ;-) ). Je trouve Elm néanmoins très intéressant, j’ai été très surpris en essayant. Il n’est pas encore assez intégré avec les APIs des navigateurs à mon goût : poster un form « à l’ancienne » n’est pas vraiment simple, utiliser le localStorage non plus (les trucs que j’ai constaté).

      Sinon, pour @rastapopoulos , @nicolasm , je ressens ça assez fort. On a beaucoup parlé de #javascript_fatigue ces derniers temps. De mon coté, j’ai eu de sacrées prises de bec avec de jeunes devs zélotes des derniers trucs à la mode, aux avis dichotomiques, ne sachant pas faire la part des choses entre le marketing des équipes techniques des GAFAM et la réalité du code, des besoins. On peut encore écrire de très bonnes choses avec jQuery si l’on organise son code avec soin. Je suis devenu un vieux con aussi, je crois.

      0gust1 @0gust1 CC BY-NC
    • @robin
      robin @robin CC BY 12/05/2016

      Il y a des niveaux dans le #vieux_con :)

      Perso je ne songe même plus à la #js_fatigue, juste je passe mes journées un peu à coté du torrent de trucs qui sortent, je sirote ma bière, et de temps en temps quand il y a un bon outil qui passe je l’attrape. Il fait frais, la vue est belle.

      robin @robin CC BY
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 26/01/2016

    nativefier
    ▻https://www.npmjs.com/package/nativefier

    Nativefier is a command line tool that allows you to easily create a desktop application for any web site with succinct and minimal configuration. Apps are wrapped by #Electron in an OS executable (.app, .exe, etc.) for use on Windows, OSX and Linux.

    #npm

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @robin
    robin @robin CC BY 15/01/2016

    ngraph.graph
    ▻https://www.npmjs.com/package/ngraph.graph

    Graph data structure for ngraph.*. Library implements API to modify graph structure and supports event-driven notifications when graph changes.

    robin @robin CC BY
    Écrire un commentaire
  • @robin
    robin @robin CC BY 29/09/2015

    leadfoot
    ▻https://www.npmjs.com/package/leadfoot#star

    Unlike existing WebDriver client libraries that assume the remote server will just do the Right Thing, Leadfoot detects and works around inconsistencies in WebDriver server implementations, so you can just worry about making your tests work—not bugs in WebDriver servers.

    Enhanced capabilities are also exposed to end-users about which features and APIs a remote environment supports, so you don’t have to browser sniff to decide whether (for example) you’re testing a touch-device or a mouse-device. Optional convenience methods are also available for use, and support for chai-as-promised is built in.

    robin @robin CC BY
    Écrire un commentaire
  • @b_b
    b_b @b_b PUBLIC DOMAIN 21/03/2015

    mversion
    ▻https://www.npmjs.com/package/mversion

    Imitates #npm version to also work on other packaging files. For those times you have either have multiple packaging files (like bower.json, component.json, manifest.json) or just not a package.json file. mversion can easily bump your version and optionally commit and create a tag.

    b_b @b_b PUBLIC DOMAIN
    Écrire un commentaire
  • @nicolasm
    Nicolas🌱 @nicolasm CC BY-SA 11/12/2014

    ▻https://www.npmjs.com/package/facebook-export

    Enfin un outil pratique pour télécharger des données depuis #facebook. Notamment l’historique des groupes.

    Nicolas🌱 @nicolasm CC BY-SA
    Écrire un commentaire