Обновить
285.3

JavaScript *

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

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

Hippotable — анализ данных прямо в браузере

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

Сегодня я расскажу про hippotable — удобный инструмент для анализа данных. Мне часто нужно поковыряться в датасете среднего размера (1–100 Мб), чтобы ответить на довольно простые вопросы. Ни один из существующих инструментов (bash, google sheets, jupyter + pandas) не показался мне особо подходящим для такой задачи, и я... решил сделать свой! Хотел поделиться результатом, показать пару интересных JS-инструментов для обработки и отображения данных, и рассказать, как дальше планирую развивать продукт. Запрыгивайте, будет интересно.

Читать далее

Фронтенд-дайджест 2023

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

Привет, Хабр! Я Софья, фронтенд-разработчик в одном из департаментов Тинькофф. Из года в год наша большая фронтенд-команда растет, ставит эксперименты и обменивается опытом. Уходящий год богат на достижения, поэтому мы решили поделиться статьями, докладами и находками для командной работы. Несем все самое полезное, что получилось запустить, внедрить, написать и подготовить.

Открыть дайджест

Oxlint — более быстрая альтернатива ESLint

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

Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. Недавно стал общедоступен новый линтер «Oxlint», основанный на языке программирования Rust, и многие эксперты высоко оценили его. Какие преимущества Oxlint предоставляет по сравнению со своим предшественником ESLint?

Читать далее

Знакомство с WebTransport API

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


Hello world!


На днях я прочитал статью о WebTransport API как будущей альтернативе или даже замене WebSockets. Мне стало интересно, что это такое и с чем его едят. Давайте разбираться вместе.

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

Загрязненный — значит опасный: про уязвимость Prototype Pollution

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

Prototype Pollution (CVE-2023-45811, CVE-2023-38894, CVE-2019-10744) — не новая брешь, вы уже наверняка читали про нее и на Хабре, и на PortSwigger, и даже в научных журналах, но есть нюанс. Несмотря на большое количество публикаций, некоторые популярные решения до сих пор остаются уязвимыми для нее. Очередной пациент — библиотека на TypeScript @clickbar/dot-diver. Уязвимость CVE-2023-45827 исправлена в версии 1.0.2 и выше, поэтому мы со спокойной душой расскажем, что могло произойти с вашим продуктом, но, к счастью, не произошло.

Под катом читайте о том, как нужно было пользоваться библиотекой, чтобы точно столкнуться с уязвимостью Prototype Pollution. Мы, кстати, писали про нее в своем телеграм-канале POSIdev — там свежие новости про безопасную разработку, AppSec, а также регулярные обзоры трендовых угроз и наша любимая рубрика «Пятничные мемы».

Итак, поехали!

Taiga UI: итоги 2023 года

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

Заканчиваются рабочие дни уходящего года, а значит, самое время подводить итоги наших трудов. За 2023 год у проекта Taiga UI появилось более пятидесяти релизов, больше двух тысяч вмерженных PR-ов и свыше пятисот закрытых issue.

Taiga UI — это огромный Angular UI Kit, который активно используется в сотне продуктов компании Тинькофф и популярен за ее пределами. Разработка проекта много лет идет в Open Source, собирая свою аудиторию по всему миру.

Продолжу ежегодную традицию и напомню пользователям библиотек о самых интересных изменениях за последний год.

Читать далее

Глубокий JS. Области тьмы или где живут переменные

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

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

Речь пойдет об Абстрактном Синтаксическом Дереве (AST), типах переменных, областях видимости и выделении памяти в стэке и куче.

Читать далее

Использование node-cron для запуска запланированных заданий в Node.js

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

Использование node-cron для запуска запланированных заданий в Node.js. CRON позволяет повторять задачу через определенный интервал времени. Могут быть повторяющиеся задачи, такие как ведение журнала и создание резервных копий, которые необходимо выполнять ежедневно, еженедельно или ежемесячно.

Читать далее

Возможности JS, о которых вы возможно не знали

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

Всем привет! Меня зовут Леша, я фронтенд-разработчик. Крашу кнопочки, пишу js скрипты, веду канал в TG https://t.me/frontend_tales (подписывайтесь, стараюсь выкладывать полезный материал).

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

Читать далее

JavaScript для QA. Фронтендер учит дебажить код через Devtools

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

Всем привет, меня зовут Иван, я инженер по тестированию (Manual and Automation). В ремесле более 2-х лет. В этой статье мы рассмотрим методы черного, серого и белого ящиков, а так же как JavaScript может быть использован для перехода от метода черного ящика к серому и белому.

Со мной сегодня senior фронтенд-разработчик, Алексей - специалист с большим опытом, он научит вас дебажить код в Devtools и ставить точку останова. Даст советы для QA как стать самостоятельнее и определять ошибки в коде с базовыми знаниями JavaScript. Ссылка на канал Алексея "Рассказ фронтендера"

Для чего нам нужна точка останова и как это связано с методами тестирования?

Что такое метод тестирования? Это метод подхода к тестированию: можно подойти к тестированию закрытыми глазами с тест-дизайном "Исследовательское тестирование", а можно изучить, что происходит под капотом и уже как механик капаться в грязи в чужом коде. Точка останова это один из гаечных ключей, которые помогут проверить код и его реализацию в проекте.

Протестировать снежинки

Сложность алгоритмов. Разбор Big O

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

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

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

Читать далее

Я счастлив, что больше не веб-разработчик

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

Я написал своё первое одностраничное веб-приложение на Javascript в 2005 году, сразу после того, как узнал о XMLHttpRequest и до появления серьёзных фреймворков. Я оставил профессиональную веб-разработку примерно в 2009 году (а начал её в 1997 году с WebObjects), а последний десяток лет своей карьеры занимался мобильными.

Сегодня я смотрю на мир веб-разработки, и меня поражает его безумие. Существует так много фреймворков для веба, и каждый день появляются новые. Для создания веб-приложения (в отличие от веб-сайта, например, моего сайта про искусство, который сгенерирован статически и содержит лишь немного Javascript), часто требуются кучи инструментов и технологий, часто меняющихся с большой частотой и содержащих бесконечные объёмы других технологий, о существовании которых мы и не подозреваем (о, смотрите-ка, в папке пакета две тысячи файлов).

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

Читать далее

Mobile Web, навигация и причем тут Nginx

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

Привет, Habr! Я frontend-разработчик в Альфа-Банк. В статье я хотел бы поделиться опытом внедрения мобильной версии web приложения «Альфа-Бизнес» в нашу архитектуру. А точнее — как без массовых доработок 100 фронтовых сервисов мы заставили работать mobile web версию с новой навигацией.

Читать далее

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

Микрофронтенд для самых маленьких

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

Всем привет. Меня зовут Алексей. Сейчас я работаю frontend-разработчиком в компании Ozon. В свободное время мне нравится читать про новые технологии, фреймворки, а учитывая то, с какой скоростью развивается frontend, я никогда не скучаю. В этой статье пойдет речь о микрофронтах. В частности, мы посмотрим, как их реализовать на самом базовом уровне, разберемся, когда они нужны, а когда даже не стоит смотреть в их сторону. 

Читать далее

Кастомизация бессерверных функций без применения промежуточного ПО

Время на прочтение10 мин
Охват и читатели1.2K
Когда пишешь код для серверного API, часто требуется проделывать схожие шаги: аутентифицировать пользователей, уточнять их роли и выставленные флаги функций, т.д. В большинстве фреймворков для бэкенда безупречно организовано взаимодействие с обработчиками запросов. Часто такой софт называют «промежуточное ПО» (middleware), поскольку он находится между кодом приложений и кодом системы. В этой статье я аргументирую, почему стоит обходиться как можно меньшим объёмом промежуточного ПО, и рассказываю, как при этом не сойти с ума.

Зачем он нам вообще может понадобиться?


На первом этапе работы можно заметить, что каждая функция у вас начинается с множества повторяющихся строк, например:
Читать дальше →

KISS your website или как написать уважаемый сайт на аутсорсе, глава первая

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

Добрый день. Меня зовут Тимофей, я фронт-тимлид в диджитал-продакшене ДАЛЕЕ. В данном цикле статей я поделюсь подходами и инструментами фронтенд-разработки на аутсорсе, которые помогут создать качественный продукт без кошмарного instant-legacy и значительно облегчат жизнь команде разработчиков и не только.

Расскажу, почему не стоит излишне усложнять архитектуру фронтенда, и дам примеры удобных и эффективных инструментов разработки с точки зрения DX (developer experience. Это важно) и дальнейшей поддержки.

Читать далее

Что выбрать: Npm, Yarn или Pnpm?

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

На данный момент у нас используются три самых популярных менеджера пакетов (Npm, Yarn и Pnpm). И всё бы ничего, но разные команды начали периодически обращаться с проблемой несоответствия типов Typescript из наших транзитивных зависимостей. Выяснилось что это проблема Npm и Yarn, но как же её решать?

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

Читать далее

Pixel Combats Api

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

Всем привет, в этой статье я расскажу о основах Api, под игру Pixel Combats 2. Тут будет написано исключительно о моддинге, то есть написание кода. Подробностей как зарегистрироваться, и тд тут не будет. Эта статья написана для тех, кто уже умеет публиковать свой режим в игре.

Читать далее

Анатомия shadcn/ui

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


Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui.


"Почему код для копирования/вставки, а не библиотека?

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

Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды.

Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации".

На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода.


Цель этой статьи — изучить архитектуру и реализацию shadcn/ui.


Если вы еще не использовали shadcn/ui, я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

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

Валидация формы с помощью AJV, Vue.js и TypeScript

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

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

Читать далее