Все потоки
Поиск
Написать публикацию
Обновить
216.33

JavaScript *

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

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее

Chrome Headless против cloudflare JS challenge

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

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

Читать далее

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

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

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

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

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

Читать далее

Найди себя в React

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

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

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

Пройти тест

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

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

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

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

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

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

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

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

Читать далее

Осваиваем TypeScript: 21 лучшая практика при написании кода

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

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

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

Нельзя просто так взять и распарсить этот JSON на JavaScript

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

JSON является одним из очень простых, но в то же время эффективных языков для хранения и передачи данных. Он настолько популярен, что, пожалуй, может считаться самым совместимым форматом представления данных в мире.

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

Но что же может пойти не так, спросите Вы? Просто попробуйте распарсить этот JSON-документ…

Давайте парсить

Js, трюки, наблюдения, бенчмарки и как Лиса уничтожает Хром. Я протестировал всё, что вам было лень

Время на прочтение4 мин
Количество просмотров26K
Картинка, конечно, стронгли анрилейтед

Разные трюки я тестировал на Google Chrome 107.0.5304.107 и Mozilla Firefox 107.0 на Windows 10.

Чтобы результаты всегда были железно воспроизводимыми, я отключил все С-State’ы, ядра зафиксировал на 5 ГГц.

У меня 9900К, это Coffee Lake c AVX256, какие оптимизации применит Jit для вашего процессора — я не знаю, результат на вашем компьютере может отличаться от моего, в т.ч. из-за микроархитектуры процессора.

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

Все еще работаете с access token на клиенте? Тогда мы идем к вам

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

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

В статье рассмотрим причины необходимости работы с токеном на клиенте веб-приложений, узнаем ,что лучше для хранения токена: localStorage, sessionStorage или cookie без флага HttpOnly (спойлер, ничего из этого), а также посмотрим на меры воздействия, которые можно использовать для снижения риска утечки токена посредством различных уязвимостей.

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

Читать далее

Создание столбчатых диаграмм с помощью JavaScript

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

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

Пять шаблонов загрузки данных для повышения быстродействия сайтов

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

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

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

Как я написал свой язык и онлайн IDE

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

Здесь онлайн интерпретатор, здесь документация.

В сентябре 2020 года я учился на 2 курсе. В том же месяце я впервые написал программу, которая мне понравилась. Она создаёт svg изображения растений, здесь её можно потрогать.

Чуть позже я выяснил, что такие программы называют процедурными генераторами. Я увлекся этим, сделал ещё парочку (1, 2).

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

Читать далее

Создаём веб-сайт, как будто сейчас 1999 год

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

Раньше веб был более странным местом


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

И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о старых добрых статических личных страничках.

Сайты наподобие Geocities, Angelfire, Tripod и Expage предлагали для всех услуги бесплатного статического хостинга, поэтому произошёл бум количества личных веб-сайтов. У некоторых хостов даже были конструкторы веб-сайтов в стиле drag-and-drop, так что вам даже не нужно было изучать HTML.

Сегодня мы можем посмеяться над этими веб-сайтами, по сравнению с современными изящными и минималистическими сайтами они выглядят карикатурно. Но я считаю, что мы слишком далеко ушли в другом направлении, и сегодня многие веб-сайты выглядят одинаково. Те старые личные веб-сайты были отражением вашей личности.
Читать дальше →

Знакомство c Reatom

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


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

А оно вам надо? Думаю, да, потому что Reatom — это универсальное решение, которое позволяет легко пошарить глобальное состояние за микроскопическую (2.5KB) цену, эффективно строить самодостаточные и переиспользуемые логические модули гигантских приложений или просто сделать ваш сетевой кеш реактивным с помощью дополнительного пакета @reatom/async.

В этой статье мы кратко пройдёмся по мотивации и истории, а потом разберём основные фичи и примеры их использования вместе с биндингами к React.js. Похожий разбор есть в виде скринкаста.
Читать дальше →

Что такое состояние

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


Привет! Меня зовут Артём Арутюнян, много где меня можно встретить под ником artalar. 10 лет я разрабатываю крупные веб-сервисы, и вот уже четыре года менеджер состояния, исследуя тему реактивности, консистентности данных и состояния. А началось всё с простого вопроса: почему React, самая популярная современная библиотека для написания UI, по умолчанию полностью рушит приложение и показывает белый экран при появлении ошибки в любом компоненте во время рендера?

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

Примеров будет немного, т. к. их достаточное описание превратило бы статью в небольшую книжку. Но надеюсь, что сами идеи всё же будут понятны.
Читать дальше →

Год Тигра в Taiga UI

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

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

Весь год я участвовал в разработке потрясающего продукта — Taiga UI. Это библиотека компонентов на Angular, на которой построены сотни продуктов Тинькофф и много других проектов. Наша команда потратила много времени и сил — расскажу, что из этого получилось.

Читать далее

Брендан Эйх о создании JavaScript за 10 дней и о том, что сегодня он сделал бы по-другому

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

Миллионы современных разработчиков активно используют язык программирования, который родился буквально за 10 дней в период экспоненциального развития интернета. Создатель JavaScript Брендан Эйх не так давно заново обратился к истокам созданного им языка и рассказал о том, как семена, посеянные им в 1995 году, теперь наконец-то взошли.

Читать далее

Трудности перевода в разработке: как делать интернациональные проекты и говорить с пользователями на одном языке

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

В современных приложениях и сервисах часто нужна интернационализация (i18n, от англ. internationalization). Она позволяет создавать интерфейсы с учётом культурных и языковых особенностей пользователей из разных стран. Это требует не только простого перевода, но и некоторых технических решений, порой довольно сложных.

Меня зовут Володин Сергей, я работал руководителем команды разработки VK WorkMail. Сегодня расскажу о том, как инфраструктура переводов позволяет поддерживать 10 языков в нашем продукте и какие технические нюансы стоит учитывать при работе с разными языками. Интернационализация интерфейсов — довольно комплексная и непростая история, хотя на первый взгляд может показаться не слишком приоритетной задачей. Более того, о ней нужно начинать думать в самом начале разработки, чтобы впоследствии не наломать дров.

Читать далее

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