Как стать автором
Обновить
147.8

JavaScript *

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

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

Не стоит недооценивать HTML

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

«HTML – это просто», «Разрабатывать фронтенд проще, чем бэкенд», «После реализации бэкенда обновление UI не должно составлять труда», – за время работы в сфере веб-разработки вокруг меня то и дело звучали эти и другие аналогичные утверждения.

И очень часто они вызывали у меня грусть.

Дело в том, что бо́льшую часть времени я проводила за написанием фронтенда, включая работу с HTML, CSS и JavaScript (по факту в основном TypeScript). Когда кто-нибудь говорит мне о «простоте» моей работы, я начинаю думать, что мои навыки не представляют высокой ценности, и меня может легко заменить любой разработчик…

В статье же я решила описать свои размышления, которые рождались в течение последних двух лет во время работы с людьми из разных команд с разным опытом в HTML-разработке и фронтенд-технологиях в целом. Здесь я озвучу несколько основных своих вопросов «Почему?», сопроводив их возможными ответами.
Читать дальше →
Всего голосов 51: ↑48 и ↓3+60
Комментарии95

Интеграция React и AngularJS через Webpack Module Federation

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

Переходите с AngularJS на React без стресса и суеты. В этой статье я поделюсь с вами способом, как оживить ваш проект, плавно встроив элементы React в структуру, построенную на добром старом AngularJS. Мы все знаем, что рефакторинг или полная смена фреймворка может пугать, особенно когда вложены годы труда. Но не волнуйтесь, я покажу, как использовать микрофронтенды и Module Federation для того, чтобы дать вашему приложению свежее дыхание, сохраняя при этом все то хорошее, что было накоплено за годы.

Читать далее
Всего голосов 4: ↑4 и ↓0+4
Комментарии2

Интеграция React и AngularJS через Webpack Module Federation

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

Переходите с AngularJS на React без стресса и суеты. В этой статье я поделюсь с вами способом, как оживить ваш проект, плавно встроив элементы React в структуру, построенную на добром старом AngularJS. Мы все знаем, что рефакторинг или полная смена фреймворка может пугать, особенно когда вложены годы труда. Но не волнуйтесь, я покажу, как использовать микрофронтенды и Module Federation для того, чтобы дать вашему приложению свежее дыхание, сохраняя при этом все то хорошее, что было накоплено за годы.

Читать далее
Всего голосов 4: ↑4 и ↓0+4
Комментарии2

Меняем формат розыгрышей призов в Telegram-чатах

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

Привет, Хабр!

Меня зовут Денис, и сегодня я расскажу вам о проекте, над которым я и мой друг работали последние 7 месяцев. Называется он PLAY365 — и это наш игровой бот для групповых чатов Telegram.

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

Узнать всё про PLAY365
Всего голосов 4: ↑3 и ↓1+4
Комментарии8

Меняем формат розыгрышей призов в Telegram-чатах

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

Привет, Хабр!

Меня зовут Денис, и сегодня я расскажу вам о проекте, над которым я и мой друг работали последние 7 месяцев. Называется он PLAY365 — и это наш игровой бот для групповых чатов Telegram.

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

Узнать всё про PLAY365
Всего голосов 4: ↑3 и ↓1+4
Комментарии8

Ты наконец-то поймешь асинхронность в JS

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

Привет, друзья! Сегодня мы поговорим о том, что такое асинхронность в JavaScript и как она работает. Это одна из тех вещей, которые кажутся сложными, но на самом деле довольно просты, как только разберешься.

Читать далее
Всего голосов 26: ↑21 и ↓5+17
Комментарии33

Ты наконец-то поймешь асинхронность в JS

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

Привет, друзья! Сегодня мы поговорим о том, что такое асинхронность в JavaScript и как она работает. Это одна из тех вещей, которые кажутся сложными, но на самом деле довольно просты, как только разберешься.

Читать далее
Всего голосов 26: ↑21 и ↓5+17
Комментарии33

Собираем метрики Node.js приложений в PM2 с экспортом в Prometheus

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

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

В этой статье я хотел бы рассказать о способе сбора статистики из node.js приложений, которые запущены в PM2, и экспорт этих данных в Prometheus.

Читать далее
Всего голосов 5: ↑5 и ↓0+5
Комментарии1

Храним файлы Strapi в облаке Selectel

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

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

Читать далее
Всего голосов 26: ↑26 и ↓0+26
Комментарии3

Храним файлы Strapi в облаке Selectel

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

Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.

Читать далее
Всего голосов 26: ↑26 и ↓0+26
Комментарии3

Total.js и интеграция с ИИ

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

Динамика приложений с искусственным интеллектом продолжает сеять вопросы по выбору “удачного” фреймворка, который мы могли бы использовать при создании. Поскольку именно от нашего выбора в принципе и зависит продолжительность жизни нашего детища.

В этой статье я бы хотела обратиться к одному старенькому фрейморку, рассмотреть его особенности и фичи, которые способные выделить его на фоне другого софта. Так ли он хорош? А если хорош, то почему?

Не буду затягивать с буквами во вступлении и предлагаю перейти сразу к делу!

Приятного прочтения(:

Читать далее
Всего голосов 11: ↑6 и ↓5+2
Комментарии6

AI не только подбирает партнеров в Тиндере — он еще и планирует свидания на 14 февраля

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

Мы попросили чат-ботов с искусственным интеллектом спланировать свидание на День святого Валентина. Они оказались на удивление полезными. Оказалось, что AI знает толк в любви — или, по крайней мере, в том, как спланировать романтический вечер.

Читать далее
Всего голосов 7: ↑3 и ↓4+3
Комментарии2

Как создать YouTube GIF Maker с использованием Next.js, Node и RabbitMQ

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

В этом руководстве мы рассмотрим разработку веб-приложения по созданию GIF-файлов из видеороликов.

Функциональные возможности приложения:
- Создание GIF из видео на YouTube с определённым временным диапазоном.
- Предварительный просмотр результата перед выполнением фактической конвертации.

Компоненты системы:
- Клиентская часть на React (Next.js)
- Бэкенд-сервер на Node
- Node как Service Worker
- В качестве брокера сообщений — RabbitMQ
- Для хранения данных — MongoDB
- Для хранения медиафайлов — Google Cloud Storage

Полный код проекта можно найти на github, а по этой ссылке посмотреть демо-версию приложения.

Читать далее
Всего голосов 14: ↑13 и ↓1+14
Комментарии0

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

Больше библиотек богу библиотек или как я переосмыслил i18n [next.js v14]

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

Для интернационализации сделаны десятки по-своему потрясающих библиотек, такие как i18n, react-intl, next-intl. Все они отлично справляются со своей задачей - добавляют переводы в приложение или на сайт. Большинство из них проверены, отлажены и стабильно поддерживаются.

Но все они устарели.

Ведь всё это время развивалось и экосистема реакта. Так, последняя версия next.js включила крупные обновления из react.js - cache, taint, новые хуки и, конечно же, серверные компоненты. Команда самого React.js, вероятно, представит эти изменения уже в мае.

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

Читать далее
Всего голосов 2: ↑2 и ↓0+2
Комментарии4

Об одном способе веб-скрапинга сайтов, защищенных Cloudflare

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

Сразу оговорюсь, что описанное ниже носит исключительно информационно-образовательный характер, и не имеет целью нанесение какого-либо ущерба компаниям, использующим защиту из заголовка статьи. По этим же причинам фокусировка статьи именно на том, как получить заветный html «как из браузера» в автоматизированном режиме, и здесь не будет идти речь о каких-то массовых распараллеливаниях через proxy и VPN, подкладываниях отпечатков (finger prints) браузеров и т. д.

Узнать о способе обхода защиты Cloudflare
Всего голосов 23: ↑22 и ↓1+26
Комментарии31

Оптимизация js/WebGL/Web Assembly

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

Не так давно я писал про свой 2d движок jsge. При написании рендера, делал оптимизацию кода, а также экспериментировал с web assembly. Как и обещал, написал отдельную статью про результаты.

Читать далее
Всего голосов 7: ↑7 и ↓0+7
Комментарии4

Страдания по VueUse

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

VueUse - популярная библиотека, состоящая из небольших утилит и в среде Vue разработчиков, идущая как "must have" наряду с Pinia. Нисколько не умаляя вклад Anthony Fu в экосистему Vue, опишу, почему я не использую её и не рекомендую для серьезных проектов и опытных разработчиков.

Читать далее
Всего голосов 7: ↑5 и ↓2+4
Комментарии6

Next.js. Технология современной веб-разработки

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

Современная веб-разработка требует эффективных инструментов, способных справляться с высокими стандартами производительности и пользовательского опыта. В этой статье мы рассмотрим Next.js, мощный JavaScript-фреймворк и новаторское решение для создания современных веб-приложений на основе React, созданный компанией Vercel. Узнаем, как он помогает разработчикам создавать высокопроизводительные, масштабируемые и SEO-дружественные веб-приложения. Мы также глубоко погрузимся в его функциональность, рассмотрим особенности, такие как серверный рендеринг и генерация статических сайтов, и предоставим примеры использования. Давайте разберем, как Next.js становится ключевым инструментом в современной веб-разработке, обеспечивая идеальный баланс между разнообразием функций и оптимальной производительностью.

Читать далее
Всего голосов 8: ↑5 и ↓3+3
Комментарии5

VR-тур на A-Frame + React

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

Всем привет! Меня зовут Егор Молчанов, я разработчик в команде CRM для менеджеров ипотечного кредитования в компании Домклик. Хочу поделиться своим опытом создания VR‑тура с помощью фреймворка A‑Frame и библиотеки React. Для этого написал свой небольшой pet‑проект, который мы сейчас разберём.

Читать далее
Всего голосов 19: ↑18 и ↓1+22
Комментарии2

Strict Mode в ECMAScript. Полный справочник

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

По поводу строго режима существует множество информации. Но, к сожалению, очень мало статьей, покрывающих весь спектр особенностей строго режима. Поэтому, я решил составить свой справочник всех ограничений, исключений и отличий в исполнении "строгого" кода от "не строгого", в полном соответствии со спецификацией ECMA-262.

Читать далее
Всего голосов 4: ↑3 и ↓1+3
Комментарии2

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

Работа