Обновить
128K+

JavaScript *

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

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

Запускаем Telegram Bot на панели оператора (HMI) от Weintek

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

Возможно ли в промышленной панели оператора (HMI) создать своего бота для Telegram?

В HMI от Weintek это реализуемо! В данном туториале мы научим нашу панельку работать с Telegram Bot API, напишем Echo-бот и реализуем отправку сообщений по событию.

Кому интересно, добро пожаловать под кат…

Читать далее...

Знакомство c Reatom

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


Привет, меня зовут Артём Арутюнян и я автор менеджера состояния Reatom. Этим постом открывается серия обучающих материалов на русском языке, документация на английском доступна на официальном сайте.

А оно вам надо? Думаю, да, потому что Reatom — это универсальное решение, которое позволяет легко пошарить глобальное состояние за микроскопическую (2.5KB) цену, эффективно строить самодостаточные и переиспользуемые логические модули гигантских приложений или просто сделать ваш сетевой кеш реактивным с помощью дополнительного пакета @reatom/async.

В этой статье мы кратко пройдёмся по мотивации и истории, а потом разберём основные фичи и примеры их использования вместе с биндингами к React.js. Похожий разбор есть в виде скринкаста.
Читать дальше →

Программирование без программирования

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

Не хочется говорить о высоких материях, Nocode, ML - системах, нейросетях или чем-то подобном, хочется порассуждать вот о чем: у каждого человека, увлекающегося программированием, есть N+ пет-проектов, и их количество растет. Часть из них - это проба пера, новых технологий, алгоритмов, но часть - это попытки быстро решить задачу бизнеса и найти некий business-value, реализовав MVP и попробовать сделать проект на миллион!

Получается, что для подобных задач я и каждый из нас делает плюс-минус одни и те же действия для получения 50% результата, и сами проекты между собой отличаются на вот эти 50% их сути!

Читать далее

Удобный прогноз северного сияния: в цветах и графиках

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

В начале 2022 года я съездил в самостоятельное путешествие за северным сиянием. Это оказалось прекрасно, кроме этапа планирования. Все сайты с прогнозами «северных огней» выглядели странно и едва помогали собраться, но зато предлагали купить в пару кликов тур и ни о чем не переживать. Тур мне был не нужен, а вот хороший прогноз — да.

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

Читать далее

Эмулируем React useState в обычном JS (via data-attributes & css selectors)

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

Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors.

Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса.

-

Пошаговая инструкция: как с Node.js организовать иконки из Figma в проекте

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


Эта статья подробно описывает создание небольшого скрипта на Node.js для выгрузки векторных иконок из Figma в проект, а также универсального компонента для разных видов иконок, который удобно использовать в своём приложении.


Скрипт может пригодиться командам, которые ещё не определились с общим подходом к использованию и хранению иконок в проекте, и тем, кто стремится автоматизировать этот процесс.


Под катом – довольно длинный (мы предупредили!) и подробный текст, но с большим количеством полезного кода.

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

Открываем и закрываем модалки на Vue Composition API

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

Предыстория этой статьи простая. На одном из моих проектов я заметил, что мы с двумя коллегами частенько пишем очень похожие функции open/close/toggle для модалок, табов и других подобных элементов. В относительно среднем по количеству страниц/компонентов/коду проекте я нашел примерно 25 реализаций этих функций. Конечно, в некоторых случаях мы не просто что-то открываем, но и выполняем какие-либо сайд эффекты, например, отправляем события. Само по себе это боли не доставляет, а к особым поборникам DRY мы явно не относимся. Однако мне стало интересно, что может предложить Composition API, чтобы не писать каждый раз даже лишние пару-тройку строк кода.

Читать далее

Изучение TypeScript — полное руководство для начинающих. Часть 4 — Литералы и дженерики

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

Привет! В новой части руководства будут рассмотрены такие важные понятия, как литералы и дженерики. Итак, приступим.

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

Читать далее

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

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

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

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

Читать далее

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

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


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


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


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


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


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

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


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

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

Event propagation

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

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

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

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

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

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


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

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

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Год Тигра в Taiga UI

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее