JavaScript *

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

Часть этой рутины, однако, можно всегда оптимизировать.

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

VGENT (Vue Agent) – это CLI (Command Line Interface) приложение, которая генерирует компоненты для фреймворка Vue.js или Nuxt.js. Данный инструмент можно гибко настроить под нужды проекта, и генерировать компоненты командами в терминале.

Разбираемся на практике с тестированием собственных React-хуков с использованием TypeScript и React Testing Library, добиваясь 100%-го покрытия тестами.

Рассмотрим простой пример, чтобы понять, зачем нужны регулярные выражения. Допустим, перед нами стоит задача — найти и заменить местоимение 'ее' на 'его' в строке 'Быстрее всего мы догоним ее на машине'. 

Самое очевидное решение — использовать прямую замену, применив встроенную в JavaScript функцию replace():

'Быстрее всего мы догоним ее на машине'.replace('ее', 'его');

Однако 'ее' также является окончанием слова 'Быстрее', а .replace() заменит первое вхождение подстроки. В итоге мы получим ожидаемо неверный результат: 'Быстрего всего мы догоним ее на машине'. Поэтому необходимо проверить строку на наличие символа, стоящего перед 'ее': если это пробел, можно делать замену.

Больше примеров и неочевидные выводы о том, нужны ли фронтендерам регулярки — внутри статьи.

React Server Components (RSC) — интересная новая фича в React.

Есть вероятность, что в ближайшем будущем она сильно повлияет на скорость загрузки страниц, размер бандлов и то, как мы будем писать приложения на React. Мы в Plasmic (место работы автора) делаем визуальный конструктор для React и очень заботимся о производительности. Многие из наших клиентов используют Plasmic для создания маркетинговых сайтов и сайтов электронной коммерции, и производительность там критически важна. Так что хотя RSC — пока что ранняя экспериментальная функция React 18, мы разобрались, как она работает под капотом. Об этом и расскажем в статье.

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

React Hook Form — одна из самых популярных библиотек для обработки элементов ввода формы в экосистеме React.

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

Сегодня я покажу вам, как можно интегрировать React Hook Form с различными компонентами Material UI.

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

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

(Виктор Цой)

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

"- Ну как на собеседование сходил? Успешно? - Да. Ручку у них спер" (ссылка)

Часть вопросов будет по typescript, часть по javascript, что-то будет из html, Node.js, настройки, библиотеки, концепции. В общем всё то, о чем говорят на собеседованиях.

У отличных приложений должны быть отличные маркетинговые сайты – именно поэтому всегда стоит присматриваться к новым трендам и разработкам в системах управления контентом (CMS). Притом, что в этой нише традиционно доминируют опенсорсные гиганты, такие как WordPress и Drupal, со времен перезапуска Smashing Magazine еще в 2017 году начал возрождаться интерес к статическим сайтам.

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

В то время, как сегодня есть много людей, громогласно высказывающихся в пользу современных статических сайтов, но один из крупнейших таких поборников – Маттиас Биильманн из Netlify, который и придумал  JAMStack (название может показаться слегка абсурдным) и помог популяризовать потоки задач, в которых используются такие инструменты, как статические CMS и API для электронной коммерции.

Всем привет! Не так давно я запустил игру Emozle, вдохновившись идеей Wordle. Посетители сайта видят лишь html, несколько js и css файлов, а я бы хотел поделиться с вами тем, что скрыто! Ну и кому может быть интересна диаграмма AWS архитектуры, если не Хабру?

Оптимизация Сео Аудита на NextJS. Это ненастолько удачное занятие, поскольку, по моему опыту, он не дает полного контроля над event loop, который и надо приоритетно оптимизировать. Однако NextJS дает очень высокую скорость разработки, которая нужна многим продуктам, поэтому научится поднимать до 90 обязательно и в этой статье я поделюсь какие шаги мне помогли этого достичь.

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

О хуках в фронтенд-разработке на Хабре писали уже не раз, и в этой статье мы не сделаем великого открытия. Наша цель другая – рассказать про React Hooks настолько подробно и просто без трудной терминологии, насколько это возможно. Чтобы после прочтения статьи каждый понял про хуки всё. Эта статья будет полезна как начинающим React-разработчикам, так и тем, кто хочет, не уходя в глубины документации, получить практическую информацию в сжатом виде. 

Иногда бывает полезно отображать некоторую информацию из Git-репозитория прямо в приложении. В статье мы воспользуемся преимуществом встроенной в NodeJS функции execSync и будем показывать в приложении три версии мастер-ветки.

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

Для желающих посмотреть на предмет сабжа в динамике у нас есть видеоверсия этой статьи. 

Жизненный цикл разработки корпоративного приложения в нашей компании привел меня к, по сути, банальной задаче - “прикручиванию” пользовательской авторизации к фронту приложения. Пользователями приложения должны быть сотрудники компании, а идентификационным провайдером должен стать корпоративный Active Directory (далее AD).

Было принято решение не работать с AD напрямую при авторизации сотрудников в корпоративных приложениях, а использовать для этого довольно удобный брокер авторизации – KeyCloak.

 В JavaScript есть два основных способа обработки асинхронного кода: Promise (ES6) и async / await (ES7). Эти синтаксисы дают нам равные базовые функции, но по-разному влияют на читаемость и область видимости. В этой статье мы увидим, как один синтаксис помогает, а другой отправляет нас в callback hell! Материал адаптирован на русский язык совместно с Тимофеем Тиуновым, автором курса “JavaScript” в Skillbox.

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

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

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

Рассказываем, как мы с фронтенд-разработчиком Дмитрием Балаевым @manmo убираем Legacy, какими Open Source конфигурациями для ESLint пользуемся и как статический анализатор кода повлиял на развитие разработчиков нашей компании.