
JavaScript *
Прототипно-ориентированный язык программирования
10 React-компонентов на все случаи жизни

Некая фронтенд-библиотека способна дать разработчику единообразное оформление компонентов, что крайне важно. Но может оказаться так, что в проекте, в котором планируется использовать такую библиотеку, уже есть собственная дизайн-система, или собственная UI-библиотека. В такой ситуации разработчик ищет не новую библиотеку, а лишь настраиваемые компоненты, подходящие для многократного использования и ускоряющие работу. В подобном случае больше смысла я вижу в поиске отдельного компонента, а не целой библиотеки, которая содержит, вместе с тем, что очень нужно разработчику, много такого, что ему совершенно ни к чему.
Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.
Роутинг в комплексных чат-ботах с Hobot framework

Начав разрабатывать боты для Telegram несколько лет назад, я открыл для себя производительность, простоту и гибкость работы с ними как с частным случаем интерфейса командной строки. Эти характеристики, доступные сегодня многим — во многом заслуга популярного фреймворка telegraf.js и ему подобных, которые предоставляют упрощенные методы для работы с API Telegram.
Архитектура проекта при этом целиком ложится на плечи разработчика и, судя по скромному числу комплексных и многофункциональных ботов, по этой части нам еще есть куда расти.
В этой статье я хочу рассказать о небольшом фреймворке для роутинга в чат-ботах, без которого разработка нашего проекта была бы невозможна.
Мои любимые инструменты разработчика в Chrome

Доброго времени суток, друзья!
Chrome Developer Tools — очень мощный набор инструментов для разработки веб приложений. С помощью этих инструментов мы можем перемещаться по DOM, осуществлять проверку запросов на сервер, настраивать производительность приложений и др.
Среди множества доступных возможностей, существует несколько по-настоящему интересных. Эти «фичи» помогают делать на один-два клика меньше — разве не для этого мы здесь собрались?
Что такое производительность веб-приложений?

Какие-то приложения грузятся быстро, какие-то медленно, но за счет чего это происходит? Только ли скорость загрузки страницы является показателем производительности приложения?
Ответить на эти и многие другие вопросы в одной статье было бы очень сложно. Поэтому я собрал каталог ссылок и разбил его на категории. Но для начала — немного теории о том, что такое производительность и когда о ней стоит задуматься.
Пришло ли время забыть о React и перейти на Svelte?
В нём всё, конечно, крутится вокруг JavaScript. Поэтому если вы используете для веб-разработки JS — я очень рекомендую взглянуть на State of JavaScript в том случае, если вы ещё этого не сделали.
Для меня одним из самых интересных результатов State of JavaScript стало неожиданное внимание тех, кто участвовал в опросе, к фронтенд-фреймворку Svelte.
В общем рейтинге ведущих фронтенд-инструментов (основанном на показателях осведомлённости о фреймворке, интереса к нему и удовлетворённости им) Svelte появился на второй позиции. Он идёт там сразу после React, опережая такие хорошо известные инструменты, как Vue.js, Preact, Angular и Ember.
Меня это слегка шокировало, так как Svelte — это сравнительно новый инструмент — как в плане возраста, так и в плане парадигмы разработки программного обеспечения.

Рейтинг фронтенд-фреймворков по результатам исследования State of JavaScript
Микропост: режем UNICODE-строки для PostgreSQL
Проблема в том, что вся строка (ROW) индекса целиком должна полностью умещаться на одной странице данных (8KB), иначе вас ждет примерно такая ошибка:
ERROR: index row size… exceeds maximum… for index ...То есть даже в простейшем случае индекса из единственной строки — можно наступить на грабли. Как с ними бороться?
JavaScript библиотека Webix глазами новичка. Часть 5. Работа с данными на стороне пользователя

Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix. Я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.
Молчание вентиляторов. Google Colab, Javascript и TensorflowJS
Google Colab — это бесплатный облачный сервис на основе Jupyter Notebook. Google Colab предоставляет всё необходимое для машинного обучения прямо в браузере, даёт бесплатный доступ к невероятно быстрым GPU и TPU. Заранее предупрежу, что у него есть некоторые ограничения, поэтому вы не сможете использовать его для production.
С помощью Google Colab вы можете легко обучить свою модель за считанные секунды. Он поддерживает Python (2/3) из коробки, так что всё должно быть хорошо, верно?

Golang + Phaser3 = MMORPG — Клиент и Сервер

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

Теперь мы будем использовать и другие инструменты для веб-разработки, надеюсь у вас установлен Node.js и npm, если нет, то срочно установите. И так открываем терминал и запускам:
Опыт интеграции веб-компонентов на сайт Леруа Мерлен
Однажды вечером, попивая кофеек, я получил сообщение от коллеги с емким словом «Дожили» и ссылкой на выступление на PiterJS. В этом выступлении спикер взял сайт «Леруа Мерлен» и показывал, как надо делать оптимизацию на неоптимизированном сайте. И он прав. Если взять PageSpeed Insights, то на главной странице мы имеем следующие значения:
| Мобилка | Десктоп |
![]() |
![]() |
Можно ли «пробить дно»? Да! И это зависит от того, в каком «настроении» находится PageSpeed Insights или в каком положении сегодня звезды на небе.
Элегантное асинхронное программирование с помощью промисов
Промисы (обещания) — сравнительно новая особенность JavaScript, которая позволяет откладывать выполнение действия до завершения выполнения предыдущего действия или реагировать на неудачное выполнение действия. Это способствует правильному определению последовательности выполнения асинхронных операций. В данной статье рассматривается, как работают обещания, как они используются в Web API, и как можно написать собственное обещание.
Условия: базовая компьютерная грамотность, знание основ JS.
Задача: понять, что такое обещания и как они используются.
Гайд по Custom HTML тегам для Google Tag Manager от Simo Ahava
Довольно долго (с конца 2012 года) одной из наиболее значимых опций GTM был Custom HTML тег. Этот волшебный инструмент позволяет GTM добавлять элемент HTML на страницу сайта. С 2012 года Google Tag Manager превратился из изолированной среды с пользовательскими шаблонами тегов в неограниченное ничем решение по управлению контентом на стороне клиента.
В статье мы рассмотрим принципы работы Custom HTML тег и возможности его применения.
Ближайшие события
Современная сборка 2020 для frontend. Gulp4
Начало
Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.
Не только древность моей сборки мотивировала на эту статью, но и еще одна причина: мне больно смотреть, когда заходят на онлайн-сервисы для конвертации scss, минификации javascript и других рутинных задач. Самое забавное — когда сделали мелкую правку, снова нужно проходить все круги ада копипаста.
Перед тем, как вы начнете читать, хочу сказать, что материала очень много, поэтому писал только основное. Слишком очевидных вещий старался не писать, но хотел, чтобы смог понять каждый новичок. Если будут непонятные моменты, то смело переходите по ссылкам и читайте более подробную информацию, а потом снова возвращайтесь к статье. Можете задавать вопросы в комментариях, всем постараюсь ответить.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №402 (10 — 16 февраля 2020)

The Ember Times — Выпуск 135

С Днем Святого Валентина, Эмберисты!
Узнайте о поддержке нативных декораторов от EmberMap, проверьте RFC (Request for comments) для спларгументов (splarguments), следите за серией постов о системах реактивности, слушайте подкаст JSParty с Джен и Крисом и читайте о трех причинах для перехода к синтаксису угловых скобок (angle brackets) в Ember Octane !
От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем дружном телеграмм-канале
Снимаем покрытие кода с уже запущенного Node.JS приложения
И снова я про тестирование и покрытие.

Наверное, вы уже поперхнулись кофе от вопроса "Зачем снимать покрытие с запущенного приложения" — но такая потребность периодически возникает.
Например:
- Узнать покрытие интеграционных тестов без инстурментализации кода, завершения приложения и выгрузки репорта какими-то сторонними средствами;
- Узнать без долгого ковыряния кода, по каким именно модулям приложения прошёл запрос;
- Определить "мёртвый" код, который по факту не используется в приложении;
- Узнать список транзитивных зависимостей, которые используются на определённые запросы.
Интересно? Поехали!
Webpack 5 — Asset Modules
Доброго времени суток. Этим постом хочу начать серию статей про новые возможности грядущего webpack 5. Почему я хочу рассказывать про webpack? Как минимум потому, что я принимаю активное участие в его разработке и постоянно копаюсь в его внутренностях. В данном посте хочу рассказать про Asset Modules — экспериментальную фичу webpack 5, которая позволяет избавиться от нескольких привычных лоадеров, сохранив при этом их пользу.
Что такое реактивность?
В Ember Octane появилось большое количество новых функций, но ни одна из них не является для меня более захватывающей, чем автоматическое отслеживание (autotracking). Автотрекинг — это новая система реактивности Ember, которая позволяет Ember узнавать, когда значения состояние (например, свойства помеченное @tracked) изменилось. Это было масштабное обновление под капотом, включающее в себя полное переписывание некоторых из самых старых абстракций Ember поверх нового ядра.
От переводчика: Крис Гарретт — работает в компании LinkedIn и является одним из core-контрибьюторов js-фреймворка Ember. Он принимал активное участие в создании нового издания фреймворка — Ember Octane. Несмотря на то, что его серия написана для Ember-разработчиков в ней затрагиваются концепции, которые полезно знать всем веб-программистам.
The Ember Times — Выпуск 134

Привет, Эмберисты!
На этой неделе: Полифилы для пакетов ember-data для старых версий Ember, узнайте как Figma в связке со Storybook облегчает жизнь разработчика, QUnit DOM объявляет о выпуске v1.0, а также выход ember-changeset 3.0.0 !
От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем душевном телеграмм-канале

