JavaScript *

Привет! Меня зовут Даша, я фронтенд-разработчик отдела спецпроектов в KTS.

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

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

Я преподаватель математики и информатики. В один прекрасный день осознал простую и важную вещь: дети (и взрослые) любят игры, а математику не любят. И с этим ничего нельзя сделать.

Начал размышлять, как бы геймифицировать учебный процесс. Увлекаюсь HTML, CSS, JavaScript, поэтому задумал написать игру, в которой сюжет продвигался бы за счёт решения задач. Но самое интересное то, что больше половины работы за меня сделал ИИ.

В статье рассказываю о том, как это было.

Что может быть привлекательнее депозита в Сбербанке под 21%? Видимо только депозит в ВТБ под 24%. А еще можно рассмотреть облигации с доходностью до 40% и ежемесячной выплатой купонов. Посмотрим, что они предлагают и какие существуют риски.

В статье будем искать такие варианты при помощи скрипта поиска ликвидных облигаций, который выложен на GitHub.

Вообще покупки высокодоходных облигаций с низким рейтингом (ВДО) на фоне роста ключевой ставки Центрального банка Российской Федерации – задача не для слабонервных. Высокие процентные ставки означают повышенный риск дефолта, особенно для эмитентов ВДО.

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

В этой статье исследуем директиву ActiveZone — подход, который мы использовали в библиотеке компонентов Taiga UI. Она полагается на два моих любимых инструмента Angular: Dependency Injection и RxJS. Нам понадобится глубокое понимание нативных событий DOM. Как бы ни был далек Angular от чистого JavaScript и DOM, он все равно полагается на старые добрые Web API, поэтому важно качать свои знания и в области ванильного frontend.

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

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

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

Эта вторая часть серии, в которой мы поговорим об аутентификации и авторизации.

• Первая часть

Привет, Хабр!

Сегодня рассмотрим библиотеку Redux для JS, зачем она нужна, и стоит ли она вашего внимания. Redux — это библиотека для управления состоянием приложения. Redux создан для тех случаев, когда:

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

Современные пользовательские интерфейсы требуют высокой интерактивности и удобства взаимодействия. В этой статье поговорим о том, как реализовать мощный, адаптивный компонент мульти‑выбора на основе Vue 3 Composition API. ChipsMultiSelect — это компонент, который объединяет возможности выпадающего списка, визуализации выбора в виде «чипсов» и встроенной фильтрации.

Выбранные элементы отображаются в виде «чипсов».

Demo | GitHub

Особенности Fast Data Grid:
— Невероятно быстрый
— Многопоточный
— Всего 523 строчки кода
— Нет зависимостей
— Vanilla JavaScript

Попробуйте скролл и поиск по 1 000 000 строк — Fast Data Grid.

В статье перечислю нюансы работы с DOM. Про многопоточность в следующей статье.

Привет, Habr!

Честно говоря, долго сомневался, стоит ли писать эту статью. Я понимаю, что среди комментариев наверняка будут такие, кто скажет: «Очередной никому не нужный датапикер». Но сегодня, когда Vanilla Calendar Pro собрал больше 480 звезд на GitHub и получает 17 тысяч скачиваний в месяц, я решил поделиться своей историей.

Хочу сразу отметить: я не претендую на лавры лучшего разработчика календарей и датапикеров. Эта статья о моем первом опыте в open source, о том, как я создавал проект с нуля и как он стал полезен другим разработчикам.

Продолжаем писать собственные плагины для Obsidian. Первую часть статьи можете найти здесь. В ней мы:

Выяснили, что можно писать плагины даже проще, чем это предлагает делать официальная документация

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

Грозились написать четвертый финальный босс-плагин

Вот и приступим.

А вы уже прятали что-то внутри PNG? Базовый способ надежно спрятать что-то внутри картинки. И все на вашем любимом JavaScript!

После шумихи с Notion все ринулись кто-куда, но так сложилось, что по большей части все стали смотреть в сторону Obsidian. И Хабр заполонили статьи про Obsidian и плагины для Obsidian.

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

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

В процессе разработки UI для игр Forza Horizon 3 и Forza Motorsport 7 я имел возможность поработать с потрясающими акриловыми матовыми элементами дизайна.

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

Все так или иначе сталкивались с функцией или методом, который принимает объект и свойства в виде строки с которым нужно что-то сделать. Пример:

updateDate(user, "date");

И когда изменяется свойства объекта (user.date → user.birthday), компилятор его нормально скомпилирует и мы лишаемся возможности отловить баг на стадий разработки.

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

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

Давайте посмотрим, как я заморачивался с вещами, которые в итоге только усложнили задачу, и что из этого получилось.

Brisa — это современный веб-фреймворк, который сочетает мощь серверного рендеринга и удобство клиентских компонентов. Он позволяет создавать быстрые, легкие и высокопроизводительные веб-приложения, минимизируя объем JavaScript, отправляемого в браузер. Поддержка веб-компонентов, гибкая интернационализация и возможность кроссплатформенной разработки с помощью Tauri делают Brisa универсальным инструментом для веб-разработчиков.

В этой статье мы подробно разберём, как начать работу с Brisa, изучим основные принципы и рассмотрим примеры кода.

Приходилось ли вам работать с потоками в Node.js?

Когда я впервые столкнулся с потоками, я, мягко говоря, оказался в растерянности. Эта концепция была совершенно новой для меня. Я полагал, что смогу обойтись и без них, но вскоре понял, что в Node.js они повсюду. Даже такие ключевые модули, как fs и http, используют потоки "под капотом". Поэтому мне пришлось погрузиться в изучение этой темы и разобраться в том, как потоки работают.

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

На днях столкнулся с интересным вопросом. Что быстрее element.style.setProperty(свойство, значение)или element.setAttribute('style', 'свойство: значение')? На первый взгляд ответ кажется очевидным. Логика говорит нам, что setProperty должен устанавливать значение сразу в CSSOM, тогда как setAttributeвыставляет сначала атрибут style и уже потом значение атрибута будет разобрано в CSSOM. Таким образом, setProperty должен быть быстрее. Но действительно ли всё так однозначно? Давайте разбираться.

Начнем с того, что немного освежим мат. часть. Мы знаем, что стили описываются с помощью языка CSS. Получив строковое описание стилей на языке CSS, браузер разбирает его и составляет объект CSSOM. Интерфейс этого объекта представлен спецификацией https://www.w3.org/TR/cssom-1. Он следует принципам каскадности и наследования, изложенным в https://www.w3.org/TR/css-cascade-4.

Из выше указанных спецификаций мы знаем, что основной единицей CSS является "свойство". Свойству присваивается значение, характерное конкретно этому свойству. Если значение не задано явным образом, оно наследуется от выше стоящего стиля или, если нет вышестоящего, будет установлено initial value.

Набор свойств для элемента собирается в правила CSSRule. Правила бывают разных типов. Наиболее популярный тип - CSSStyleRule, определяющий свойства элемента. Такое правило начинается с указания одного из валидных селекторов и последующих фигурных скобок с набором свойств и значений <selector>: { ... }Имеются и другие типы правил, например CSSFontFaceRule, описывающий параметры подключаемого шрифта @font-face { ... }, CSSMediaRule - @media { ... } и др. Полный список в спецификации https://www.w3.org/TR/cssom-1/#css-rules.

Привет! Меня зовут Никита, и я тружусь в команде фронтенда платформы в Ozon. Платформа поставляет инструменты для создания и поддержки JS-проектов. В компании в настоящее время более 500 таких проектов. Мы прилагаем максимум усилий, чтобы разработчикам всех проектов было одинаково приятно работать с нашими инструментами.

Также мы предоставляем инструменты для создания JS-библиотек. И в этой статье я расскажу о том, как мы советуем создавать npm-пакеты. Отмечу, что это не касается UIKit-пакетов, — для них требуется довольно специфичный инструментарий, который заслуживает отдельной статьи.

Недавно у нас проходила актуализация инструментов, которая включала обновление версий Node, TypeScript и прочего. И мы обнаружили, что сейчас правильно упаковать библиотеку ой как нелегко, особенно с началом активной фазы по отказу от CommonJS. В идеале очень хочется иметь инструмент, который бы просто работал. В open-source есть парочка вариантов (unbuild, pkgroll, dnt), но выбрать подходящий мы пока не смогли. А написать свой — довольно трудоёмкая задача. В будущем мы обязательно обзаведёмся таким инструментом, а пока просто погрузились в тему и подготовили для наших разработчиков рекомендованные сетапы, которыми сейчас поделимся и с вами.

Ты приходишь в новую компанию, всё кажется крутым: светлый офис, дружелюбная команда, проекты мечты. И тут начинается...

Сборник фронтендерских болей.