
JavaScript *
Прототипно-ориентированный язык программирования
Как я выкинул webpack и написал babel-plugin для транспила scss/sass
Предыстория
Как-то субботним вечером я сидел и искал способы сборки UI-Kit с помощью webpack. В качестве демо UI-kit я пользуюсь styleguidst. Конечно же, webpack умный и все файлы, которые есть в рабочем каталоге он запихивает в один бандл и оттуда всё крутится и вертится.
Я создал файл entry.js, импортнул туда все компоненты, затем оттуда же экспортнул. Вроде всё ок.
import Button from 'components/Button'
import Dropdown from 'components/Dropdown '
export {
Button,
Dropdown
}
И после сборки всего этого, я получил на выходе output.js, в котором как и ожидалось было всё — все компоненты в куче в одном файле. Тут возник вопрос:
А как мне собрать все кнопочки, дропдауны и прочее по отдельности, что бы импортировать в других проектах?А я ведь хочу это ещё и в npm залить как пакет.
Хм… Поехали по порядку.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №426 (27 июля — 2 августа 2020)

Чем «фрагменты» могут помочь в Веб-разработке на примере Malina.js

Никто не спрашивает зачем нужны функции, ведь это очевидная и полезная вешь в программировании. Функции позволяют переиспользовать код и делать архитектуру приложения лучше.
Почему бы не использовать такую же способность в шаблонах компонентов. В настоящее время многие фреймворки позволяют использовать компоненты внутри других компонентов. Но это больше похоже на подключение модуля, нежели просто функции. Ведь компонент кроме шаблона может иметь свой JavaScript код, свои стили и он весьма изолирован (что хорошо).
Кейс: онлайн-игра на 2000 человек на инстансе за $5

Собрали онлайн-мероприятие с нуля. Веб-приложение в виде чат-бота, в формате игры. За сутки через него прошло 1904 человека, все на одном инстансе за $5 с 1 GB памяти. На подготовку было 2 недели.
О роли фронтенд-разработчика
Привет, Хабр! Представляем вашему вниманию перевод статьи фронтенд-разработчика из MediaMonks Рональда Мендеса. Будучи родом из Венесуэлы, Рональд перебрался в Аргентину и построил успешную карьеру, а благодаря своему большому интересу к дизайну и анимации стал одним из членов жюри престижной премии FWA (вручается с 2000 года).
В этой заметке, которая показалась нам интересной, Рональд рассуждает о том, как фронтендеру найти свое место под солнцем и эффективнее взаимодействовать со своей командой.
Рональд Мендес. О роли фронтенд-разработчика
Когда я начал работать разработчиком в 2009 году, я проводил большую часть своего времени, верстая сайты. Мои задачи относились к заключительному этапу линейного процесса, в котором дизайнеры, клиенты и другие заинтересованные стороны принимали практически все решения.

Vue.js для начинающих, урок 8: компоненты

→ Vue.js для начинающих, урок 1: экземпляр Vue
→ Vue.js для начинающих, урок 2: привязка атрибутов
→ Vue.js для начинающих, урок 3: условный рендеринг
→ Vue.js для начинающих, урок 4: рендеринг списков
→ Vue.js для начинающих, урок 5: обработка событий
→ Vue.js для начинающих, урок 6: привязка классов и стилей
→ Vue.js для начинающих, урок 7: вычисляемые свойства
→ Vue.js для начинающих, урок 8: компоненты
Простое объяснение делегирования событий в JavaScript
Приветствую. Представляю вашему вниманию перевод статьи «A Simple Explanation of Event Delegation in JavaScript», опубликованной 14 июля 2020 года автором Dmitri Pavlutin

В данной статье Дмитрий Павлутин объясняет, на чём основан один из базовых паттернов работы с DOM-событиями.
Lock-файлы npm

Всем привет! В прошлом посте мы рассмотрели экосистему npm в качестве источника хаоса в нашем проекте, и научились с умом подходить к выбору зависимостей, чтобы минимизировать наши риски. Сегодня мы пойдем дальше и рассмотрим lock-файлы npm, которые помогают повысить стабильность проекта в процессе работы над ним.
Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом
Как "подружить" дизайнера и инженера? Как дать им работать с одними и теме же данным, без ущерба продуктивности? Как хранить дизайн в системе контроля версий. Если вас интересуют эти вопросы, в такой же степени как и меня, то добро пожаловать под кат!

«Светлое» будущее моих фейлов
Я пишу свою библиотеку валидации данных quartet уже полтора года. И не обошлось без фейлов. Желание их пофиксить заставляло меня заново и заново выпускать мажорные версии, менять архитектуру. И сейчас уже четыре месяца последняя мажорная версия неизменна. Но и в ней есть свои фейлы, и сейчас я о них попытаюсь рассказать.
Как пройти финальный уровень JS QA Game от SEMrush
В этой статье я разберу седьмой (финальный и самый сложный) уровень и поделюсь решением победителя игры*.

Модульное и интеграционное тестирование в Redux Saga на примерах

Redux — чрезвычайно полезный менеджер состояний. Среди многих "плагинов", Redux-Saga нравится мне больше всего. В проекте на React-Native, над которым я сейчас работаю, мне приходилось сталкиваться с множеством побочных эффектов. Они приносили бы мне головные боли в случае, если я поместил их в компоненты. С помощью этого инструмента создание сложных логических потоков с разветвлениями становится простой задачей. Но как насчет тестирования? Так же это просто, как и использование библиотеки? Хотя я не могу дать вам точный ответ, я покажу вам реальный пример проблем, с которыми я столкнулся.
Ближайшие события
Бот «Умный планировщик»: понимает с полуслова

Хотите проверить функционал? Напишите в лс боту по этой ссылке и он ответит вам.
А тем, кому интересно как он работает и как 16-летний школьник смог написать его, я с удовольствием расскажу всё в подробностях в этой статье.
WebStorm 2020.2: возможность использовать Prettier по умолчанию, поддержка Nuxt.js и другие улучшения
Всем привет! Мы рады представить второе крупное обновление WebStorm в этом году. В нем вы найдете несколько долгожданных улучшений, включая поддержку Nuxt.js и возможность использовать Prettier для форматирования кода по умолчанию.

Скачать 30-дневную пробную версию WebStorm 2020.2 можно на сайте или с помощью Toolbox App. Полную версию могут использовать обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики опенсорсных проектов.
А сейчас давайте рассмотрим основные улучшения.
Urban Bot или как писать чат-ботов для Telegram, Slack, Facebook… на React.js

В этой статье я хочу познакомить с новой библиотекой Urban Bot, которая адаптирует React для написания чат-ботов. Ниже я расскажу, зачем эта библиотека появилась на свет, какие дает преимущества и как написать вашего первого чат-бота.
Чат-бот — это чаще всего отдельный чат в мессенджере, в котором вы общаетесь не с человеком, а с программой. Он может присылать сообщения в виде текста, изображений, кнопок и многих других UI элементов и реагировать на сообщения от пользователей. Современные чат-боты — это полноценные UI приложения внутри мессенджеров.
В отличии от большинства чат-бот библиотек, которые чаще всего просто оборачивают http запросы в функции с готовыми аргументами и предоставляют подписки вида bot.on('message', callback), иногда позволяя передавать контекст между вызовами, Urban Bot предлагает совершенно иной подход к разработке чат-ботов — через декларативное программирование и компонентный подход. Живой пример, написанный на Urban Bot, вы можете попробовать в Telegram, cсылка на чат-бот, и посмотреть код на GitHub.
Как мы заметили выше, чат-боты это полноценные UI приложения. А какой язык в 2020 и какая библиотека наиболее подходит для разработки UI приложений? Правильно, JavaScript и React. Такая интеграция позволяет легко и непринужденно строить чат-боты любой сложности без единого знания об API мессенджеров. Далее я расскажу, как создавать простые компоненты и на их основе строить сложных чат-ботов, работать с навигацией, создавать диалоги любой вложенности, писать одно приложение и запускать в любых мессенджерах, и многое другое.
(Не)рушимые законы крутого кода: Law of Demeter (с примерами на TypeScript)
Если SOLID – это набор принципов написания качественного кода, то Law of Demeter (LoD) и Tell Don’t Ask (TDA) – это конкретные приемы как добиться SOLID.
Сегодня поговорим про Law of Demeter («Закон Деметры»).
Утрированно
Это принцип помогает определиться: «Как я буду получать / изменять вложенные объекты» – применим в языках, где можно определить «классы» со свойствами и методами.
Часто складывается ситуация, когда мы откуда-то (например, из HTTP запроса) получили id сущности `a`, пошли за ней в БД и из сущности `a` нам надо получить / изменить сущность `b` вызвав метод `Method`.
Так вот Википедия гласит:
Код `a.b.Method()` нарушает Закон Деметры, а код `a.Method()` является корректным.
Пример
У Пользователя есть Посты, в которых есть Комментарии. Вы хотите получить «Комментарии последнего Поста».
Можно запилить такое:
Регрессионная спираль смерти
Перевод статьи подготовлен в преддверии старта курса «Автоматизация тестирования на JavaScript»

История, которая может показаться вам до боли знакомой:
Вы работаете QA в небольшой команде разработчиков; сегодня утро четверга второй недели вашего двухнедельного спринта. У вашей команды еще несколько историй (story) в разработке, которые должны быть утверждены к утру пятницы, чтобы быть готовыми к демонстрации днем. Ваши планы на вечер четверга начинают таять на ваших глазах.
Как писать хорошие библиотеки под Angular
Веб — наполненная фичами среда. Мы можем перемещаться по виртуальной реальности с помощью геймпада, играть на синтезаторе с MIDI-клавиатуры, покупать товары одним касанием пальца. Все эти впечатляющие возможности предоставляют нативные API, которые, как и их функциональность, крайне многообразны.
Angular — превосходная платформа с одними из лучших инструментов во фронтэнд-среде. И, конечно, есть определенный способ делать «по-ангуляровски». Что лично мне особенно нравится в этом фреймворке — это то чувство удовлетворенности, которое испытываешь, когда все сделано как надо: аккуратный код, четкая архитектура. Давайте разберемся, что делает код правильно написанным под Angular.


