Разработчик под ником jslegend представил онлайн версию игры Duck Hunt в HTML5, написанную с помощью библиотеки JavaScript KAPLAY - Duck Hunter.
Игра доступна в браузерах на ПК, управление мышкой.
Как избавиться от всех костылей? Достаточно всего лишь одной функции...
Если считаете, что это кликбейт — настоятельно рекомендуем посмотреть доклад Марата Зимнурова, техлида Авито. В своем выступлении Марат раскрывает все подробности функционального программирования:
что это такое — функциональное программирование — на практике?
какие методы оттуда уже проникли в повседневную разработку?
какие конкретные недостатки существуют для применения такого способа, в том числе в JavaScript?
В примерах — детальный разбор, как написать веб-приложения и бэкенды, используя практики функционального программирования.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
Буквально на днях со мной произошла интересная история, которой я хочу поделится с Вами.
Я состою в одном чатике, где собрались энтузиасты Telegram Mini Apps. Там фаундеры, разработчики и просто интересующиеся обсуждают идеи, делятся опытом и помогают друг другу. Мне очень интересна эта тема, и я планирую запустить что-то своё на базе Telegram.
Но ближе к делу. 2 января в чат зашёл человек в поисках разработчика для своего проекта. Он выглядел весьма взволнованным и объяснил, что помимо долгосрочного сотрудничества ему срочно нужен фикс для его мини-приложения. Это небольшое приложение с игровой механикой, у которого Monthly Active Users (MAU) — около 30 тысяч. Впечатляет, согласитесь! Проблема заключалась в том, что текущие разработчики ушли на праздники и не выходили на связь.
Я решил попробовать помочь просто ради интереса. Сидел за компьютером, пытаясь дописать свою дипломную работу, а мозг требовал смены деятельности. Когда мне дали доступ к репозиториям, я увидел следующее:
Проект довольно крупный: около 10k строк кода на фронтенде и 5k строк на бэкенде.
Фронтенд написан на React с использованием Jotai для управления состоянием. Интерфейс реализован с помощью Tailwind CSS.
Бэкенд — Express.js, взаимодействующий с MongoDB.
Весь проект написан на чистом JavaScript, и вот что меня поразило:
Полное отсутствие типов. Никакого TypeScript, PropTypes или хотя бы JSDoc. После нескольких лет работы с TS мне было трудно принять, что я не могу быстро понять, какие аргументы ожидаются в функциях. Я думал что все крутые проекты используют TS, а JS только для маленьких проектов, обучения и чего-то не совсем серьезного.
Полное отсутствие безопасности. Захардкоженные ключи для подключения к телеграм боту и базе данных. Сервер обрабатывает запросы с любого origin. Это буквально учебник по тому, как не надо делать.
Нарушение принципов DRY. Например, в коде вручную прописывались заголовки для fetch-запросов — везде, где только можно.
Неоптимальный код. Неправильный вызов хуков, отсутствие lazy loading, дублирование логики и так далее. Я могу продолжать список почти бесконечно.
В общем, код был ужасен. Даже мои студенты, которые только начинают изучать программирование, иногда пишут лучше. Но! Несмотря на всё это, продукт работал, пользователи были довольны, и проект приносил прибыль.
Я быстро разобрался с багом, исправил его и в итоге получил предложение помочь улучшить проект. В ближайшие пару недель как раз займусь этим — заработаю сыну на шоколадки и, надеюсь, сделаю код немного лучше. А теперь — к выводам, которые я сделал (а точнее получил подтверждение в очередной раз):
Выводы:
Работа и подработка всегда найдутся. Если у вас есть знания и навыки, найти проект даже в текущее время— не проблема. Главное — свободное время и скилл. Я получил подтверждение этого тезиса в очередной раз и последние несколько лет я понимаю, что возможность зарабатывания денег ограничивается только наличием свободного времени для этого. Ну и осознав это я пытаюсь найти варианты, которые напрямую не связаны с обменом моего времени на деньги. Во многом моя попытка раскачать телеграмм канал именно об этом.
JS жив и приносит прибыль. Люди продолжают писать серьёзные проекты на JavaScript. Да, TypeScript стал стандартом в моей работе, но это не мешает другим писать на чистом JS и чувствовать себя отлично.
Маркетинг побеждает. Код, который я видел, был ужасен. Но приложение успешно благодаря сильному маркетингу. Это очередное подтверждение фразы: “Best products never win. But best sales & marketing always win.” Как программисты, мы должны стремиться к чистому коду и хорошей архитектуре, но успех продукта в конечном счёте определяется вовсе не этим.
А что вы думаете о роли маркетинга? Согласны ли вы, что он может перевесить техническую сторону?
Если вам интересны темы веб-разработки, тимлидства, управления проектами и вы хотите получать больше полезного контента, присоединяйтесь к моему Telegram-каналу.
Объектно-ориентированное программирование и его реализация в JavaScript
Именно так звучит тема нового выпуска нашего открытого курса по JavaScript. В 12 серии вместе с веб-разработчиком Василием Новиковым разберёмся:
что такое объектно-ориентированное программирование (ООП) и его функции;
как реализовывать ООП на конкретном примере;
как применять метод проверки getPrototypeOf.
Больше информации о сериях, а также полезных материалах к ним можно найти на сайте курса JS.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
Немного о резолверах в Angular 19 (теперь в них есть редиректы).
В логике использования гвардов применяется подход:
проверить что-то, если все ок то вернуть true или кинуть редирект на другую страницу
Выглядит достаточно удобно. Но если мне не изменяет память в резолверах такого нет, вместо этого приходилось натягивать Router и рулить navigate или navigateByUrl и т.д.
В 19 же версии нам немного упростили жизнь и резолвер научили в RedirectCommand.
Пример с angular.dev
export const heroResolver: ResolveFn<Hero>= async (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
) => {
const router = inject(Router);
const heroService = inject(HeroService);
try {
return await heroService.getHero(route.paramMap.get('id')!);
} catch {
return new RedirectCommand(router.parseUrl('/404'));
}
};Ну просто сказка какая-то, а не только сигналы =)
Как установить ThisArgument вручную?
Пришло время зафиналить тему контекста исполнения: в новом выпуске нашего открытого курса по JavaScript веб-разработчик Василий Новиков рассказывает про способы вызова функции и методы bind, call и apply.
Из одиннадцатой серии вы узнаете:
как автоматически установить thisArgument для функций;
как работают методы bind, call и apply при ручной установке;
как ведут себя стрелочные функции при привязке this через bind, call и apply.
Больше информации о сериях, а также полезных материалах к ним можно найти на сайте курса JS.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
JavaScript для начинающих: бесплатные ресурсы
Собрали подборку различных ресурсов, которые помогут познакомиться с JavaScript, узнать больше об этом языке и попрактиковаться. Сохраняйте, чтобы не потерять, и делитесь с коллегами.
Телеграм-каналы
Задачи по Frontend — опросы, которые помогут разобраться в вёрстке и основах.
Frontend | Вопросы собесов — разбор вопросов с собеседований: HTML, CSS, JavaScript, фреймворки React, Angular и Vue.js.
Будни разработчика — блог с рабочими инструментами, новостями, видео и лайфхаками.
YouTube-каналы
Yandex for Frontend — о командах и технологиях, запис с митапов и конференции.
IT-KAMASUTRA — советы для начинающих и обзоры инструментов. Есть плейлисты по JS: про изучение с нуля и прохождение собеседований.
dcode — туториалы по разработке. HTML, CSS, JavaScript, PHP и Rust.
Книги
JavaScript. Полное руководство — справочник для новичков.
Чистый код: создание, анализ и рефакторинг — принципы и приёмы создания чистого кода с примерами.
Eloquent JavaScript — основы языка от и до.
Статьи
Зачем учить JavaScript — о преимуществах и перспективах языка.
Фронтенд-разработчик — кто это и зачем ему JS.
Backend-разработчик — JS — не только для фронтенда.
React-разработчик — дальнейший путь JS-разработчика, который умеет создавать интерфейсы сайтов с помощью библиотеки React.
Больше ресурсов вы найдёте в статье блога Практикума, а на курсе «Фронтенд-разработчик» мы дадим все необходимые инструменты и обучим навыкам для старта в профессии.
Отладка before-хуков в mocha
Недавно при создании приёмочных тестов для плагина столкнулся с необычной ситуацией. В before-хуке настраивалось окружение: записи в БД, моки зависимостей. В after-хуке происходила зачистка. Отдельно тест работал, но в группе начинал сбоить: оставались следы от предыдущих тестов.
При запуске под отладчиком it-секции пропускались и сразу выполнялись after-хуки. "Игорь Иваныч" (ИИ) объяснил, что mocha пропускает тесты, если в before-хуке есть ошибки. Использование try-catch и несколько часов отладки и рефакторинга убедили меня только в том, что ошибок нет, но it-блоки всё равно пропускаются.
Однако на следующий день при запуске всех тестов мой проблемный тест неожиданно заработал. Хотя при попытке отладки он опять начинал сбоить. Правильно заданный вопрос "Игорь Иванычу" привёл к получению правильной "таблетки":
before(async function () {
this.timeout(60000); // 1 min
});Всё. Это сняло проблему. В mocha по-умолчанию timeout для выполнения before-хука составляет 2 секунды. Ошибкой с точки зрения mocha было то, что разработчик (т.е. - я) тупил в отладчике больше 2 секунд и не оповестил её об этом в явном виде.
Это вполне себе логичное поведение фреймворка, о котором нужно просто знать. Теперь я знаю. Но если бы я знал об этом перед началом отладки, то я бы сэкономил несколько часов своей жизни.
Дорогие разработчики, как вы относитесь к работе в стартапах?
Если был опыт работы в них, то на каких условиях вы соглашались работать? Процент от компании или зп? Может и то и другое?
Я делаю стартап и ищу разработчиков в команду, поэтому хочу узнать какие условия могли бы быть интересными для вас
Было бы шикарно, если бы кто-нибудь смог проконсультировать по разработке
Как инициализировать контекст исполнения?
Об этом веб-разработчик Василий Новиков рассказывает в новой серии нашего открытого курса по JavaScript. Из десятой серии вы узнаете про:
три вида записей окружения: LexicalEnvironment, VariableEnvironment и PrivateEnvironment;
шаги каждого из четырех алгоритмов контекста исполнения;
инициализацию глобального контекста исполнения.
Больше информации о сериях, а также полезных материалах к ним можно найти на сайте курса JS.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
Для тех, кто рассматривает TypeScript как инструмент (язык) для борьбы с ошибками: склонность к ошибкам и время их исправления в TypeScript оказались не значительно ниже, чем в JavaScript. Среднее отношение коммитов с исправлениями ошибок в проектах на TypeScript было более чем на 60% выше (0.126 против 0.206), и в среднем проектам на TypeScript требовалось более чем на один день больше для исправления ошибок (31,86 против 33,04 дней).
Совет по Joomla: используем Promise в Ajax-запросах
В статье Ajax-запросы нативными средствами Joomla было подробно разобрано, как с помощью Joomla.request можно легко создавать Ajax-запросы в Joomla.
В одном из комментариев был вопрос по поводу Promise, а умеет ли Joomla? Умеет, но начиная с Joomla 4. Достаточно при создании запроса выставить флаг promise в true и результатом выполнения запроса будет Promise:
Joomla.request({
url: Joomla.getOptions('system.paths', '').root+'/index.php?option=com_ajax&format=json&module=example',
method: 'POST',
promise: true
})
.then(response => {
let text = JSON.parse(response.text);
return text.data;
})
.catch(error => {
console.log(error);
});Таким образом мы можем эффективно строить асинхронные цепочки, добавив всего один флаг к вызову Joomla.request.
Ближайшие события
Контекст исполнения: что это и какие виды бывают?
В девятом выпуске нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым подробно разбираем Execution Context — контекст исполнения.
Из нового выпуска вы узнаете:
как объяснить Execution Context простым языком;
какие бывают виды контекста исполнения;
каким образом реализуется концепция Environment Record.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
Не знаю на сколько это свежая новость ибо прочитал в новостях, но факт занимательный. JetBrains (опять) изменила лицензирование сделав IDE для Rust, JavaScript, C# и тестирования бесплатными для некоммерческого использования.
На сколько это следствие продвижения ИИ в средствах разработки - поди знай, но уж больно совпало по времени.
Что необходимо учесть при поднятии переменных?
В новой серии нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым разбираем поднятие переменных как один из этапов выполнения кода.
Из нового выпуска вы узнаете:
что такое поднятие переменных;
три ключевых слова: как объявлять переменные в JavaScript;
два вида типизаций и условия их определения.
Не забывайте заглядывать в описание к видео — там ссылки на полезные материалы по теме.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
Посчитай свой кредит!
Как и обещал в прошлом посте - чуть более серьезный проект:
Иногда планирую крупную покупку и считаю кредит + проверяю предложения от кредиторов, чтобы знать не добавили ли они что-то.
Все инструменты для этого, которые находил, мне не нравились - поэтому сделал свой.
Самый быстрый, удобный и красивый калькулятор кредита!
Сохранение данных (даже в ссылке), диаграмма, таблица платежей и % переплаты - все на месте.
Наслаждайтесь)
Привет друзья! Сделал максимально простые аналоговые часы на SVG. Можно ли их еще упростить или уменьшить? Или добавить немного улучшений без переусложнения? Буду рад вашим идеям!
Вот CodeSandbox
Сделано с помощью библиотеки Fusor
Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)
Предтеча другого, более крупного проекта, который будет потом)
Как в нативе: эти Web API поднимут ваше веб-приложение в стратосферу
Салют, на связи Clevertec. Сейчас наша команда разрабатывает веб-версию банкинга с использованием React. С помощью Web API даем пользователям фичи, которые они привыкли получать в нативных приложениях. Отрываем от сердца список решений 😉
- Web Share API – для обмена ссылками, текстом и файлами с другими приложениями на устройстве. К примеру, удобно отправить чек об оплате в мессенджере, не покидая банковское приложение.
- Contact Picker API позволяет делиться контактами из своего списка. Можно использовать для перевода по номеру телефона. Не нужно вводить цифры вручную – поле автоматически заполнится контактом из телефонной книги.
- Media Capture and Streams API в нашем случае позволяет отсканировать QR-код с помощью камеры устройства. Нажимаешь на “Сканировать QR” – открывается окно с камерой, она считывает код и переводит пользователя в дерево платежей.
- Web OTP API открывает возможность автоматически вставлять код из смс. Например, для подтверждения оплаты на телефон приходит сообщение. Внизу экрана появляется модальное окно с подтверждением вставки. И после нажатия на “Разрешить” код отображается в поле ввода.
Подробнее про этот опыт использования Web API мы рассказали в отдельной статье. Что вы думаете о Web API, какие используете? Расскажите в комментариях, будем взаимно полезны друг другу.