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

В этой серии из 2 статей-туториалов мы с вами разработаем клиент-серверное (фуллстек — fullstack) приложение с помощью Next.js и TypeScript.

• Руководство по Next.js.
• Карманная книга по TypeScript.

1. Наше приложение будет представлять собой блог — относительно полноценную платформу для публикации, редактирования и удаления постов.
2. Мы реализуем собственный сервис аутентификации на основе JSON Web Tokens и HTTP-куки.
3. Данные пользователей и постов будут храниться в реляционной базе данных SQLite.

В первом туториале мы подготовим и настроим проект, а также реализуем серверную часть приложения с помощью интерфейса роутов (API Routes), во втором — разработаем клиента и проверим работоспособность приложения.

Обратите внимание: данный туториал рассчитан на разработчиков, которые имеют некоторый опыт работы с React и Node.js.

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

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

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

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

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

https://fakt309.github.io/thisisthewall/

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

Но вот что если мы хотим не просто получать дискретное значение (true / false), а дифференцированное, например в процентах. Ведь согласитесь строки test и testing гораздо ближе к друг другу, чем test и abcd. Для данной проблемы существует множество решений, мы поговорим о самый популярных алгоритмах (также об их модификациях):

Расстояние Хэмминга

Расстояние Левенштейна

Сходство Джаро — Винклера

Коэффициент Сёренсена

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

В обновлении Bot API 6.0 телеграм-боты получили много новых функций. Из них для разработчиков самая примечательная - Telegram Web Apps (Веб-приложения внутри телеграм). С этим нововведением разработчики могут подключать к своим ботам web-приложения, которые открываются в дополнительном окне, что сильно расширяет инструментарий, а, следовательно и функционал ботов в телеграм.

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

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

На все эти вопросы ответил frontend-разработчик Виталий Старов на конференции FrontendConf 2021. Он рассказал о серверном рендеринге на примере приложения SuperJob. Читайте под катом, как SuperJob пришли к своей реализации серверного рендеринга, узнав по пути много интересного. Узнаете, когда хорош SSR и как он работает, из чего он устроен, чем может быть полезен и кому.  

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

Привет, друзья! Продолжаю делиться с вами заметками о Docker.

Заметки состоят из 4 частей: 2 теоретических и 2 практических. Если быть более конкретным:

• первая часть посвящена Docker, Docker CLI и Dockerfile;
• во второй части рассказывается о Docker Compose.

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

Репозиторий с кодом приложения.

Если вам это интересно, прошу под кат.

Всем привет. Меня зовут Михаил, я - фронтенд-разработчик в Лиге Цифровой Экономики.

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

Вы вряд ли найдете в интернете что-то про разработку ботов, кроме документаций к библиотекам, историй "как я создал такого-то бота" и туториалов вроде "как создать бота, который будет говорить hello world". При этом многие неочевидные моменты просто нигде не описаны.

Как вообще устроены боты? Как они взаимодействуют с пользователями? Что с их помощью можно реализовать, а что нельзя?

Подробный гайд о том, как работать с ботами — под катом.

Введение

Что же такое «игровой ИИ»?

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

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

Как-то в голову пришла мне идея игры: человеку приходят 4 очень похожие друг на друга кнопки и ему нужно выбрать верную за короткий промежуток времени. Так же я любил ходить в рейды в ММОРПГ-играх (я не любитель ПвП, но вот дружные замесы против босса - это по мне). В то время я играл в MMORPG ChatWars в Телеграме и был в ней на руководящих позициях фракции. А ещё у меня за плечами 5 лет опыта в программировании, 3 из них в геймдеве. С этими вводными родился проект “Рагна” - сессионная Телеграм-чатовая игра про походы на огненного рейд босса.

Пост является ретроспективой разработки игры, а также кладезем кейсов и моих геймдизайнерских идей.

В апреле 2020 года перед отделом рекламных спецпроектов KTS встала непростая задача: разработать игру-раннер с управлением голосом в браузере.

В этой статье я расскажу, как мы делали этот проект, какие технические решения принимали, какие технологии использовали и с какими проблемами сталкивались.
При разработке мы использовали TS + React + MobX и Phaser в качестве игрового движка.

С 10-й версии в Next.js есть встроенная обработка интернационализированной маршрутизации.

В этой статье мы рассмотрим, как добавить интернационализацию в приложение на Next.js — к концу статьи научитесь делать следующее:

• Добавлять интернационализированную маршрутизацию в приложение на фреймворке Next.js.

• Обрабатывать переключение языковых стандартов («локалей»).

• Добавлять в приложение переведенный текст.

На Хабре есть уже множество статей об крутой библиотеке TensorFlow.js, но я так и не смог найти что-то об ml5.js - это как TensorFlow, только здесь не надо заботиться об нижних уровнях нейросети. К слову ml5.js не хуже TensorFlow, просто эта библиотека уже больше подходит для каких-то упрощенных проектов где не требуется внедрять нейронную сеть с контролем например: тензоров или оптимизитаров. Да и сама библиотека ещё хорошо подойдет для тех кто ещё свой путь в машинном обучении.

И об этом сегодня и пойдет речь в нашей статье, где мы рассмотрим функционал ml5.js, рассмотрим какие примеры уже есть и как вообще работает код библиотеки. Поэтому, начинаем кодить.

Часть 1: создание сетки из шестиугольников

Оглавление

• Преобразуем квадраты в шестиугольники.
• Триангулируем сетку из шестиугольников.
• Работаем с кубическими координатами.
• Взаимодействуем с ячейками сетки.
• Создаём внутриигровой редактор.

CSS функция image-set поддерживается в браузерах на основе Chromium с 2012 года, а в Safari начиная с версии 6. Недавно поддержка появилась в Firefox 88. Давайте углубимся в эту тему и посмотрим, что мы можем и чего не можем делать с помощью функции image-set ()