Design & Développement web - Le topic des canards qui mangent des cookies

[tompalmer]

Y'a l'AVIF et le JPEG XL et même le Jpeg XR, c'est trop la jungle.

Si juste les 5 principaux navigateurs pouvaient se mettre d'accord sur un truc quand même ... perso j'ai refusé d'entrer dans ce jeu où tu swap tes fichiers images pour un navigateur (pour ça que j'avais pas voulu faire le Webp).

Parce que déja que j'ai un truc pour compresser mes images à la volée, ça me coûte un crédit supplémentaire pour générer des Webp dont tout le monde se bat les couilles.

[tenshu]

Yeah. Je me demande pourquoi ils ne poussent pas ça sur l'OS précédent. C'est juste Safari après tout. Bon, après je suis un noob en Apple.

Pour MacOS ça se comprend, les mises a jour se suivent assez bien même sur des machines un peu datées.

Ce qui n'est pas du tout le cas sur les devices mobiles.
Là c'est clairement pour pousser le consommateur à acheter la génération suivante. Avec une nette tendance à laisser une dernière version de l'os un peu daubée pour bien enfoncer le clou.

[tompalmer]

On en est a 5/6 ans d'iphones supportés par Apple, c'est 1 ou 2 ans de différence avec les Mac en fait

Et que je sache Safari est mis a jour avec l'OS

c'est clairement pour pousser le consommateur à acheter la génération suivante.

J'ai jamais vu un type racheter un smartphone à cause du navigateur

[tenshu]

Par ce qu'il ... n'y a pas que le navigateur qui n'est pas à jour.

[tompalmer]

Je viens de vérifier, le prochain IOS tournera encore sous Iphone 6S, ça nous amène a 2015, ça fera donc 7 ans de support en 2022 (minimum)

Et de toutes façons il suffit de vérifier sur CanIuse : 90% des utilisateurs Apple tournent sous les dernières versions de Safari

Les fonctionnalités qui ne sont pas portés sur les Iphones anciens ne sont quasi que des features dérivées du matos, l'appareil photo quoi.

[Awake]

Au fait c'est vrai cette histoire que seul le moteur de rendu de safari n'est disponible sous iOs ? Chrome/FF/Webviews doivent utiliser le moteur à la ramasse de safari ?

[tompalmer]

Je sais pas s'il est si à la ramasse que ça, je l'utilise au quotidien et c'est rare de trouver un truc incompatible et ça charge aussi rapidement

C'est pas IE quoi on en est plus là

[deathdigger]

Je sais pas s'il est si à la ramasse que ça, je l'utilise au quotidien et c'est rare de trouver un truc incompatible et ça charge aussi rapidement

C'est pas IE quoi on en est plus là

Mouais, faut le dire vite.
Les Webm ne sont pas supportés par exemple. Apparemment, il n'y a que cette année qu'ils ont décidé d'être magnanime et d'autoriser les utilisateurs à utiliser ce standard du web. J'imagine qu'ils avaient bon espoir de relancer Quicktime...

[Foksadure]

https://www.howtogeek.com/184283/why...hone-and-ipad/

L'article date de 2014, mais pour ce que j'en constate sur un iPad Mini 4 c'est toujours le cas.

La restriction sur le navigateur par défaut n'a même été levée que très récemment. Et encore, à la Apple, c'est à dire qu'on retombe souvent sur Safari pour les recherches web ou l'ouverture de liens même si on a déclaré DuckDuckGo ou Firefox Focus en browser principal.

Pour une raison qui m'échappe, Safari est également le seul à pouvoir télécharger les pdf.

Concernant les webm, il existe des browsers tiers très rudimentaires qui les supportent.
L'intégration sera bienvenue.

[tompalmer]

Qui utilise le Webm ? vraie question, perso j'ai vu ce format sur youtube utilisé pendant quelques mois vers 2011 et c'est tout

[Orhin]

Pour MacOS ça se comprend, les mises a jour se suivent assez bien même sur des machines un peu datées.

Ce qui n'est pas du tout le cas sur les devices mobiles.
Là c'est clairement pour pousser le consommateur à acheter la génération suivante. Avec une nette tendance à laisser une dernière version de l'os un peu daubée pour bien enfoncer le clou.

J'ai beaucoup de critiques à faire à Apple, mais le support des màj sur les vieux téléphones reste laaargement au dessus de ce qui se fait sur Android.

[deathdigger]

Qui utilise le Webm ? vraie question, perso j'ai vu ce format sur youtube utilisé pendant quelques mois vers 2011 et c'est tout

4chan par exemple.

[Awake]

Très souvent quand j'ai besoin d'utiliser des features css ou js relativement modernes, safari ne les supporte pas. Alors certes ça n'a pas grand chose à voir avec ie6, mais c'est tout de même galère de devoir être compatible avec.

[BentheXIII]

Bonjour à tous,

Mon taf est en train de basculer sur un nouvel outil de gestion documentaire avec un frontend angular/nodejs et un backend en Django (n'hésitez pas à me dire si j'ai déjà dit n'importe quoi, tout ceci est assez nouveau pour moi ^^).

En l'absence des collègues ayant monté la frontend / backend, je voulais commencer à expérimenter avec la frontend pour commencer à prototyper des idées de rajout ( de la visualisation de pdf intégrée au navigateur au lieu d'un DL au moment de cliquer vers un lien pointant vers un pdf, ce genre de truc ...).

Le soucis : ng build exécuté depuis le sous-répertoire du répertoire git de la frontend cloné (MyCoolProject/frontend/angular) ne génère pas les fichiers statiques permettant d'instancier la frontend.

Il suffirait normalement d'exécuter python manage.py runserver 8000 depuis la racine du répertoire pour démarrer le serveur et pouvoir ainsi y accéder depuis l'URL affichée dans le terminal (pour un accès purement local)

manage.py :

def main():
    """Run administrative tasks."""
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'django_site.settings.local')
    try:
        from django.core.management import execute_from_command_line
    except ImportError as exc:
        raise ImportError(
            "Couldn't import Django. Are you sure it's installed and "
            "available on your PYTHONPATH environment variable? Did you "
            "forget to activate a virtual environment?"
        ) from exc
    execute_from_command_line(sys.argv)


if __name__ == '__main__':
    main()

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
September 09, 2021 - 14:53:18
Django version 3.2.7, using settings 'django_site.settings.local'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[09/Sep/2021 14:53:24] "GET / HTTP/1.1" 200 10999
[09/Sep/2021 14:53:24] "GET /staticfiles/frontend/runtime.js HTTP/1.1" 404 1826
[09/Sep/2021 14:53:24] "GET /staticfiles/frontend/styles.css HTTP/1.1" 404 1826
[09/Sep/2021 14:53:24] "GET /staticfiles/debug_toolbar/css/toolbar.css HTTP/1.1" 304 0
[09/Sep/2021 14:53:24] "GET /staticfiles/frontend/polyfills.js HTTP/1.1" 404 1832
[09/Sep/2021 14:53:24] "GET /staticfiles/debug_toolbar/js/toolbar.js HTTP/1.1" 304 0
[09/Sep/2021 14:53:24] "GET /staticfiles/frontend/vendor.js HTTP/1.1" 404 1823
[09/Sep/2021 14:53:24] "GET /staticfiles/frontend/main.js HTTP/1.1" 404 1817
[09/Sep/2021 14:53:24] "GET /staticfiles/debug_toolbar/css/print.css HTTP/1.1" 304 0
[09/Sep/2021 14:53:24] "GET /staticfiles/debug_toolbar/js/utils.js HTTP/1.1" 304 0
Not Found: /favicon.ico
[09/Sep/2021 14:53:24] "GET /favicon.ico HTTP/1.1" 404 12594

Comme vous pouvez le voir, erreur 404 pour tous les composants du dossier staticfiles/frontend. Et pour cause, ce dernier n'a pas été créé (et donc n'a pas été collecté avec python manage.py collecstatic).

Je suis en train de tourner résolument chèvre, d'autant plus que ng build --verbose ne renvoie absolument rien (pas d'erreur ou de warning, rien). Il génère bien les dossiers statiques admin, debug_toolbar et rest_framework , mais point de trace de frontend.

Ci-dessous, le contenu de angular.js et le résultat de ng --version

A votre bon coeur m'sieur dames, send halp

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "MyCoolProject": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "../static/frontend/",
            "index": "src/index.html",
            "main": "src/main.ts",
            "verbose" : true,
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "MyCoolProject:build",
            "proxyConfig": "src/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "MyCoolProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MyCoolProject:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "MyCoolProject:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "MyCoolProject:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "MyCoolProject"
}

  _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.4
Node: 14.17.6
Package Manager: npm 6.14.15
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1202.4
@angular-devkit/core         12.2.4
@angular-devkit/schematics   12.2.4
@schematics/angular          12.2.4

[Dross]

T'a bien installé les dépendances avec "npm install" ?
Sinon pour bosser sur du front tu sera plus à l'aise avec "ng serve" ou plus simplement "npm start" (par convention on va pointer sur celui là pour le dev, c'est peut être aussi le cas de ton projet).

[BentheXIII]

C'est bon! Je pense que le souci venait du fait que je ne lançais pas npm install depuis frontend/angular, où se situait package.json définissant les dépendances, mais depuis la racine du projet.

[Orhin]

Par contre si ton ng build fonctionne sans que tu aies fait de npm install, ça veut dire que t'as installé le CLI Angular en global.
Et ça c'est caca.

Mais sinon je plussoie Dross, si tu veux commencer à tester des trucs le mieux est de lancer un serveur de dev en local avec ng serve ou npm start.
Comme ça lorsque tu vas effectuer des modifications sur les fichiers, le serveur va se mettre à jour automatiquement sans que tu aies besoin de recompiler manuellement.

[GrandFather]

Ca y est, après tant d’années, IE11 est officiellement déclassé dans ma boîte, et remplacé par Firefox comme navigateur de référence pour les applications web métiers !

C’est étrange, après avoir autant souhaité sa disparition, il laisse comme un grand vide...

Nan, j’déconne.

[Awake]

Question de débutant backend : j'ai une app node en typescript, avec nodemon qui recompile et relance le serveur à chaque modif. Le truc c'est qu'il recompile toute l'app à chaque fois, et ça prend du temps, alors qu'il me semble qu'il est possible de faire des recompilations partielles beaucoup plus rapides, comme le fait --watch. Des conseils sur comment optimiser ça ?

[Sangoon]

Question de débutant backend : j'ai une app node en typescript, avec nodemon qui recompile et relance le serveur à chaque modif. Le truc c'est qu'il recompile toute l'app à chaque fois, et ça prend du temps, alors qu'il me semble qu'il est possible de faire des recompilations partielles beaucoup plus rapides, comme le fait --watch. Des conseils sur comment optimiser ça ?

https://i.ibb.co/W6C9Yyj/animesher-c...net-681726.png

Salut si c'est une appli en nodejs uniquement (et donc en js pure et pas en ts ou autre), à ce jour (à moins que j'ai raté quelque chose), il n'y a pas hot reload possible avec v8 ca en parle la par exemple https://github.com/nodejs/modules/issues/459.
Après, à moins que ton appli soit énorme le démarrage d'une appli node est très rapide.

[Getz]

Je pense qu'il ne se plaint pas du temps de redémarrage de l'application, mais plutôt de la compilation typescript qui se relance entièrement avant le redémarrage.
As-tu renseigné "incremental" dans tes options de compilations de ton tsconfig ? (https://www.typescriptlang.org/docs/...cript-3-4.html)
Si tu l'as déjà fait, c'est quoi exactement ta commande nodemon ?

[Awake]

Je pense qu'il ne se plaint pas du temps de redémarrage de l'application, mais plutôt de la compilation typescript qui se relance entièrement avant le redémarrage.
As-tu renseigné "incremental" dans tes options de compilations de ton tsconfig ? (https://www.typescriptlang.org/docs/...cript-3-4.html)
Si tu l'as déjà fait, c'est quoi exactement ta commande nodemon ?

Avec --incremental et quelques autres modifs sur la compilation sass, je suis passé de 16.50s (TS: 0:12.41 elapsed, SASS: 0:04.10 elapsed) à 5.60s de compilation ! Je suppose que pour 17k lignes de TS c'est normal ? Merci en tout cas

[Sangoon]

Je pense qu'il ne se plaint pas du temps de redémarrage de l'application, mais plutôt de la compilation typescript qui se relance entièrement avant le redémarrage.
As-tu renseigné "incremental" dans tes options de compilations de ton tsconfig ? (https://www.typescriptlang.org/docs/...cript-3-4.html)
Si tu l'as déjà fait, c'est quoi exactement ta commande nodemon ?

Avec --incremental et quelques autres modifs sur la compilation sass, je suis passé de 16.50s (TS: 0:12.41 elapsed, SASS: 0:04.10 elapsed) à 5.60s de compilation ! Je suppose que pour 17k lignes de TS c'est normal ? Merci en tout cas

Oui effectivement j'avais raté le "une app node en typescript" dans le message original, mes plus plates ^^

[raaaahman]

Hello les canards,
je vous remercie pour les infos sur les CDN l'autre fois (je n'en ai pas encore mis en place ceci dit... ).

Je viens avec une autre question concernant l'optimisation des perfs javascript (côté front) pour ce Code Pen Challenge. Je ne pense pas qu'une solution pur CSS existe (serait-elle nécessairement plus performante d'ailleurs?).

[MrBeaner]

Par contre si ton ng build fonctionne sans que tu aies fait de npm install, ça veut dire que t'as installé le CLI Angular en global.
Et ça c'est caca.

C'est pourtant ce qui est recommandé dans la doc : https://angular.io/guide/setup-local

À mes yeux ça a du sens en pratique, mais je sais pas comment tu fais.

[Orhin]

C'est pourtant ce qui est recommandé dans la doc : https://angular.io/guide/setup-local

À mes yeux ça a du sens en pratique, mais je sais pas comment tu fais.

Oui je sais que c'est le conseil de la doc, et ça a du sens pour une introduction aux nouveaux utilisateurs.

Sauf que dans une utilisation avancée, c'est une mauvaise pratique et ce pour plusieurs raisons :
- ça allonge le setup du projet sur un nouveau poste (chaque dev devra installer en global le CLI en plus de faire un npm install)
- ça oblige aussi à l'installer en global dans un environnement de build automatisé (bon si c'est conteneurisé ça ne pose pas de problème, mais c'est pas toujours le cas)
- en cas de montée de version, faut mettre à jour une dépendance globale au lieu simplement faire un npm install
- ça oblige à réinstaller le CLI en global dès que tu switches d'un projet à un autre n'utilisant pas la même version

Bref, la bonne pratique c'est de l'installer en dépendance locale via un npm install @angular/cli -D.
D'ailleurs c'est pas spécifique au CLI Angular : toute dépendance qui peut être installée ou configurée localement doit l'être.

La seule problématique reste la génération du squelette du projet (étape qui ne sera réalisée qu'une fois par une personne de toute façon) : tu utilises l'outil npx fourni par npm.
Celui-ci installe temporairement n'importe quelle dépendance node pour permettre son utilisation comme si elle était installée en global, puis fait le ménage tout seul une fois que c'est fini.
Du coup ça donne npx @angular/cli ng new toto.

[MrBeaner]

Merci pour le workaround Je vais tester à l'avenir, comme j'ai l'habitude de tout garder en local avec Python.

[Dross]

Je pense que c'est une question de préférence pour le coup, que le tooling soit installé en global ne me choque pas, mais je viens de .NET où tu fait rien avant d'avoir installé des gigas d'IDE et de dépendances sur la bécane.

Perso je trouve plus pratique d'avoir le tooling dispo dans n'importe quel CLI n'importe quand, ng n'est pas utilisé qu'au début, mais à la création de n'importe quel composant, service, guard, etc.

[Orhin]

Je pense que c'est une question de préférence pour le coup, que le tooling soit installé en global ne me choque pas

Ben le truc c'est que dès le moment où :
1) tu veux avoir un environnement de dev facilement reproductible
2) t'es amené à travailler sur plusieurs projets en parallèle
T'as pas trop le choix.

C'est comme NodeJS, si tu veux bosser efficacement tu l'installes avec nvm (https://github.com/nvm-sh/nvm ou https://github.com/coreybutler/nvm-windows) histoire de passer d'une version à l'autre facilement.

Perso je trouve plus pratique d'avoir le tooling dispo dans n'importe quel CLI n'importe quand, ng n'est pas utilisé qu'au début, mais à la création de n'importe quel composant, service, guard, etc.

Mais t'as toujours accès ng même en l'installant en local.

Plusieurs solutions :
1) Tu utilises npx ng (qui ira chercher la version installée localement avant de taper sur le dépôt npm)
1) Tu mets le path du dossier bin de tes nodes_modules dans le path de ton terminal (c'est le cas par défaut du terminal des IDE Jetbrains par exemple)
2) Tu créées des scripts npm qui lancent ng (soit tout seul et tu lui fourni les arguments à la main, soit avec des arguments pré-remplis)

[Dross]

Ben le truc c'est que dès le moment où :
1) tu veux avoir un environnement de dev facilement reproductible
2) t'es amené à travailler sur plusieurs projets en parallèle
T'as pas trop le choix.

Sauf que contrairement à NodeJS, ng fallback à la version locale si c'est pas la même (il te l'écrit dans les logs d'ailleurs). T'a donc le meilleur des deux mondes.

Mais t'as toujours accès ng même en l'installant en local.

Plusieurs solutions :
1) Tu utilises npx ng (qui ira chercher la version installée localement avant de taper sur le dépôt npm)
1) Tu mets le path du dossier bin de tes nodes_modules dans le path de ton terminal (c'est le cas par défaut du terminal des IDE Jetbrains par exemple)
2) Tu créées des scripts npm qui lancent ng (soit tout seul et tu lui fourni les arguments à la main, soit avec des arguments pré-remplis)

Utiliser des outils supplémentaires, rajouter des dossiers de dev dans le path pour des binaires ou créer des scripts me semble bien compliqué pour un problème qui est géré par une installation centralisée.

Mais comme j'ai dis : question de préférences probablement.