JavaScript *

В этой статье я бы хотел поделиться своим опытом по разбиению бандлов для многостраничного сайта с помощью Webpack 4. Cначала создадим для каждой страницы свою точку входа. Рассмотрим на примере 4 страниц:

const path = require("path");

const PATHS = {
  src: path.resolve(process.cwd(), "src"),
  dist: path.resolve(process.cwd(), "dist")
};

module.exports = {
  entry: {
    common: `${PATHS.src}/js/common`,
    index: `${PATHS.src}/js/index`,
    contacts: `${PATHS.src}/js/contacts`,
    about: `${PATHS.src}/js/about`,
  }
}

При сборке для каждой страницы будет создан свой бандл. В точку входа common я вынес общие скрипты для всех страниц. Чтобы подключить наши бандлы на страницы воспользуемся плагином Webpack'a HtmlWebpackPlugin.

Рассмотрим на примере:

  module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: `${PATHS.dist}/index.html`,
      template: `${PATHS.dist}/index.html`,
      chunks: ["index", "common"]
    })
    ...
  ]
  ...
};

• Что лучше сжимает ES5, Terser или UglifyJS?
• Что быстрее загружается: сжатая версия ES5 от Terser или от UglifyJS?
• Какая версия весит больше: ES5 или ES6? И как на это влияет TypeScript?
• Большая ли разница между настройками по умолчанию и ручной настройкой?
• А если не webpack? Кто выдаёт сборку меньшего размера, Rollup или webpack?

На днях ковыряясь в множестве файлов redux'a, где по логике файлы вынесены в reducers, actions, константы типов actions. Bсе это оказалось весьма не простая задача держа все эти типы файлов у себя в голове и прослеживать логику. И… эврика, появилась идея упрощения написания redux логики. Возможно создавая свой велосипед, но кто не пытался писать свои велосипеды? Но главное это не написание а поддержка написанного когда. Давайте я вам немного постараюсь показать свое видение моей логики redux'a.

Проблема

• как добавлять 3D объекты с помощью примитивов;
• как трансформировать объекты в 3-х мерном пространстве с помощью, перемещений, поворотов и масштабирования;
• как добавить окружение;
• как добавить текстуры;
• как добавить базовую интерактивность с помощью событий и анимации;
• как добавить текст.

В этой статье мы рассмотрим, как писать чистый, легко тестируемый код в функциональном стиле, используя паттерн программирования Dependency Injection. Бонусом идет 100% юнит-тест coverage.

О чем пойдет речь?

Посмотрим на метаморфозы редьюсеров в моих Redux/NGRX приложениях за последние пару лет. Начиная с дубового switch-case, продолжая выбором из объекта по ключу и заканчивая классами с декораторами, блекджеком и TypeScript. Постараемся обозреть не только историю этого пути, но и найти какую-нибудь причинно-следственную связь.

Cегодня, в день всех влюбленных, "Яндекс" разместил на главной странице счетчик сердец.
Как только мы это увидели, сразу поступило предложение его накрутить. Есть задача — мы ее выполняем.

Сейчас уже мало кто пишет на Perl'е, но известная максима Ларри Уолла "Keep simple things easy and hard thing possible" стала общепринятой формулой эффективной технологии. Ее можно трактовать в аспекте не только сложности задач, но и подхода: идеальная технология должна, с одной стороны, позволять быструю разработку средних и малых приложений(в т.ч. "write-only"), с другой — предоставлять инструменты для вдумчивого девелопмента сложных приложений, где на первое место ставиться надежность, поддерживаемость и структурированность. Или даже, переводя в человеческую плоскость: быть доступной для джунов, и в то же время удовлетворять запросы синьйоров.

Популярный ныне Редакс можно покритиковать с обеих сторон — взять хотя бы тот факт, что написание даже элементарного функционала может вылиться в множество строчек, разнесенных по нескольких файлах — но не будем углубляться, ведь об этом уже и так немало сказано.

"Вы будто бы храните все столы в одной комнате, а стулья — в другой"
— Юха Паананен, творец библиотеки Bacon.js, о Редаксе

Технология, о которой сегодня пойдет речь, не является серебрянной пулей, но претендует на большее соответствие указанным критериям.

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.

В магазине расширений VSCode существует огромное множество плагинов, ниже будут приведены наиболее удобные из них для веб разработки.

Предыстория