Обновить
204.66

JavaScript *

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

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

Внутри Mailion: как устроен фронтенд почты на миллион пользователей

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

Недавно мы представили защищенную корпоративную почтовую систему «Mailion. Сертифицированный» — единственную на российском рынке с действующим сертификатом ФСТЭК России. Продукт предназначен для работы с конфиденциальной информацией в крупных коммерческих и государственных организациях.

Речь о сложно устроенной и технологически разнообразной системе: Mailion включает в себя семь крупных модулей, более 400 собственных компонентов (не считая стилевых, вспомогательных и интеграционных обвязок), и содержит в целом почти 400 тыс. строк кода.

Под катом — наш рассказ об устройстве пользовательской части Mailion. Говорим об архитектуре фронтенда и о том, как и почему менялся его стек с начала разработки в 2017 году.

Читать далее

Возможности JavaScript и TypeScript последних лет. Часть 1

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


Hello, world!


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


В первой части мы поговорим о возможностях JS, во второй — о возможностях TS.


Это первая часть.


Вот ссылка на вторую часть.


Обратите внимание: название почти каждой возможности — это также ссылка на соответствующий раздел MDN.


Руководства, шпаргалки, вопросы и другие материалы по JavaScript, TypeScript, React, Next.js, Node.js, Express, Prisma, GraphQL, Docker и другим технологиям, а также Блог по веб-разработке.

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

6 простых принципов написания приложения на Vue, которое легко поддерживать (часть 2)

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

Привет! Я Наталья Калачева, Frontend-разработчик в AGIMA. Эта статья посвящена правилам, которые помогают упростить поддержку и расширение приложений на Vue. Тут я рассказываю, как организовать хранение компонентов, стилей и плагинов, когда использовать стор и полезные функции Vue. Первые 3 принципа я опубликовала вчера. Здесь еще 3.

Читать далее

Учимся тестированию с помощью Bootstrap

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

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

Как сайты определяют ботов? Деобфускация Akamai Bot Manager 2.0

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

Akamai Technologies - американская компания, занимающаяся защитой веб-ресурсов от ботов с помощью своего продукта Bot Manager. В её портфолио числятся такие гиганты ритейла, как Nike, Adidas и Asos, для которых особенно важен контроль за ботами, автоматизирующими процесс выкупа редких/лимитированных товаров с целью их перепродажи по завышенной цене. В данной статье мы взглянем на скрипт антибота Akamai и рассмотрим, какие методы обнаружения через JavaScript в нём используются. Не знаете почему обнаруживается ваш selenium? Добро пожаловать!

Читать далее

Как рисовать красивые соединения с помощью SVG

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

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

Читать далее

Рисуем верёвку в формате SVG при помощи JavaScript

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

Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки.

Вы узнаете, как превратить показанный слева контур в верёвку справа:

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

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

Замысел

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

Наша задача будет заключаться в создании этих многоугольников при помощи JavaScript.

Читать далее

Почему Banditypes — самая маленькая TS-библиотека для валидации схем

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

Я выпустил библиотеку banditypes — самый маленький валидатор схем для TS / JS. Удивительно, но базовый функционал валидации с приятным API можно упихнуть в 400 байт, если сконцентрироваться на размере и добавить пару грязных хаков. В этой статье расскажу, как добился такого результата.

Читать далее

Современный способ глубокого клонирования объектов в JavaScript

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

Вы знали, что теперь в JavaScript есть нативный способ делать глубокие копии объектов? Это стало возможным с помощью функции structuredClone, встроенной в среду выполнения JavaScript.

Читать далее

Полное понимание асинхронности в браузере

Время на прочтение24 мин
Охват и читатели172K
Про асинхронность JavaScript написано много статей, документации и книг. Но вся информация сильно распределена по интернету, поэтому сложно быстро и полностью разобраться, что к чему, и составить цельную картину в голове. Не хватает одного исчерпывающего гайда. Именно эту потребность я и хочу закрыть своей статьёй.

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

7 интересных API на JavaScript для создания веб-сайтов, о которых вы (скорее всего) не знали

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

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

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

Давайте взглянем на некоторые полезные веб-API, которые могут помочь вам поднять ваш сайт до небес! (ну или около того)

Читать далее

Javascript: базовые вопросы и понятия для самых маленьких

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

Javascript ― язык весьма оригинальный. Его можно любить, ненавидеть и даже бояться, но равнодушным он вас вряд ли оставит. Не знать или не понимать, с чем ты работаешь ― самая частая ошибка, допускаемая современными фронтенд‑разработчиками. Вам бы понравилось, если бы дантист, к которому вы пришли, не понимал, какой он инструмент использует и какие у него особенности работы? Очевидно, что нет. И рано или поздно, если вы действительно хотите стать профессионалами, вы разберётесь во всём, но как сделать так, чтоб это случилось раньше?

В этой статье в блоге ЛАНИТ хотелось бы показать, что о сложных вещах можно и нужно говорить просто.

Читать далее

Борьба с современным Web. Создаём расширение для скачивания видео из VK

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

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

Читать далее

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

Эксплойтинг браузера Chrome, часть 2: знакомство с Ignition, Sparkplug и компиляцией JIT в TurboFan

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

В моём предыдущем посте мы впервые погрузились в мир эксплойтинга браузеров, рассмотрев несколько сложных тем, которые были необходимы для освоения фундаментальных знаний. В основном мы изучили внутреннюю работу JavaScript и V8, разобравшись, что такое объекты map и shape, как эти объекты структурированы в памяти; мы рассмотрели базовые оптимизации памяти наподобие маркировки указателей и сжатия указателей. Также мы затронули тему конвейера компилятора, интерпретатора байт-кода и оптимизации кода.

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

В сегодняшнем посте мы вернёмся к конвейеру компилятора и ещё глубже разберём некоторые из рассмотренных ранее концепций: байт-код V8, компиляцию кода и оптимизацию кода. В целом, мы рассмотрим происходящее внутри Ignition, Sparkplug и TurboFan, поскольку они критически важны для понимания того, как определённые «фичи» могут привести к появлению багов, которые можно эксплойтить.
Читать дальше →

Автор библиотеки, от которой зависит половина веб-сайтов, сидит без денег

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

Если кратко, автор пакета core-js Денис Пушкарев (zloirock), от которого зависит огромное количество других js-пакетов, за много лет развития core-js не получал почти ничего, при этом ему регулярно прилетал хейт если его библиотека работал плохо, плюс в 20-м году он сел в тюрьму из-за ДТП (по его словам, на дорогу прямо перед его мотоциклом выбежали пьяные люди, впрочем, по правилам виноват был он), через несколько месяцев освободили досрочно, денег нет, получить донаты из-за рубежа затруднительно из-за санкций, американские СМИ "были разочарованы, что он не русский хакер, который вмешивается в американские выборы", в общем, денег нет, поддержки нет, развивать пакет дальше он не может, если кто-то не начнет его спонсировать.

Подробно в статье от автора (на английском)

На мой взгляд, это глобальная проблема в ИТ, как в мире, так и в России - вся ИТ-инфраструктура зависит от open source библиотек, авторам которых зачастую никто не платит, зато все предъявляют к ним претензии.

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

Читать далее

Chrome Headless против cloudflare JS challenge

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

Автоматизация сбора информации с различных ресурсов - обычная задача для людей разных сфер деятельности. Жаль, что не всегда бывает достаточно сделать простой GET запрос и разобрать полученный html. Веб-сайты, с которых собираются данные, принимают защитные меры для предотвращения автоматизированных запросов. Одной из таких мер является использование cloudflare. Сегодня мы посмотрим, как cloudflare выявляет ботов через javascript и коснёмся темы деобфускации скриптов.

Читать далее

Как стать джуном, которого берут на работу (frontend-разработка)

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

Привет, Хабр! Я - начальник отдела разработки небольшой IT-компании, и мы - те самые люди, которые не ищут на работу сеньоров, и мы готовы брать не только мидлов, но даже и джуниоров, и готовы растить их до уровня крепких мидлов. Однако 80% приходящих на вакансию frontend-разработчика соискателей, даже называющих себя мидлами, с опытом работы, по сути оказываются не то что джуниорами - вообще не программистами. Что же на самом деле должен знать джун, чтобы попасть в компанию, подобную нашей, и как к этому прийти, если за плечами нет высшего программистского образования или богатого опыта программирования в школе? Я расскажу об этом и о том, как устроен процесс найма в нашей компании.

Базовый уровень программирования

Итак, к нам приходит среднестатистический кандидат, который прошел курсы по JavaScript, сделал там пару проектов. Потом узнал, что во многих местах хотят React, сходил на курсы по нему, тоже сделал пару проектов, выложил их на Github. Приходит к нам, уверенный в себе. И мы его просим написать функцию, которая выбирает из строки все большие буквы, или реализовать "вручную" какой-нибудь метод из array. И половина кандидатов в этом месте выбывают из строя. Кто-то вообще не может это сделать, у кого-то на двухминутную функцию уходит больше получаса. Зачем мы вообще это спрашиваем и почему с этого начинаем?

Читать далее

Найди себя в React

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

Хотя в IT и разработана шкала оценки программистов (Trainee, Junior, Middle, Senior, Tech Lead), с которой более или менее все согласны, единого определения каждого уровня среди работодателей пока нет. В итоге каждая компания устанавливает собственные требования к навыкам на каждом уровне.

Этот тест поможет вам прикинуть, какой бы у вас был грейд, если бы вы собеседовались в МКБ.

Пройти тест

Как я написал самую эффективную библиотеку для реактивного состояния

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

Всем привет, меня зовут Артём Арутюнян, и я уже пять лет изучаю реактивное программирование. Меня задела недавняя статья, Big State Managers Benchmark, в которой моя библиотека Reatom заняла лишь третье место (скорее второе, ну да ладно) и я решил написать самую эффективную реализацию реактивных состояний, убрав лишние фичи, сфокусировавшись на простоте и производительности.

Немного поэкспериментировав я добился удивительных результатов, в сто строк (0.3KB gzip) уместив максимально простое апи, которое позволяет подключаться к React и Svelte без дополнительных адаптеров. Но самое главное, найденный алгоритм фундаментально покрывает любые краевые случаи условных переподписок зависимых вычислений, с которыми подавляющее большинство популярных библиотек не справляется и дают глитчи.

Если вам интересны детали реализации — прошу под кат.
Читать дальше →

Сайт, целиком написанный ChatGPT

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

Да, про эту нейросеть сейчас слышно отовсюду, как она пишет текста песен, сдает экзамены, пишет куски кода, но я подумал, а сможет ли она сама целиком завершить проект под моим руководством?

Читать далее

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