JavaScript *

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 пользуемся и как статический анализатор кода повлиял на развитие разработчиков нашей компании.

Когда мы взялись за гибридный проект, в котором одновременно использовались Django и React, мы столкнулись с дилеммой: как интегрировать две эти части, в особенности, как разрешить шаблонам Django отображать ресурсы JavaScript, сгенерированные при клиентской сборке. Мы нашли изящный способ, позволяющий с этим справиться: использовать Webpack-загрузчик для Django с трекером бандлов Webpack, при помощи которых нам поддался этот этап работы сборочного конвейера. А в этой статье мы научим вас, как это делается.

Меня зовут Сергей, я фронтенд-разработчик отдела спецпроектов KTS. Наш отдел занимается разработкой веб-приложений для промокампаний. 

Помните, как в 1-й книге о Гарри Поттере Гермиона разгадывала логическую загадку с бутылочаками волшебных зелий? Сегодня расскажу, как мы создавали именно такую игру. 

У нас есть 5 бутылок и 2 полки. При старте игры на одной полке произвольно устанавливаются бутылки и их необходимо установить в правильном порядке на второй полке.

Мы воспользуемся react-dnd, styled-components, mobx и createPortal.

Продолжаю делиться своим опытом погружения в мир генарта и nft, на этот раз при помощи генеративных грибов. Для тех кто не совсем в теме хотя бы одного из этих слов, предлагаю сначала посмотреть мою предыдущую публикацию, а в этой статье я постараюсь больше сосредоточиться не на философии того, что вообще происходит, а на технической реализации процедурной 3д графики в three js.

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