JavaScript *

Декабрь 2023 года стал значимой датой в истории развития CSS-свойства mask: все современные браузеры в своих последних версиях обеспечили его полную поддержку, теперь без использования своих вендорных префиксов. А это означает, что данное свойство прочно и надолго вошло в жизнь каждого фронтенд-разработчика. Осталось лишь фронтенд-разработчикам принять его в свою жизнь и перестать его бояться!

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

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

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

А как только освоишься, это занятие становится на редкость увлекательным и даже забавным.

Узнайте, как Vercel сократил время сборки и повысил скорость разработки, сохранив при этом удобство работы с микрофронтендами.

Основной веб-сайт Vercel, некогда являвшийся единым крупным сайтом Next.js приложение, обслуживающее как посетителей нашего веб-сайта, так и панель управления для входа в систему. Но по мере того, как компания Vercel росла, в этой системе появились возможности для совершенствования. Время сборки росло, управление зависимостями становилось все более сложным, а рабочие процессы требовали оптимизации. Незначительные изменения привели к полномасштабным сборкам, повлияв на изолированную разработку и конвейеры CI.

Хочу рассказать о том, какие проблемы при разработке создают рекурсивные зависимости на фронте.

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

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

Привет! Это ставшая уже регулярной рубрика о релизах next.js (читайте релизы по v11, v12, v13, v14). Каждый релиз - набор нового, интересного и спорного. Новая версия не станет исключением. Но всё же новая версия интересна не столько новым функционалом, сколько изменением приоритетов и организации в next.js. И да, как вы уже догадались из названия, в значительной части релиз ценен проработкой ошибок и доработками.

В данной статье я не буду останавливаться на том что такое App Router или серверные компоненты - про это подробно расписано в предыдущих статьях. Только про новую версию и только про новые изменения.

Примечание: в статье отражены самые интересные изменения с призмы автора. Здесь разобраны коммиты и PR в ядро next.js, сообщения разработчиков и задачи, поэтому статья отражает больше изменений, чем представлено официально.

Когда Алиса в Стране Чудес сказала «тут нужно бежать со всех ног, чтобы только оставаться на месте», она словно описывала JavaScript-разработку. Только начнёт казаться, что уже привык, как жизнь подбрасывает новые фреймворки, подходы, области применения.

Пора ли уже осваивать фреймворк Astro? Каково на практике с Nuxt 3? Что надо понимать, если думал про блокчейны «мода на них скоро пройдёт» и не обращал внимания, а теперь тебя зовут работать в web3-проект? А WebAssembly тоже уже нельзя упускать из внимания, да?

Можно пытаться разбираться с этим всем самостоятельно, а можно сходить на конференцию. Там говорят и о таких темах, и о менее «модных», но не менее важных: как правильно анализировать производительность проекта? А его доступность? Как привычные фреймворки устроены «изнутри»?

Уже скоро мы проведём HolyJS 2024 Autumn, где будут доклады обо всём этом. Программа уже составлена, и представляем Хабру короткие описания всех докладов.

Статья про то как заставить работать React Server Components внутри Electron приложения с помощью Next.js при этом не запуская локальный сервер и не открывая порты. С возможностью публикации стандартными инструментами. А также исследование зачем все это надо.

В этой статье я продолжаю делиться результатами изучения создания телеграм-ботов в nodejs, начатой в предыдущих публикациях (раз, два). На этот раз я покажу, как организовать интерактивные диалоги с пользователями, используя модуль conversations библиотеки grammY. Мы рассмотрим, как настроить библиотеку для работы с диалогами, управлять их завершением, а также реализовать ветвления и циклы. Этот подход станет основой для более сложных проектов, где важно взаимодействие с пользователем.

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

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

Сегодня мы рассмотрим одну из тем, которая, как ни странно, остаётся недооценённой — JSON Schema. Если ты аналитик (или хочешь им быть) и в твоей работе часто мелькают JSON-файлы, то наверняка знаешь, как сложно порой бывает держать всё это под контролем. В этой статье мы разберём всё, что тебе нужно знать про JSON Schema.

Что имеем?

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

Однако, несмотря на наличие единой системы, мы сталкивались с рядом проблем — делюсь тем, как мы их решали...

✏️ 🔥 Я написал новую статью об одной из интересных функций в Angular 18: RxJS Interop. В статье рассматривается, как RxJS Interop эволюционировал с Angular 16 до 18, какие новые возможности он приносит и как его можно использовать в вашем коде.

🚀 Если вы разработчик Angular и хотите улучшить свои реактивные паттерны, эта статья для вас!

✨ Основные моменты:

- 🔄 Бесшовная конвертация между Signals и Observables.

- 📉 Оптимизированная производительность для управления реактивным состоянием.

- 💡 Использование операторов RxJS напрямую с Signals для упрощения и улучшения читаемости кода.

- 🔥 Упрощение интеграции с Firestore с помощью Signals для синхронной реактивности и более простого управления состоянием.

Когда первый раз открываешь документацию Яндекс.Карт, то совершенно ничего не понятно. Ты смотришь быстрый старт, введение, руководство разработчика, общие сведения, подключение карты... ну да, окей, мы взяли такие, всё подключили, видим карту с населенными пунктами... а дальше-то что делать?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam erat leo, tempus at malesuada sed, dapibus vitae ipsum. Morbi vitae dignissim lectus. Nulla lectus nisl, pretium sit amet viverra vitae, feugiat quis nunc. In semper justo orci. Praesent ultrices risus eu odio ornare suscipit. Pellentesque dapibus mauris magna. Sed congue, quam ut pharetra euismod, justo augue cursus ex, congue volutpat orci metus non enim. Suspendisse orci justo, vehicula et rhoncus eu, eleifend ut massa. Morbi sodales mauris felis, id tincidunt nulla congue quis.

Бывает ситуация, когда нам необходимо протестировать middleware, либо асинхронное событие, которые возникает в хранилище redux.

Цель этой статьи в том, чтобы показать как тестировать action в redux store.

Есть готовое решение, redux-mock-store, но оно не позволяет оперировать реальным хранилищем, через него мы можем только проверить был вызван тот или иной action, а данные которые сохраняем мы в store, не можем проверить.

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

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

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

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

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

Если коротко, то использование ChatGPT для автоматизации генерации кода эффективно при работе с шаблонами. Генерация однотипных фрагментов на основе шаблонов ускоряет процесс разработки и снижает количество рутинных задач. Чем точнее структура и наименования в шаблонах, тем легче модели корректно выполнять замены,

Для тех же, кто хочет более детально ознакомиться с процессом взаимодействия человека и ChatGPT при создании JavaScript-проекта - добро пожаловать под кат.

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

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

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

Меня зовут Сергей Константинов. Я фронтенд-разработчик в Сбере и наставник на курсе «Фронтенд-разработчик». У меня весьма широкий круг общения: от студентов и выпускников Практикума до лидеров ведущих компаний, таких как Яндекс, VK, Сбер и другие. Благодаря этому я могу объективно рассказать о пути, который проходит фронтенд-разработчик на всех этапах карьеры.

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

Мы используем SMS API от Exolve, фреймворк Next.js без APP роутера и базу данных PostgreSQL. Для тестирования в локальной среде и приёма сообщений из интернета работаем с Ngrok.