JavaScript *

В этой статье я хотел бы рассказать как решил создать свой первый проект.

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

Но японский язык (также как и китайский и, частично, корейский) имеют довольно высокий входной барьер для чтения, потому что нужно не только выучить два алфавита, но и запомнить как минимум несколько сотен кандзи (300-500).

Сейчас понятие «микрофронтенды» встречается довольно часто, но что это такое и какие задачи они решают? Зачем нам микрофронтенды, если есть микросервисы или монолит? И стоит ли тащить микрофронтенды в свой проект только потому, что это модно? Расскажу об этом, а также о трёх способах организации микрофронтендов: Podium, Single-SPA и Module Federation. Какой среди них лучший и нашли ли разработчики в нём панацею? Об этом читайте под катом.

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

Появился FX - неинтерактивная, основанная на JavaScript альтернатива JQ, которая обещает стать переломным моментом. В этой статье блога вы окунетесь в мир FX и узнаете, как его можно использовать для упрощения задач обработки JSON.

Данная статья написана с уклоном на практическое применение регулярных выражений в проектах. Изначально написана для начинающих разработчиков в моей компании. Статья включает в себя примеры использования на JavaScript (TypeScript).

TL;DR для тех, кому некогда читать™:

• Три года реального времени, ~340 дней разработки, 2 423 часа.
• 106 849 строк кода (62% JavaScript, 32% PHP, 6% CSS).
• Собственный парсер формата .h3m (h3m2json.php).
• Неограниченные возможности для создания модификаций.
• Мультиплеер на WebSockets без блокировок — не нужно ждать, пока другой игрок закончит ход или битву.
• Любое разрешение экрана и платформа — хоть 4K, хоть телефоны (но пока нет вёрстки).
• Неограниченное число участников и размер поля в битве (вдохновлялся Age of Wonders).
• Произвольное число уровней на карте приключений.
• Все исходники под Unlicense на GitHub.
• Заходите на herowo.game для игры (вот Tutorial).
• Багов — полно! Обязательно пишите о них на форум или в Discord. Как ещё помочь?

Когда я искал свою первую работу в качестве Frontend-разработчика, меня часто спрашивали, умею ли я писать кастомные хуки в React. Тогда я только начинал изучать React и только-только запомнил основы, такие как useState и useEffect. Слово «кастомный хук» для меня было новым и сложным. Но теперь, когда я уже более опытный разработчик, знаю, что это значит и как их использовать.

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

Всем привет! Один из проектов на работе у нас изначально создан на create-react-app утилите. Встал вопрос по поводу того, можно ли как-то оптимизировать сборку по скорости и весу сжатого проекта, так как есть большие планы на рост проекта и не хотелось бы, чтобы что-то начало тормозить, и этим соответственно я и занялся. Хочу рассказать о том, как все проходило, какие шаги были пройдены и что в итоге получилось. Также в конце приложу код всей конфигурации.

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

Всем привет, я — Кирилл, frontend разработчик компании Usetech.

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

Глубокое клонирование:

В пятницу можно смешивать всё и со всем!

Мы смешаем пифагоровы тройки и библиотеку RxJS.

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

Такие числа известны людям с очень древних времён. Например, их использовали ещё в Египте, откуда до нас дошла самая известная пифагорова тройка — это числа 3, 4 и 5.

RxJS — это библиотека для реактивного программирования. Она поможет сделать генерацию троек красивой и простой.

Сразу замечу, что статья претендует только на развлекающую роль

Привет, Хабр! Как-то раз после работы мне захотелось взять и написать небольшую компьютерную игру. А почему бы и нет? Играть я люблю, программировать — тоже. Захотелось проверить, можно ли сделать что-то прикольное на уровне современных AAA-игр, не изучая дополнительных языков программирования, а также избежать банального повторения тех же «велосипедов», которые уже 100500 раз выложены на различных стримах и, конечно, не раз разбирались на Хабре. В этом посте я хотел бы поделиться с вами своим небольшим экспериментом в области GameDev на базе JS и обсудить возможности, которые есть у любознательного программиста с бэкграундом в сфере JavaScript.

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

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

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

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

Меня зовут Александр, я frontend-разработчик в Simbirsoft. Хочу поделиться, как этот инструмент может сократить время на разработку и тестирование, улучшить качество конечного продукта, а также сэкономить бюджет на больших проектах.

Советую к прочтению фронтенд-разработчикам и тимлидам, которые хотят упростить процесс тестирования и отладки компонентов интерфейса веб-приложений. Также материал может помочь менеджерам проектов и владельцам бизнеса в поиске новых подходов для ускорения и оптимизации процесса разработки. И даже если вы новичок во frontend-разработке и хотите узнать о новых инструментах и технологиях в этой области — welcome.

Мы рассмотрим такие возможности, как создание документации, тестирование, тестирование доступности, работу с моками, аддоны для имитации API и контекста. Я поделюсь, какие проектные задачи мне удалось решить, и чем может быть полезен Storybook для вас.

Иногда бывает необходимо создать множество повторяющихся документов, которые отличаются лишь номером, датой и ещё парой текстовых строк. Очень грустно тратить на их создание своё время - ведь требуется совершить множество одинаково повторяющихся действий. Ещё можно понять затраты времени на создание 5 документов, но если их надо создать, например 500 штук?

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

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

Наверное, большинство фронтенд-разработчиков в какой-то момент сталкивались с задачей внедрения TypeScript на проект. Обычно это задача выполняется не сразу, а постепенно. Сначала просто переименовываются все файлы из .js в .ts с проставлением везде типа "any", просто чтобы проект запустился, и только потом постепенно разработчики начинают заниматься планомерным переводом.

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

Зачастую, при создании типов и интерфейсов, описывая какое-то свойство, которое может принимать определенное, конечное количество строковых значений, разработчики указывают тип поля string или в крайнем случае перечисляют эти значения через "или".

Так, при создании интерфейса какого-либо сотрудника, у которого есть имя, возраст и должность в компании наиболее простой и быстрый вариант представлен ниже:

  interface Person {

name: string;

age: number;

position: string;

}

Ошибок нет. Вроде бы все работает, однако какие проблемы это может создать? Если имя - это строка, которая может принимать любое значение, то должность в компании - это тоже строка, но принимать она может только вполне определенное и конечное количество строковых значений. Например, в нашей компании есть только директор и продавец. В случае, если мы попытаемся создать объект с должностью "бухгалтер", такой тип ошибки не выдаст:

Hello, world!

В этой небольшой заметке я хочу поделиться с вами двумя сниппетами, которые показались мне очень интересными. Первый сниппет представляет собой пример реализации простой реактивности (signal), второй — способ предотвращения несогласованности данных в результате состояния гонки (race condition). Первая конструкция используется в SolidJS (с некоторыми дополнительными оптимизациями), вторая — заимствована из одного рабочего проекта.

Интересно? Тогда прошу под кат.

Коллеги со стороны бакэнда иногда любезно спрашивают: "а нафига вам тут реакт"? Будем честны и ответим, что без него можно написать довольно приличный код, отдать его на ревью коллеге-фулстеку и получить аппрув после 15 секунд (так быстро не потому, что коллега не беспокоится за качество кода, а просто код весьма компактен, cмотрите ниже). Если подумать чуть-чуть дольше (например, за время заварки чая, которое, как все знают, равно трем минутам), можно найти не менее шести ошибок, а может и больше. Любая ошибка, конечно, весьма субъективна, но я постараюсь объективно объяснить каждую из них.

Основы Websocket. Использование с react, redux, saga и RTK Query.