Как стать автором
Поиск
Написать публикацию
Обновить
195.7

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Изучаем Ethereum через практику: моя история деплоя смарт-контракта в Sepolia

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров5K

Изучаем Ethereum через практику: моя история развертывания смарт-контрактов

Сегодня я с удовольствием поделюсь своим уникальным опытом, полученным при развертывании смарт-контрактов двумя разными методами в тестовой сети Sepolia.

Читать далее

Как сделать ёлку, если ты Unicode

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров5K

Поздравляю Хабр и Хаброжителей с Новым 2025 годом! Несколькими годами ранее я писал о том, как сделать ёлку из функций, в этот раз сказ пойдёт о ёлке из Unicode символов. Ограничение - должна быть музыка, а результат должен помещаться в QR код.

Читать далее

Создание REST API с NestJS и TypeORM

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров7.1K

NestJS — это прогрессивный фреймворк для построения эффективных и масштабируемых серверных приложений на Node.js. Он использует современные возможности JavaScript и TypeScript, вдохновлен архитектурными паттернами Angular и поддерживает модульность, инъекцию зависимостей и другие современные подходы.

TypeORM — это ORM (Object-Relational Mapping) инструмент, который позволяет взаимодействовать с базами данных, используя объекты и классы, что упрощает разработку и поддерживает различные СУБД, такие как PostgreSQL, MySQL, SQLite и другие.

Сочетание NestJS и TypeORM предоставляет мощный инструментарий для разработки REST API, обеспечивая высокую производительность, модульность и удобство поддержки кода.

Читать далее

Vue 3 под капотом и тонкости Composition API: Reactivity, Provide/Inject, Suspense

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров9.7K

Vue 3 уже давно в строю, но его "прокси-движок" и особенности Composition API по-прежнему раскрывают себя всё глубже. В статье мы разберём, как Track/Trigger помогают отслеживать изменения, зачем нужны customRef и как грамотно использовать <Suspense> для асинхронных компонентов. Всё это - на примерах и с советами по оптимизации в крупных проектах.
Приступаем к деталям!

Читать далее

Работаем с асинхронностью в Nuxt 3: сравниваем хуки из коробки и кастомный fetch

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров5.8K

Nuxt 3 — это мощный фреймворк на основе Vue, который упрощает разработку серверно-рендерируемых и статически генерируемых веб-приложений. Одна из его особенностей — возможность работы с асинхронными данными с помощью специальных хуков. Они обеспечивают эффективное взаимодействие с API, динамическую загрузку данных и подгрузку контента. Многие знают про эти хуки, но далеко не все используют их потенциал в полной мере. 

Меня зовут Леша Смолыгин, я разработчик в Lamoda Tech. Разберемся, как использовать популярные хуки запроса из коробки useFetch, useAsyncData, $fetch, useLazyAsyncData и реализовать кастомный fetch. Эти инструменты решают задачи, связанные с загрузкой данных из API, при этом каждый из них имеет свои особенности и ограничения. Разберём их и сравним, чтобы понять, какой инструмент лучше подходит для той или иной ситуации в вашем приложении.

Читать далее

Почему важно проверять response.ok в Fetch API и почему HTTP-ошибки не вызывают отклонение промисов

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров4.8K

Если ты читаешь эту статью, значит, ты уже начал погружаться в асинхронный JavaScript и, в частности, в работу с промисами и fetch. Как и в любом новом деле, здесь есть свои нюансы, которые важно понимать, чтобы писать надежный код. Один из таких нюансов — это проверка на response.ok. Давай разберемся, зачем это нужно и почему без этого можно попасть в неприятности.

Посмотри, пожалуйста, на эту строчку кода:

Читать далее

Оптимизация React-приложений: Используем useTransition, useDeferredValue и useOptimistic для плавного UI

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров14K

Сделайте интерфейс React-приложения более отзывчивым и плавным с помощью хуков useTransition, useDeferredValue и useOptimistic. Управляйте приоритетами рендеринга, избегайте подвисаний при работе с большими данными и реализуйте оптимистичные обновления для мгновенной реакции интерфейса. Практические примеры и полезные советы ждут вас! 🚀

Читать далее

«Непонятки» в изучении программирования

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров13K

Однажды, в ходе очередной попытки освоить программирование, мне попалась переводная книга, где автор на первых страницах обещал научить программировать даже тех, кто никогда этого не делал. И в качестве примера приводил собственного сына 8 лет, которого он как бы научил тоже.

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

И в эту минуту я чувствую как начинают шевелиться волосы на моей голове. От шока, что не понимаю, чтоэто такое.

Потом подумал, что он, наверное, это где‑то объяснил, а я пропустил. Проверил предыдущие страницы, не нашёл. Может он потом объяснит, бывают же такие преподы, сначала что‑то скажет, а потом разберёт. Посмотрел вперёд, не нашёл тоже.

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

С тех пор, если встречается в книге, что автор научит всех, даже тех, кто «никогда не программировал», то невольно вздрагиваю, как от легкого удара электрическим током.

И самое смешное, что недавно, на современном курсе по изучению программирования, услышал то же самое. Преподаватель, как только зацепился за тип Int, тут же начал рассуждать все о тех же Int16, Int32, Int64 и т. д. Как будто он попадает в разъезженную колею и уже не может из нее выбраться.

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

Читать далее

Чистая архитектура фронтенд приложений. Часть вторая

Время на прочтение12 мин
Количество просмотров11K

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

Читать

Порты в веб-разработке: от локальной разработки до продакшена

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров7.2K

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

Из любопытства, я как то задался вопросом практического использования разных номеров портов: что они означают для разработчиков, почему используются определенные порты, и какие приложения чаще всего запускаются на них. Цель статьи — пролить немного света на эти “магические” циферки с точки зрения их прикладного применения веб-разработчиками.

Исторически приложения на Node.js (например, с использованием фреймворков Nest.js или Express) и Webpack по умолчанию запускаются на 3000 порту, если не вносить изменения в базовую конфигурацию. Vite, напротив, изначально использует порт 5173. Это может быть связано с отсылкой к названию "Vite" (если подключить немного воображения).

С технической точки зрения нет разницы, на каком порту запускать локальный сервер для разработки — это может быть 1050, 10900 или любой другой. Главное, чтобы порт был:

Читать далее

Используем всю мощь JavaScript для написания счётчика. Разбор от Олега Иванова, фронтенд-разработчика WMT Group

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров9.1K

Приветствуют читателей Хабра. Меня зовут Олег Иванов, последние пару лет являюсь фронтенд-разработчиком в ит-компании WMT Group. На разных этапах работы я сталкивался с , нашел способ упросить . В этой статье не будет серьёзных рассуждений, глобальных задач и историй успеха. Скандалов, интриг и расследований из глобального ит-мира тоже не планируется.

Вместо этого мы напишем функцию-счётчика на JavaScript. Несколько раз, причём всякий раз по-разному с пользой.

Казалось бы, задача простейшая, даже старый-добрый to-do list куда сложнее и заковыристее. Предложение написать функцию-счётчика на собеседованиях уже классика, которая делается на автомате. Уверен, что большинство опытных воинов фронтенда либо помнят традиционное решение, либо по памяти накатают его в течение 30 секунд. Традиционно эту задачу решают замыканием. Однако, почему именно им? А если попробовать сделать это как-то иначе? Я попробовал и реализовал счётчик несколькими разными (подчас неочевидными) способами, попутно спросив совета у нейросетей, а также подключив тяжёлую артиллерию в лице Babel, TypeScript и даже WebAssembly. Давайте посмотрим, что получилось!

Читать далее

Как мы учили немонохромные SVG-логотипы краситься самостоятельно

Время на прочтение12 мин
Количество просмотров2.2K

Привет! Меня зовут Александр, я фронтенд‑разработчик в Точке. Моя команда занимается разработкой «системы построения интерфейсов» aka UI‑кита. В статье расскажу, как мы решали вопрос выгрузки многоцветных логотипов в формате SVG из Figma и добавления к ним поддержки тёмной темы.

Читать далее

Уходит ли React от SPA?

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров6.9K

В последнее время большинство громких новостей в экосистеме React связаны с Server Components, Server Actions и в целом с Server Side Rendering и Next.js.

И вот вопрос, который беспокоил меня лично — что будет с уже созданными за последние 10 лет Single Page Applications на React? Неужели пора о них забыть? Действительно ли команда разработчиков React теперь занимается развитием только лишь SSR, или всё же в мире SPA тоже происходят обновления и они тоже развиваются?

Я решил взглянуть на список изменений в React 19 через призму применимости этих изменений к SPA. Вот что я отметил.

Читать далее

Ближайшие события

Интеграция CSS-фреймворков в Angular: советы, которые вы не знали

Уровень сложностиСредний
Время на прочтение52 мин
Количество просмотров2.4K

Вы создали новое Angular‑приложение, подключили популярный CSS‑фреймворк, но вместо ожидаемого вау‑эффекта столкнулись с проблемами: стили выглядят не так, как хотелось, валидация форм работает странно, а некоторые элементы вообще не реагируют на изменения состояния. Знакомо? Это типичная ситуация, когда CSS‑фреймворки интегрируются без учета особенностей Angular.

Эта статья поможет вам разобраться, почему возникают такие трудности, и покажет, как правильно интегрировать CSS‑фреймворки в Angular. Мы рассмотрим ключевые проблемы, разберем их решения и реализуем стильное, реактивное поле ввода с применением лучших практик Angular.

Читать далее

useActionState: новый герой в мире React

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров10K

Привет, React-энтузиаст! Случалось ли тебе писать логику для форм, где нужно не только обработать кучу полей, но и синхронизировать их с асинхронными действиями (запросы, загрузка данных, показ успеха или ошибок)? Если да, то, возможно, ты уже слышал об экспериментальном хуке useFormState в React. Однако на смену ему пришёл более мощный инструмент - useActionState. В статье обсуждается, почему прежний подход ушёл на пенсию, чем хорош новый, и как он может упростить жизнь каждому фронтенд-разработчику.

Читать далее

Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров3.7K

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


Допустим, у нас есть блок (скажем, бутстраповская ячейка <div class="col-12">) и мы хотим её схлопывать (скажем, по клику на кнопке).


image

Читать дальше →

Как приготовить обфускацию в JavaScript и не сжечь лабораторию: AST, babel, плагины

Уровень сложностиСредний
Время на прочтение16 мин
Количество просмотров3K

Вероятно каждый программист или компания, сталкивались с мыслями о своей крутости или хотя бы крутости своих алгоритмов 😎. Разумеется, в этом случае может возникнуть соответствующее нежелание делиться разработками с широкой аудиторией. Данная проблема минимизируется переносом части кода на сервер (если речь идёт о клиент-серверных приложениях). Однако, такой подход не всегда применим, и порой обстоятельства вынуждают нас оставлять чувствительные участки кода прямо на виду.

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

Читать далее

Краткая история WWW от фронтенд-разработчика

Время на прочтение7 мин
Количество просмотров2.5K

Всемирная паутина (WWW) — это не просто набор веб‑страниц, это революция, изменившая наше восприятие информации и общения. С момента своего появления в начале 1990-х годов WWW кардинально трансформировала мир, открыв новые горизонты для бизнеса, образования и повседневной жизни. История веб пестрит взлетами, падениями и уходами в крайности, но здесь мы пройдемся только по самым ярким моментам! Следить за эволюцией технологии, которая навсегда изменила наше общество, мы будем глазами фронтенд‑разработчика.

Читать далее

React useCallback() — полное руководство

Уровень сложностиПростой
Время на прочтение15 мин
Количество просмотров8.6K

Всем привет! На связи Spectr и рубрика «Что читают наши разработчики». Сегодня разберем оптимизацию функциональных компонентов за счет мемоизации функций обратного вызова с помощью useCallback().

Независимо от того, начинающий вы разработчик React или хотите углубить свои знания, это руководство предоставит вам полезную информацию о useCallback(), включая его синтаксис, применение, распространенные случаи использования и лучшие практики. Мы также сравним его с другим хуком — useMemo()

Разобраться с useCallback() полностью

Фронт без бэка: как мы сумели собрать тысячу форм в одну систему и не потерять рассудок

Время на прочтение9 мин
Количество просмотров6.6K
Когда три года назад в июле к нам пришли с просьбой сделать фронтенд для маленькой системы документооборота, мы оценили задачу в полгода… ТЗ принесли на создание более 1000 разных форм. Обещанные нами полгода перестали казаться спокойными.

Через пару недель к задаче добавились две крупные системы на 1С и ещё несколько в разработке, с бэкендами на С++ и Java. Объём работы стал выглядеть неподъёмно. Плюс основное требование — всё должно быть в едином интерфейсе. Так мы поняли, что нужно браться за универсальное решение, которое «скушает» любой бэкенд.

image
Импортозамещённый JSON

Эта история о том, как команда из 16 человек разработала Атом.Форму — продукт, который уже работает для шести крупных систем в «Росатоме», и их количество постоянно растёт. А срок создания фронта теперь занимает 2–3 недели для маленьких и несколько месяцев для развесистых систем.
Читать дальше →

Вклад авторов