JavaScript *

Привет, Хабр! Как-то раз после работы мне захотелось взять и написать небольшую компьютерную игру. А почему бы и нет? Играть я люблю, программировать — тоже. Захотелось проверить, можно ли сделать что-то прикольное на уровне современных 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.

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

Хороший UI/UX помогает пользователю избежать большинства таких проблем. Инструментов контроля огромное количество, сегодня расскажу про один их них — создание маски для поля ввода силами Javascript.

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

1. научимся работать с тремя видами кнопок,
2. реализуем интернет-магазин с корзиной,
3. разработаем форму для сбора пользовательских данных,
4. зальем интернет-магазин в облако.

Hello, world!

В этом туториале мы разработаем простое типобезопасное (typesafe) клиент-серверное (fullstack) приложение с помощью tRPC, React и Express.

tRPC позволяет разрабатывать полностью безопасные с точки зрения типов API для клиент-серверных приложений (предпочтительной является архитектура монорепозитория). Это посредник между сервером и клиентом, позволяющий им использовать один маршрутизатор (роутер) для обработки запросов HTTP. Использование одного роутера, в свою очередь, обуславливает возможность автоматического вывода типов (type inference) входящих и исходящих данных (input/output), что особенно актуально для клиента и позволяет избежать дублирования типов или использования общих (shared) типов.

Руководство по tRPC находится в процессе подготовки — следите за обновлениями ?

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

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

Для многих разработчиков процесс установки зависимостей представляет собой некую "магию", которая происходит при выполнении npm install. Понимание принципов работы этой "магии" может сильно помочь при возникновении ошибки во время установки очередной библиотеки. Нынешний NPM — результат многих лет проб и ошибок, поэтому для его детального понимания я предлагаю начать с самого начала.

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

Я Антон, руководитель Архитектурного комитета SimbirSoft, и в этой статье я расскажу о полученном опыте с точки зрения технологических особенностей реализации frontend-части. Рассмотрим большое количество нестандартных элементов игрового интерфейса и общие требования и ограничения к frontеnd-части приложения (архитектура, model, service, store и т.д.). Поделюсь, как реализовали:

— набор визуальных элементов приложения;

— элементы пагинации;

— сложный компонент на примере кнопки;

— составной компонент на примере g-card-list;

— анимацию.

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

Предлагаемое автором решение - узконаправленные, локальные сторы, привязанных к конкретному инстансу модуля или просто Pinia scoped store.

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

Эта статья приоткроет завесу магии, скрывающуюся за кулисами веб-браузеров.

Давайте начнем!

Вы занимаетесь блогингом или созданием контента на нескольких языках? Или у вас есть множество социальных медиа-аккаунтов, которыми вы хотите поделиться? Тогда вам понравится этот адаптивный и многоязычный компонент футера для Vue 3!

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