JavaScript *

«Под поверхностью машины движется программа. Без усилий, она расширяется и сжимается. Находясь в великой гармонии, электроны рассеиваются и собираются. Формы на мониторе — лишь рябь на воде. Суть остаётся скрытой внутри…» Мастер Юан-Ма, Книга программирования.

Под катом собрали 8 книг, которые рекомендуют прочитать наши разработчики. В целом, они все есть на заглавной картинке. Но если хотите почитать разные интересные вырезки из книг, цитаты, пару задач и мнения наших frontend-разработчиков — заходите под кат.

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

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

Репозиторий с кодом проекта

Прим. пер.: автор рассказывает лишь о ключевых особенностях приложения, поэтому я рекомендую клонировать репозиторий, установить зависимости и запустить сервер для разработки, чтобы иметь возможность выполнять необходимые операции при чтении статьи. Обратите внимание: если у вас возникнут проблемы при запуске сервера для разработки с помощью команды npm start, перенесите переменные, определенные в этой команде в файле package.json, в файл .env:

SKIP_PREFLIGHT_CHECK=true
TSC_COMPILE_ON_ERROR=true
ESLINT_NO_DEV_ERRORS=true

И отредактируйте команду start следующим образом:

"start": "react-scripts start"

Руководство по React Query

Привет, Хабр! Эту статью написал Тарас Голомозый, fullstack web-разработчик и преподаватель в школе программирования Эльбрус Буткемп. Хотя про ботов рассказано уже немало, эта тема по-прежнему интересует начинающих разработчиков, — и опыт наших студентов это подтверждает. Позволим себе написать еще одну инструкцию по созданию простого бота на JavaScript с возможностью расширения функционала. В базовом варианте его задача — показывать текущую погоду по геолокации пользователя.

Привет! Меня зовут Владислав Коротун, я — ведущий фронтенд-разработчик в одной из продуктовых команд hh.ru. Сегодня я расскажу о том, как мы затащили TypeScript в наши проекты. 

В статье расскажу, как наша команда начала закрывать бэк силами фронтов, как мы искали идеальный фреймворк, прошли путь от PHP до Node.js, а потом поняли, что делаем low-code. Теперь мы можем закрывать потребность клиентов на несложный бэкенд, не превращаясь в фуллстек-команду.

Привет, Хабр! Меня зовут Влад, я frontend-разработчик в SimbirSoft. Я часто задумывался, почему на проектах, где используется Node.js (в частности Nuxt.js и Next.js — фреймворки на базе Vue и React), мы каждый раз, словно по шаблону дополнительно используем еще одну прослойку бэка —  PHP, Java, C# или другой язык программирования, к примеру, «неродной» JavaScript. И тогда я с головой погрузился в анализ ситуации по работе с популярными системами управления базами данных (СУБД), файлами, изображениями и другими естественными потребностями современного проекта. 

Настроим Push уведомления при использования EAS.

Факт отсутствия в русскоязычном сегменте интрнета и какого либо примера по настройке пуш уведомлений с использованием лишь инструментов которые предоставляет Expo Go очень расстраивает, поэтому вы сейчас видите сие творение.

Хотите попробовать себя в роли разработчика Minecraft и понять основы аддоносоздания? Эта статья для вас

Отвечая на вопросы в треде по React Native на StackOverflow я заметил что в той или иной форме люди очень часто интересуются производительностью компонентов списков и в частности FlatList. В этой гайде я решил рассмотреть способы оптимизации производительности на примере приложения для отображения списка вопросов с StackOverflow а во второй части статья я расскажу о новом компоненте FlashList который драматически ускорит работу ваших списков.

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

В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.

Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:

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

Репозиторий с кодом проекта.

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

Привет, Хабр! Я к вам с хорошими новостями: 28 ноября стартовала регистрация на чемпионат VK Cup! В этом году он посвящён только разработке (но не расстраивайтесь — дизайнерский трек мы перенесли в программу чемпионата VK Design Cup).

Классическое олимпиадное программирование пройдёт на площадке Codeforces — регистрируйтесь. К остальным трекам – мобильной разработке, машинному обучению и разработке на Go и JavaScript можно присоединиться на платформе All Cups.

Все полезные подробности о чемпионате — уже восьмом — читайте под катом.

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

Всем привет! Меня зовут Никита Русанов, я лид команды фронтенда в компании, где мы создаем продукт, упрощающий переезд. В данной предметной области много задач по взаимодействию с гео данными. Сегодня я расскажу, каким образом можно работать с картами в браузере. В этой части мы с вами поговорим про используемые технологии.

Всем привет! Меня зовут Дима, я frontend-разработчик в Альфа-Банке. Сегодня я расскажу про Shared UI, что это такое и как мы пришли к созданию такого сервиса в интернет-банке, что это такое, как мы вообще придумали такой сервис.

Доброго времени суток, Хабр!

Несколько лет назад, я участвовал в разработке одного проекта, и как задачу, мне (тогда еще зеленому джуну) поставили реализовать систему загрузки медиа файлов на AWS S3. Важным условием было реализовать конкретно SignedURL.

Спустя несколько лет, я опять столкнулся с такой же задачей, но заказчик настаивал на отечественном облачном хранилище.

Ниже я немного расскажу что вообще такое подписанные ссылки, как перейти на Yandex Object Storage(YOS), и почему YOS и AWS S3 - это одно и то же!

Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Иногда Frontend-разработчики сталкиваются с тем, что для оптимизации производительности нужно написать волшебное свойство translateZ(0) или will-change. Анимации перестанут зависать, ничего не будет лагать и мир станет чуть ярче. ✨

Поговорим о том, как стоит спроектировать класс, чтобы его можно было использовать в компонентах на Vue 2 (так, чтобы данные были реактивными). Покажу как запретить изменение данных в компонентах, либо как отвалидировать изменения.

Это 2 часть цикла статей о сервисной архитектуре на Vue 2, в 1 части я рассуждала о популярных способах выноса логики, и о задаче, которую я перед собой поставила.

За последний год мы удалили устаревший компилятор Angular и пайплайн рендеринга, что позволило разработать ряд улучшений для разработчиков за последние пару месяцев. Angular v15 является кульминацией этого с десятками усовершенствований, которые обеспечивают лучший опыт разработчиков и производительность.

В этой статье - аддоносоздание (minecraft), создание текстур (minecraft), хитбоксы и субпаки.

Привет, Хабр! В этой статье я хочу затронуть тему аддонов. Многим чего-то не хватало в игре, и они скачивали аддоны с интернета. Когда вы понимаете, что скачанный аддон настолько безполезный, удаляете его. Я, допустим, хочу сделать аддон в minecraft bedrock. Если я сделаю достойный аддон, он может попасть на рынок. Заманчиво? Давайте попробуем сделать что-нибудь своё. Пригодится базовое знание json и в некоторых случаях javascript.