JavaScript *

Начнем с того, что в настоящее время огромное количество (а если точнее, то 5,5 миллиарда за 2024 год) пользователей по всему Интернету регулярно посещают различные сайты и веб‑страницы в поисках нужной им информации. И Вы в том числе.

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

А какой же плюс для нас? Как любому бизнесу нужен свой сайт, так сильно им нужны и разработчики этих сайтов, которые будут создавать их с самого начала, поддерживать их работу, добавлять новый функционал и оптимизировать старый. Отсюда мы переходим к одной из самых популярных сфер программирования — Frontend разработка.

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

🔪 Карусель триальных токенов под ребро облачному LLM провайдеру

Облачный LLM провайдер Cohere предоставляет бесплатно 20 запросов в минуту без проверки кредитной карты. Я просто не смог отказаться от задумки сделать веселую карусель.

Привет! На связи снова Дмитрий — React-разработчик, который стремится разобраться, как всё устроено, и делится информацией с вами.

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

Как MobX делает объекты реактивными?

MobX превращает обычные объекты JavaScript в реактивные, что позволяет автоматически отслеживать изменения их свойств и обновлять зависимости. В основе этого механизма лежат два ключевых инструмента: makeAutoObservable и observable. 

Пользовательский ввод

Результат генерации QR-кода

Привет, хабр! Больше года назад я впервые узнал про сигналы, а три месяца назад @Sin9k записал видео на эту тему. И поскольку сигналы по-прежнему обходят стороной, попробую немного исправить ситуацию)

В материале будет использоваться обёртка signals-react, так как изначально рассматриваемая библиотека написана под Preact.

Ни у кого не получится показать другому то, что тот не хочет или не может увидеть. Объяснять и показывать нужно только тем, кто а) может понять, б) хочет понять. В этой публикации я демонстрирую пару своих документов для LLM, которые предписывают "силиконовым", какими правилами им следует руководствоваться при создании кода для моей платформы. "Силиконовым" можно впаривать любую дичь - они всеядные (могут понять) и покладистые (согласны понять). За это мы их и любим!

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

В предыдущей статье мы обсудили плюсы и минусы использования воркеров для cloud-native разработки. Сегодня же мы настроим и задеплоим полноценное приложение с фронтом, бэком, базой данных, горизонтальным мастшабированием, http/3, капчей и бесплатным поддоменом менее, чем за час.

Итоговый результат можно увидеть тут (только через VPN).

🐝 Оркестрация чатов LLM через Redis

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

Евгений Жуков (@EvgeniiZhukov) написал статью «Сложить два числа‑гиганта: как я прошел квест на собеседовании в Бигтех».

Я решил развить мысль и проверить, как ChatGPT сможет пройти собеседование и устроиться на работу в BigTech. Стоит ли опасаться AI и сможет ли ChatGPT предложить решения, которые ни автор статьи ни авторы комментариев не смогли найти. Что остается делать простому front-end джуну в современном мире и как все-таки вкатиться в IT.

В процессе работы с HTML-документами часто возникает необходимость получить доступ к конкретным элементам DOM. Обычно это делается с помощью уникальных идентификаторов, которые присваиваются нужным элементам. Однако существует вероятность, что в большом документе может оказаться несколько элементов с одинаковыми идентификаторами, что может привести к путанице.

Чтобы избежать этой проблемы, я разработал библиотеку dom-scope, которая позволяет создавать искусственные области видимости (скоупы) внутри DOM. Я хочу поделиться своим решением с сообществом Хабра.

В этой статье мы продолжим разбирать базовые концепции реактивности на основе идей и примеров, изложенных Райан Карниато (Ryan Carniato), автором SolidJS. Сегодня рассмотрим, как в реактивных системах планируется выполнение изменений производных значений.

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

Год с небольшим назад я проводил здесь испытания, как поисковики индексируют SPA сайты. На тот момент Google справился на отлично, Yandex - не очень

Сейчас Yandex хорошо проиндексировал SPA сайт на Vue 3.

🐝 Выбор локальной LLM модели. Публикация на сайт с чатом.

В мире нейросетей - хайп. Не всегда заявления производителя соответствуют действительности, например, на бумаге DeepSeek R1 поддерживает русский язык, на деле не всё так гладко. Данная статья содержит подборку LLM моделей, хорошо работающих с русским языком и имеющих возможность tool calls - вызов внешних python/nodejs функций для интеграции в стороние сервисы

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

React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.

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

• React Tech Stack в 2025 году

Привет, Хабр! Я уже рассказал, что умею разнообразно писать счётчики . Пришло время сделать шаг вперёд! Сегодня поговорим о том инструменте, который я и миллионы разработчиков используют ежедневно. Речь пойдёт о великом и ужасном ReactJS.

Я пишу на React с 2018 года, делаю это, на мой взгляд, более-менее сносно. Мне нравится тезис о том, что профессионализм заключается не только в умении использоваться достоинства инструмента, но и в умении чётко видеть его недостатки.  Поэтому возникла идея сделать что-то типа прожарки React, указав на лично меня раздражающие моменты. С какими-то я смирился, с какими-то нет, что-то научился обходить. Если вас бесит в React что-то, что я не упомянул, не стесняйтесь писать в комментариях, было бы очень интересно сравнить мои ощущения с вашими.

И важное: несмотря на указанные ниже проблемы, я до сих пор считаю React прекрасным и удобным инструментом для создания фронтенда, в частности SPA.  Громких слов типа «ReactJS не пригоден для разработки» тут не будет - пригоден, да ещё как! Но... и на Солнце бывают пятна. Приступим.

У вас есть контент на сайте? Хотели бы редактировать его визуально, без необходимости погружаться в код?

Intlayer Visual Editor – это бесплатный инструмент с открытым исходным кодом, который позволяет редактировать контент вашего веб-приложения прямо в визуальном интерфейсе.

Привет, Хабр! Сегодня я хотел бы поговорить с тобой о проблеме публикации картинок. Зачем вообще об этом говорить? Ежедневно миллионы людей публикуют миллионы, или даже, миллиарды изображений, что тут можно обсуждать? Наверняка, для веб-разработчика, тем более, опытного - это вообще никакая не проблема.

 Привет, Хабр! Меня зовут Евгений Жуков, я работаю в Битриксе мобильным разработчиком. Моя основная задача — создавать приложения, которые упрощают бизнес-процессы. А еще я обожаю разбирать задачи с собеседований: они как головоломки, которые не только проверяют знание алгоритмов, но и учат видеть не очевидные подходы к коду. Хочу делиться такими кейсами — вдруг это поможет кому-то пройти сложное интервью или вдохновит на новые идеи. Поехали? 😊

Сценарий: вы на собеседовании, ожидаете вопросов про React, WebGL или хотя бы про Event Loop. А вместо этого получаете: «Напишите функцию сложения двух чисел в столбик, но числа передаются как массивы.

«Что? — думаете вы. — Это же уровень начальной школы! Где мои хитрые асинхронные задачи?» Но не спешите радоваться. Я тоже недооценивал эту задачу, пока не попытался реализовать её на JavaScript. 

Аудитория Хабра, в силу своей айтишности и любознательности, отлично подходит для различного рода экспериментов . Этот документ - эксперимент. Создан мной в соавторстве с LLM и предназначен как для людей, так и для LLM. Хочу увидеть реакцию людей. Реакцию LLM я уже видел.

Всё изложенное касается только разработчиков на JavaScript (JS !== TS).

Философия Tequila Framework (TeqFW) — это мой личный взгляд на организацию разработки веб-приложений. Я, Алекс Гусев, сформировал этот подход, исходя из собственного опыта, который сосредоточен на модульных монолитах с одной базой данных. Этот документ отражает именно такой контекст и не претендует на универсальность.

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

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

Привет! Я Егор Стеблин, фронтенд-разработчик в юните спецпроектов KTS.

В этой статье я расскажу о том, каким образом в Discord можно встроить свой миниапп (a.k.a. «активность»). Для тех, кто еще не сталкивался с этим понятием: активности — это интерактивные приложения, которые можно запустить в Discord. Они могут интегрироваться со следующей функциональностью Discord:

• получение информации о пользователе;

• голосовой и текстовый чаты;

• данные профиля и встроенная монетизация.

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

Ниже я опишу процесс создания Discord-активностей от инициализации приложения на портале Discord до написания кода и его тестирования.