Content Security Policy (CSP)

При разработке приложения на Electron столкнулся со следующим предупреждением:

Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security Policy set or a policy with "unsafe-eval" enabled. This exposes users of this app to unnecessary security risks.

Решается проблема добавлением тега  <meta>  в заголовок HTML-файла:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">

Более подробно на Хабре. 

WebPack

1. Установка Node.js (+ npm)
2. [ при проблеме с самоподписанными сертификатами ]
   # npm set strict-ssl false
3. # npm init
   создается package.json
4. # npm i webpack webpack-cli --save-dev
5. Добавить в package.json
   

   "scripts": {
      "dev": "webpack --mode development"
   }

6. [ если ошибка: ERROR in Entry module not found: Error: Can’t resolve './src' in '...' ]
   необходимо создать в корне проекта папку src с файлом index.js
7. Теперь возможен запуск:
   

   npm run dev

   будет создана пака с файлом: ./dist/main.js
8. Общепринятые режимы работы:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production",
  "watch": "webpack --mode development --watch"
  "server": "webpack-dev-server --mode development --open"
}

Add-ons:

• path (не требует установки) - объект Node.js для кроссплатформенной и удобной работы с путями файловой системы, в том числе, в модуле конфигурации.

Добавление:

const path = require('path')

Использование:

context: path.resolve(__dirname, 'src') 

• optimization - параметр для оптимизации. Например, для исключения дублирования импортов (для применения в зависимости от режима - development или production, - возможно использование дополнительной функции. См. ниже.):

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

• jquery - дополнительная библиотека для удобства работы с JS.

Установка:

# npm i -S jquery

Добавление в index.js:

import * as $ from 'jquery'

• cross-env - установка переменных окружения (кроссплатформенная)

Использование в package.json:

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack --mode development",
  "build": "cross-env NODE_ENV=production webpack --mode production",
  "watch": "cross-env NODE_ENV=development webpack --mode development --watch",
  "start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
}

в, например, webpack.config.js:

const isDev = process.env.NODE_ENV === 'development'

Plugins:

• html-webpack-plugin - плагин для обработки Webpack'ом html-файлов (в частности, index.html). Работа с шаблоном html, добавление в него динамически изменяемых имен файлов скриптов и т.д.

Добавление:

const HTMLWebpackPlugin = require('html-webpack-plugin')

Использование:

plugins: [
  new HTMLWebpackPlugin({
  // title: 'Webpack My Title',
  template: './index.html',
  minify: {
    collapseWhitespace: !isDev // Минификация при условии
  }
]

• clean-webpack-plugin - плагин для очистки целевой папки

Добавление:

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

Использование:

plugins: [
  new CleanWebpackPlugin()
]

• copy-webpack-plugin - для перемещения файлов в процессе сборки.

Добавление:

const CopyWebpackPlugin = require('copy-webpack-plugin')

Использование в webpack.config.js:

module.exports = {  new CopyWebpackPlugin([    {      from: path.resolve(__dirname, 'src/favicon.ico'),      to: path.resolve(__dirname, 'dist')    }  ])}

• mini-css-extract-plugin - создает отдельные CSS-файлы по каждому JS-файлу, в котором они импортируются.

Добавление:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

Использование в webpack.config.js:

plugins: [
  new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
  })
], 

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }
  ]
}

• terser-webpack-plugin - для оптимизации и минификации JS-файлов.

Добавление:

const TerserPlugin = require('terser-webpack-plugin')

Использование: см. ниже.

• optimize-css-assets-webpack-plugin - для оптимизации и минификации CSS-файлов.

Добавление:

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

Использование:
- создаем переменную для отслеживания режима сборки по переменной окружения NODE_ENV:

const isDev = process.env.NODE_ENV === 'development';

- создаем дополнительную функцию для учёта режима сборки - development или production:

const optimization = () => {
  const config = {
    splitChunks: {
      chunks: 'all'
    }
  }
  if (!isDev) {
    config.minimizer = [
      new OptimizeCssAssetsPlugin(),
      new TerserWebpackPlugin()
    ]
  }
  return config;
}

- применяем результаты функции к параметру optimization:

module.exports = {
  optimization: optimization()
}

Modules (Loaders):

• css-loader - для импорта css-файлов в JS-файлы.

Добавления не требуется.
Использование:
в webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/, // RegExp
      use: ['style-loader', 'css-loader']
    }
  ]
}

в index.js:

import 'styles.css'

• style-loader - для внедрения стилей в DOM (html-файл). Используется совместно с css-loader.

Добавления не требуется.
Использование - см. выше.

• file-loader - для работы с иными файлами (изображения, шрифты и т.п.)

Добавления не требуется.
Использование, для изображений:
в webpack.config.js:

module: {
  rules: [
    {
      test: /\.(png|jpg|svg|gif)$/,
      use: ['file-loader']
    }
  ]
}

в style.css:

.logo {
  background-image: url("webpack-logo.jpg");
}

в JS-файле:

import webpackLogo from 'webpack-logo.jpg'

Использование, для шрифтов:
в webpack.config.js:

module: {
  rules: [
    {
      test: /\.(ttf|woff|woff2|eot)$/,
      use: ['file-loader']
    }
  ]
}

в style.css:

@import "fonts.css"

в font.css:

@font-face {
  font-family: 'Roboto';
  src: url("Roboto-Regular.ttf") format("truetype");
}

• @import - импортирование файлов.

Например, установка normalize.css:

# npm i normalize.css

импорт в style.css:

@import "~normalize.css"

тильда (~) указывает, что данный пакет следует искать в папке node_modules.

• xml-loader - для импорта xml-файлов.

Использование в JS-файле:

import xml from 'data.xml'

• csv-loader - для импорта csv-файлов. Требует дополнительного пакета papaparse (!)

Использование в JS-файле:

import csv from 'data.csv'

• JSON не требует дополнительных пакетов для импорта json-файлов.

• webpack-dev-server - http-сервер разработчика с поддержкой hot-reload,

Использование в webpack.config.js:

module.exports = {
  devServer: {
    port: 4200
  }
}

Git

Подключение к (пустому) удаленному репозиторию

1. Создать учетную запись на сайте, предоставляющем услуги удаленного репозитория (GitHub - на его примере, GitLab, BitBucket).
2. Создать удаленный репозиторий:
   Меню Your Profile -> Закладка Repositories -> Кнопка New
3. После успешного создания пустого репозитория появляется подсказка сайта, как:
   - создать новый локальный репозиторий и связать его с созданным удаленным;
   - подключить существующий локальный репозиторий к созданному удаленному. 
4. При проблемах с SSL сертификатом (например, корпоративный CheckPoint, который добавляет MitM) может помочь следующее:
   1. Отключить проверку SSL-сертификата при клонировании
      $ GIT_SSL_NO_VERIFY=true git clone /path/to/repo
   2.  Отключить проверку SSL-сертификата глобально
      $ git config --global http.sslVerify false
5. Просмотр подключенных удаленных репозиториев:
   $ git remote -v
6. Создание SSH-ключей для доступа (по умолчанию создаются два файла в личной папке пользователя, в подпапке .ssh - файл личного ключа id_rsa и файл публичного ключа id_rsa.pub):
   $ ssh-keygen.exe
   Скопировать содержимое публичного ключа (любым текстовым редактором).
   В настройках аккаунта удаленного репозитория добавить скопированное значение публичного ключа.
   (!) Ссылка для подключения по SSH должна быть вида git@github.com:username/reponame.git. Получить её можно на странице-подсказке путём переключателя HTTPS/SSH.

git init
git add .
git commit -a -m 'first commit'
git remote add origin git@github.com:username/reponame.git
git push -u origin master

Gulp

Расширения для Visual Studio Code

Наиболее полезные расширения для фронтенд-разработчика к редактору MS Visual Studio Code
(материал по статье Владилена Минина "Мои VSCode Extensions")