Fork me on GitHub

JavaScript (HTML+CSS) и даже TypeScript

JavaScript

Асинхронность

Полезные библиотеки

  • Moment JS - Parse, validate, manipulate, and display dates and times in JavaScript.
  • Styled-Component (react) - Use the best bits of ES6 and CSS to style your apps without stress

Приложения для разработки

  • nodemon -  позволяет не перезапускать приложение nodejs  (смдополнительно)
  • https://ngrok.com/ - allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.

Electron.JS

События

Шрифты

TypeScript

HTML

CSS

Grid - сетки

Мы можем двигаться дальше, только определившись с этими вещами. В этой статье условия такие:

  • Сетка имеет максимальную ширину 1140 px, 12 колонок по 75 px и отступы в 20 px.

  • Колонки меняют свой размер пропорционально вьюпорту, а отступы остаются фиксированными.

  • Я собираюсь создавать CSS-сетку.

Процесс создания сетки состоит из восьми шагов:

  • Выбор технологии реализации

  • Установка box-sizing: border-box;

  • Создание контейнера сетки;

  • Расчёт ширины колонок;

  • Определение положения отступов;

  • Создание отладочной сетки;

  • Создание вариаций раскладки;

  • Адаптация раскладки.

Графика в HTML/CSS

БЭМ

Всякоразные сайты и админки к ним

NodeJS

Авторизация в приложениях NodeJS

Webpack - система сборки

  • создание каталога для проекта

  • установить nodejs

  • npm init  - для создания файла package.json (нажимаем enter несколько раз)

  • npm i webpack --save-dev   - установка webpack, ключ --save-dev после установки webpack прописывает данную биб-ку в файл package.json в раздел "devDependencies"

  • в файл package.json в раздел "scripts": { "build": "webpack", "test": "echo \"Error: no test specified\" && exit 1" } добавим команду build

  •          npm i webpack-cli --save-dev

  • папка src - точка входа по умолчанию и файл в нем index.js

  • npm run build  - сборка проекта в папку dist

  •              npm i webpack-dev-server --save-dev

  • добавим в файл package.json в раздел "scripts" команду:

"dev":"webpack-dev-server --mode development --open"
  • создаем файл webpack.config.js :
let conf = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'main.js'
},
devServer: {
overlay: true
}
};
module.exports = conf;

  • для того чтобы в параметре output использовать абсолютный путь нужно установить полезную биб-ку

          ```
       npm i path --save-dev
      ```

  •               npm install jquery --save

Установка babel

  •           npm i babel-core babel-loader babel-preset-env babel-preset-stage-3 --save-dev

babel-preset-env  - постоянно обновляющиеся настройки для перегона из нового стандарта в старый стандарт jsbabel-preset-stage-3  - самые последние наработки стандарта js

  • Конфиг .babelrc: 
{
"presets": [
"env",
"stage-3"
]
}
  • файл webpack.config.js с добавлением возможности перегона с помощью babel:
let path = require('path')
let conf = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js',
        publicPath: 'dist/',
    },
    devServer: {
        overlay: true
    },
    module: {
        rules: [
            {
               test: /\.js$/,
               loader: 'babel-loader' ,
               //exclude: '/node_modules/'
            }
        ]
    }
};

module.exports = conf;

Подключение css через webpack

  • установка нужных для css лоадеров:
npm i style-loader css-loader --save-devнастройка webpack.config.js для работы с cssmodule: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader' ,
//exclude: '/node_modules/'
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}

Подключение плагина extract-text-webpack-plugin

  •           npm i extract-text-webpack-plugin@next --save-dev

  • добавляем настройки в файл webpack.config.js:

``` const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = { module: { rules: [ { test: /.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ] } ```

​

social