Обновить
238.47

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Изучение TypeScript — полное руководство для начинающих. Часть 3 — Классы и интерфейсы

Время на прочтение5 мин
Охват и читатели29K

Всем привет! Меня зовут Лихопой Кирилл, я работаю fullstack-разработчиком. Это - уже третья часть руководства по TypeScript для начинающих, в которой мы разберем более сложные темы, такие как классы, модули и интерфейсы.

Предыдущие части:
Часть 1 - введение и примитивные типы данных
Часть 2 - ссылочные типы данных
Часть 4 - Литералы и дженерики
Часть 5 - Строгий режим и сужение типов

Читать далее

React + TypeScript: необходимый минимум

Время на прочтение11 мин
Охват и читатели86K


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


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


Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!


Преимущества изучения TS могут быть сведены к следующему:


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

Эта статья представляет собой минимальное введение по использованию TS в React.


Антигероем нашей истории будет Пэт — очень неприятный технический директор.

Читать дальше →

Event propagation

Время на прочтение10 мин
Охват и читатели5.3K

Типичное видение модели распространения события, которое мы привыкли видеть в интернете - это модель всплытия события (bubbling) подобно пузырьку, или погружению (capturing) подобно “камню”.

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

Вдохнуть поглубже

Что такое состояние

Время на прочтение13 мин
Охват и читатели25K


Привет! Меня зовут Артём Арутюнян, много где меня можно встретить под ником artalar. 10 лет я разрабатываю крупные веб-сервисы, и вот уже четыре года менеджер состояния, исследуя тему реактивности, консистентности данных и состояния. А началось всё с простого вопроса: почему React, самая популярная современная библиотека для написания UI, по умолчанию полностью рушит приложение и показывает белый экран при появлении ошибки в любом компоненте во время рендера?

В данной статье хотелось бы описать и раскрыть формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения.

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

Конструктор базы для браузерной стратегии в духе Dune 2/2000 на Three.js, Vue3 + TS

Время на прочтение11 мин
Охват и читатели5.5K

Самой успешной моей статьей для сообщества был подробный отчет о разработке браузерного FPS. Судя по статистике в базе данных — неожиданно огромное количество людей зашло и попробовало сыграть, я получал заинтересованные вопросы в личку и так далее. В дальнейшем, я предпринял еще одну попытку крафтового браузерного геймдева «на javascript», и попробовал создать конструктор для стратегии в духе культовой Dune из детства. В какой-то момент я уперся в неудовлетворительную производительность получающейся разработки, заскучал и уже почти год как забросил это дело. Но у меня вполне получилось построить работающий полноценный контрол, сейчас можно возводить и демонтировать здания. Поэтому хочу, прежде всего, поставить точку для себя самого, немного рассказав и о данной затее — возможно, для кого-то окажутся полезными мои усилия, изыскания. Статья не будет такой объемной, дотошной и разнообразной как первая о создании действительно полноценного шутера, зато сам код репозитория, кажется, немного интереснее, так как использует более актуальный стек из Vue3 и TypeScript. Во многом, эта разработка продолжает идеи и методы первой, с тем отличием, что мы пилим стратегию, а не шутер от первого лица. Я совсем не буду повторять то что было уже пройдено и рассмотрено на первом примере, бегло покажу только «новые фичи».

Читать далее

Мощь декораторов TypeScript на живых примерах. Декорирование методов класса

Время на прочтение12 мин
Охват и читатели30K

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

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

Читать далее

Экосистема фронтенд-разработчика на JavaScript: полезный инструментарий для начинающих

Время на прочтение9 мин
Охват и читатели21K

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

Читать далее

Как тестировать современный фронтенд

Время на прочтение19 мин
Охват и читатели65K

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

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

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

Читать далее

Год Тигра в Taiga UI

Время на прочтение8 мин
Охват и читатели5.6K

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

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

Читать далее

SPA потоки и состояния: шаблон Мейоз

Время на прочтение5 мин
Охват и читатели3.3K

Состояние SPA (одностраничное приложение на javascript) и управление состоянием — бесконечная тема. У всякого популярного js-фрейморка есть пара, тройка решений на этот счет. "Их есть" и без фреймворков и библиотек, с помощью несложной функции и javascript, просто способ управления состоянием (паттерн, шаблон). Автор назвал его Мейоз. Название довольно так себе на мой взгляд, но автору виднее.

Основа паттерна — поток (stream), на удивление простая, но "крутая" идея реактивного функционального программирования. Одной структуры данных и нескольких функций достаточно, чтобы управлять состоянием приложения, не особо "заморачиваясь".

Читать далее

Конвертируем markdown в html и подключаем компоненты React с Unified это просто

Время на прочтение11 мин
Охват и читатели17K

Библиотека Unified и экосистема плагинов для работы с Markdown и HTML позволит очень просто создать конвертер и подключить компоненты React. Unified преобразует контент в синтаксическое дерево, и имеет набор утилит для работы с деревом, но даже без набора утилит это простая задача, достаточно уметь перебирать свойства объекта javascript. Все это будет продемонстрировано и объяснено.В статье есть пример создания плагина и демо проект.

Читать далее

Несколько советов по работе с CORS для начинающих разработчиков

Время на прочтение8 мин
Охват и читатели155K

В этой статье мы с вами разберемся, что такое CORS, CORS-ошибки и из-за чего мы можем с ними сталкиваться. Я также продемонстрирую возможные решения и объясню, что такое предварительные (preflight) запросы, CORS-заголовки и в чем заключается их важность при обмене данными между сторонами.

Эта статья рассчитана на тех, у кого уже есть базовые познания в области веб-разработки и некоторый опыт с протоколом HTTP. Я старался писать статью так, чтобы она была понятна и новичкам, будучи наполненной знаниями, но при этом стараясь избегать слишком большого количества технических нюансов, не связанных с темой CORS.

Читать далее

JavaScript: замена фона видео и реализация интересных эффектов на основе координат лица в реальном времени

Время на прочтение11 мин
Охват и читатели5.9K


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


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


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

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


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

Читать дальше →

Ближайшие события

Конфигурируем веб-сервер для Next.js

Время на прочтение3 мин
Охват и читатели32K

Казалось бы, что развёртывание приложений на Next.js не влечёт за собой трудностей - установил зависимости, сделал "npm run build && npm run start" и проксируешь запросы на 3000-ый порт, но для оптимальной работы предстоит сделать кое-что ещё.

Читать далее

Доказуемая честность и PoL в казино (и не только)

Время на прочтение3 мин
Охват и читатели8.7K

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

Читать далее

React memo: Преисполнимся в оптимизации

Время на прочтение4 мин
Охват и читатели37K

Привет! Сегодня поговорим про стандартные способы оптимизации web-приложения в экстремистской библиотеке React. Мотивацией послужило некоторое количество кода, который я видел. Связан он с использование API React не по назначению или без учета каких-то очевидных проверок на производительность и тонкостей (с натяжкой).

Читать далее

Создание сервера для онлайн ММО игр ч. 6 — Выбор технологий, протокола и архитектурный шаблон Entity Component System

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели5.5K

Правительство РФ анонсировало выделение до $50 млрд для выхода РФ в топ-20 стран—разработчиков Игр к 2030 году. Возможно в скором времени разрабатываемый мной сервис наконец увидит свет.

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

Читать далее

Telegram WebApps. Как встроить веб-приложения в чат-бота?

Время на прочтение5 мин
Охват и читатели162K

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

Читать далее

Разработка и тестирование сортируемых компонентов Drag and Drop. Часть 2 — Тестирование

Время на прочтение14 мин
Охват и читатели2.8K

В предыдущей статье вы узнали, как разрабатывать переупорядочиваемые drag-and-drop компоненты, теперь пришло время их протестировать. В этой части вы покроете приложение юнит тестами с помощью BDD подхода.

Читать далее

Короткая шпаргалка по lockfile

Время на прочтение5 мин
Охват и читатели16K

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

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

Читать далее

Вклад авторов