Обновить
256K+

JavaScript *

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Бенчмарки JavaScript — это полный хаос

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели6.5K

Я ненавижу код бенчмаркинга, как и любой другой человек. Гораздо веселее притвориться, что твоё кэширование значения увеличило производительность на 1000%, чем проверять это тестами. Увы, бенчмаркинг JavaScript по-прежнему необходим, особенно потому, что JavaScript используется (когда не должен?) во всё более чувствительных к производительности приложениях. К сожалению, из-за множества базовых архитектурных решений языка, JavaScript никак не упрощает выполнение бенчмаркинга.

Читать далее

Создаем Hamster Kombat почти с нуля. Практика по Vue 3 и Telegram Mini Apps

Время на прочтение11 мин
Охват и читатели22K

Привет, Хабр! В этой статье-инструкции вы узнаете, как с нуля сделать свою собственную Telegram-тапалку на современном стеке. Важный дисклеймер: тапалка, кликер и прочее — это всего лишь форма. Цель статьи — дать всеобъемлющий практикум по современному стеку и деплою проектов в облако.

Внутри статьи — полноценный Serverless-подход, разработка бота на Node и полный цикл создания FE-приложения. А еще комментарии по архитектурным и тактическим решениям, чтобы вы прокачали уровень программирования и насмотренности. Подробности под катом!
Читать дальше →

Как отправлять SMS из NodeMCU (ESP8266)

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели14K

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

В этом гайде пользователь на простом примере рассматривает, как с помощью микроконтроллера NodeMCU (ESP8266) и кнопки отправлять SMS через HTTP POST-запросы. Это полезно для создания различных IoT-устройств — мониторинга и умных домов.

Читать далее

JavaScript: структуры данных и алгоритмы. Часть 7

Уровень сложностиСредний
Время на прочтение22 мин
Охват и читатели8.7K


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


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


Сегодня мы поговорим об алгоритмах для работы со строками и поиска.


Код, представленный в этой и других статьях серии, можно найти в этом репозитории.


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

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

JavaScript: Удобство или Угроза? Размышления о Приватности и Вебе

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

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

Сложно переоценить пользу JS, который делает сайты интерактивными, удобными и современными. В то же время опасность, которая в нем таится, обычно ускользает от внимания. Эта статья — попытка заглянуть монстру в глаза.

Читать

Парольная защита статичной HTML-страницы на JS

Время на прочтение3 мин
Охват и читатели16K


Обычно парольная защита производится через веб-сервер, который проверяет пароль и выдаёт контент. Стандартный способ: .htaccess и htpasswd. Но что, если нужно выложить зашифрованную веб-страницу и файлы на публичном хостинге, где у нас нет контроля над сервером? Эту проблему решают инструменты StatiCrypt и Portable Secret.

Для шифрования HTML перед публикацией StatiCrypt использует AES-256 и WebCrypto, а расшифровка происходит с помощью ввода пароля в браузере на стороне клиента, как показано в демо (пароль test).

StatiCrypt генерирует статическую страницу, которую можно безопасно заливать на любой хостинг, в том числе бесплатный сторонний хостинг, такой как GitHub Pages.
Читать дальше →

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

Время на прочтение6 мин
Охват и читатели32K

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

Читать

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

Переводим 50 приложений на Module Federation и ничего не ломаем

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

Привет, меня зовут Степан, я главный frontend-разработчик в Альфа-Банке. Проектом, о котором пойдёт речь, занимается наша команда. Только фронтенд-разработчиков в ней 60. Множество команд поддерживают более 50 приложений, приносящих прибыль бизнесу.

У нас ранее были микрофронты, но они были построены не на WMF. Не вдаваясь в документацию, давайте покажу, как всё было устроено, чтобы описать причины переезда. Думаю, будет интересно, учитывая, что проект большой.

Я расскажу о микрофронтендах и сопутствующей концепции Model Federation на примере большого проекта.

Читать далее

Vite 6.0: Новые возможности и будущее веб-разработки

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

26 ноября 2024 года вышла новая мажорная версия инструмента для сборки приложений Vite. Это событие особенно примечательно тем, что это первый релиз после анонса VoidZero, где Even You представил грядущее направление развития основных продуктов.

Далее мы рассмотрим ключевые моменты этого обновления.

Читать далее

Как мы превратили рутинную работу в удовольствие: история создания плагина для Р7-Офиса

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели5.9K

Многие компании продолжают активно использовать Excel и язык макросов VBA для обработки и анализа данных. Однако с переходом на отечественные офисные решения (например, Р7-Офис) появилась необходимость в разработке новых инструментов обработки данных на JavaScript. 

В ЛАНИТ мы помогаем клиентам осуществить переход на Р7-Офис и создаем макросы, которые ранее использовались в Excel. Во время этого процесса наши разработчики внимательно анализировали запросы пользователей и выявили несколько общих трендов, на основе которых и был разработан наш плагин Аналитика.

Читать далее

Наиболее эффективные методы улучшения Core Web Vitals

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


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


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

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

Бесплатное обучение фулстек-разработке веб-сервиса с нуля по видео-урокам с исходным кодом и поддержкой

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

TLDR. Я примерно год создавал курс из 141 урока. Курс получился хороший, все кто проходят рады и пишут положительные отзывы. Я пытался его продавать, в лучшем случае у меня получалось отбивать рекламу в ноль. Короче, я хороший разработчик, я хорошо доношу материал, но я плохой маркетолог. Все эти таргреты, ретаргеты, воронки, шморонки — тоска унылая. Мне гораздо веселее и понятнее заработать на создании и запуске IT-продуктов, чему я и учу в этом учебнике. Так что пишу эту статью, чтобы сообщить вам о существовании моего курса и предложить всем желающим абсолютно бесплатно получить от него пользу 🙂

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

Читать далее

Как использовать http внутри Minecraft?

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели12K

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

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

Читать далее

Frontend в 2025 году: тренды, которые изменят разработку

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

Всем привет! На связи руководители Frontend‑практики ГК Юзтех. В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.

Читать далее