Обновить
256K+

JavaScript *

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

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

Amazon IVS: как быстро добавить видеотрансляции в приложение или на сайт

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

Video live streaming - это технология потоковой трансляции видео тысячам и миллионам зрителей в режиме близком к реальному времени. Видеостриминг находит своё применение в разных областях: образование, фитнес, онлайн события, электронная коммерция, игры и киберспорт.

В этой статье мы рассмотрим как можно легко интегрировать видеотрансляции в приложение или на сайт, используя AWS interactive video service.

Читать далее

Изучаем Reanimated 2 создавая анимированный компонент

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

React Native предоставляет Animated API который может покрыть часть базовых потребностей вашего приложения, однако если вы хотите создавать сложные и производительные анимации на 60fps, без сторонних библиотек вам не обойтись. И сегодня я хотел бы рассказать о Reanimated 2 и продемонстрировать ее возможности на примере создания компонента счетчика.

Читать далее

Почему вам не стоит использовать Styled

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

Технология css-in-js существует уже довольно давно. Ещё в начале своего профессионального опыта я встречал подходы, в которых стайлинг локальных частей интерфейса пробрасывался в html через javascript в виде css директив. Иногда это необходимая мера, хотя необходимой она случается изредка, но раз в год, как говорится, и палка стреляет. У меня на опыте был пример построения раздела интерфейса, в котором устанавливаемое на сайт пользователя модальное окно можно рестайлить через кодовый редактор с live preview. css-in-js бывает оправдан, поэтому хочу сразу оговориться - хоронить никакой подход не стоит. Но и идеализировать его как универсальную пилюлю тоже не надо. Рендер стилей, привязанный к логике рендера компонентов в контексте всего проекта - это просто свой путь со своими приключениями, появившийся на мой взгляд в общей психопатии привязывать к state всё что только можно. Что если посмотреть - откуда взялась эта техногогия? На сегодняшний день на рынке проектирования интерфейсов сложился монополист react, диктующий программистам свои правила игры, и который даже без использования styled модуля имеет в себе простейщую инверсию управления cssInJs.
React - важный персонаж в этой теме. Он, словно useEffect всего современного front-end - стал центром силы, средоточием зла в виде голого state management, не предусматривающего из коробки ничего иного.

Читать далее

Создание столбчатых диаграмм с помощью JavaScript

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

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

Микросервис головного мозга

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

Когда нужно делить фронтенд-часть приложения на микросервисы? Какой стек использовать? И какие стандарты использовать, чтобы не выстрелить себе же в ногу при переходе на микрофронты? Михаил Трифонов (Lead Frontend в компании Cloud) ранее уже выступал с докладами о микросервисах, получил фидбек от сообщества и с его учётом сделал новый доклад на HolyJS. А теперь мы (организаторы HolyJS) сделали для Хабра текстовую версию этого выступления.

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

Читать далее

Эволюция подходов к работе с таблицами во фронтенде

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

Всем привет! Меня зовут Аня Ланда, я фронтенд-разработчик в Самокате. В компании я больше двух лет, общий стаж во фронтенде – 6 лет и всё это время я делаю таблицы. В этом посте расскажу про эволюцию подходов к работе с ними, что меняется на пути от нескольких сотен до сотен тысяч элементов в таблице.

Читать далее

Node.js: Клонирование ключей. Is eval() evil?

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

На примере простой задачи клонирования ключей объекта посмотрим, есть ли реальные альтернативы по производительности столь презираемой JavaScript-разработчиками функции eval().

Подобная задача возникает, если оригинальное значение ключа надо оставить у объекта, а как-то обработанное - положить рядом в новый соответствующий ключ. То есть, для начала, из {"a" : 1, "b" : 2} надо получить {"a" : 1, "a-copy" : 1, "b" : 2, "b-copy" : 2}.

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

Читать далее

Парсим сайты с защитой от ботов

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

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

Речь не идет о каком-либо виде "взлома" или о создании повышенной нагрузки на сайт. Мы будем автоматизировать то, что и так можно сделать вручную.

Читать далее

Краткий обзор Bun — новой среды выполнения JavaScript

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


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


В этой статья я немного расскажу вам о Bun — новой среде выполнения JavaScript-кода.


Обратите внимание: Bun — это экспериментальная штуковина, поэтому использовать ее для разработки производственных приложений пока не рекомендуется.


К слову, в рейтинге "Восходящие звезды JavaScript 2022" Bun стал победителем в номинации "Самые популярные проекты".


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

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

Взлет и падение Vuetify. Некролог

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

Vuetify - один из самых популярных Material Design фреймворков для Vue, которому недавно исполнилось 6 лет. И 6 января 2023 года его основатель заявил, что проект Vuetify перестал окупаться и он ищет работу. Отсюда - некролог в названии статьи.

Статья состоит из шести небольших частей, в которых мы пробежимся от первой версии до третьей, посередине разобрав, как фреймворк обновлялся до Vue 3, будем вместе смотреть за поведением основателя движка, а также тем, как можно справиться с переходом на Vue 3, пожалуй, хуже, чем кто-либо еще, включая команду Nuxt.

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

Погнали!

Пять шаблонов загрузки данных для повышения быстродействия сайтов

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

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

Анализ HTA файла, содержащего обфусцированный JavaScript код

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

Попался мне на глаза ресурс, рекомендующий разные обфускаторы и деобфускаторы JavaScript. Решил проверить свои силы и самому поработать деобфускатором. А для проверки нашёл простенький вредоносный файлик.

Читать далее

Как я написал свой язык и онлайн IDE

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

Здесь онлайн интерпретатор, здесь документация.

В сентябре 2020 года я учился на 2 курсе. В том же месяце я впервые написал программу, которая мне понравилась. Она создаёт svg изображения растений, здесь её можно потрогать.

Чуть позже я выяснил, что такие программы называют процедурными генераторами. Я увлекся этим, сделал ещё парочку (1, 2).

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

Читать далее

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

Создаём веб-сайт, как будто сейчас 1999 год

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

Раньше веб был более странным местом


В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь.

И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о старых добрых статических личных страничках.

Сайты наподобие Geocities, Angelfire, Tripod и Expage предлагали для всех услуги бесплатного статического хостинга, поэтому произошёл бум количества личных веб-сайтов. У некоторых хостов даже были конструкторы веб-сайтов в стиле drag-and-drop, так что вам даже не нужно было изучать HTML.

Сегодня мы можем посмеяться над этими веб-сайтами, по сравнению с современными изящными и минималистическими сайтами они выглядят карикатурно. Но я считаю, что мы слишком далеко ушли в другом направлении, и сегодня многие веб-сайты выглядят одинаково. Те старые личные веб-сайты были отражением вашей личности.
Читать дальше →

Знакомство c Reatom

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


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

А оно вам надо? Думаю, да, потому что Reatom — это универсальное решение, которое позволяет легко пошарить глобальное состояние за микроскопическую (2.5KB) цену, эффективно строить самодостаточные и переиспользуемые логические модули гигантских приложений или просто сделать ваш сетевой кеш реактивным с помощью дополнительного пакета @reatom/async.

В этой статье мы кратко пройдёмся по мотивации и истории, а потом разберём основные фичи и примеры их использования вместе с биндингами к React.js. Похожий разбор есть в виде скринкаста.
Читать дальше →

Удобный прогноз северного сияния: в цветах и графиках

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

В начале 2022 года я съездил в самостоятельное путешествие за северным сиянием. Это оказалось прекрасно, кроме этапа планирования. Все сайты с прогнозами «северных огней» выглядели странно и едва помогали собраться, но зато предлагали купить в пару кликов тур и ни о чем не переживать. Тур мне был не нужен, а вот хороший прогноз — да.

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

Читать далее

React + TypeScript: необходимый минимум

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


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


Представляю вашему вниманию перевод этой замечательной статьи.


Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!


Преимущества изучения TS могут быть сведены к следующему:


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

Эта статья представляет собой минимальное введение по использованию TS в React.


Антигероем нашей истории будет Пэт — очень неприятный технический директор.

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

Что такое состояние

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


Привет! Меня зовут Артём Арутюнян, много где меня можно встретить под ником artalar. 10 лет я разрабатываю крупные веб-сервисы, и вот уже четыре года менеджер состояния, исследуя тему реактивности, консистентности данных и состояния. А началось всё с простого вопроса: почему React, самая популярная современная библиотека для написания UI, по умолчанию полностью рушит приложение и показывает белый экран при появлении ошибки в любом компоненте во время рендера?

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

Примеров будет немного, т. к. их достаточное описание превратило бы статью в небольшую книжку. Но надеюсь, что сами идеи всё же будут понятны.
Читать дальше →

Конструктор базы для браузерной стратегии в духе Dune 2/2000 на Three.js, Vue3 + TS

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

Самой успешной моей статьей для сообщества был подробный отчет о разработке браузерного FPS. Судя по статистике в базе данных — неожиданно огромное количество людей зашло и попробовало сыграть, я получал заинтересованные вопросы в личку и так далее. В дальнейшем, я предпринял еще одну попытку крафтового браузерного геймдева «на javascript», и попробовал создать конструктор для стратегии в духе культовой Dune из детства. В какой-то момент я уперся в неудовлетворительную производительность получающейся разработки, заскучал и уже почти год как забросил это дело. Но у меня вполне получилось построить работающий полноценный контрол, сейчас можно возводить и демонтировать здания. Поэтому хочу, прежде всего, поставить точку для себя самого, немного рассказав и о данной затее — возможно, для кого-то окажутся полезными мои усилия, изыскания. Статья не будет такой объемной, дотошной и разнообразной как первая о создании действительно полноценного шутера, зато сам код репозитория, кажется, немного интереснее, так как использует более актуальный стек из Vue3 и TypeScript. Во многом, эта разработка продолжает идеи и методы первой, с тем отличием, что мы пилим стратегию, а не шутер от первого лица. Я совсем не буду повторять то что было уже пройдено и рассмотрено на первом примере, бегло покажу только «новые фичи».

Читать далее

Мощь декораторов TypeScript на живых примерах. Декорирование методов класса

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

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

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

Читать далее