Обновить
256K+

JavaScript *

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

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

Еще один Port knocking

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

Port Knocking в МИКРОТИКЕ Через WEB форму. По мнению автора, в статье приведен пример необычного применения PORT KNOCKINGa, отличный от распространенного. В примере, для "авторизации" используется HTML страница с JavaScript. Так же приводится не очевидный пример применения технологии для редиректа прошедших "авторизацию" запросов на сторонние не защищенные ресурсы.

Читать

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

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

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

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

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

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

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

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


Привет, меня зовут Артём Арутюнян и я автор менеджера состояния 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 мин
Охват и читатели9.1K


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


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


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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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


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


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


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


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


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

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


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

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

Event propagation

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

Типичное видение модели распространения события, которое мы привыкли видеть в интернете - это модель всплытия события (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 мин
Охват и читатели31K

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

Год Тигра в Taiga UI

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее