GNU/Linux and opensource news gathered

http://linux.feeder.ww7.be
«  janvier 2018  »
lundi mardi mercredi jeudi vendredi samedi dimanche
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 1 2 3 4
retour à la date courante

Aujourd'hui 22 nouvelles :


  • Mon logiciel est libre, je ne te dois rien, par Philippe Scoffoni, 4 janvier 2018

    jeudi 4 janvier 2018 :: Philippe Scoffoni :: RSS
    expliquer modele logiciel libreDerrière cette accroche provocatrice, un constat. Nous sommes en 2018, le logiciel libre et l‘open source sont largement répandus et utilisés. Pourtant leurs utilisateurs (informaticien ou pas) continus globalement d’ignorer les principes et modèles économiques qui vont avec.
    Avec Open-DSI, nous avons commencé à publier des modules pour Dolibarr sous licence GPL dont notamment un gros bout de code permettant de synchroniser une boutique WooCommerce et Dolibarr : WooSync.
    Je m’attendais à de savoureux échanges et j’avoue ne pas avoir été déçu 🙂
    Ce qui en ressort c’est un niveau de connaissance relativement faible de ce qu’est le modèle du logiciel libre. Nous avons été accusés d’escroc sur le forum Dolibarr par des utilisateurs ayant téléchargé le module sans parvenir à le faire fonctionner. Notez bien qu’il n’ont rien payé ou juste les 0.96€TTC via le Dolistore car c’était pour nous le seul moyen d’avoir leurs coordonnées pour les prévenir que par défaut, il n’y avait ni support ni engagement de correction d’anomalie mais qu’il pouvait souscrire des prestations de support. L’avertissement est aussi sur le github du module sur lequel sont mise à dispositions les corrections et évolutions.
    Pour résumer le reproche : « il y a des bugs (reste à prouver que ce ne soit pas un souci d’environnement), on nous demande de payer pour du support, ce n’est pas normal ! » Merci à Agnès d’avoir pris position sur le sujet 🙂
    Évidemment avec ce genre de commentaires, vous n’avez aucune envie de faire quoi que ce soit ! Je concède cependant que l’on se doit de fournir le logiciel le plus aboutit qui soit. Mais il faut aussi comprendre que certains contextes rendent difficile la mise au point de solution 100% bug free (cela existe ??). Avec WooSync nous sommes clairement dans cette situation. Pour ceux qui ne veulent prendre aucun risque, tout est prévu. Mais cela a un prix (et en l’occurrence nous savons parfaitement pourquoi il est encore élevé à ce jour) et personne n’a dit que les logiciels libres étaient gratuits et encore moins les services qui vont avec !
    Je ne vais pas m’étendre aujourd’hui sur le sujet, juste rappeler qu’un logiciel libre est mis à disposition sous une licence avec des termes bien précis. Cette licence stipule que l’utilisation de ce logiciel se fait à vos risques et périls (chapitre 15 et 16 en MAJUSCULE pour la licence GPL) sans possibilité d’exiger du ou des auteurs un quelconque engagement de correction. La contrepartie est la liberté d’utilisation, d’accès au code source, à sa modification et libre diffusion à qui vous le souhaitez.
    Payer pour que l’on vous corrige un bug s’appelle « contribuer ». C’est une démarche saine et normale pour un utilisateur de logiciel libre. Espérons que la campagne de Framasoft Contributopia permette de mieux faire connaître cette notion qui mérite d’être mieux comprise. Il faudra aussi que les acteurs professionnels du secteur soit plus clairs sur ce sujet, car là aussi ce n’est pas toujours tout rose il faut le reconnaître j’y reviendrais.
    Réagir à cet article
    Article original écrit par Philippe Scoffoni le 04/01/2018. | Lien direct vers cet article

    Cette création est mise à disposition sous un contrat Creative Commons BY à l'exception des images qui l'illustrent (celles-ci demeurent placées sous leur mention légale d'origine).
    . Lire la suite Philippe Scoffoni
  • Mon logiciel est libre, je ne te dois rien, par Philippe Scoffoni, 4 janvier 2018

    jeudi 4 janvier 2018 :: Philippe.Scoffoni.Net :: RSS
    expliquer modele logiciel libreDerrière cette accroche provocatrice, un constat. Nous sommes en 2018, le logiciel libre et l‘open source sont largement répandus et utilisés. Pourtant leurs utilisateurs (informaticien ou pas) continus globalement d’ignorer les principes et modèles économiques qui vont avec.
    Avec Open-DSI, nous avons commencé à publier des modules pour Dolibarr sous licence GPL dont notamment un gros bout de code permettant de synchroniser une boutique WooCommerce et Dolibarr : WooSync.
    Je m’attendais à de savoureux échanges et j’avoue ne pas avoir été déçu 🙂
    Ce qui en ressort c’est un niveau de connaissance relativement faible de ce qu’est le modèle du logiciel libre. Nous avons été accusés d’escroc sur le forum Dolibarr par des utilisateurs ayant téléchargé le module sans parvenir à le faire fonctionner. Notez bien qu’il n’ont rien payé ou juste les 0.96€TTC via le Dolistore car c’était pour nous le seul moyen d’avoir leurs coordonnées pour les prévenir que par défaut, il n’y avait ni support ni engagement de correction d’anomalie mais qu’il pouvait souscrire des prestations de support. L’avertissement est aussi sur le github du module sur lequel sont mise à dispositions les corrections et évolutions.
    Pour résumer le reproche : « il y a des bugs (reste à prouver que ce ne soit pas un souci d’environnement), on nous demande de payer pour du support, ce n’est pas normal ! » Merci à Agnès d’avoir pris position sur le sujet 🙂
    Évidemment avec ce genre de commentaires, vous n’avez aucune envie de faire quoi que ce soit ! Je concède cependant que l’on se doit de fournir le logiciel le plus aboutit qui soit. Mais il faut aussi comprendre que certains contextes rendent difficile la mise au point de solution 100% bug free (cela existe ??). Avec WooSync nous sommes clairement dans cette situation. Pour ceux qui ne veulent prendre aucun risque, tout est prévu. Mais cela a un prix (et en l’occurrence nous savons parfaitement pourquoi il est encore élevé à ce jour) et personne n’a dit que les logiciels libres étaient gratuits et encore moins les services qui vont avec !
    Je ne vais pas m’étendre aujourd’hui sur le sujet, juste rappeler qu’un logiciel libre est mis à disposition sous une licence avec des termes bien précis. Cette licence stipule que l’utilisation de ce logiciel se fait à vos risques et périls (chapitre 15 et 16 en MAJUSCULE pour la licence GPL) sans possibilité d’exiger du ou des auteurs un quelconque engagement de correction. La contrepartie est la liberté d’utilisation, d’accès au code source, à sa modification et libre diffusion à qui vous le souhaitez.
    Payer pour que l’on vous corrige un bug s’appelle « contribuer ». C’est une démarche saine et normale pour un utilisateur de logiciel libre. Espérons que la campagne de Framasoft Contributopia permette de mieux faire connaître cette notion qui mérite d’être mieux comprise. Il faudra aussi que les acteurs professionnels du secteur soit plus clairs sur ce sujet, car là aussi ce n’est pas toujours tout rose il faut le reconnaître j’y reviendrais.
    Réagir à cet article
    Article original écrit par Philippe Scoffoni le 04/01/2018. | Lien direct vers cet article

    Cette création est mise à disposition sous un contrat Creative Commons BY à l'exception des images qui l'illustrent (celles-ci demeurent placées sous leur mention légale d'origine).
    . Lire la suite Philippe Scoffoni
  • Fix Jquery UI sortable table on Zend framework web application -- 2 - 04/01/2018 15:56 EST by vo2lab, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    We have a web application written using Zend framework and we are trying to make a <tbody> sortable using Jquery.UI . However the sorting function is not functioning at all. Due to the nature of... (Budget: kr13 - kr75 SEK, Jobs: AJAX, HTML, Javascript, jQuery / Prototype, PHP) Lire la suite
  • Sangoma freepbx needs to be programed by icslaus, 4 janvier 2018

    jeudi 4 janvier 2018 :: Asterisk PBX projects and jobs :: RSS
    I need someone to help configure a sangoma freepbx box for the phones and apps. (Budget: $30 - $250 USD, Jobs: Asterisk PBX, Cisco, Linux, System Admin, VoIP) Lire la suite
  • optimize and fix ecomm gift site magento 1.9 - 04/01/2018 13:21 EST by ziahziah, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    this is the issue "Registered Customers" is not working properly: When the registered customers try to send a gift again to new recipent.. they fill the fields with new recipient info but in the admin... (Budget: $30 - $250 USD, Jobs: AJAX, Database Administration, eCommerce, Magento, PHP) Lire la suite
  • ScriptFilter 2.1, 4 janvier 2018

    jeudi 4 janvier 2018 :: Web Development :: Firefox Add ons :: RSS
    Blocks scripts and resources from a website with Content Security Policy. ScriptFilter is a simple and lightweight add-on designed with WebExtensions API and compatible with Firefox, Chrome and Opera. You just need to click on the add-on button or right-click in a page to block scripts in a (...) Lire la suite
  • Push notification with Onesignals on a Question and Answer website by iPaderi, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    I need you to build a push notification service when user receive a new notification in the site. i prefer one signal but i lissen more (free) service similar. chiedimiqualcosa.it is the website avaiable... (Budget: €30 - €250 EUR, Jobs: AJAX, Javascript, JSON, PHP) Lire la suite
  • How to Price Your WooCommerce Projects, par Chris Lema, 4 janvier 2018

    jeudi 4 janvier 2018 :: WooThemes :: RSS
    Everything starts with the story you’re telling. One of the most overlooked aspects of pricing is the fact that it never happens in a vacuum. Pricing is always contextual. And to that end, the context for a WooCommerce project isn’t just the work that needs to be done. It’s about the customer, how they define […]
    The post How to Price Your WooCommerce Projects appeared first on WooCommerce. Lire la suite Chris Lema
  • Freepbx custom api by blinfo, 4 janvier 2018

    jeudi 4 janvier 2018 :: Asterisk PBX projects and jobs :: RSS
    I need a custom API in Freepbx to add, edit, delete an extension remotely from the server in PHP. I need a working example of each file. extension.php If the extension exist, update the values, else... (Budget: $30 - $250 CAD, Jobs: Asterisk PBX, PHP, Software Architecture) Lire la suite
  • Débuter avec Webpack, par ZeFifi, 4 janvier 2018

    jeudi 4 janvier 2018 :: Alsacreations.com - Actualités :: RSS
    Webpack
    Webpack par-ci, Webpack par-là… que vous soyez un développeur chevronné ou non, vous avez forcément entendu parler de cet outil. Qualifié de “bundler”, il vous permettra de faire bien des choses : utiliser un serveur local, utiliser le Live Reload, mais aussi et surtout compiler tous vos fichiers pour les regrouper en un seul. Pratique pour bien des raisons, notamment pour la performance de votre app ! Alors faites chauffer votre café, installez-vous bien : vous êtes à quelques lignes de comprendre Webpack et de bien le configurer !

    Initialisation du projet avec Node et NPM


    Si vous n’avez pas déjà installé Node et NPM, je vous invite à faire depuis le site officiel. Sur Ensuite, créez un dossier dans lequel vous allez travailler. Nommez-le donc comme vous le souhaitez.
    Afin de préparer votre projet à utiliser les dépendances NPM, ouvrez votre terminal, rendez-vous à la racine de votre projet et tapez la commande suivante :
    npm init -y
    Ensuite, vous allez devoir créez 2 dossiers (public contenant 2 fichiers : index.html, bundle.js et src contenant 1 fichier index.js) et 1 fichier webpack.config.js à la racine. Pour vous faciliter la tâche, voici les commandes à exécuter (sous Linux/macOS, ces opérations sont aussi réalisables sous Windows avec des commandes équivalentes ou "à la souris") :
    touch webpack.config.js && mkdir public src && cd public && touch index.html bundle.js && cd .. && cd src && touch index.js && cd ..
    

    Le dossier src/ nous permettra de stocker la logique de notre application tandis que le dossier public nous permettra de stocker tous nos fichiers minifiés. Mais ça, on le verra plus tard.
    Il ne manque plus qu’un dossier assets qui comprendra lui même 4 dossiers dont les noms parlent d’eux-mêmes : fonts, icons, images et stylesheets. Tapez donc cette commande pour les créer rapidement :
    mkdir assets && cd assets && mkdir fonts icons images stylesheets && cd ..
    

    Même chose que pour le point précédent, ces opérations sont aussi réalisables sous Windows avec des commandes équivalentes ou "à la souris".

    Installation de Webpack


    Voici la partie que vous attendiez avec impatience : l’installation de Webpack. Pour cela, tapez simplement :
    npm install --save-dev webpack@latest webpack-dev-server@latest
    

    Les flags --save-dev (ou raccourci avec -D) indiquent que Webpack correspond à une dépendance de développement, que l'on a besoin de ces fichiers durant cette phase. Vous pourrez le vérifier dans votre fichier package.json où il sera affiché sous la section dev dependencies. Un dossier node_modules va apparaître dans votre dossier : il s’agit des dépendances dont Webpack va avoir besoin pour fonctionner.
    Si vous utilisez git pour versionner vos fichiers, il est recommandé de ne pas inclure le dossier node_modules, c'est-à-dire de l'ajouter aux instructions .gitignore

    Configuration de Webpack


    Maintenant que Webpack est installé, nous allons devoir le configurer ! Pour cela, ouvrez webpack.config.js et ajoutez les lignes suivantes :
    const webpack = require("webpack");
    const path = require("path");

    Nous créons ici une constante appelée webpack, qui requiert le module webpack. C’est la base pour que tout fonctionne. Puis nous créons la variable path qui va nous permettre d’indiquer les bons chemins vers nos fichiers.
    Ensuite, il va falloir indiquer un point d’entrée (notre fichier index.js), c’est-à-dire le fichier qui sera lu et un point de sortie, à savoir le fichier qui sera compilé (bundle.js). Ensuite, nous allons exporter cette configuration :
    let config = {
      entry: "./src/index.js",
      output: {
        path: path.resolve(__dirname, "./public"),
        filename: "./bundle.js"
      }
    }
    
    module.exports = config;

    Maintenant, n’oubliez pas de lier votre fichier bundle.js à votre fichier index.html en tapant la ligne de code qui suit, juste avant la fermeture de votre balise <body> :
    <script src="bundle.js"></script>

    Avant de faire notre premier test, vous allez installer Webpack de manière globale sur votre ordinateur avec l'option -g :
    npm install -g webpack@latest
    

    Rendez-vous désormais dans votre fichier index.js et tapez le code JS de votre choix. J’ai opté pour un simple :
    document.write("Je débute avec Webpack !");
    

    Maintenant, tapez simplement webpack dans votre terminal et laissez la magie opérer :) Profitez-en pour ouvrir votre index.html avec le navigateur de votre choix pour voir le contenu de votre page !

    Un peu d’automatisation


    Tout ceci est bien beau, mais vous n’allez pas taper webpack dans votre terminal à chaque fois que vous voulez voir vos derniers changements, ça serait trop lourd ! Un flag existe pour cela : --watch ou -w. Allez-y, tapez webpack --watch et regardez ce qu’indique Webpack dans votre terminal :

    Cela signifie que Webpack surveille les modifications que vous allez apporter à vos fichiers. Vous pourrez donc simplement rafraîchir votre page HTML à chaque fois que vous voudrez voir le rendu. D’ici quelques paragraphes, nous verrons comment mettre en place le Hot Module Reload ou HMR pour les intimes : vos pages seront automatiquement rafraîchies à chaque fois que vous sauvegarderez votre travail depuis votre éditeur de code.
    Reprenez donc votre fichier index.js et éditez le texte que vous aviez écrit. Sauvegardez, rechargez la page : magie, ça fonctionne ! Mais nous pouvons encore améliorer ceci. Plutôt que de taper webpack --watch, nous allons rendre ça un peu plus sexy : rendez-vous dans votre fichier package.json et modifiez l’objet script comme suit :
    "scripts": {
        "watch": "webpack --watch"
      }
    

    Maintenant, lorsque vous voudrez lancer la commande watch depuis votre terminal, tapez npm run watch.

    Écrire de l’ES6 ? Le convertir en ES5 ? C’est possible !


    Vous avez sûrement déjà entendu parler de l’ES6 (ECMAScript 6), une version récente du langage Javascript (suivie par d'autres au fil des ans). Vous devez donc savoir qu’il n’est pas possible pour tous les navigateurs (les plus anciens) d'interpréter l’ES6.
    Webpack va nous permettre, en collaboration avec Babel, de compiler l’ES6 en ES5, ce qui rendra votre syntaxe récente (par exemple let et autres fonctions fléchées) parfaitement utilisable.
    Babel

    Pour cela, nous allons installer les dépendances Babel Loader et Babel Core :
    npm install --save-dev babel-loader babel-core
    

    Ajoutez ensuite le code suivant à votre fichier de configuration Webpack, après l’objet output :
    module: {
        rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: "babel-loader"
        }]
      }

    Quelques explications :
    • La première ligne va identifier tous les fichiers se terminant par .js
    • La seconde va exclure de ces fichiers tous ceux qui se situent dans node_modules
    • La troisième va charger le loader Babel Core babel-loader

    Votre fichier doit donc désormais ressembler à ça :
    const webpack = require("webpack");
    const path = require("path");
    
    let config = {
        entry: "./src/index.js",
        output: {
          path: path.resolve(__dirname, "./public"),
          filename: "./public/bundle.js"
        },
        module: {
            rules: [{
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader"
            }]
          }
      }
      
      module.exports = config;

    Maintenant, nous allons devoir indiquer à Babel qu’il doit utiliser le preset (pré-réglage) ES2015. Pour ce faire, entrez la commande suivante :
    npm install --save-dev babel-preset-env
    

    Créez un fichier .babelrc à la racine de votre projet et ajoutez-y le code suivant :
    {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "safari >= 7"]
          }
        }]
      ]
    }
    

    Il va rendre votre ES6 compatible avec les 2 dernières de tous les navigateurs et les versions de Safari supérieures ou égales à la 7. Babel utilisant Browserlist, je vous invite à vous rendre sur la page GitHub du projet si vous souhaitez en apprendre plus sur cette partie de la configuration.
    Allez dans votre fichier index.js et tapez de l’ES6. Pour ma part, je suis resté simple avec :
    let a = "J'apprends Webpack !";
    

    Ensuite, lancez Webpack avec npm run watch. Ouvrez votre fichier bundle.js et rendez-vous tout en bas. Si tout à bien fonctionné, vous devriez avoir var a = "J'apprends Webpack"; à la place de let, signe que Webpack a bien compilé l’ES6 en ES5 !

    Compiler du SCSS en CSS ? C’est possible aussi !


    Pour cela, vous allez avoir besoin d’installer de nouvelles dépendances :
    npm i --save-dev sass-loader node-sass css-loader style-loader autoprefixer postcss-loader
    

    De la même manière que vous l’aviez fait pour Babel Loader, tapez le code suivant dans webpack.config.js après le loader babel-loader :
    {
      test: /\.scss$/,
      loader: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
    }

    Votre fichier webpack.config.js doit désormais ressembler à ça :
    const webpack = require("webpack");
    const path = require("path");
    
    let config = {
        entry: "./src/index.js",
        output: {
          path: path.resolve(__dirname, "./public"),
          filename: "./bundle.js"
        },
        module: {
            rules: [{
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader"
            },
            {
                test: /\.scss$/,
                loader: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
              }]
          }
      }
      
      module.exports = config;

    Il va maintenant falloir créer un fichier .scss dans votre dossier assets/stylesheets pour tester tout ça :) Si vous n’êtes pas du tout familier avec SASS, je vous conseille de vous y intéresser. Il s’agit de CSS évolué, vous permettant notamment d’utiliser des variables. Nommez-le styles.scss. Voici le code que j’ai tapé, toujours pour rester simple :
    $midnight-blue : #2c3e50;
    
    body {
      background-color: $midnight-blue;
    }
    

    En gros, j’attribue le nom de Midnight-blue à la couleur dont le code hexadecimal est #2c3e50. Puis je l’utilise pour changer la couleur de mon body en indiquant le nom de la variable (retenir les codes couleur est plus difficile :)).
    Dans index.js, nous allons maintenant require ce fichier. Pour cela, écrivez la ligne suivante au-dessus de tout le code :
    require("../assets/stylesheets/styles.scss");
    

    Avant de vérifier que tout fonctionne, j’attire votre attention sur PostCSS et autoprefixer : ce sont 2 outils qui vont vous permettre de préfixer automatiquement votre code CSS pour tous les navigateurs. Il ne vous sera donc plus nécessaire de penser écrire des propriétés CSS spécifiques pour -webkit- (WebKit, Safari, Opera), -moz- (Firefox), -o- (anciennes versions d'Opera) et -ms- (Microsoft). Tout sera fait automatiquement !
    Pour en profiter, créez un fichier postcss.config.js à la racine de votre projet et ajoutez-y le code suivant :
    module.exports = {
        plugins: [
            require("autoprefixer")
        ]
    }

    Maintenant, relancez Webpack puis rechargez votre page. Elle devrait arborer un très beau Midnight Blue !

    C'est très bien mais cela ne fonctionnera que dans votre environnement de développement. Tant que le tout n’est pas extrait dans un fichier CSS, vos utilisateurs ne pourront pas profiter de vos belles interfaces. Nous allons donc faire en sorte que tout code écrit dans un fichier SCSS soit compilé en CSS dans un fichier adéquat.
    Pour cela, nous allons ajouter de nouvelles dépendances, vous commencez à en avoir l’habitude :
    npm install --save-dev extract-text-webpack-plugin
    

    Ajoutez la ligne suivante sous la ligne const path de votre fichier de configuration Webpack pour require le plugin Extract Text :
    const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
    

    Ensuite, remplacez :
    {
      test: /\.scss$/,
      loader: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
    }

    Par ceci, pour spécifier quels loaders utiliser et appeler le plugin :
    {
      test: /\.scss$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader', 'postcss-loader'],
      })
    }

    Enfin, initialisez le plugin avec le code suivant, après votre objet module :
    plugins: [
      new ExtractTextWebpackPlugin("styles.css")
    ]

    Votre fichier de configuration Webpack doit donc désormais ressembler à ceci :
    const webpack = require("webpack");
    const path = require("path");
    const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
    
    let config = {
        entry: "./src/index.js",
        output: {
          path: path.resolve(__dirname, "./public"),
          filename: "./bundle.js"
        },
        module: {
            rules: [{
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader"
            },
            {
                test: /\.scss$/,
                use: ExtractTextWebpackPlugin.extract({
                  fallback: 'style-loader',
                  use: ['css-loader', 'sass-loader', 'postcss-loader'],
                })
              }]
          },
          plugins: [
            new ExtractTextWebpackPlugin("styles.css")
          ]
      }
      module.exports = config;

    C’est l’heure du test ! Lancez npm run watch : si vous n’avez aucune erreur de compilation dans votre terminal et qu’un fichier styles.css a bien été généré dans votre dossier public avec du pur CSS, c’est que tout est bon ! N’oubliez pas de linker votre fichier CSS à votre HTML.

    Installer un serveur de développement avec Hot Module Reload


    Chose promise, chose due ! Nous allons maintenant un serveur de développement avec Hot Module Reload, qui rechargera automatiquement vos pages en fonction des modifications que vous apporterez à vos fichiers et qui en plus fera office de serveur local.
    On commence donc par l’habituelle installation de dépendances :
    npm install webpack-dev-server --save-dev
    

    Après l’array de votre objet plugins dans votre fichier de configuration Webpack, ajoutez le code suivant :
    devServer: {
      contentBase: path.resolve(__dirname, "./public"),
      historyApiFallback: true,
      inline: true,
      open: true,
      hot: true
    },
    devtool: "eval-source-map"
    

    Quelques explications :
    • contentBase : indique le dossier depuis lequel le contenu sera servi
    • historyApiFallback : activation d’un fallback vers index.html pour les Single Page Applications
    • inline : active la diffusion de messages dans la console DevTools
    • open : ouvre votre navigateur par défaut lorsque le serveur est lancé
    • hot : active le Hot Module Reload, soit le rechargement automatique de vos modules à chaque modification/sauvegarde de vos fichiers

    Votre fichier de configuration Webpack doit ressembler à ce qui suit après cette nouvelle mise à jour :
    const webpack = require("webpack");
    const path = require("path");
    const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
    
    let config = {
        entry: "./src/index.js",
        output: {
          path: path.resolve(__dirname, "./public"),
          filename: "./bundle.js"
        },
        module: {
            rules: [{
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader"
            },
            {
                test: /\.scss$/,
                use: ExtractTextWebpackPlugin.extract({
                  fallback: 'style-loader',
                  use: ['css-loader', 'sass-loader', 'postcss-loader'],
                })
              }]
          },
          plugins: [
            new ExtractTextWebpackPlugin("styles.css")
          ],
          devServer: {
            contentBase: path.resolve(__dirname, "./public"),
            historyApiFallback: true,
            inline: true,
            open: true,
            hot: true
          },
          devtool: "eval-source-map"
      }
    
    module.exports = config;

    Maintenant, il va falloir lancer votre serveur ! Pour ce faire, remplacez l’objet scripts de votre package.json par :
    "scripts": {
        "start": "webpack-dev-server -d --hot --config webpack.config.js --watch"
      }
    
    Comme vous pouvez le voir, il vous suffit de taper npm run start pour lancer votre serveur et non plus npm run watch comme nous le faisions jusqu’alors. Si tout se passe bien, votre navigateur va alors s’ouvrir avec un onglet contenant votre site.


    Et là, vous allez sûrement remarquer que votre page ne s’actualise pas automatiquement au gré de vos changements. Du coup, nous allons installer la dépendance css hot loader :
    npm install css-hot-loader --save-dev
    

    Puis nous allons remplacer :
    {
      test: /\.scss$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader', 'postcss-loader'],
      })
    }
    

    par :
    {
      test: /\.scss$/,
      use: ['css-hot-loader'].concat(ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader', 'postcss-loader'],
      }))
    }
    

    Vous pouvez désormais relancer Webpack avec npm run start et faire quelques changements dans votre fichier SCSS pour les voir opérer en live !

    Minifier les fichiers Javascript


    La minification, vous connaissez ? En gros, il s’agit de réduire la taille de vos fichiers de manière à accélérer leur chargement en retirant les caractères et espaces superflus. Le plugin UglifyJS va nous permettre d’atteindre ce but.
    Allez, on s’installe des dépendances :) ?
    npm install uglifyjs-webpack-plugin --save-dev
    

    Comme on l’a fait jusque là, créez une constante pour ce plugin dans votre fichier de configuration Webpack, sous le plugin Extract Text :
    const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
    

    N’oublions pas d’initialiser le plugin dans l’array d’objet plugins :
    new UglifyJSPlugin()
    

    Qui doit donc désormais ressembler à ça :
    plugins: [
      new ExtractTextWebpackPlugin("styles.css"),
      new UglifyJSPlugin()
    ]
    

    Lancez Webpack avec la commande webpack. Si tout a bien fonctionné, rendez-vous dans votre fichier bundle.js : vous verrez que le fichier a été minifié et ne tient plus que sur une seule ligne.

    Mettre en place des environnements de production et de développement


    C’est bien beau tout ça, mais comment est-ce que vous allez vous y retrouver dans tout ce code minifié ? Pas facile de débugger.
    Nous allons donc mettre en place un environnement de développement dans lequel rien ne sera minifié. Parce que pendant cette phase, on s’en fiche pas mal que votre code soit léger et vous devrez être capable de vous y retrouver facilement. En revanche, en production, c’est-à-dire le produit servi aux utilisateurs, on aura tout intérêt à minifier notre code.
    Rendez-vous donc dans votre fichier package.json et ajoutez les lignes suivantes à votre objet script (si vous etes sous Windows, ne tapez pas ce code, passez à l'étape suivante) :
    "dev": "webpack",
    "prod": "NODE_ENV=production webpack --progress"
    

    Attention, si vous développez sous Windows, la manipulation est légèrement différente. Commencez par installer la dépendance cross-env avec la commande suivante :
    npm install --save-dev cross-env

    Ensuite, modifiez votre fichier package.json de la manière suivante :
    "scripts": {
      "dev": "webpack",
      "prod": "cross-env NODE_ENV=production webpack --progress"
    }

    Lancez Webpack en faisant npm run prod. Si vous avez bien fait, vous devriez voir NODE_ENV=production webpack --progress dans votre terminal, comme sur la capture suivante :

    C’est très bien, mais ça ne fait actuellement rien de plus que notre commande npm run start en terme de différenciation d’environnement. Nous allons donc y remédier en tapant cette condition sous notre module.exports de notre fichier de configuration Webpack :
    if (process.env.NODE_ENV === 'production') {
      module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
      );
    }
    

    En gros, on dit dans cette condition que si on dans notre environnement de production, alors minifie nos fichiers en utilisant le plugin UglifyJS. Du coup, n’oubliez pas de supprimer new UglifyJSPlugin() de votre array plugins sinon vos fichiers seront minifiés dans tous les cas.
    Maintenant, si vous lancez npm run dev, vous serez dans votre environnement de développement, vos fichiers ne seront pas minifiés. Faites un test et regardez votre fichier bundle.js qui tient normalement sur plusieurs lignes. Faites un npm run prod et vous verrez qu’il est minifié et donc plus léger.

    Minifier les fichiers CSS


    Minifier les fichiers CSS repose sur le même principe que les fichiers JS, nous allons donc, comme d’habitude, installer une nouvelle dépendance :
    npm install optimize-css-assets-webpack-plugin --save-dev
    

    Ensuite, il va falloir créer une constante dans votre fichier de configuration Webpack :
    const OptimizeCSSAssets = require("optimize-css-assets-webpack-plugin");
    

    Enfin, on appelle le plugin dans notre condition (je vous rappelle qu’on ne veut la minification qu’en prod !) :
    new OptimizeCSSAssets()
    

    Voici à quoi doit ressembler cette condition :
    if (process.env.NODE_ENV === 'production') {
        module.exports.plugins.push(
            new webpack.optimize.UglifyJsPlugin(),
            new OptimizeCSSAssets()
        );
      }
    

    Vous pouvez faire comme nous avons fait plus haut pour la minification JS : faites un test avec npm run dev où vos fichiers CSS ne doivent pas être minifiés et un autre avec npm run prod où ils doivent l’être.
    Vous avez désormais 3 moyens de lancer Webpack :
    • npm run start : qui démarre votre serveur, le HMR et qui ne minifie aucun fichier
    • npm run dev : qui lance votre environnement de développement sans HMR ni serveur et minification
    • npm run prod : qui lance votre environnement de production sans HMR ni serveur et avec minification

    Bonus


    Votre terminal affiche désormais tous les détails dont vous avez besoin :

    Mais il faut avouer que ce n’est pas très clair, non ? Que diriez-vous de pimper Webpack pour qu’il ressemble à ça :

    Si tel est le cas, ajouter la dépendance Webpack Dashboard avec la commande suivante :
    npm install webpack-dashboard --save-dev
    

    Ajoutez ensuite l’habituelle constante à votre fichier de configuration Webpack :
    const DashboardPlugin = require("webpack-dashboard/plugin");
    

    Puis appelez le plugin depuis votre array plugins toujours dans le même fichier :
    new DashboardPlugin()
    

    Enfin, modifiez l’objet scripts de package.json en ajoutant webpack-dashboard pour que le dashboard se lance lorsque vous lancez votre serveur avec npm run start :
    "scripts": {
        "dev": "webpack",
        "start": "webpack-dashboard webpack-dev-server -d --hot --config webpack.config.js --watch",
        "prod": "NODE_ENV=production webpack --progress"
      }
    

    Vous en savez désormais plus sur Webpack et vous avez surtout réussi à configurer votre starter que vous pourrez utiliser pour votre prochain projet ! N’hésitez pas à laisser un commentaire si toutefois vous aviez une remarque à faire et clapez autant que vous pouvez :) !
    Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com Lire la suite ZeFifi
  • Administrateur système (H/F) en CDI à Lyon, 4 janvier 2018

    jeudi 4 janvier 2018 :: Remixjobs : emplois linux :: RSS
    Société : Wizaplace     Lieu : Lyon     Type : CDI     Rémunération : En fonction du profil     Posté le : 4 janv. 2018 À Lyon, dans des bureaux sympas et une ambiance startup, vous travaillerez avec le reste de l'équipe technique en fonctionnant de manière agile.
    Au sein de l'équipe “infra”, vous participerez à l'évolution de l'infrastructure de nos systèmes et au maintient de la production, avec les technologies suivantes (liste toujours sujette à évolution) :
    • Linux, Docker, AWS, Jenkins
    • Nginx, MySQL, Redis
    • PHP-FPM (PHP 7.1/Symfony 3)
    • ELK
    • Git, GitHub, Sentry, …

    Vous serez amené(e) à :
    • Concevoir et implémenter l'infrastructure de nos systèmes.
    • Suivre la production au jour le jour et gérer les incidents.
    • Collaborer avec le reste de l'équipe technique pour améliorer nos systèmes de déploiement et de monitoring.
    • Améliorer continuellement la stabilité et les performances de la plateforme.
    • Contribuer à notre blog technique (http://tech.wizaplace.com).
    Lire la suite
  • Online Live Bet Asp.net Project by tigris07, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    I need asp.net web online live bet project. Live data from Provider (Your recommendation) and for web site (asp.net MVC ajax ) 1. all global europe country languages 2. register page 3. login page 4... (Budget: $1500 - $3000 USD, Jobs: AJAX, ASP.NET, C# Programming, HTML, Microsoft SQL Server) Lire la suite
  • Ingénieur Développeur Android (H/F) en CDI à Grenoble 35000-44000, 4 janvier 2018

    jeudi 4 janvier 2018 :: Remixjobs : emplois linux :: RSS
    Société : TECHNOSENS EVOLUTION     Lieu : Grenoble     Type : CDI     Rémunération : 35000-44000     Posté le : 4 janv. 2018
    Au sein de l'équipe de 2 développeurs (bientôt 4), sur Grenoble, vous serez responsable de différentes briques de développement, corrections et améliorations des applications client Android et des webservices correspondants côté back-office :
    • Développement Android : participation à la mise en place d'une application Android destinée à fonctionner sur une box et une tablette proposant divers services tels que la visiophonie, la domotique, le visionnage de la TV, ...
    • Développements back-office : création des webservices REST qui permettent le bon fonctionnement de cette application.
    • Nos clients finaux étant des personnes âgées, un point d'attention sera mis sur les interfaces et l'ergonomie afin de rendre les services le plus accessible possible.

    Vous serez force de proposition de nouvelles solutions techniques permettant de faire évoluer l'architecture applicative en accord avec l'équipe technique avec le souci constant de produire un code propre et maintenable. Lire la suite
  • INGENIEUR EXPLOITATION – Saint Quentin en Yvelines (78) en CDI, 4 janvier 2018

    jeudi 4 janvier 2018 :: Remixjobs : emplois linux :: RSS
    Société : SOLUTEC     Type : CDI     Rémunération : En fonction du profil     Posté le : 4 janv. 2018
    SOLUTEC, entreprise de services du numérique de 1000 collaborateurs, offre à ses clients depuis plus de 25 ans son expertise technique et son savoir-faire sur des projets d'études, développement et infrastructure.
    Nos collaborateurs interviennent au sein des équipes de nos clients grands comptes dans divers secteurs d'activités (Banque / Finance, Assurance, Médias, Grande Distribution, Industrie, Services).
    Sous l'autorité du Responsable, l'Ingénieur d'exploitation (H/F) traitera tant les aspects techniques que fonctionnels et interviendra sur l'ensemble des environnements de l'intégration à la production. Vous avez de bonnes connaissances généralistes des technologies de l'IT (système, réseau, BDD, stockage...) sans pour autant être expert. Vous assurez également la rédaction des documents d'exploitation, les relevés d'anomalies, et participer au choix des nouvelles architectures. Le but final étant de maintenir des applications en condition opérationnelle.
    Ingénieur d'exploitation débutant ou confirmé, vous maîtrisez les environnements systèmes MICROSOFT, Open UNIX (AIX, Linux), avez des connaissances des outils de production CFT, $Universe et MQ. Des connaissances en développement de scripts SHELL et sur les technologies Mainframe: IBM ZOS seraient un plus. Votre rigueur et votre motivation feront de vous un élément majeur de l'équipe.
    Si vous souhaitez poursuivre votre carrière sur des missions à forte valeur ajoutée, alors rejoignez-nous dans le cadre d'un CDI. Lire la suite
  • Administrateur Système et Réseaux, DEVOPS en CDI à Chantepie 25000-34000, 4 janvier 2018

    jeudi 4 janvier 2018 :: Remixjobs : emplois linux :: RSS
    Société : Live Enchères     Lieu : Chantepie     Type : CDI     Rémunération : 25000-34000     Posté le : 22 déc. 2017
    Administrateur Système et Réseaux, DEVOPS:



    Vous contribuez à la création, au déploiement et au maintien de services robustes, performants et à haute disponibilité.

    Vous assurez la scalabilité de notre infrastructure pour répondre à notre croissance.

    Vous supervisez en temps réel les différents environnements

    Vous auditez et vous améliorez la performance et la sécurité de l'infrastructure et de la plateforme. Vous poursuivez l'industrialisation de l'intégration continue et du déploiement continu.

    Vous analysez les incidents en production en coordination avec l'ensemble de l'équipe technique et vous pilotez les actions afin d'identifier les root causes et résoudre les incidents, en collaboration avec le support client. Lire la suite
  • General store by subharanjandas, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    Grocery store need to be develop using php jquery (Budget: ₹1500 - ₹12500 INR, Jobs: AJAX, HTML, Javascript, jQuery / Prototype, PHP) Lire la suite
  • Ajax developer by joannesmith333, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    I am a working portrait artist and I need to showcase my work for commissions (Budget: £20 - £250 GBP, Jobs: AJAX) Lire la suite
  • Howto patch Spectre Vulnerability CVE-2017-5753/CVE-2017-5715 on Linux, par Vivek Gite, 4 janvier 2018

    jeudi 4 janvier 2018 :: nixCraft Linux Sys Admin Blog :: RSS

    A very serious security problem has been found in the Intel/AMD/ARM CPUs. Spectre CPU Vulnerability CVE-2017-5753/CVE-2017-5715 breaks the isolation between different applications. It allows an attacker to trick error-free programs, which follow best practices, into leaking their secrets. In fact, the safety checks of said best practices actually increase the attack surface and may make applications more susceptible to Spectre. How do I protect my Linux server and laptop/desktop against such attack?
    The post Howto patch Spectre Vulnerability CVE-2017-5753/CVE-2017-5715 on Linux appeared first on nixCraft.
    Lire la suite Vivek Gite
  • How to patch Meltdown CPU Vulnerability CVE-2017-5754 on Linux, par Vivek Gite, 4 janvier 2018

    jeudi 4 janvier 2018 :: nixCraft Linux Sys Admin Blog :: RSS

    A very serious security problem has been found in the Intel CPUs. Meltdown CPU Vulnerability CVE-2017-5754 breaks the most fundamental isolation between user applications and the operating system. This attack allows a program to access the memory, and thus also the secrets, of other programs and the operating system. How do I protect my Linux server and laptop/desktop against such attack?
    The post How to patch Meltdown CPU Vulnerability CVE-2017-5754 on Linux appeared first on nixCraft.
    Lire la suite Vivek Gite
  • Looking for PHP-Codeigniter for fixing and customizing existing system. by syafiqaffandiy, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    I need to hire a full-time programmer for fixing, customizing and maintaining my existing PHP-Code igniter Platform based on several condition; Fast Coding 24/7 Support Active Communication (Budget: $2 - $8 USD, Jobs: AJAX, Codeigniter, HTML, MySQL, PHP) Lire la suite
  • Login to Facebook and upload to MYSQL [Site finished] by firbedatomas, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    Site terminated ONLY LACKING TO CONNECT AND RELATE WITH DB Web already developed, just need to integrate it with MYSQL, that is to say that I have half of the things you (1) I need a user registry with... (Budget: $10 - $30 USD, Jobs: AJAX, HTML, Javascript, MySQL, PHP) Lire la suite
  • Zend with Doctrine PHP Application Development by gironrenato, 4 janvier 2018

    jeudi 4 janvier 2018 :: AJAX jobs and projects for freelancers :: RSS
    We are currently working on a property management system which uses the technology listed below. The system is 85% complete and it just requires some bug fixes. In order to be successful, candidates should... (Budget: $8 - $15 USD, Jobs: AJAX, Javascript, MySQL, PHP, Zend) Lire la suite