Обновить
256K+

JavaScript *

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

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

Реверс-инжиниринг 128-битного дракона

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


КДПВ для этой статьи сгенерировала программа размером всего в 16 байт. Под катом разберёмся в том, как в столь скромном объёме сумел спрятаться дракон и какие силы поддерживают его жизнь. Для лучшего понимания происходящего мы портируем эту красоту на JavaScript.

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

Чеклист для tsconfig.json

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



В этой статье я расскажу о настройках TypeScript, определяемых в файле tsconfig.json, которых я использую в своих проектах.


❯ 1. Возможности, не затрагиваемые в этой статье


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


Также мы не будем говорить о следующем:


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

Three.js с нуля на практике: как за несколько часов создать аркадную 3D-игру. Часть 1

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

Привет! На связи Кристина, фронтенд-разработчик в отделе рекламных спецпроектов KTS.

Наша команда создает визуально эффектные проекты, цель которых — привлечь внимание пользователей. Мы постоянно экспериментируем с разными технологиями и подходами, и вот, наконец, добрались до 3D-анимаций. Недавно я начала изучать Three.js и хочу поделиться своим опытом.

В сети есть множество статей и уроков по Three.js для начинающих, но большинство из них — это теоретический материал. Я же хочу показать, как создавать 3D-анимации на практике. Эта статья будет первой в цикле о разработке простой игры, в которой нужно строить башню из блоков.

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

Читать далее

Каррируем React-компоненты: функциональные паттерны на фронтенде

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

Современный React все больше соответствует идеалам функционального программирования.

Ежедневно мы пользуемся подходами из мира ФП, зачастую даже не подозревая об этом.

Эти паттерны плотно укоренились в сознании фронтенд-разработчиков, делая наш код значительно чище, читаемее и предсказуемее.

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

Читать далее

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

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


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


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


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


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


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

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

Интеграция Vue.js в Битрикс24: Как разработать сложный фронтенд за два месяца

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

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

Читать далее

Разработка трёхфазного энергомонитора на базе ESP8266 с функцией автоматической проверки прибора учёта

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

Подробная инструкция по разработке трёхфазного энергомонитора на базе ESP8266 с функцией автоматической проверки прибора учёта электроэнергии.

Читать далее

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

Тестирование на скорость рисования 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 мин
Охват и читатели8.5K

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

▍ Введение


Наш первый «компилятор 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 мин
Охват и читатели41K

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

Читать далее

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

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

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

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

Читать далее

Новые возможности ECMAScript — атрибуты импорта и модификаторы шаблона регулярного выражения

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



Атрибуты импорта


Фича ECMAScript "Атрибуты импорта" (import attributes) позволяет импортировать артефакты, отличающиеся от модулей JavaScript. В этом разделе мы рассмотрим, как это выглядит и почему может быть полезным.


Атрибуты импорта достигли 4 стадии в октябре 2024 года и, вероятно, станут частью ECMAScript 2025.

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