Обновить
210.6

JavaScript *

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

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

Ускоряем документацию в 10 раз

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

Исправить опечатку в документации занимало 5 минут компиляции. Страницы с картинками загружались медленно.

Я считаю, чтобы посмотреть документацию не нужен JavaScript. Расскажу как переехал с docusaurus + react на starlight + astro и оптимизировал сайт под экологию.

Читать далее

Миграция на строгий TypeScript: наш путь и собственное решение

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

Наш проект имеет долгую историю. И за это время подходы к разработке фронтенда успели несколько раз измениться. В какой-то период в проекте можно было встретить код на JavaScript, CoffeeScript и TypeScript. Плюс сам TypeScript успел обновиться несколько раз за время существования проекта со второй до пятой версии.

Сейчас TypeScript практически вытеснил весь остальной код, но процесс по переписыванию с других языков занял много времени. И чтобы была возможность переиспользовать уже написанный код в TS-модулях, было принято решение отказаться от строгих проверок. Из-за выключенных проверок в коде накопилось большое количество использований any, а также отсутствующих проверок на null. Это, наверное, основные две проблемы, которые не позволяют единовременно пройтись по всей кодовой базе и за раз исправить все ошибки, возникающие при включении строгих проверок.

В общем, если вам знакома эта ситуация, то статья для вас. Меня зовут Максим Овчарик, я ведущий фронтенд-разработчик в Selectel. Под катом расскажу, как мы строили процесс миграции кода на строгий режим TypeScript.
Читать дальше →

Обновление Capacitor приложений в обход сторов

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

В данной статье я хочу затронуть такую интересную тему, как обновление бандла Capacitor-приложений (CodePush, live update и т.д).

Сталкивались ли Вы когда-нибудь с ситуацией, когда необходимо незначительно обновить мобильное приложение, написанное на Capacitor?

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

А если нужно сделать релизы во всех популярных магазинах? Google Play, RuStore, AppGallery и, конечно же, самые нерасторопные из существующих — App Store. Выпуск во всех интересующих магазинах может занять значительное время. Вы, конечно, можете автоматизировать этот процесс при помощи различных инструментов, но, так или иначе, это занимает время на одобрение модераторами.

Читать далее

Продвинутое использование библиотеки React Router v7: как упростить сложную навигацию и улучшить производительность

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

Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.

Погнали!

Создаю онлайн-плеер с нейросетями и кошкодевочками

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

Всем привет. Меня зовут Владислав. Я работаю в компании NTechLab фронтенд-разработчиком и уже более 10 лет пишу на JavaScript и TypeScript. В своей жизни я часто использую эти навыки для решения различных бытовых задач. Как и в этой истории, например.

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

Как утекает память, если забыть отписаться от Observable

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

Многие, конечно, знают, что в Angular-сообществе принято трепетно следить за подписками на Observable, потому что это чревато утечками памяти. Но не все видели эти утечки в глаза и не встречались с их последствиями. Давайте смоделируем простую ситуацию по следам утечки, с которой недавно столкнулся я (первый раз).

Читать далее

Рефакторинг с помощью codemods для автоматизации изменений API

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

IDE упрощают рефакторинг, но при работе с большими или распределёнными кодовыми базами, особенно без полного контроля над ними, часто требуется помощь codemods. Используя абстрактные синтаксические деревья (AST), codemods автоматизируют изменения кода с высокой точностью и минимальными усилиями, что особенно полезно при критических изменениях в API.

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

Читать далее

Работа с атрибутами HTML элементов в JavaScript

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

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

Как работать с атрибутами в JavaScript?

Одна React-задача, демонстрирующая ключевые навыки на собеседовании

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

Как всего одна небольшая React-задача помогает глубже понять уровень кандидата на собеседовании? Разбираем нюансы работы с хуками, асинхронностью, состоянием гонки и сайд-эффектами. На первый взгляд задача кажется простой - всего лишь компонент, загружающий данные по username. Но в процессе решения выявляются ключевые моменты: правильно ли кандидат управляет состоянием, учитывает ли смену пропсов, обрабатывает ошибки и предотвращает race conditions. Этот вопрос помогает не просто проверить знания, а увидеть, как кандидат рассуждает и принимает технические решения.

Читать далее

Обзор различных методов работы с реактивным стейтом во Vue

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

В статье рассмотрены различные методы организации обмена данными и реактивным состоянием во Vue.js приложениях, как то:

- Prop drilling
- Provide/Inject
- Composition API
- Pinia
- Event Bus

Читать далее

Python 2D графика. Визуализация данных в реальном времени. Matplotlib, PyQTGraph, pyOpenGL, VisPy, Bokeh и др. FPS 200?

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

Тестирование на скорость рисования 2D графиков и измерение fps популярных графических пакетов (Mayavi 3D, PyVista, Matplotlib, PyQTGraph, Plotly, PyGame, Arcade, pyOpenGL, VisPy, Bokeh) Возможно ли на слабом железе получить FPS=50? А FPS=1000? Да, но есть нюансы: VSync=Off

Для 8 графических пакетов в статье приведены 8 максимально коротких и простых специфичных для каждого пакета кода на python, отображающий на экране с максимально возможным FPS для данного пакета график sin()+noise.

Читать далее

Чего ждать от Angular в 2025 году? Стратегия

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

Привет! Меня зовут Андрей, я занимаюсь фронтенд разработкой на Angular. И в последнее время данный фреймворк нравится мне все больше и больше, поэтому мне стало очень интересно, что же ждет Angular в 2025 году. Какие интересные и полезные фичи завезут и вообще, какой вектор развития у фреймворка.

Не найдя ни одной статьи на русском на это тему - родилась эта :-)

Я разобрал официальную дорожную карту Angular и их стратегию на ближайшие годы. Впереди ускорение, упрощение, новая реактивность и стабильная (возможно) жизнь без zone.js. Давай разбираться, что нас ждёт!

Читать далее

Многопользовательский рой агентов для Ollama

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

🐝 Многопользовательский рой агентов для Ollama

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

Читать далее

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

Как из каши импортов сделать сортированный список Frontend

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

Всем привет! Меня зовут Владимир и работаю джуниор фронтенд разработчиком в одной из лучших компаний :-)

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

Читать далее

JavaScript. Готовимся к live-coding

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

Всем привет! Сейчас без live-coding'a никуда: на собеседованиях часто дают одну-две задачки, которые нужно решить за определённое время. Сами задачи могут быть несложными (не супер-пупер алгоритмическими), но новички могут переволноваться и не справиться с ними.

Поэтому в этой статье я хотел бы описать типовые задачи, которые встречаются в этой секции на позицию frontend или backend разработчика (если бэк на JS). Это поможет вам получить общее представление о том, что может ждать вас.

Читать далее

«Я делаю рефакторинг ежечасно» или как за пять минут улучшить приложение

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

История этой статьи началась с того, что я вспомнил о довольно известном высказывании Мартина Фаулера, автора книг и статей по архитектуре ПО, которое нередко вызывает недопонимание (во всяком случае так было у меня) — «Я делаю рефакторинг ежечасно». Первая мысль, которая логично возникает после этого высказывания — уважаемый публицист просто лукавит. Вторая — что, наверное, кроме рефакторинга он в своей жизни ничем больше не занимается. Но так ли это?

В очередной раз с вами Костя Логиновских, ведущий разработчик и технический лидер внутреннего проекта в Cloud.ru. В этой статье предлагаю во всём разобраться и обсудить, как можно делать рефакторинг «за пять минут» и улучшить приложение буквально за утренним кофе.

Читать далее

Безопасное взаимодействие с API: от ошибок к стабильности

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

Каждый frontend-разработчик сталкивался с ошибкой вида TypeError: Cannot read property 'name' of undefined. Это часть целого класса ошибок в JavaScript, возникающих из-за несоответствия фактического формата данных ожидаемому. В этой статье расскажу, как избавиться от подобных проблем и добиться стабильности, внедрив три ключевых шага: API-слой, Backend-for-Frontend (BFF) и проверку с помощью Zod.

Читать далее

Компилятор WebAssembly, который помещается в один твит

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

▍ Введение


Наш первый «компилятор WebAssembly в твите» имел длину 269 байт; с тех пор мы смогли снизить её всего до 192 байтов.

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

let c=(b,l)=>WebAssembly.instantiate(new Int8Array(
[,97,115,109,1,,,,1,5,1,96,,1,127,3,2,1,,7,4,1,,,,10,
l=(b=b.split` `.flatMap(t=>t>-1?[65,t]:107+'-*/'.indexOf(t)))
.length+4,1,l-2,,...b,11]))

А вот пример его использования:

(await c('11 11 1 - + 4 * 2 /')).instance.exports['']()

Но это не просто хитрый трюк — если вы начнёте разбираться, как работает этот код, то на удивление много узнаете о WebAssembly! В этом посте мы объясним, как это всё работает, пошагово деобфусцируя код.
Читать дальше →

Две строки CSS, которые снизили производительность со 120 до 40 FPS

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

FPS расшифровывается как «кадры в секунду» (Frames Per Second) и означает измерение того, сколько кадров, или изображений, отображается на экране за одну секунду. Для frontend-разработчика эта метрика позволяет понять насколько интерфейс плавно и четко работает.

Читать далее

Введение в фикстуры Playwright

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

Привет! Я Даниил, занимаюсь разработкой на Angular в T-Банке и хочу поделиться с вами опытом использования фикстур в Playwright. Я решил поговорить об этом, потому что вместе с ростом функциональности проектов растут и сложности при тестировании, а фикстуры предоставляют удобный способ избавиться от дублирующегося кода и сложных моков.

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

Читать далее

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