JavaScript *

Декораторы — инструмент декларативного программирования. С их помощью можно легко и элегантно добавить к классам и членам класса метаданные. На основе этих метаданных можно расширять или изменять поведения классов и членов класса, не изменяя при этом кодовую базу, к которой применен декоратор. Саму технологию можно отнести к мета-программированию или декларативному программированию.

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

Бывало, замечаешь в коде «нехороший» модуль или функцию и тут же тянутся руки их отрефакторить. Но как потом убедиться, что правки не сломали какой-нибудь сценарий в приложении или вовсе не положили продакшен? Этих ситуаций можно избежать, если в проекте есть тесты. 

Меня зовут Александр Моргунов, я техлид в Самокате. Пишу на TypeScript, React, ReactNative. В разное время писал тесты для фронтенда, бэкенда и мобилок. В этом посте хочется поговорить о том, как можно тестировать современные фронтенд-приложения и какие подходы к тестированию сейчас актуальны. 

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

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

Весь год я участвовал в разработке потрясающего продукта — Taiga UI. Это библиотека компонентов на Angular, на которой построены сотни продуктов Тинькофф и много других проектов. Наша команда потратила много времени и сил — расскажу, что из этого получилось.

CORS‑ошибка в консоли часто запускает долгую цепочку проверок: фронтенд работает, API отвечает, а браузер всё равно блокирует запрос.

В статье разбираеv, как устроен CORS, зачем нужен preflight, какие заголовки определяют доступ к ресурсу и где искать причину, когда сообщение в браузере указывает вовсе не на ту проблему, которую вы ожидаете.

Привет, друзья!

Я продолжаю изучать MediaPipe — библиотеку с открытым исходным кодом от Google, предоставляющую "кроссплатформенные и кастомизируемые решения на основе машинного обучения для работы с медиа", и в этой статье хочу рассказать вам о 2 инструментах:

• Selfie Segmentation, выделяющий людей на сцене, что позволяет осуществлять замену фона на кадрах видео в процессе потоковой передачи соответствующих данных;
• Face Mesh, предоставляющий сетку лица человека, состоящую из 468 контрольных точек с координатами в трехмерном пространстве, что позволяет реализовать некоторые интересные визуальные эффекты.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

Относительно недавно команда Telegram выпустила обновление, с которым появилась возможность встраивать в мессенджер веб-приложения. Эта статья — обзор основных моментов внедрения веб-приложениий в телеграм-ботов.

Привет, меня зовут Анастасия Пласкевич, я фронтенд-разработчик. Недавно на проекте я разбиралась с зависимостями и углубилась в эту тему так, что собрала небольшой доклад о том, что такое Lockfile, как работает yarn.lock, как решать проблемы с зависимостями в проекте и делать базовую проверку безопасности, а доклад адаптировали в эту статью.

Статья будет полезна разработчикам JS/TS приложений, которые столкнулись с некорректным поведением пакетов в своем проекте, или со старым кодом, который содержит уязвимости. Базовый аудит зависимостей будет уместен на любом проекте: всегда находятся вещи, которые можно поправить. 

Назначение

Этот документ призван расширить текущую модель угроз и предоставить подробные рекомендации по обеспечению безопасности приложения Node.js.

Redux Toolkit Query — это мощный инструмент для взаимодействия с API, который из коробки реализует такие полезные фишки, как отображение состояния загрузки, кэширование, дедупликацию запросов, полинг, ревалидацию при различных условиях, а также весьма удобна в использования за счёт готовых хуков. 

Привет, меня зовут Антон Степанов, я — frontend-разработчик в Альфа-Банке. В статье расскажу какие задачи при работе с API frontend-разработчику приходится решать чаще всего, к каким идеям рано или поздно это может привести, и как их можно реализовать в RTK query, собственно.

Под катом много кода и убеждений.

Я не считаю, что DHTML — cool, просто картинка хорошая)

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи.

Знаете ли вы, что кроме интерфейсов, определенных спецификациями объектной модели документа (Document Object Model, DOM) и объектной модели каскадных таблиц стилей (Cascading Style Sheets (CSS) Object Model, CSSOM), существует также набор свойств и методов, определяемых в модуле отображения CSSOM (CSSOM View Module)? Этот интерфейс предназначен для определения и манипулирования геометрией элементов DOM.

Представляю вашему вниманию вторую часть статьи о создании расширения web-браузера Chrome, которое позволяет извлечь все изображения с web-страницы.

В этой части я покажу как автоматически упаковать все изображения этого списка в ZIP-архив и предложить пользователю его скачать. Также, мы создадим дополнительную страницу интерфейса, где пользователь сможет выбирать, какие картинки добавлять в ZIP-архив, а какие нет.

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

Помните доисторические времена вроде 2019 года, когда ещё не было пандемии? Тогда мы проводили офлайновые конференции, и обычно они длились дня два с утра до вечера: можно успеть и доклады послушать, и наобщаться вволю.

В эпоху онлайн-конференций многие ностальгировали по этому и просили «вернуть как было». Однако другие участники успели полюбить удобство онлайна (например, те, кто живёт далеко от Москвы/Петербурга). И просто вернуть прежний формат означало бы сделать им хуже.

Поэтому на наших весенних конференциях мы постараемся, чтобы никто не ушёл обиженным: и офлайн будет двухдневным (с 2019-го такое не делали), и у онлайн-участников будет много контента. Подробности — под катом.

Опубликовать TypeScript‑пакет в npm кажется простой задачей, пока не приходится разбираться со сборкой, типами, тестами и содержимым релиза.

В статье пошагово соберём библиотеку, настроим Jest и проверим пакет перед публикацией.

Привет, друзья!

В данном туториале я покажу вам самый простой и быстрый, хотя и не очень оптимальный с точки зрения размера сборки, способ рендеринга 3D-объектов и моделей в React.

Мы решим 3 интересные задачи:

• рендеринг самописного 3D-объекта;
• рендеринг готовой 3D-модели;
• совместный рендеринг объекта и модели.

Знание вами основ работы с трехмерной графикой в браузере является опциональным.

Источником вдохновения для меня послужила эта замечательная статья.

Если вам это интересно, прошу под кат.

Миллионы современных разработчиков активно используют язык программирования, который родился буквально за 10 дней в период экспоненциального развития интернета. Создатель JavaScript Брендан Эйх не так давно заново обратился к истокам созданного им языка и рассказал о том, как семена, посеянные им в 1995 году, теперь наконец-то взошли.

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

Прогресс в этой области действительно поражает. От галлюциногенных картинок DeepDream до шедевров от Stable Diffusion прошло каких-то 8 лет. И ведь это не единственный лидер сейчас. Здесь же мы имеем Midjorney, Imagen, Dalle, Kandinsky в конце концов. И знаете, мне это что-то напоминает.

Допустим, у вас есть тестовое задание.

В статье мы обсудим, как это тестовое выполнить аккуратно, пошагово. Ну и - побочный эффект - сравнительно быстро.

Расширения браузера это web-приложения, которые устанавливаются в web-браузер чтобы расширить его возможности. Обычно для того чтобы воспользоваться расширением, пользователю нужно найти его в Chrome Web Store и установить.

В этой статье я покажу как создать расширение для браузера Google Chrome с нуля. Это расширение будет использовать API браузера для того чтобы получить доступ к содержимому web-страницы любой открытой вкладки. С помощью этих API можно не только читать информацию с открытых web-сайтов, но и взаимодействовать с этими страницами, например, переходить по ссылкам или нажимать на кнопки. Таким образом расширения браузера могут использоваться для широкого круга задач автоматизации на стороне клиента, таких как web-scrape или даже автоматизированное тестирование фронтенда.

Мы создадим расширение, которое называется Image Grabber, которое будет содержать интерфейс для подключения к web-странице и для извлечения из нее информации о всех изображениях. Далее, при нажатии на кнопку "GRAB NOW" список абсолютных URL этих изображений будет скопирован в буфер обмена. В этом процессе вы познакомитесь с фундаментальными строительными блоками, которые в дальнейшем можно будет использовать для создания других расширений.

Расширения, создаваемые таким образом для браузера Chrome совместимы с другими браузерами, основанными на движке Chromium и могут быть установлены, например, в Yandex-браузер или Opera.

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

«Под поверхностью машины движется программа. Без усилий, она расширяется и сжимается. Находясь в великой гармонии, электроны рассеиваются и собираются. Формы на мониторе — лишь рябь на воде. Суть остаётся скрытой внутри…» Мастер Юан-Ма, Книга программирования.

Под катом собрали 8 книг, которые рекомендуют прочитать наши разработчики. В целом, они все есть на заглавной картинке. Но если хотите почитать разные интересные вырезки из книг, цитаты, пару задач и мнения наших frontend-разработчиков — заходите под кат.

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи, в которой рассказывается о разработке приложения с помощью React Query.

Репозиторий с кодом проекта

Прим. пер.: автор рассказывает лишь о ключевых особенностях приложения, поэтому я рекомендую клонировать репозиторий, установить зависимости и запустить сервер для разработки, чтобы иметь возможность выполнять необходимые операции при чтении статьи. Обратите внимание: если у вас возникнут проблемы при запуске сервера для разработки с помощью команды npm start, перенесите переменные, определенные в этой команде в файле package.json, в файл .env:

SKIP_PREFLIGHT_CHECK=true
TSC_COMPILE_ON_ERROR=true
ESLINT_NO_DEV_ERRORS=true

И отредактируйте команду start следующим образом:

"start": "react-scripts start"

Руководство по React Query